Скачать спрайты для construct 2. Спрайты для игр - что это такое? Создание спрайт-листа в Sprite Sheet Packer

Из этой статьи вы получите общие представления, как рисовать крутую 2D графику для игр. Это не пошаговый туториал, это что-то в разы более крутое!

Статья предназначена для тех, кто имеет некоторое знакомство с игровой 2D графикой. В первую очередь это относится к людям, занятым программированием, и желающим создавать качественные игровые ресурсы. Далее – просто ко всем, кто хочет создавать игровую графику. Под 2D ресурсами в тексте подразумеваются любые 2-мерные изображения для игр: от спрайтов персонажей до больших фонов. Статья кратко ознакомит с добротными традиционными концепциями дизайна и тем, как они могут улучшить вашу игру. Предполагается, что она позволит вам сэкономить время и не развить дурной вкус.

Здесь не будут освещаться такие вещи, как форматы файлов, сравнение растровой и векторной графики или использованное в примерах к статье программное обеспечение.

Список тем:

Формы
Анатомия и пропорции
Перспектива
Наука о цвете
Освещение и затенение
Оттачивание навыков

Если эти пункты не схватили вас за живое, наглядная демонстрация ваших способностей «до» и «после» идет ниже:

Факт из интернета!

Это реальные картинки. Верхнюю самостоятельно нарисовал и хотел использовать в своей игре программист, а нижняя – это то, что получилось после небольшой доработки его друга-дизайнера.

В повседневной жизни мы привыкли часто видеть 2D изображения. Но понимать, что вещь выглядит красиво, не то же самое, что знать, почему это так. Любое двумерное изображение можно разбить на базовые элементы, поэтому вы можете представлять себе создание двумерной графики как объединение этих элементов, чтобы: 1) Получилось похоже на то, что вы имели ввиду; и 2) Не было супер уродливо. Например, мы все знаем, как выглядят квадрат и сфера, но какое отношение это имеет к созданию понятного на вид персонажа?

Чтобы ответить на это, мы приступаем к первой части:

Формы

Зная о том, какую роль на самом деле играют формы, вы можете применять их для создания приветливой или неприветливой на вид игровой среды, а также делать, чтобы персонажи и объекты соответствовали (или намеренно не соответствовали) этой среде.

Начинайте с самых простых форм: кругов, квадратов и прямоугольников. Попробуйте нарисовать персонаж, состоящий только из квадратов или только из треугольников, а затем посмотрите, кто из них будет больше похож на героя, а кто – на злодея. Сохраняя свои первоначальные задумки в виде зарисовок с простыми фигурами, вы сможете генерировать много идей, преждевременно не отвлекаясь на проработку деталей (об этом много говорится в части «Оттачивание навыков»).

Как правило, заостренные формы содержат намек на искусственность или зло, а извилистые и округлые – на органическое происхождение и добро. Таков традиционный спектр характеров. Круг и треугольник находятся на его концах, а квадрат где-то посередине.

Перспектива

Перспектива – это создание иллюзии глубины на 2D-поверхности, она получается путем изменения форм и очертаний предметов, и это довольно обширная тема, поэтому вы увидите здесь несколько подзаголовков.

Геометрическая перспектива

В большинстве 2D игр создатели просто не желают связываться с геометрической перспективой, потому что ее реалистичная реализация в графике будет безумно трудоемкой. Чтобы пойти легким путем, разработчики пользуются нереалистичным предположением, что сбоку все видно одинаково хорошо (как в классическом платформере Super Mario), или разворачивают графику в более реальной на вид, но все же далекой от реальности изометрической проекции.

Мы детально изучим тему геометрической перспективы, потому что это наиболее сложный для понимания общий принцип, но даже очень простое его понимание также позволит значительно улучшить графику. В основе наиболее формальной теории перспективы лежит идея о точке схода. Параллельные линии, похоже, сходятся в одну точку на далеком расстоянии от наблюдателя. Это выглядит примерно так:

Еще больше впечатления внушил бы несущийся навстречу поезд

Вы обратили внимание как сходятся параллельные линии (реальные и воображаемые)?

Можно добавить еще больше красных линий, но и так все понятно

Красные линии пересекаются в точке схода. Вам также должна быть знакома линия, которая разделяет небо и землю. Это линия горизонта, которая получается при пересечении бесконечных (с точки зрения наблюдателя) плоскостей.

Точка схода и линия горизонта по своей сути воплощают простую идею: предметы, которые находятся вдали, выглядят меньше предметов, которые ближе к нам. А приближенная к нам сторона предмета кажется больше, чем удаленная. В приведенном выше примере использована только одна точка схода, но на самом деле на картине будет столько точек схода, сколько присутствует наборов параллельных линий – для каждого своя. Звучит слишком сложно? Так и есть, поэтому в рисунках перспектива обычно упрощается до одно-, двух- и трехточечной. В одно- и двухточечной перспективе предполагается, что один или несколько наборов параллельных линий остаются параллельными навсегда и никогда не сходятся. Вот пример куба и параллелепипеда в одноточечной перспективе:

Карандаш и бумага… А вы на что надеялись?

Обратите внимание, что горизонтальные и вертикальные грани остаются строго параллельными. Теперь посмотрим на двухточечную перспективу:

Изображая объекты в перспективе, часто принято прорисовывать их обратную сторону, чтобы лучше почувствовать трехмерность

Здесь прежде параллельные горизонтальные линии обрели свою точку схода. Вертикальные грани остаются параллельными. Наконец, трехточечная перспектива:

В трехточечной перспективе объект выглядит эпично, по крайней мере, с точки зрения высоты

Теперь все ребра обрели свою собственную точку схода. С чем их и поздравим. Надо сказать, что точки схода проще всего рисовать для параллельных линий. Но прорисовывая направляющие линии или даже целые параллелепипеды для сложных объектов, вы сможете лучше представить их глубину. Одно-, двух- и трехточечная перспектива используется наиболее часто, но есть по крайней мере один художник, который при создании сумасшедших сферических сцен использовал шеститочечную перспективу.

Для рисования трубок и других круглых предметов в правильной перспективе существует важная хитрость, потому что в перспективе круг деформируется особым образом. Когда на них смотрят наклонно, круги выглядят как эллипсы. Чем больше наклон, тем сильнее сжат эллипс:

Круг превращается в эллипс

Вот простое правило. Когда вы смотрите на край цилиндра (например, крышу круглого здания), кривая выгибается вверх. Когда вы смотрите вниз, например, на основание ствола дерева, кривая выгибается вниз. Через середину этого изображения проходит линия горизонта.

Чтобы показать объем фигур, их следовало бы заштриховать, но мы оставим так

Все же надо помнить, что в большинстве игр с 2D графикой стараются избежать трудностей при изображении геометрической перспективы. Выбирают точку обзора сбоку или прямо сверху, что сводит к минимуму необходимость в ней.

Ракурс

Когда с соблюдением перспективы рисуют фигуру персонажа, это называется ракурсом. Направленный на зрителя кулак будет выглядеть не просто больше чем тот, который держат сбоку, он также закроет собой значительную часть руки. Пример:

Грубо, но понятно

Часто художники рисуют ракурсы на глаз, просто потому что вычисление всех точек схода отнимает много времени. Но чтобы вы знали, как это должно быть в идеале, ниже показан ракурс с точками схода и цилиндрами. В этом виде делают наброски для конечностей:

Цилиндры рисовать проще, чем людей

Помните, что персонажи, в особенности человеческие, могут быть представлены как ряд более простых объектов, которые легче скомпоновать. Это нормально, когда набросок фигуры делают в виде соединенных суставами цилиндров, а внутри них потом рисуют человека.

Перекрытие и параллакс

С перекрытием все просто: ближайшие к нам объекты будут накладываться на отдаленные и скрывать их. Весьма необходимая вещь для 2D игр, поскольку это самый простой способ показать игроку его позицию по отношению к объектам. Давайте рассмотрим чрезвычайно простой пример:

Картинка вошла в историю как странные холмы на фоне всех игр серии Super Mario

Этот набор линий создает у вас впечатление, что маленькая круглая штучка справа (куст?) находится перед остальными, а самая большая – позади. Эффект иногда называют «T-правилом», поскольку пересечение линий объектов впереди и позади образует нечто наподобие буквы T. Это просто, но довольно мощно. В приведенном примере все Т перевернуты вверх ногами:

Ветераны программирования могут вспомнить про ASCII 193

Параллакс – еще один важный эффект перспективы, связанный с отношениями перекрывающихся объектов. Его суть в том, что при движении зрителя далекие объекты смещаются меньше по сравнению с более близкими. Параллакс отлично подходит для 2D игр, потому что его довольно легко реализовать, и вы, несомненно, сталкивались с ним. Достаточно информации для начала можно почерпнуть из вот этой статьи в Википедии.

Поскольку 2D игры часто преднамеренно нарушают обычные правила перспективы по той простой причине, что их легче нарисовать без них, приходится полагаться на другие способы получить представление о глубине. Еще один из простых способов – делать объекты, предположительно удаленные от зрителя, более размытыми и менее подробными на вид. Вот пример из реальной жизни, на фотографии городского пейзажа промышленного Китая:

Городской смог во всей красе

Вы также можете заметить эффект геометрической перспективы, хотя в данном случае основная точка схода будет слева от кадра. Почти каждый 2D-платформер, когда-либо созданный, использует воздушную перспективу. Например (снова Super Mario World):

А также перекрытие и параллакс

Обратите внимание, что чем дальше на фоне находится объект, тем более размытым он выглядит. О близости объекта к игроку можно сказать даже только по цвету контуров. Это непосредственно сводится к идее контраста. Контраст расскажет игроку, что важно, а что нет.

Посмотрите снова на скриншот из Super Mario World. Слегка затененные голубые холмы? Не важно. Труба с белым бликом и черными контурами? Важно. Единственный ярко-красный предмет на экране? Супер важно. Помните, что интерактивные объекты в игре должны всегда выделяться по отношению к не интерактивным, если нет конкретной причины скрывать что-то от игрока.

Линейная и воздушная перспектива на ArtyFactory.com , Тьюториал от perspective-book.com

Наука о цвете

Цвет – это хитрая тема, и одна из наиболее субъективных в искусстве в целом. На цвет товарища нет, а цветовые сочетания и их значения различаются в разных культурах. Белый цвет может быть цветом чистоты на Западе, но в Японии он часто означает смерть. Тем не менее, есть несколько основных идей относительно цвета, которые помогут вам понять, что происходит с вашей графикой. Давайте для начала подумаем о том, из чего состоит определенный цвет.

Оттенок, насыщенность, яркость

Существует много способов разбивки по цветам, но тот, который обсуждается здесь, наиболее прост и удобен для начинающих цифровых художников.

Начнем со сравнения двух цветов:

Красный и синий

Красный и синий. Понятно, что это разные цвета, не так ли? Но на самом деле есть более точный термин Оттенок (Hue). Левый квадрат имеет красный оттенок, а правый имеет синий оттенок. Другие оттенки включают зеленый, оранжевый, фиолетовый и т. д. Хотя оттенок может показаться избыточным термином для определения цвета, это не так, потому что количество любого оттенка в цвете может измениться:

Красный и бледно-красный

Итак, перед вами два красных цвета, но чем они отличаются? Тот, что справа, как бы слегка… выцвел. У него меньшая Насыщенность (Saturation).

Насыщенность обозначает, насколько много цвета в цвете, или какой у него оттенок. О насыщенности можно думать, как о количестве серого в данном цвете. Нет серого – насыщенный цвет. Много серого – ненасыщенный. Так что в данном случае квадрат слева является полностью насыщенным, а справа – менее насыщенным. Чистый серый цвет – это просто цвет без насыщения. Насыщенность самое хитрое из свойств цвета, на котором может подскользнуться новичок. Просто имейте в виду, что насыщение оказывает большое влияние на атмосферу вашей графики. Высоко насыщенные цвета при использовании в больших количествах имеют тенденцию выглядеть более дружелюбно, а ненасыщенные цвета связаны с серьезным стилем.

Последнее свойство – Яркость (Brightness). Иногда вместо него используют Значение (Value). Яркость намного проще в понимании: показывает, насколько цвет ярче. Вот такой же красный, как выше, и его менее яркая (т.е. темная) версия:

Красный и темно-красный (менее яркий)

В связи между яркостью и насыщенностью надо немного разобраться:

Эти свойства можно изменять одновременно

Вот пример как цвет может влиять на атмосферу игры. Сравниваются New Super Mario (если вам уже надоели примеры из старого) и Castlevania: Lords of Shadow.

Также обратите внимание, что от Марио не полетели кровавые ошметки, когда он наступил на гриб

Ничего особенного, просто хотелось показать, как красиво на общем фоне выделяются яркие статусбары

Говоря о цвете, мы можем снова вспомнить про… Барни и Годзиллу! Подумайте, как цвет делает их такими разными с точки зрения оттенка, яркости и насыщенности, и что произойдет, если одно или несколько из этих свойств изменить. Что произойдет, если вы возьмете только одно свойство, и наделите им обоих персонажей? По-прежнему ли вам хочется обнять серого Барни?

Вкратце про RGB

Примите поздравления! Теперь вы разбираетесь в цветовой модели HSB (Hue Saturation Brightness/Тон Насыщенность Яркость) или HSV (Значение = Яркость). Практически любая программа для обработки изображений пользуется этим термином наряду с RGB (цветовая модель Красный Зеленый Синий) и CMYK (Голубой Пурпурный Желтый Черный). Но HSB, по всей видимости, проще всего объясняет, что происходит с цветами. Особенно в отношении того, насколько ярким или насыщенным является нужный вам цвет когда вы работаете над шейдингом. Однако в разных приложениях вам придется иметь дело с цветовой моделью RGB , поэтому кратко рассмотрим и ее. RGB попросту описывает все цвета с точки зрения красного, зеленого и синего, так как все цвета можно описать как комбинацию этих трех. Аналогичным образом информацию о цвете обрабатывает человеческий глаз. Потратьте немного времени, чтобы поиграть с цветовыми значениями и увидеть, как изменяются значения HSB и RGB, и как они связаны друг с другом. Вот стандартная диаграмма RGB (обратите внимание, что происходит, когда цвета перекрываются):

Также известна как аддитивная цветовая модель, поскольку цвета создаются путем добавления света, а не его поглощения (как в субтрактивной модели)

Смотрите, как комбинация всех трех цветов дает белый. Можно представить, будто цвета играют в перетягивание каната, потому что когда они имеют одинаковую яркость, оттенки гасят друг друга и остается белый или серый цвет. Но если смешивать цвета в разных пропорциях, вы можете запутаться в логике получения результата, поэтому при работе над графикой мы и советуем HSB.

Теперь, когда мы разобрались, что такое цвет, давайте начнем рассматривать цветовые комбинации. Теория цвета сложна и достаточно субъективна, поэтому нижеследующее должно рассматриваться не как железное правило, а как направление для дальнейшего развития.

Основу самой теории цвета составляет цветовое колесо (цветовой круг). Если упростить объяснение, то колесо – это субъективное расположение оттенков цвета по отношению к красному, желтому и синему, которые делят колесо на три части (так называемые основные цвета) и зеленому, оранжевому, фиолетовому (вторичные цвета) между ними.

Типичное цветовое колесо

Оттенки также обычно подразделяются на теплые и холодные, в терминах цветовой температуры. Причем красно-желтые цвета считают теплыми, а синие цвета прохладными, как показано ниже:

Занимательный факт. Чтобы показать жару в кадре, в фильм «Делай как надо» (1989) режиссер добавил больше оранжевого тона

Здесь добавлена зона неопределенности, поскольку включенные в нее цвета являются своего рода пограничными. Но желто-зеленый часто относят к холодным, а пурпурный к теплым цветам. Важно помнить, что холодные цвета ассоциируются с темными оттенками, поэтому тень холодного цвета будет восприниматься как более темная, нежели выполненная в теплом цвете той же яркости.

Другие отношения между цветами также можно объяснить при помощи цветового колеса. Аналогичные цвета – это просто оттенки рядом друг с другом, такие как зеленый, желтый и цвета между ними. Контрастные цвета – это цвета (оттенки) на 180 градусов отстоящие друг от друга, которые кажутся более яркими при использовании вместе. Вероятно, вы видели их в действии, даже если не знали почему. Синий и оранжевый даже стали тропом (стандартным стилистическим приемом).

Если вы используете Firefox, посмотрите на иконку. Снова синий и оранжевый!

При работе над игровой графикой попробуйте связать цвета с определенными расами или врагами, средами или уровнями. Обозначение цветом не является обязательным, однако вы можете использовать его как способ влияния на восприятие игроков. Подумайте о наборе цветов для плохих парней, но используйте, например, уникальные оттенки этих цветов для конкретных врагов. Не бойтесь экспериментировать и старайтесь использовать более редкие цвета. В любой достаточно продвинутой программе для обработки изображений (например, в GIMP) цвет изменить проще, чем любое другое свойство. Это одна из немногих вещей, которые можно легко изменить в готовом рисунке.

Короче говоря: Цвета можно разделять и сравнивать друг с другом различными способами, а в различных комбинациях пары цветов могут выглядеть лучше или хуже.

Рекомендуем изучить (на английском): Теория цвета для дизайнеров

Освещение и затенение

В этой части вы увидите много примеров пиксель арта, но в них говорится о базовых концепциях, которые применимы к любому типу 2D графики.

Источники света

Начинающие художники часто не понимают, зачем на самом деле рисуют свет и тень. Затенение (или шейдинг) рисунка обычно означает применение разных оттенков, чтобы создать иллюзию света на чертеже, точно так же, как перспектива – это иллюзия глубины. И точно так же как с перспективой, вам необходимо создать какие-то 2D аналоги видимых в реальности эффектов. Тут есть только одно правило: свет должен откуда-то исходить. Он не может быть везде, поэтому если вы просто раскрасите рисунок, это будет выглядеть неправильно. Когда новички пытаются нарисовать тень, но не понимают как, это приводит к объектам, которые выглядят вот так:

Серьезно, так делать не надо

Сравните с вариантом без теней:

Лучше оставить так, чем как было выше

Это называется подушечным затенением, и его очень просто нарисовать не задумываясь. Кажется естественным оттенить предметы по внешним контурам… но это выглядит абсолютно ненатурально. Чтобы освещение выглядело правильно, оно должно иметь направление, и освещение/затенение поверхности нужно выстраивать в зависимости от того, с какой стороны на объект направлен источник света. Источником света может выступать солнце, лампа, озеро с кипящей лавой и т.д., или его можно оставить абстрактным.

Например, вы можете просто предположить, что почти весь свет падает от бесконечно удаленного источника под углом 45 градусов. Этого достаточно, чтобы красиво оттенить объекты в большинстве случаев. Анимированным спрайтам, которые будут использоваться на различных фонах, небольшая неопределенность помогает сохранить везде уместный вид.

Вот пример с источником света в верхнем левом углу:

Вам также надо подумать, не может ли одна из частей объекта отбрасывать тень на другие

Обращенные к источнику света части будут светлее, а противоположные им – темнее. Что может быть проще? Но это не всегда именно так…

Плоские и изогнутые поверхности

Плоские поверхности обычно имеют везде почти одинаковый оттенок, а на изогнутых мы увидим градиент. Изящные примеры из реального мира:

Американский бомбардировщик F-117. Плоские поверхности

Более привычный на вид F-15. Изогнутые поверхности

Снова вернемся к параграфу о формах. Кто из этих плохих ребят покажется вам хорошим, а кто насторожит вас одним внешним видом?

Вы можете видеть реальный градиент между светом и тенью. Обратите внимание на левое крыло, на нем градиент просто идеален. Теперь вернемся к ранее упомянутому убожеству с подушечным затенением:

Источник света для куба и сферы не совсем одинаков. В чем разница?

И тут для каждой грани кубу нужен только один оттенок, а сфере их надо гораздо больше – для имитации градиентной природы теней на изогнутых поверхностях.

Выше мы рассмотрели упрощенный шейдинг, так как свет может далее отражаться от поверхностей и подсвечивать затененные участки. Это часто означает, что часть тени, которая находится дальше всего от основного источника света, на самом деле светлее, чем в других местах. Эффект наиболее заметен, когда объект большой или находится очень близко к отражающей поверхности. Ниже показан классический пример:

Такой шейдинг позволяет лучше почувствовать объем

Еще пара цифровых примеров на ту же тему.

Если бы сферы находились на голубой поверхности, отраженный свет имел бы голубой оттенок

На левом примере вы видите отражение света, расположенного за пределами края рисунка, так бывает с сильно отражающими поверхностями. Чем сильнее падающий свет, тем отчетливее виден и отраженный.

Изменение тона связано с отражением света и очень хорошо может быть показано на примере пиксель арта. Основная суть этого явления в том, что тон тени или отраженного света не всегда бывает только лишь более темной или светлой версией основного цвета объекта.

Наиболее часто с изменением тона можно встретиться у объектов, которые освещаются солнцем. Прямой солнечный свет имеет желтый тон, но голубое небо отражает на тени свой цвет, поэтому мы получаем желтые блики и тени голубого тона.

Вспомним про теплые и холодные цвета. Блики имеют теплый оттенок, а тени – холодный

Это понятие приобретает важность, когда у вас есть дополнительные источники света и они по цвету отличаются от основных (например, раскаленная лава). Помните, что окрашенный свет изменит цвет освещаемого объекта. Однако изменение тона может быть и просто стилистическим решением. Преувеличивая эффект или подставляя дополнительные цвета вы можете добиться очень интересной картины:

Если использовать оттенки слишком много, игра будет напоминать Instagram

Стоит знать еще, что тени быть менее насыщенными, и что менее насыщенные цвета могут казаться более темными, чем они есть на самом деле.

Среди художников нет единого мнения относительно изменения тона. Найдите свое решение, но помните, что чем сильнее вы измените тон, тем более сюрреалистическим станет ваш рисунок.

Шейдинг и текстурирование

Шейдинг может подсказать не только форму объекта, но и его текстуру. Текстура объекта влияет на то, как от него отражается свет. Поэтому изменяя шейдинг вы иногда можете изменить впечатление от текстуры. Чтобы различать некоторые типы текстур существуют свои термины:

Это когда-нибудь пригодится вам при покупке краски для ремонта

От поверхности с глянцевой текстурой свет отражается хорошо и с очень небольшим рассеянием. Это означает, что освещенная часть предмета будет очень яркой (из-за хорошего отражения), а неосвещенная – очень темной (потому что дополнительная подсветка идет от рассеянного света, а его нет). Хорошим примером глянцевой текстуры является только что отполированный кузов автомобиля.

Матовая текстура отражает не очень хорошо и рассеивает свет при отражении. Это означает, что она кажется более ровно освещенной. Хорошим примером поверхности с матовой текстурой служит старая автомобильная шина.

Гладкая текстура стоит где-то посередине. Она хорошо отражает, но сильно рассеивает свет при отражении. Гладкую текстуру часто имеет пластик, например, большинство компьютерных клавиатур.

Итак, не забывайте о свойствах изображаемых вами материалов. Это глянцевый металл или матовая ткань? Одежда средневековых персонажей не должна отражать свет будто пластмасса, а космические доспехи не должны казаться мягкими на ощупь.

Короче говоря: Чтобы 2D графика смотрелась достоверной, свет должен иметь направление.

Оттачивание навыков

Что делать теперь, когда изложены все основы? Вперед! Начинайте пробовать! Это правда: рисовать может любой. Конечно, у некоторых людей есть больше навыков, но самая большая разница между плохим художником и хорошим – это то, насколько много они практиковались. Чем больше практики, тем лучше вы владеете навыком. Но практикуйтесь с умом. Отличную возможность для этого дают игровые проекты. Если вы мечтали о своей игре, начинайте делать наброски для нее параллельно читая эту статью.

Если нет своего, присоединяйтесь к чужим игровым проектам! Даже в самой маленькой игре достаточно графики, чтобы вы отлично попрактиковались и в следующий раз рисовали заметно лучше. И еще: чтобы быть игровым художником, вам необязательно рисовать как художники эпохи Возрождения.

Карандаш и бумага

Единственный способ лучше рисовать – это практиковаться, а самый дешевый и простой способ – делать это с помощью карандаша и бумаги. Использовать только цифровые инструменты заманчиво, так как вы сразу бы получали готовый результат. Но не поддавайтесь соблазну! Когда вы рисуете вручную, вы активнее участвуете в процессе. Вдобавок, вы сможете избежать некоторых дурных привычек, которые возникают когда вы полностью полагаетесь на компьютер. Конечно, инструменты в программе могут выглядеть очень мощными. Но если вы попытаетесь сначала рисовать спрайты при помощи авто фигур, поверьте, у вас получатся смешные и уродливые вещи, которые невозможно было бы сделать с помощью карандашного наброска.

После того, как вы наработаете хорошие базовые привычки, будет еще куча времени, чтобы безжалостно исследовать все инструменты и приемы. Вам кажется странным рисовать карандашом на бумаге, если вы уже привыкли работать в программе? Но не просто так же это стало отправной точкой для художников во всем мире.

Приобретите блокнот для зарисовок (на обложке написано sketchbook), карандаши и хорошую стирательную резинку. Резинкой вам придется пользоваться очень часто. А вот блокнот для зарисовок необязателен. Ключевая идея в том, что вам нужна практика, поэтому можете рисовать хоть на полях своей школьной тетрадки. Но в блокноте все работы будут в одном месте, поэтому не придется впоследствии жалеть, что самый удачный рисунок злодея оказался на листке с домашней работой.

Наброски (они же скетчи)

В карандашных набросках лучше считать, что все линии – лишь временные предположения, а не окончательный вариант. Не попадайте в зависимость от своих линий. Рисуйте поверх, стирайте и рисуйте снова без оглядки на то, что уже есть. Конечно, для этого надо делать линии достаточно легкими. Начинайте с основной формы вашего объекта и постепенно добавляйте детали. Большинство объектов можно аппроксимировать основными формами, то есть сферой, цилиндром и «коробкой», что особенно полезно для рисования в перспективе.

Например, не рисуйте более или менее законченную голову, а переключайтесь на грудную клетку, затем руки, ноги и т. д. Преждевременно вдаваясь в детали, вы можете упустить из виду, как все они соответствуют друг другу. Нарисуйте все вместе на большом грубом наброске и добавляйте детали поверх. Не бойтесь продолжать набросок поверх первых линий, пока не добьетесь идеала общей формы, и не бойтесь начинать заново.

На этом видео отлично показано, как художник строит базовую структуру персонажа, накладывает грубые фигуры поверх, при этом все больше добавляет новые детали, а также стирает и снова рисует детали, которые выглядят плохо. А вот картинка из блокнота начинающего художника:

Типичный скетч

Черновик, черновик, опять черновик

Сначала это может казаться безумным, но вы должны набросать карандашом на бумаге хотя бы три версии любого персонажа/объекта/элемента меню. Только после этого можно переносить их для доработки на компьютер. Крупные студии часто создают буквально десятки концепций одного персонажа, прежде чем даже подумают о выборе. Набросок трех версий даже для неинтерактивных фоновых ресурсов, таких как деревья или кусты, – обычное дело. Вы сильно рискуете, если полагаетесь на первый вариант как на единственный и окончательный. Придумав три разных варианта, вы можете взять лучшее от каждого и объединить их в финале. Вот простой пример, где каждый из крутых космических шлемов отличается от окончательного варианта ниже (тот основан на еще более грубых ранних набросках):

Повторите раздел про анатомию и пропорции. Не зная строения черепа трудно придумать годный шлем

Верхняя штучка вообще-то должна отбрасывать тень на забрало

Если кажется, что следовать такому совету очень трудно, продолжайте помнить: вы рисуете грубые, очень грубые, грубейшие наброски. Не тратьте на них время. На самом деле в большинстве случаев чем меньше, тем лучше. Чем дольше вы работаете над вариантом, тем сложнее вам согласиться на его переделку или на создание другого варианта. Оставляйте в стороне детали, просто передайте общую идею и идите дальше. Вы всегда можете вернуться назад и проработать эскиз, если он вам понравился.

Приготовьтесь к тому, что вам придется рисовать, и рисовать много, и что вам придется временами расстраиваться. Если ваши рисунки кажутся вам непонятными, это лишь означает, что ничто человеческое вам ни чуждо. В следующий раз получится лучше, а потом еще лучше. Помните, что быть недовольным нормально. Если бы рисование было простым занятием, не появилась бы эта статья. По сути, если вы на 100% довольны своим рисунком, вы не стараетесь, вы начинаете терять друзей и убеждаете себя, что это размытое месиво вы изначально и хотели нарисовать.

Короче говоря: Всегда сначала делайте несколько карандашных версий своего гейм арта, и не пытайтесь сразу достичь совершенства.

Заключение и дальнейшее чтение

Теперь вы знаете основы и полностью готовы к созданию приличной графики для 2D игр. Если вам интересно узнать больше по теме, то на протяжении статьи вы можете заметить ссылки на дополнительные источники. Сама же статья во многом основывается на книге Криса Соларски «Drawing Basics and Video Game Art». Вы можете прочитать некоторые из его сочинений . Дерзайте!

Оригинал статьи на английском языке: Total beginner guide for better 2d game art

P.S.

Вам также может быть интересно

Создание спрайт-листа в Sprite Sheet Packer

Sprite Sheet Packer – это инструмент для создания спрайт-листов (спрайтшит, спрайт шит) различных форматов. Домашняя страница упаковщика спрайтов https://spritesheetpacker.codeplex.com/. Эта небольшая программа, распространяемая под MIT-лицензией, объединяет множество одиночных изображений в одно изображение, на прозрачном холсте которого эффективно располагаются входные изображения. Для нормальной работы Sprite Sheet Packer в системе должен быть установлен Microsoft .Net Framework не ниже версии 3.5
Программа поддерживает входные изображения форматов PNG, JPG, BMP и GIF. Результирующим является одно изображение формата PNG 32 бит с прозрачным фоном. Sprite Sheet Packer также создает сопутствующий текстовый файл, который отображает имена файлов входных изображений с их координатами и размерами. Все это нужно для использования в вашей программе работы со спрайтами, чтобы найти области изображений, которые вам необходимы.

Пользовательский интерфейс Sprite Sheet Packer имеет необходимый и достаточный набор элементов управления. Разобраться в нем не представляет труда. Открытие входных файлов возможно как из диалогового окна, так и методом перетаскивания. Открывать файлы можно индивидуально или сразу множественным выбором.

После загрузки изображений нужно задать необходимую величину промежутков между ними, определить имя и место расположения файла спрайт-листа. Если вы установите флажок на опции создания карты спрайтов, то после задания имени спрайт-листа имя файла карты и его месторасположение будут установлены автоматически.

Поскольку я предполагаю использовать Sprite Sheet Packer как инструмент для создания мастер-спрайтов для применения css-спрайтов на веб-страницах, то я не стал переводить две специфические опции. Это – «Require Power of Two Output?» и «Require Square Output?». Как я понимаю, они предназначены для задания каких-то специальных форматов спрайт-листа при использовании программы по прямому назначению – созданию спрайт-листов для игр. Ниже я приведу скриншоты всех вариантов построения спрайт-листа.

1 – Опции «Require Power of Two Output?» и «Require Square Output?» . Размеры спрайт-листа 462х200px.

2 – – «Require Power of Two Output?». Размеры спрайт-листа 512х256px.

3 – – «Require Power of Two Output?» и «Require Square Output?». Размеры спрайт-листа 512х512px.

4 – – «Require Square Output?». Размеры спрайт-листа 336х336px.

Пример спрайт-листа приведен очень простой. Я не стал заморачиваться с картинками разных размеров, а взял первые попавшиеся изображения формата PNG с размерами 32х32 пикселя. На странице разработчика (см. ссылку выше) можно увидеть примеры спрайт-листов с картинками разных размеров. Мне кажется оптимальным для создания мастер-спрайта для последующего размещения css-спрайтов на веб-страницах является последний вариант. Этот спрайт-лист имеет оптимальную квадратную форму с небольшим пустым запасным пространством для возможного добавления новых спрайтов по мере необходимости. Приведу скриншот фрагмента текстового файла карты для последнего варианта спрайт-листа.

На скриншоте видны обещанные имена файлов спрайтов, их координаты и размеры. Но координаты картинок здесь приведены без учета знака минус, поэтому при создании стилей для css-спрайтов надо это учитывать. Гораздо проще для определения нужных координат загрузить полученный мастер-спрайт в программу Sprite Cow, она беспроблемно укажет координаты для их использования в CSS.

Вот, собственно, и все.

Друзья, Mult-uroki.ru — это некоммерческий проект, которым с каждым днем пользуется все больше и больше людей в мире как ресурсом с бесплатным качественным обучающим материалом на тему создания мультфильмов и 2d анимации. Вы можете ПОМОЧЬ В РАЗВИТИИ ПРОЕКТА небольшой суммой денег, так как зачастую то время, которое я бы мог посвятить созданию новых уроков, я теряю, занимаясь подработкой, чтобы выжить. Спасибо!

Показать сопутствующие материалы к данному уроку, на которые я ссылался в этом видеоролике:

По моим видеоурокам вы можете научиться создавать 2d / 3d мультфильмы, персонажей и анимацию в любой стилизации.

Начните изучение с первого урока:

1. Обзор программы Anime Studio Pro (Moho Pro). Создаём Вашу первую качественную анимацию

Урок длится 41 минуту! За это время вы составите полное мнение обо мне и о программе, и примите дальнейшее решение, которое, возможно, изменит вашу дальнейшую жизнь, (даже если вы не будете потом смотреть мои уроки — сэкономит вам время!).

Где брать спрайты для игр?

Для себя вы ответите на следующие вопросы:

— Получается ли у меня работать в программе?
— Понятен ли мне процесс прохождения картинки от подготовки в Adobe Photoshop до анимации и готового видеоролика?
— Понравилось ли мое объяснение или я буду искать что-то другое?
— Смогу ли я на этом заработать?
— Смогу ли я сам/сама создать свой мультфильм?, который может послужить, например, отличным подарком!

В этом уроке я рассказываю, как создать спрайт анимацию для 2d игр в программе Anime Studio Pro (Moho Pro)). Любые движки (SVG) и любая стилизация (png сиквенция).

Мой проект (социальная сеть) посвящен обучению создания 2d мультфильмов, персонажей, 2d/3d анимации, рисованной анимации, созданию 2d игр на языке javascript и flash, видеомонтажу, звучанию, постобработке видео и т.д. посредством публикации моих видео уроков на сайте моей социальной сети http://mult-uroki.ru, в группе ВКонтакте: https://vk.com/mult_uroki и канале Youtube: https://www.youtube.com/c/Mult-urokiRu по программам 2d / 3d анимации и моделирования объектов анимации, местности и фонов в: Anime Studio Pro (Moho Pro) (ASP) (асп) (аниме студио про), Autodesk Maya 2013, Adobe After Effects CS6, Adobe Premier Pro, Adobe Photoshop, Adobe Audition, Adobe Flash, Toon Boom Animation, Cinema 4D, Blender и Poser Pro. По моим урокам вы узнаете как создаются мультфильмы и анимация, как делают липсинг персонажам и озвучание мультфильмов, какие бывают законы анимации и монтажа, как бывают виды планов и как их правильно чередовать, как создается раскадровка и аниматик, какие мультфильмы сделаны в программе Anime Studio Pro (Moho Pro) и какая программа лучше (проще) и что выбрать для создания своего первого 2д мультфильма в домашних условиях Anime Studio Pro (Moho Pro) или Adobe flash? Video tutorials: Creating of bone characters and 2d animation in Anime Studio Pro (Moho Pro 12) program. How to create and draw characters in Anime Studio Pro (Moho Pro)? how to make a 2d cartoon?

11.05.2016Александр Птичкин

Простые привычные нам молнии - это разряды, которые проскакивают между облаками в тропосфере и поверхностью земли.

Бесплатные ресурсы для 2D игр

Спрайты же возникают в верхних слоях атмосферы высоко над грозовым облаком, и принимают при этом странные формы, даже отдаленно не напоминающие электрические разряды.

Открыли эти разряды относительно недавно, в 1989 году. Открыл их Джон Рандольф Уинклер, отставной профессор, 73-летний ветеран NASA, когда направил на грозовые облака высокочувствительную видеокамеру, просто выверяя её, а потом, просматривая запись кадр за кадром, обнаружил две яркие вспышки, которые в отличие от молний шли не вниз, к земле, а вверх, к ионосфере. Причиной их возникновения называют формирование электрического поля высокой напряженности над областью грозы, что выглядит как вспышка света странной формы. Спрайты обычно возникают группами, зачастую в форме кольца. Они подвижны, совершают «танцующие» движения, и их очень легко принять за НЛО. Вертикальные столбы свечения в спрайтах достигают 20 км в высоту, их пучок может быть диаметром до 70 км.

Понравился пост? Поддержи Фактрум, нажми:

Как заменить спрайт при его движении по установленному пути.

Допустим, у вас есть спрайт, состоящий из 36 изображений (0-35).
То есть каждый следующий — подизображение на 10 градусов в сторону.
Обычно, в событии рисования, в действии рисования спрайта в поле -subimage- мы пишем direction/(360/image_number).
То бишь direction/10. А ведь в пути направление обьекта — дробное число!
Решаем задачку.
В событии рисования(или шага) ставим set the value of variable,
direction=(round(round(direction)/10))*10.
Объясняю.
Направление = (округленное(округлённое(направление)деленое на 10))
множеное на 10
Объясняю еще.
Дробное направление в пути округляем. (пример 268.34 = 268)
Затем делим его на десять (268/10=26.8)
затем округляем (26.8=27)
затем множим на десять (27*10=270)
Ура! Получили что надо! Теперь: -subimage- direction(270)/10 =27
То есть 27 изображение спрайта, где обьект смотрит вниз, что и требовалось.

Как быстро сделать спрайт человека, смотрящего (вид сверху) в разные стороны (18, 36, 72 стороны)

Создаем один спрайтик с одним изображением человека. Кликаем Edit sprite
Выбираем Animation/Rotation Sequence/ и далее против часовой стрелки.
затем, в number of frames пишем кол-во подизображений (человеков в разные стороны) и градусы пишем 360. (если он ворочается во все стороны)
Далее ОК и… О ЧУДО! произошло!

Текстуры, тайлы, фоны

у вас нужное количество подизображений.
Затем нужно установить (по идее) первое изображение (номер 0) где чувак смотрит
по direction=0, чтобы в событии рисования в subimage писать direction/10, чувак должен смотреть вправо. Можно воспользоваться (если не смотрит)
Images/Cycle Left
images/cycle Right или клавишами shift+ctrl+(L или R)
Вот и готовый спрайт.

Как создать автомат с питьевой водой (игровой).

Для начала делаем два спрайта — сам автомат и банка. Затем эти обьекты.
Принцип работы: герой сталкивается с автоматом, и при удаче вылетает банка на
определенное растояние от автомата. Повторяется всё через определенное время.
В событии CREATE героя вводим переменную (true/false), например no_kola,
для отслеживания, идет ли уже игра. Итак, no_kola=true (т.е. игра не идёт)
В событии столкновения:
1) Герой останавливается.
2) Если no_kola=false (игра идёт)
3) Exit this event
4) With chance 1 out (число, чем больше, тем меньше шансов, у меня 4)
5) Создать обьект банка.
Вот здесь подробнее. Всё зависит от того, в какую сторону будет лететь банка. Applies to: Other
Если влево, то x=-(random(20)), если вправо, то с + Y=random(20)-10 Всё -Relative
6) Затем если надо играем звуки.
7) Cтавим no_kola=true(игра идёт).
8) Потом ставим таймер, например на 50, а в событии этого таймера пишем no_kola=true(нет игры).
Затем в событии cREATE банки проигрываем победный звук (мол, выиграл) и в событии столкновения героя с банкой уничтожаем её и играем звук выпивания банки. Всё.

Как создать всё больше разгорающийся огонь. (Пожар)

Спрайт огня делаем, затем обьект. Делаем звук.
В Create пишем:
1) Если звук огня не играет
2) Играем звук огня
3) Ставим переменную fire=false, для контроля распространения.
В Step пишем:
1) Если fire=false
2) Alarm 0 to (число, скорость распростронения, у меня 300)
3) Ставим fire=true
В Alarm 0 пишем:
1) Если обьект fire в позиции (x,y = random(100)-50, Relative)
2) Старт блока
3) fire=false
4) Exit
5) Конец блока
6) create object fire (x,y =random(100)-50, relative)
7) Alarm 0 = 300 8) Fire=false
Принцип действия. Переменная fire следит, нужно ли пытаться создать огонь через определенное время. А когда она равна false Alarm снова установиться на попытку создать огонь. Если позиция, где задумается поставить огонь уже занята огнем, fire станет false и Alarm0 снова заведётся. При этом гореть будет всё — и стены, и люди, и предметы. При выходе огня из комнаты лучше его дестроить.
Вот и всё.

Создание вооруженного персонажа (в том числе и до зубов).

В данном совете ты найдешь принцип, а сам уже и сделаешь коды.

ПРОСТО ВООРУЖЕННЫЙ

Под этим можно понимать пару видов оружия.
Стреляет одинарно, малый урон. (Пистолет)
Стреляет многократно, малый урон. (Узи, ингрем)
Стреляет одинарно, большой урон. (Ружье)
Стреляет одинарно, максимальный урон. (Базука)
В данном случае, подразумевается, что у игрока всегда будут эти 4 оружия, даже если нет патронов (огонь без патронов — звук определенный). Чтобы стрелять, достаточно будет найти патроны и всё. Возможна также стрельба без перезарядки.
К примеру я, в игре МАКС ПЭЙН, к-рую делаю сейчас, использую простое вооружение. Пистолет и узи будут отличеться только временем между вылетом пуль. (урон напр 10)
Для них нужен один обьект пули.
Ружье стреляет медленнее пистолета. (но урон напр, в 3 раза больше)
Нужен другой обьект, желательно спрайт больше.
Базука стреляет совсем медленно.(а тут урон напр, при попадании — смерть)
А тут нужно создать рокету маленькую. При столкновении с кем/чем нибудь взрывается, и обьект ВЗРЫВ наносит урон(напр, 10).
Чтобы вообще было всегда чем стрелять, можно сделать пули у пистолета бесконечными.
А как же выбирать оружие? Я так решил эту задачу. Рядом с героем я рисую его здоровье, а выше пишу название оружия и рядом кол-во патронов. Для переключения можно использовать цифры (напр, 1234). Нужно ввести переменные (true/false), например: use_pistol, use_usi, use_rifle, use_rocket И при переключении цифр все переменые ставятся как false, а нужная — true.
И в событии рисования: если такая-то переменая = true, то писать такое-то оружие.

ВООРУЖЕННЫЙ ДО ЗУБОВ

В данном случае у игрока нет всех этих оружий, и при подбирании патронов от того оружия, которого у него нет, стрелять будет нельзя. Бесконечными являются камни, нож и бензопила, бита. Стрелять нужно будет с перезарядкой.
1 Используется бесконечно на близком расстоянии. (Нож, бита, бензопила)
2 Ставится рядом с героем. (Граната, мина, капкан.)
3 Кидается на определенное расстояние от героя. (Камни, граната, коктейль молотова)
4 Стреляет одинарно, малый урон. (Пистолет, арбалет)
5 Стреляет многократно, малый урон. (Узи, ингрем)
6 Стреляет одинарно, большой урон. (Ружье, дробовик)
7 Стреляет многократно, большой урон. (Калашников, тяжелый пулемет)
8 Стреляет одинарно, максимальный урон. (Базука, гранатомет)
Защита — Бронежилеты, шлемы, негорящие костюмы.
1 С ножом и пилой наверно понятно. У пилы больший урон. А бита используется на немного дальшем расстоянии, но урон как у ножа.
2 Гранату можно также ложить рядом с собой, через нек-рое время она рванет.
Мина ставится рядом, урон также как и от гранаты, только пока на нее не наступят, не рванет.

Капкан как и мина, но с меньшим уроном.
3 Камни можно сделать бесконечными и приносящими ничтожный урон.
Граната кидается, в зависимости от того, долго ли будешь держать клавишу (Powershoot)
Коктейль молотова урона не наносит, а вокруг себя создает огонь, который через нек-рое время исчезает. А вот огонь и наносит урон, (напр, 2) И если столкнется с противником то будет нанем, даже если тот пойдет, и пока не иссякнет огонь или не сдохнет враг.
4 Пистолет разобрали, арбалет — меньший урон
5 Разобрали
6 При выстреле из дробовика создается множества сплоченых пуль, по отдельности наносящих малый урон. (напр, 3) Но так как их много, то урон будет большой.
7 Как известно, калаш имеет огробный убой, как и пулемет. Урон поменьше, чем у 6, но стреляет чуть медленнее 5.
8 Гранатомет будет стрелять гранатами, но не Powershoot. А с базукой вот что:
При разрыве ракеты будет взрыв, да еще и останется гореть огонь, как из Молотова.
И есть еще одна категория — Огнемет. Будет стрелять на недалекое растояние, но огонь как у Молотова, будет приносить огромный урон, оставаясьна враге.
А Защита? Пожалуйста! Броня — дополнительные 100 health-ов, при выстреле по ней нет крови.
Шлем поможет защитить только голову, следовательно это случайная защита, где-то 1 к 5.
А негорючий костюм — вводим переменную, havekostum=true, и при столкновении с огнем, огонь приставть к телу не будет, а будет уменьшать только силу костюма.

Вот и всё! Можно скомбинировать и простой, и «до зубов», и получить довольно хорошее вооружение. Но 2-ой способ нужен полностью явно для отлллличных игр. Поке

Спасибо,* SpleaN *

Если у вас появится желание предложить на всеобщее обозрение свои уроки или просто интересную информацию по созданию игр при помощи GameMaker, то милости просим — присылайте свои работы по адресу gamemaker e1.ru, с указанием темы ‘Уроки по GM’ или непосредственным указанием на предмет урока.

Присланные вами материалы мы с радостью разместим на страницах нашего сайта, с обязательным указанием автора!

Как известно, существует огромный парк мобильных устройств с различными разрешениями экранов и соотношениями сторон. И если вы читаете эту статью, то вам, как и мне, хочется определиться под какое же разрешение просить художника рисовать спрайты, да так, что бы на большинстве устройств игра выглядела хорошо.

Мы сразу отметём метод, согласно которому, игра рисуется под какой-то один формат, а для всех прочих масштабируется. Этот способ искажает картинку на экране и всё выглядит не так как задумывал художник.

Наш метод будет заключаться в том, что бы при разных соотношениях сторон отрезалась та часть изображения, которая не скажется ни на геймплее, ни на художественной композиции. Но какого размера должно быть исходное изображение фона?

Для этого определимся какие же разрешения экранов и соотношения сторон наиболее популярны на текущий момент. Я для этого воспользовался открытой статистикой от команды Unity , посмотреть её можно . Вот данные актуальные на момент написания статьи:

Разрешения экранов

Соотношения сторон

А вот как выглядит список наиболее популярных разрешений по отношению друг к другу:

Мы будем отрезать лишнее по бокам, оставляя изображение по высоте нетронутым. Поэтому следует определиться с максимальным размером изображения по высоте.

Если нарисовать что-то в размере 2048 x 2048 px , а затем программно уменьшить до размера 512 x 512 px , то изображение останется чётким, в обратную сторону с растровой графикой такое не проделаешь — картинка выйдет смазанной.

Как видно выше, из списка самых популярных разрешений, максимальная высота составляет 1536 px .

Для самых популярных форматов соотношения сторон (98,5%) можно подобрать ширину изображения такой, что бы по высоте оставались всё те же 1536px. Вот что из этого получилось:

С учётом того, что боковые грани будут отрезаться на экранах с соотношением сторон отличным от 16:9, можно разместить важные для геймплея объекты так, что бы они остались видны, т.е. разместив их внутри зоны размером 2048 X 1536 px. Исходя из этого шаблона можно рисовать фон и прочие элементы игрового мира.

С развитием HTML5 и мобильных платформ 2D игры возвращаются в моду и привлекают внимание даже крупных издателей. Благодаря таким инструментам, как Unity, и онлайн-ресурсам с игровыми ассетами, разрабатывать эти игры стало намного легче. Ниже представлен список из 10 лучших сайтов с 2D ресурсами для игр – как платными, так и бесплатными.

*Сайты перечислены в случайном порядке*

1. Unity Asset Store (платный)

Крупнейший сайт с платными игровыми ассетами. Использовать движок Unity для работы необязательно – чтобы получить доступ к ресурсам на Asset Store, нужно лишь загрузить его бесплатную версию. Скачанные файлы будут сохранены в папку проекта Unity, откуда их можно импортировать в любой игровой 2D движок.

Стоит отметить, что Unity в руках умелого разработчика обладает огромным потенциалом, о чем свидетельствует большое количество успешных 2D игр (чего только стоит популярная Bad Piggies от Rovio). А Unity Asset Store предлагает широчайший выбор 2D ассетов.

2. GameDev Market (платный)

GameDev Market – относительно новый сайт, удобно организованный по категориям контента (как и Super Game Asset, о котором пойдет речь ниже). Здесь вы найдете как 2D, так и 3D ресурсы, включая UI, спрайты персонажей, иконки и окружения. Художники выставляют ассеты на продажу, и ассортимент растет с каждым днем.

Graphicriver – один из самых популярных ресурсов шаблонных изображений. В связи с развитием казуальных мобильных игр, там появилась отдельная категория с 2D ассетами. До размещения на сайте весь контент проходит внутреннюю проверку, а после публикации любой пользователь может оставить свою оценку и отзыв. Итого: это надежный, активно развивающийся сайт под пристальным модерированием Envato.

4. Scirra Store (платный)

Scirra – компания-разработчик Construct 2, популярного 2D редактора на HTML5, у которой недавно появился собственный магазин ассетов. Здесь можно найти аудио-, графические ресурсы и даже готовые игровые шаблоны для Construct 2. Впрочем, для работы можно использовать и любой другой 2D редактор.

5. Game Art Partners (платный)

На сайте Game Art Partners можно купить разнообразные мультяшные ассеты для 2D платформеров, включая анимированных персонажей, монстров, оружие, визуальные эффекты и наборы элементов интерфейса.

6. Super Game Asset (платный)

Если вы создаете RPG или игру с изометрической графикой – этот сайт для вас. Здесь вы найдете самые высококачественные ассеты: красочные иконки для RPG (пожалуй, лучшие из доступных онлайн), 2D спрайты, анимированные спрайты персонажей и огромные изометрические карты. Что немаловажно, большинство представленных ресурсов выполнены в одном стиле.

7. Open Game Art (бесплатный)

Исчерпывающий ресурс для разработчиков игр с открытым исходным кодом, Open Game Art можно назвать крупнейшим собранием игровых ассетов со свободной лицензией. Все материалы – от спрайтов до иконок – можно загрузить по лицензиям GNU или Creative Commons. Это отличный сайт для новичков, но многие ассеты отличаются по визуальному стилю, поэтому их придется тщательно отбирать.

8. Kenney Game Assets (бесплатный)

Еще один отличный сайт с более чем 20 тыс. ассетами, включая элементы UI и различные спрайты для 2D платформеров. Большинство ресурсов представлены в векторной графике и подойдут для любого устройства, независимо от разрешения экрана. Ассеты можно скачать по отдельности (бесплатно) или одним набором (за скромную плату в $9).

9. Game-Icons.net (бесплатный)

Game-icons.net – лучший сайт с бесплатными иконками, которых здесь ни много ни мало 2000. Несмотря на то что все иконки черно-белого цвета, они достаточно универсальные и могут быть использованы для обозначения действий, заклинаний, навыков, предметов и т. п. Приятный бонус – векторный формат.

10. Reiner’s Tilesets (бесплатный)

Лучший сайт c бесплатными тайлами. Здесь можно найти спрайты животных, растений, построек, оружия, визуальных эффектов и практически любых объектов для RPG с изометрической графикой. Стиль ассетов напоминает Diablo II. Это отличный ресурс для начинающих разработчиков, желающих протестировать игровой движок или приступить к созданию своей игры.

Эмуляторы