2 года я работаю над одним проектом. Как вы думаете что это?

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

Может помните, была такая игра на Денди Лемминги. Цель игры – довести до пункта назначения как можно больше человечков. Человечки притягивались гравитацией вниз, могли взорваться или убежать не туда.

#ретроИгры_MAC_vs_Win

Теперь в игровом движке PointJS появилась физика объектов. Объекты могут не только падать вниз, но и запрыгивать на препятствия или даже преследовать игрока.

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

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

Это растровый персонаж. Спрайт-Анимация создана в Anime Studio Pro 12.4 (Moho Pro 12.4)

#игроваяАнимацияMoho

Каждую пятницу в 20:00 стрим в чате нашего TG

Привет. Меня зовут Александр Птичкин. Я основатель портала mult-uroki.ru, разработчик игрового движка PointJS и автор уроков по анимации в Moho (Anime Studio Pro)

Чат для обсуждения и вопросов: https://news.1rj.ru/str/PointJS

Скачать игровой движок: https://mult-uroki.ru/pointjs

Портал по обучению анимации: https://mult-uroki.ru

Хэштеги:
#PointJS_tutorials - уроки по игровому движка PointJS
#исходникиИгр - Скачать игру + исходный код
#игроваяАнимацияMoho - Примеры создания анимация в Moho
#статья - Мои статьи на тему анимации и игр
#ретроИгры_MAC_vs_Win - Игры с Windows которые удалось запустить на MAC и не только.
#отзывы - отзывы учеников и тех кто сталкивался с моим проектом
#видео_блог - Рассказываю обо всем чем еще занимаюсь по мимо основных проектов в свободное время
.

Как задать имя для спрайт-анимации в движке PointJS

name - имя спрайта на английском
width - ширина одного кадра изображения в пикселях
height - высота одного кадра изображения в пикселях
count - количество кадров анимации
delay - задержка (скорость) анимации. От 1 до 10. Определяется опытным путем

В нашем случае получится такое имя: player_150_170_5_3.png

#игроваяАнимацияMoho

Организация слоев Spine и Moho для одного и того же персонажа с одной и той же анимацией

#статья

Что выбрать - Moho или Spine для создания игровой анимации персонажей:

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

Anime Studio Pro (Moho)

Достоинства:
1. Это профессиональная студийная программа для создания мультфильмов и анимации. На студиях ее ставят совместно ToonBoom (больше для рисованной анимации). Когда я был на Союзмультфильме – там один и тот же мультфильм параллельно делали в обеих программах. Какой-то план было удобнее сделать в Moho – а что в ToonBoom.
2. Быстрая костная анимация как в Maya. Есть инверсия кинематика и сложная инверсная кинематика через 3-4 звена.
3. Action – можно запомнить любое действие или настройку персонажа и ее воспроизвести за доли секунды.
4. Работает одинаково хорошо как с растром, так и вектором (можно рисовать в программе векторных персонажей).
5. Есть триангуляция растра.
6. Удобная работа с масками (After Effects стоит курит в сторонке).

Минусы:
1. Так как мы говорим про игровую анимацию, основной минус - нет вывода анимации в формате json.
2. На рабочей области не всегда видно четко персонажей, а эффекты теней и размытий не отображаются. Дело в том, что Moho упрощает предпросмотр чтобы гнать хоть 10 минут мультфильма с нужной скоростью кадров без потери в скорости чтобы оценить качество анимации. Поэтому чтобы убедиться, что все хорошо надо в произвольных кадрах нажимать ctrl+r и смотреть реальный кадр рендера. Или делать предварительный рендер всего проекта.

Spine

Достоинства:
1. На рабочей области четкое отображение персонажей, эффектов и графики.
2. Есть простая инверсная кинематика.
3. Есть триангуляция растра.
4. Анимация также осуществляется через кости.
5. Основное достоинство – экспорт анимации в json.

Минусы:
1. Ужасная организация проекта и слоев. На приложенном скриншоте показана организация слоев в двух программах (Spine и Moho) для одного и того же растрового персонажа (крестьянин) с одной и той же анимацией. Один скриншот – это высота моего монитора. В Spine надо 5 раз прокрутить на размер высоты монитора, чтобы увидеть все. В Moho все видно на одном экране
2. Нельзя рисовать вектором.
3. Это узкоспециализированная программа по создание только спрайт анимации. Уйди немного в сторону по ТЗ – и все...
4. Неоднозначная прокладка костей и организация проекта – без дополнительных туториалов и бутылочки вина не разобраться.
5. Нет Actions.

Давайте подведем итог. Если бы разработчики Moho наконец-то ко мне прислушались и сделали экспорт анимации json – Spine можно было бы выбросить в мусорку. Кстати – если среди нас есть программисты, которые могут формат Moho (там тоже json) перевести в игровой json – пишите в ЛС! Обсудим свержение spine 😈

Ну а пока на рынке так и будут существовать две программы. Одна до невозможности удобная и быстра, другая корявая, но с экспортом в json. Удачных всем выходных )

#статья

Подсказка. Сколько кадров должна быть анимация и как выбрать правильный тайминг (фазы)? Табличка сделана с расчетом что у нас 24fps

Вот так выглядит правильная организация слоев игрового персонажа в Anime Studio Pro (Moho). Не ленитесь все раскладывать по папкам - в дальнейшем так будет удобнее работать!

#игроваяАнимацияMoho

Пример работы StaticBox для столкновений

Что такое StaticBox в игровом движке PointJS и других движках.

Чтобы узнать, когда один объект столкнулся с другим, самый простой вариант – это обрисовать наше изображение квадратной или прямоугольной рамкой и проверять столкновение с ней. По умолчанию StaticBox всегда равен размеру изображения. Но что делать, когда у нас спрайт анимация или изображение png и не занимает всю область а часть остается прозрачным? Сталкивать старым StaticBox будет не красиво, так как получиться, что визуально объект еще не дошел до нужного места, а столкновение или событие уже произошло. Это также можно наблюдать в играх, когда еще не довел мышку до NPC, а уже он выбран и можно начинать диалог.

Почему же используют такой тип столкновений? Он очень простой и не ресурсоемкий.

Чтобы убрать пустое место для спрайт-анимации надо настраивать StaticBox. Конечно, чтобы ничего не настраивать, нужно сразу верно делать анимацию в Anime Studio Pro (Moho). Но если такое произошло, то давайте разберемся с параметрами.
XD, DY, - точка начала отсчета откуда будет браться спрайт-анимация. DX трогать вообще нельзя, за исключением случая, когда вы взяли сторонний спрайт и его надо настроить так как именно с этим шагом вы выводили анимацию, и сбив его, по углам могут показаться другие кадры этой анимации. Так как у нас анимация читается горизонтально, DY можно настраивать как угодно – от его значения ни чего не зависит. Часто применяется сдвинуть DY, чтобы подвинуть персонажа к нижней рамке StaticBox.

Delay – скорость анимации. Отношение к StaticBox не имеет.

Далее идут четыре настройки StaticBox. x – позиция Box по X, y - позиция Box по Y, w –ширина Box и H - высота. В видео позицией по X и шириной W мы регулируем размер рамки в горизонтальной плоскости. А вот параметр Y и H сведены в контроллере в один параметр YW. Зачем? Чтобы не сбить нижнюю границу параметр YW добавляет к значение Y число опуская Box вниз, и также сразу вычитает из H тоже число, уменьшая высоту и возвращая нижнюю границу на место. Тем самым мы сдвигаем верхнюю границу рамки, а нижнюю не трогаем.

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

#статья