Советы и лайфхаки

Персонажи для 2д игр – 10 полезных сайтов с 2D ресурсами для игр / Блог компании Plarium / Хабр

Содержание

10 полезных сайтов с 2D ресурсами для игр / Блог компании Plarium / Хабр

С развитием 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, спрайты персонажей, иконки и окружения. Художники выставляют ассеты на продажу, и ассортимент растет с каждым днем.

3. Graphicriver – Game Assets (платный)

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. Это отличный ресурс для начинающих разработчиков, желающих протестировать игровой движок или приступить к созданию своей игры.

habr.com

Работа для иллюстраторов | 2D персонаж для игры

Доброго времени суток!

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

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

Если сложно сделать анимацию — не беда, найду потом исполнителя только для анимации. Но уже чуть дешевле выйдет.

 

ТЗ:


1. Персонаж мультяшной внешности.

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

3. На раковину можно будет устанавливать спойлеры, наклейки, выхлопные трубы. (В дальнейшем возможно анимированные некоторых типов) 

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

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

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

7. Всё тело повернуто боком и направлено вправо, вид немного сверху. 

8. Анимация «бега», хорошо показана на изображениях из мультфильма «Турбо». Туловище вытянуто вперед, вместе с галазами и устремлены вперед, немного быстро покачиваясь, словно в тряске. При этом единственная нога слизняка практически не двигается, показывая только колебания и оставляя под собой небольшой шлейф неоновой слизи. 

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

 

9. В базовом варианте, необходимо сделать три вида улиток, которые смогут легко подстроиться под универсальные предметы.
Также и дополнительные вещи, тоже по 3 штуки, 3 вида глаз, раковин, ртов, туловищ. Один вид женского пола, но тоже универсальный и совместимый с предметами мужского пола. Unisex )

 

10. Юмор приветсвуется =)


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

Вообще персонажи из мультфильма «Турбо», очень приятны на вид и показано достаточное разнообразие, которое можно притянуть в игру.

* усы — это на чём глаза держаться))

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

Будет приятно посмотреть на похожие работы.
При необходимости, могу дать ссылку на наброски игры во ВКонтакте.

illustrators.ru

Какие инструменты лучше всего использовать для создания 2д графики и анимации под юнити?

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

Вот тут не могу понять
1. Что собственно выбрать? По идеи все зависит от того, сколько я хочу использовать графики в игре, если не много анимации будет то достаточно покадрово спрайты вручную сделать, и делов.
А если хочу делать много анимации, и качественной, то лучше использовать метод скелетной анимации, так?
2. Почему нельзя скелетную анимацию полностью использовать в игре, почему только делают покадровую нарезку, ведь анимация получается не такая идеальная, вопрос в ресурсозадратах? Насколько большое различие? Или скелетная анимация и в 3д играх тоже как бы покадровая? С пониманием этим вопросом у меня проблема(((
3. Допустим я хочу проработать своего персонажа с большим количеством анимации, поэтому выбираю скелетную, дабы добротно получилось, какой инструмент лучше всего для этого подойдет?
Я так понимаю программы для 3д моделирования так же отлично подходит и для 2д, тот же блендер, 3дсмакс, cinema 4d, maya, или крутые и дорогие программы именно для 2д анимации, spine и anime studio, какие основные критерии используют для выбора инструмента создании 2д анимации. И опять же, вроде как в юньке самой тоже можно делать ту самую покадровую скелетную анимацию с помощью mecanim(только еще не понял, кости можно прям в ней делать, или обязательно портировать модельку из 3д редакторов), так зачем использовать другие программы если можно обойтись средствами в юньке?
Плюс есть платные ассеты на ту же юнити для скелетной анимации
Что выбрать? Сложнааа, 2 день гугл рою и в ру сегменте инфы про этом совсем прям чет мало

  • Вопрос задан
  • 1203 просмотра

toster.ru

Путеводитель по реализации 2Д платформеров (начало) / Хабр

Так как ранее я был разочарован количеством информации по этому вопросу, я решил восполнить этот пробел, собрав разные виды реализации 2Д платформеров, описав их сильные и слабые стороны и порассуждав над деталями реализации.

Моей целью было создать исчерпывающий и понятный путеводитель по реализации 2Д платформеров.

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

Четыре решения


Мне приходит на ум четыре основных варианта решений при создании платформера. В рамках этой статьи будут рассмотрены все четыре, но из-за большого объема статья поделена на 2 части (прим. пер).

От простого к наиболее сложному это:

Тип №1: Тайловый (чистый)


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

Flashback, сетка тайлов
Примеры: Prince of Persia, Toki Tori, Lode Runner, Flashback

Как оно работает
Карта — это сетка тайлов, каждый из которых содержит информацию о свойствах тайла: препятствие это или нет, какое изображение использовать, какие проигрывать звуки шагов и так далее. А игрок и другие персонажи представлены набором из одного или нескольких тайлов, движущихся вместе. Например, в Lode Runner игрок является одним тайлом. В Toki Tori же игрок 2х2 тайла. А в игре Flashback, которая довольно необычна из-за небольшого размера сетки тайлов, игрок имеет габариты в два тайла в ширину и пять в высоту (см. изображение выше) когда стоит, но всего три тайла в высоту, когда пригибается.

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

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

Этот тип движения совершенно непригоден для обычных прыжков «по дуге», поэтому игры такого жанра вовсе лишены прыжков (Toki Tori, Lode Runner) или разрешают только горизонтальные или только вертикальные прыжки фиксированной длины (Prince of Persia, Flashback), которые есть ни что иное как обычное линейное движение. Преимущества этой системы — простота и точность. Такие игры более детерминированы, что ведет к меньшей вероятности появления глюков и более контролируемому геймплею, не требующему слишком часто подстраивать значения в зависимости от обстоятельств. Фиксированные расстояния для взаимодействия дают возможность сделать красивую бесшовную анимацию. Значительно упрощается реализация некоторых игровых механик (таких как ухват за выступ и односторонние платформы) — всё что нужно сделать, это проверить, удовлетворяют ли тайлы фона в нужной позиции необходимым условиям.
Конечно, эта система не даёт делать шаги менее чем на один тайл, но шаги можно уменьшать разными способами. Например, тайлы могут быть чуть меньше, чем игрок (скажем, игрок 2х6 тайлов), или можно разрешить «только визуальное» движение, чтобы перемещаться внутри выбранного тайла без изменения логики (я полагаю, что это решение применено в «Lode Runner – The Legend Returns»)

Тип №2: Тайловый (Плавный)


Столкновения по прежнему определяются сеткой тайлов, но персонажи могут двигаться в мире свободно (обычно с разрешением в 1 пиксель. см. замечание в конце статьи относительно плавности движения). Это наиболее частая форма реализации платформеров на 8-ми и 16-ти битных консолях, остающаяся популярной и сегодня, так как крайне легка в реализации и позволяет редактировать уровень намного проще чем с применением более сложных техник. Также она позволяет делать уклоны и плавные прыжки по дуге.
Если вы не уверены какой именно платформер хотите сделать, но точно экшн, то я предлагаю остановиться на этом типе. Неудивительно, что подавляющее большинство лучших экшн-платформеров всех времён основываются именно на этом методе.

Mega Man X, с сеткой и прямоугольником персонажа.

Примеры: Super Mario World, Sonic the Hedgehog, Mega Man, Super Metroid, Contra, Metal Slug, и практически любой платформер 16-битной эры

Как это работает
Информация о карте хранится также, как и в чисто тайловом методе. Разница только в том, как персонаж взаимодействует с фоном. Теперь у персонажа есть описывающий его прямоугольник для просчета столкновений (AABB, который не может вращаться), и, обычно, по размеру является кратным размеру тайла. Стандартные размеры вроде одного тайла в ширину и один (маленький Mario, пригнувшаяся Samus), два (большой Mario, Mega Man, пригнувшаяся Samus) или три (стоящая Samus) тайла в высоту. Во многих случаях визуально спрайт персонажа больше, чем логический прямоугольник, так как это делает внешний вид игры более приятным и геймплей — более честным (согласитесь, что для игрока лучше избежать попадания, когда он должен его получить, чем получить когда не должен).
На изображении выше, можно заметить, что спрайт с персонажем «X» квадратный (два тайла шириной), однако описывающий его прямоугольник шириной только в один тайл.
При условии, что нет уклонов и односторонних платформ, алгоритм прост:

  1. Разложить движение на оси X и Y, делать одно перемещение за раз. Если планируется позже добавить уклоны, тогда сначала по X, затем по Y. В противном случае порядок абсолютно не важен. Затем для каждой оси:
    Получить координату грани в направлении движения. Например: если двигаться влево, X координата левой грани описывающего прямоугольника. Если вправо, X координата правой стороны. Если верх, Y координата верха и так далее.
  2. Определить какие линии тайлов пересекаются с описывающим прямоугольником — это даст минимальное и максимальное значение тайла на ДРУГОЙ оси. Например, если мы движемся влево, предположим игрок пересекается с горизонтальными линиями 32, 33 и 34 (вот оно, тайлы с Y = 32 * TS, Y = 33 * TS и Y = 34 * TS, где TS = размер тайла).
  3. Изучите эти линии с тайлами в направлении движения, пока не найдете ближайшее препятствие. Затем в цикле смотрите на каждое движущееся препятствие и определите, какое из всех наиболее близкое на вашем пути.
  4. Результирующее движение игрока вдоль этого направления это минимум между расстоянием до ближайшего препятствия и дальностью хода игрока.
  5. Передвинуть игрока на новую позицию. С этой позиции обрабатывайте другую координату, если еще не обработали.

Уклоны



Mega Man X, с комментариями к уклонам

Уклоны (тайлы, на которые указывают зеленые стрелки) слегка мудрёная штука, так как они и препятствия и в то же время позволяют персонажу заходить на их тайл. Также они вызывают изменение Y координаты при простом перемещении вдоль оси Х. Простой способ сделать их — это позволить тайлу хранить информацию о «высоте пола» с каждой стороны. Допустим система координат с нулём в левом верхнем углу, тогда тайл слева от X (героя), первый тайл уклона, будет содержать высоты {0, 3}. Тот, на котором он стоит будет содержать {4, 7}, затем {8, 11}, потом {12, 15}. После чего всё повториться снова с {0, 3} и так далее. После мы видим уклон с большим углом, собранный из двух тайлов {0, 7} и {8, 15}.

Детальный вид тайла {4, 7}

Метод, который я собираюсь описать позволяет делать произвольные уклоны, несмотря на очевидные причины, эти два уклона наиболее распространены и получаются из 12 тайлов (6 описано ранее и их зеркальные копии). Алгоритм коллизий изменяется для горизонтального движения:

  • Убедитесь, что передвижение по оси X происходит раньше чем по Y.
  • Во время проверки столкновений (4 пункт выше по тексту) уклон считается столкновением только если его ближайшая грань наивысшая (меньше Y координаты). Это предотвратит ситуацию с подёргиванием персонажа при движении с другой стороны.
  • Возможно вы захотите запретить персонажу останавливаться на полпути уклона (например на {4, 7} тайле). Эти ограничения приняты в Mega Man X и многих других играх. Если не захотите, то вам придется разбираться с еще более сложным случаем, когда игрок пытается забраться с нижней стороны тайла с уклоном. Один вариант побороть это — обработать уровень и пометить все подобные тайлы. Тогда при обнаружении столкновений нужно также считать это столкновением от нижней части игрока, если наименьшая Y координата игрока ниже выпирающей части тайла (координата тайла * размер тайла + уровень пола y).
  • Целый тайл с препятствием, смежный с уклоном, если на нем стоит игрок, не должен считаться будто он прикреплен к уклону. Тоесть если персонаж (его нижний центральный пиксель) на уклоне {0, *}, нужно игнорировать левый тайл, а если на улоне {*, 0} — игнорировать правый. Можно делать так для большего числа тайлов, если персонаж шире, чем два тайла — просто скидывать проверку всего ряда, если игрок двигается навстречу верхней части уклона. Причина, для того чтобы это делать, в том, чтобы предотвратить застревание персонажа в этих тайлах (подсвечены желтым на скриншоте выше), пока он забирается на уклон и его ступни будут ниже «уровня поверхности» до тех пор. пока он не поднимется до уровня прямых тайлов.

И для вертикального передвижения:

Односторонние платформы



Super Mario World, где Mario сваливается сквозь (слева) и стоит на (справа) одной и той же односторонней платформе

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

  • по X координате этот тайл никогда не бывает препятствием
  • По Y координате этот тайл препятствие только при движении сверху вниз и только при координате игрока больше (хотя бы на 1 пиксель, когда он стоит), чем верхняя грань тайла.

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

Лестницы



Mega Man 7, с сеткой тайлов, подсвеченными тайлами лестницы, и прямоугольник игрока.

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

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

Это немедленно вызывает эффект привязывания координаты Х игрока к тайлам лестницы, и если двигаться сверху лестницы вниз, нужно просто менять У координату, поскольку игрок уже находится внутри реальной лестницы. Начиная с этого момента некоторые игры начинают использовать другой описывающий прямоугольник, чтобы определять находится ли игрок до сих пор на лестнице. Mega Man, например, видимо использует одиночный тайл (эквивалент верхнего тайла обычного персонажа, обведенный красным на картинке выше).
Чтобы покинуть лестницу есть несколько вариантов:
  • Достигнуть верха лестницы. Обычно это оканчивает анимацию и перемещает игрока на несколько пикселей вверх по У, чтобы он теперь просто стоял на верху лестницы.
  • Достигнуть низа висящей лестницы. Это приведёт к тому, что игрок просто упадёт, хотя некоторые игры просто не дадут покинуть лестницу таким путём.
  • Сдвинуться влево или вправо. Если сбоку нет препятствий, игроку может быть позволено сбежать таким путём.
  • Спрыгнуть. Некоторые игры позволяют освободить лестницу даже так.

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

Ступеньки



Castlevania: Dracula X, с сеткой тайлов

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

  • Игрок двигается тайл за тайлом или по половинке тайла (как в Dracula X)
  • Каждый «шаг» сдвигает игрока одновременно и по Х и по У координатам на фиксированную величину.
  • Определение стартового соприкосновения с лестницей при начале подъема должно смотреть на тайл вперёд вместо того, с которым идёт пересечение сейчас.

Другие игры могут реализовывать лестницы как уклоны. В этом случае лестницы несут больше декоративных характер.

Двигающиеся платформы



Super Mario World

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

  • До того как в сцене что-то сдвинетcя, надо определить стоит ли персонаж на подвижной платформе. Этого можно добиться проверкой, например, находится ли центральный пиксель игрока на один пиксель выше поверхности платформы. Если да, сохраним указатель на платформу где-нибудь внутри персонажа.
  • Сдвигаем все подвижные платформы. Убедимся что сделали это до того как начали двигать персонажей.
  • Для каждого персонажа, который стоит на платформе, посчитаем дельту смещения платформы (насколько сдвинулась по каждой оси). Теперь сдвинем персонажа на тоже самое значение.
  • Теперь двигаем персонажей, как и обычно.

Другие фичи



Sonic the Hedgehog 2

Есть игры, которые располагают сложными и эксклюзивными фичами. Например серия Sonic the Hedgehog. Эти фичи выходят за рамки этой статьи (и моих знаний, что очень важно!), но могут стать темой будущей статьи.

Продолжение (окончание)

habr.com

Спрайты для 2d игр персонажи

Автор © 09.08.2003 «Scorpion»

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

Допустим, у вас есть спрайт, состоящий из 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 [at] e1.ru, с указанием темы ‘Уроки по GM’ или непосредственным указанием на предмет урока.

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


© 2003 Simple Life & World

steptosleep.ru

Спрайты для игр 2d, 2д персонажи

Где найти бесплатные текстуры для фона: 15 отличных ресурсов

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

01. Lost and Taken

Lost and Taken — это один из моих любимых сайтов. На нем представлено множество категорий текстур, и можно скачать отдельные текстуры по одной или загрузить их в виде архива. Если вы ищете текстуры в стиле старинных фильмов, старых шероховатых страниц из блокнота, или что-то еще столь же интересное и интригующее, то вам сюда.

02. Graphic River

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

03. Wegraphics

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

04. Texture King

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

05. Subtle Patterns

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

06. Free textures for layers

В этом альбоме вы сможете скачать бесшовные фоны для сайта в высоком разрешении, которые можно использовать в соответствии с лицензией Creative Commons.

07. Blog Spoon Graphics

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

08. Digital Camera World

Здесь доступно около 100 красивых и креативных бесплатных текстур, оптимизированных под Photoshop.

09. Texture Gen

Texture Gen — одно из самых больших хранилищ бесшовных фонов для сайта, с широким спектром категорий и простым интерфейсом.

10. FBrushes

FBrushes предлагает большой выбор изображений на тему времен года. Доступные здесь бесплатные фоновые текстуры оптимизированы под Photoshop, Illustrator и другие популярные программные продукты.

11. Graphicmania

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

12. Shizoo

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

13.

фоновая для игр

Texture Palace

Texture Palace представляет собой платформу для ресурсов, которая позволяет обмениваться фоновыми текстурами.

14. Mayang

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

15.

Creative Bloq

Здесь вы найдете великолепную коллекцию из 40 бесплатных текстур!

Перевод статьи «Where to find free background textures 15 great resources» был подготовлен дружной командой проекта Сайтостроение от А до Я.

steptosleep.ru

Как создать графику для игры, советы программиста

Введение

Я работал, делая инструментарий и движки для художников, создающих игры и визуальные эффекты более десяти лет, и я всегда недоумевал, что люди делают различия между «программным артом» и «настоящим игровым артом». Я также заметил, что люди, которые дают вам свободно пропустить плохую графику, это в основном другие программисты. Не зависимо от того, как забавна ваша игра или как удивительна технически демоверсия, ‘непрограммисты’, которым вы показываете такой нарисованный персонаж, начинают думать: «Это у него реактивный ранец или может что-то другое?». Зачастую, вы можете найти способ создать хорошую графику без необходимости рисовать ее с чистого листа. Но иногда вам нужно создать графику «на лету». Ограничения в бюджете или правила в игровом соревновании, или просто сжатые сроки для прототипа, могут потребовать от вас взять линейку и кисть в руки.

Я не умею рисовать, правда… Хочу сказать, посмотрите на это:

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

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

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

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

Некоторое из описанного также адресовано участникам соревнования LudumDare и участникам других подобных соревнований, где цель — создать игру «на лету» за 48 часов. Мои игры имеют склонность достигать хорошего результата в графической категории (увы, убийца геймплея продолжает ускользать от меня), учитывая даже то, что я не считаю себя особенно хорошим игровым художником. Множество этих примеров исходят из моих LD записей, а большая часть этого опыта — это вещи, которые я изучил, участвуя в этих соревнованиях и будучи вынужденным создавать арт в предельные сжатые сроки. Более того, они должны быть бесценны для любого, кто пытается создать качественную графику (или что-то приближенное к ней) при коротком расписании времени или ограниченном бюджете.

Совет Первый: начните с определения палитры

Наиболее частая ошибка, которую я вижу и которую легче всего избежать. Палитра, использующаяся по умолчанию для большинства программ компьютерного рисования, возвращает во времена DOS’а (можете ли вы обнаружить связь между цветами в этой палитре и четырехбайтовыми двоичными значениями от 00 до 15? Конечно — да. Если бы вы не смогли это увидеть, вы бы были настоящим художником.).

Я не подразумеваю под палитрой палитру из 16-ти или 256-ти цветов времен VGA. Просто имею в виду скоординированную систему для вашей игры. Если вы начнете с хорошо выбранной палитры, то ваши «каракули» будут казаться эстетически приятными и даже предварительно имеющими «графический дизайн».

Но где мне найти палитру? Я даже не могу подобрать цвета, когда одеваюсь утром!

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

  1. Используйте фотографическое изображение. Думайте о теме и расположении в вашей игре, и найдите изображение, которое будет напоминать вам об этом. Если вы делаете абстрактную игру, то подумайте о ее тематике, но вы не сможите отыскать изображение, которое подойдет вам. Поэтому, создавая игровой арт, никогда не используйте инструмент выбора цвета, вместо этого используйте только определенные цвета из палитры-изображения при помощи инструмента «пипетка». Если повезет, то ваша игра поймает «настроение» этого изображения.
  2. Используйте палитру настоящего художника. Существуют сайты, описанные ниже, имеющие предопределенные палитры, с которых можно начать. Начните с одной из них и используйте ее цвета для своей игры. В дальнейшем, при таком подходе, вам понадобится больше, чем пять цветов, которые находятся в этой палитре.
  3. Не поддавайтесь соблазну свободно выбирать цвета из определителя цветов, вместо этого создайте новые, комбинируя имеющиеся в вашей палитре. К примеру, нарисуйте поверх палитры линию празрачной кистью с параметром Opacity=50.

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

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

Ресурсы:

  1. Сайт Adobe Kuller
  2. ColourLovers
  3. MultiColr от idee labs
    Этот потрясающий сайт хорош тем, что благодаря ему можно сделать палитру и получить связку фотографий на ее основе, просто выбрав несколько желаемых цветов и изображение, из которого затем можно использовать цвета.

Совет Второй: «прикройтесь» умной темой

Я не умею рисовать!..

Возможно, Вы просто слишком крутой человек, чтобы уметь рисовать. Возможно это все преднамеренно. Так и есть. Вместо того, чтобы делать хороший арт, выберите тему, которая требует плохой арт. Это сработало для «SketchFighter» и «Crayon Physics», нарисованных на бумаге.

Используйте то, что вам доступно. Получили какую-нибудь ерунду у себя на столе? Вы, возможно, сделали одну из самых популярных игр всех времен «Desktop Tower Defense».

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

Подсказка Третья: простые формы и силуэты

Круг, Квадрат, Треугольник, Ромб, Трапеция, Параллелограм, и т.д. Вы знаете как точно высчитать их площадь, но вы знаете, что нарисовать их получается плохо? Сделайте наброски нескольких форм от руки, затем добавьте глаза (для персонажа) или колеса (для техники) или что-нибудь еще. Они, возможно, получатся смешными и нелепыми, и совсем неточные.

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

«Смайлы» от Sykhronics — хороший пример вышесказанного. Четкая форма и цвет помогают вам без труда разпознать объекты. Возможно вы играли в игру на двухцветном iPhon’е.

Взгляните на силуэты объектов. Вы можете применить в Фотошопе режим «threshold» или выделить внешнюю область объектов, инвертировать ее и заполнить новым слоем, чтобы увидеть это наверняка. Можете просто сказать, что находится за их внешней областью или по крайней мере описать каждый объект в отдельности?

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

Это наиболее важно в 3D. Назначьте твердый черный материал и рассмотрите модель на белом фоне (или наоборот). Увеличивайте ее масштаб до тех пор, пока она не будет такой, какой вы хотели бы, чтобы она была на экране во время обычной игры.

Подсказка Четвертая: рисуйте больше, чем вам нужно

В дальнейших подсказках мы разработаем спрайт для условного платформера. Предположим нам нужен враг, что-нибудь такое, на что мы не могли бы прыгать не получив урон. Моя первая мысль — черепаха с колючками (оригинально, не правда ли?).

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

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

Подсказка Пятая: работайте в большем разрешении

Для спрайтовой графики я использую разрешение в десять раз выше, чем мне необходимо. Поэтому если я делаю спрайт размером 64×64 пикселей, то использую по крайней мере разрешение 640×640 пикселей. Иногда невзрачный персонаж в высоком разрешении становится потом достаточно хорошим. Даже с фоном и логотипами я стараюсь работать в разрешении в два-три раза большем. Если вы беспокоитесь по поводу краев при даунсэмплинге (смотрите следующую подсказку), то можете получить больше детализации с четкими краями.

Для своего омара, я взял набросок с бумаги и обвел его по линиям. Я сделал запрос через Google , в разделе «картинки», и у меня появилась идея сделать его синим вместо красного и несколько идей по поводу его детализации. Затем я расскрасил его на нижнем слое, который поместил под обведенные линии, поэтому я не беспокоился что все смешается. Как только я его расскрасил, я установил значение «lock alpha» и просто добавил немного затенений.

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

Он пока еще неаккуратный и малодетализирован, но вскоре мы применим эффект даунсэмплинга, который скроит все это.

Подсказка Шестая: следите за краями

Фотошоп (и другие программы для рисования) пытаются услужливо смешать все вместе, давая вам хорошие, сглаженные углы с антиалиайзингом. Это прекрасная «фича», кроме тех случаев, когда вы хотите получить чёткие края для своей 1-битовой альфы. Фотошоп разрушил множество краев у двумерных и трехмерных спрайтов со своим рьяным стремлением к смешиванию пикселей. Вот моя последовательная работа создания спрайтов для игры. Я мог бы создать экшн или скрипт в программе, когда-нибудь, но это и так довольно просто:

Шаг первый: оградите версию с высоким разрешением на прозрачном фоне

Шаг второй: понизьте разрешение до целевого

Вот он (примерно) размером 64×64 пикселей, все еще на прозрачном фоне после применения даунсэмплинга

Шаг третий: сделайте четкие края

Получить правильные края можно следующим способом:

  1. Выделите прозрачные части инструментом Magic Wand. Внимание: установите очень низкое значение «tolerance» и самое главное убедитесь, что параметр «anti-alias» отключен.
  2. Инвертируйте выделение (CTRL-SHIFT-I). Оно должно быть примерно пиксель или чуть больше, чем изображение.
  3. Создайте новый слой ниже текущего и залейте выделение черным (или другим цветом).
  4. Если вашему движку необходим ключевой цвет для фона как в этом примере, добавьте его в качестве заполненного слоя ниже. Если вы используете прозрачность, просто оставьте прозрачный фон таким, какой он есть.

Теперь у вас должен получиться спрайт со сглаженными четкими краями.

Шаг четвертый: подчистите пиксели

Теперь вам нужно повозиться с каждым пикселем в отдельности. Ваш контур будет возможно немного излишним, используйте карандаш (инструмент pencil tool) для того, чтобы очистить его и добавить детализации частям спрайта, которые получились немного размытыми после уменьшения размера. Здесь я немного подчистил лицо, хвост и антенны.

Хочется подчеркнуть: попиксельное рисование — самый трудоемкий по времени способ рисования спрайтов. Именно поэтому хочется отложить этот шаг на потом.

Готово: завершенный спрайт врага

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

Подсказка Седьмая: создавайте разнообразие

Возможно Вы хотели бы иметь двадцать монстров или космических кораблей в игре. Замечательно! Если у Вас достаточно времени. В случае, если вы создаете один или два монстра-космических коробля, которые вам по-душе, то можете добавить разнообразия им. Изменеите цвет. Многие существа в «Diablo» были просто другими благодаря разному цвету. Тоже самое с Pac-Man’ом. Или можете поменять масштаб, вырезать и вставить части спрайта. Вместо митозавра, вегизавра и монкизавра, создать целый вид митозавров с легкими различными особенностями. Вы можете добавить пять-десять различий, чтобы получить одно новое существо.

Используя инструмент hue/saturation (как, например в фотошопе) я сделал «красную версию» спрайта и стер антенны. Затем я добавил крылья, чтобы получить совершенно другое существо. Дополнительный плюс этой техники в том, что она сделает всех существ схожими по стилю, поэтому ваши уровни в игре будут выглядить более последовательными, словно вы заранее спланировали это.

Подсказка Восьмая: избегайте анимации

Слово «Анимация» пришло из древнего шумерского «А’нимаати», что являлось печатью для рабов, назначенных делать неблагодарную, повторяющуюся работу, как например, гребля на корабле или вращение жерновов. В игровом арте — это чуть более «болезненно», так как нужно создавать не только один кадр, который хорошо выглядит, а десять или двадцать. Поэтому не делайте этого!

  • Используйте тему, которой не нужно этого. Космическим кораблям не нужно много анимации. Для машин вы можете просто сделать движение колес. Если вы можете придумать способ, который не требует анимации, то это намного лучше и сэкономишь время для кодинга.
  • Начните с маленьких хитростей. Просто отразите верхнюю часть спрайта персонажа по-горизонтали и получите два кадра. Можете взглянуть на замечательные спрайты из старых игр, чтобы узнать, что они нарисованы всего в нескольких вариациях.
  • Используйте шаблоны. Не пользуйтесь рипам спрайтов, используйте позы персонажей из них. Для этого срайта я нашел шаблон Мега-Мена и нарисовал новый спрайт, но использовал такие же позы.
  • Ротоскопирование сейчас применяется не только для создания поющих орков в мультипликации или в кино. Многие цифровые камеры в наше время имеют режим съемки серий кадров или позволяют снимать короткий видеоролик и выбирать из него отдельные кадры. Снимите самого себя, выполняющего простые действия, отберите нужный кадр и начните трассировку. Внимание: это может стать бесполезной тратой времени, если вы будете неосторожны, поэтому не увлекайтесь этим занятием. Это просто совет.

Подсказка девятая: Скайбокс

Делаете 3D-игру?

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

Я говорю «скайбокс» здесь, но это может быть любой тип панорамного фона, от квадратного скайбокса до панорамного изображения на сфере или полусфере, или простая фоновая картинка для 2D-игры.

Но где мне достать хорошее изображение скайбокса?

  1. Дождитесь заката или хорошего формирования блуждающих облаков, выйдите наружу (или заберитесь на крышу) и сделайте несколько фотографий. Разумеется, это зависит от погоды и вы не получите блестящие закаты каждый день (если только вы не живете во Флориде), но вы можете обработать те фотографии, которые сделали. Чтобы проиллюстрировать, на следующий день, после того как я написал эту статью, я сделал эти снимки по пути домой из супермаркета. Это было немного необычно, место, где я живу, не славится великолептными закатами как здесь, но даже в нормальный день вы можете получить что-нибудь стоящее.

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

  2. Нарисуйте его сами! Вот быстрый туториал, который я сделал на скорую руку во время рисования неба.

    Посмотрите как лучше игра ‘Zillagame’ (моя первая игра на сайте ludumdare!) выглядит. Слева нет скайбокса (и разные баги с альфой), а справа со скайбоксом, который был только что сделан.

  3. Если скайбокс используется не для конкурса, то можно воспользоваться кучей бесплатных или за разумную цену изображениями в сети.
    • 1000 картинок неба
    • Просто поищите в интернете фразу ‘Free HDR Skies’. Вам не нужны для игры HDR-изображения, но такой поиск даст больше результатов. Или поищите ‘Sky Pano’ или ‘sunset’ на сервисе flickr’а (но сначала, перед использованием, проверьте лицензию изображений).

Кроме того, имейте в виду, что небо — главный источник освещения для внешнего мира. Это также справедливо для ‘цветовой палитры’, см. выше. Используйте цвета из скайбокса, когда делаете свой уровень и устанавливаете освещение.

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

Подсказка десятая: используйте лайтмэппинг для «запекания света»

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

В моей игре ‘Bugzapper’, созданной за 48 часов, все освещение строения «запечено» в текстуру. Фактически, у меня даже не хватило времени на то, чтобы нарисовать диффуз-текстуру. Направление света полностью неправильное по отношению к скайбоксу, но большенство людей, так или иначе, на это не обратят внимания.

Вот инструкции о том, как использовать ‘Blender’, чтобы «запечь» свет в текстуру. ‘Maya’ и другие программы имеют похожие функции. Не беспокойтесь по поводу «запечки» всех желаемых текстурных карт, если не пишете настоящую игру. Просто «запеките» все в одну основную текстуру (рендер в текстуру), а потом не используйте свет или используйте его с малыми значениями.
«Запекание» света в текстуру при помощи ‘Blender’

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

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

Подсказка одиннадцатая: приобретите планшет

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

Многие люди, которых я знаю, впервые купившие планшет, не спешили его использовать. Вот некоторые советы, которые помогут максимально эффективно использовать планшет.

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

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

Дополнительные ресурсы

Смотрите также:

Хитрости рисования

Как нарисовать графику для игры «Супер Марио»

jwinters.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *