Как задать имя для спрайт-анимации в движке 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, что это такое и зачем надо.

#статья

DynamicBox в игровом движке PointJS для столкновений. Что это такое?

DynamicBox в игровом движке PointJS для столкновений. Что это такое?

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

Если взять DinamicBox квадрата, то он вращается с квадратом и полностью повторяет его форму и поворот. StaticBox не вращается если квадрат повернулся. Он так и стоит, как был создан объект – только двигается с ним. Вообще он может быть любой формы как вашей душе угодно. У него могут быть острые углы, тупые, вдавленные стороны. Все что угодно. Конечно, возрастает нагрузка на расчеты, так как теперь мы можем столкнуться с любой гранью – а положение этой грани и точки на этой грани надо высчитывать (направление, угол, координаты). Даже в 3D играх стараются избегать DinamicBox и использовать их по минимуму, например, только обходя какое-то неровное здание. Никто не будет ставить на коробку на улице или камень просчет столкновения по DinamicBox – это абсурд. Пользователь, скорее всего этого не заметит этой четкости, а нагрузка возрастет. Да и ему будет скорее всего не до красоты обхода камня на сцен когда на него несутся 10 соперников из другой гильдии.

Что же касается движка PointJS как показал тест у нас нет нагрузки из-за использования DinamicBox или StaticBox. По крайней мере, я нагрузки так и не заметил. Наверно это связано с тем, что внутри я заложил хороший алгоритм просчета без использования просчета углов и наклонов поверхностей 😊 . Кстати, на создание этого алгоритма я потратил 2 года (видео выше показывает демонстрацию работы этого алгоритма).

На сегодня на этом все. Удачного всем рабочего дня!

#статья

Dino T-Rex от Google Chrome

Скачать исходник кода игры: https://drive.google.com/file/d/1ULsjM_TQUSYDLmgS-hCVqPaFKbPC-_m2/view?usp=sharing

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

Запуск: просто перетащите файл index.html на чистое окно браузера. Управление: как всегда ПРОБЕЛ. Делитесь своими результатами прохождения в чате 🙂

#исходникиИгр

Игровая анимация: Бег. 9 фаз. Анимация создана в Moho Pro 12.4 (бывшая Anime Studio Pro)

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

А вот так выглядел процесс создания игры с новой физикой. Правда после нее вышла физика еще новее – но сути это не меняет. Поиграть можно по ссылке: https://mult-uroki.ru/PointJSPhysics/ Игра работает как на телефоне так и на стационарном компьютере