Добрый день! В этой статье я расскажу о том, как я в своей игре сделал систему пиксельной анимации, которая позволяет один раз нарисовать одну анимацию, и использовать ее когда нужно будет добавить игроку новый облик(систему скинов), не перерисовывая заново каждый кадр анимации.
И так, сначала разберем как же обычно происходит добавление анимации для персонажа в 2D играх в стиле пиксель арта. Она состоит из картинки, в которой собраны все кадры анимации.
Когда нужно будет добавить нового персонажа придется рисовать каждый кадр анимации вручную. И это большая проблема, когда хочешь добавить в игру кучу скинов. Чтобы облегчить себе задачу я решил добавить в свою игру систему авто-анимации - назову это так.
Для этого я нарисовал мастер тайлсет анимации:
Также я нарисовал текстуру, которая будет накладываться на анимацию:
На картинке сверху под номером 1 имеется мастер анимация. На эту картинку через шейдер натягивается текстура под номером 2, и в итоге получается хорошая анимация под номером 3. Для наглядности снизу прикрепил гифку с анимацией.
В итоге если я захочу поменять скин, не нужно будет рисовать каждый кадр в ручную, нужно будет только нарисовать текстуру и поставить ее в параметр шейдера:
И так, вот шейдер, которая делает данную красоту (это не конечный вариант):
Данный шейдер крепится на нод типа AnimatedSprite2D. Для AnimatedSprite2D в качестве кадров берутся картинки из мастер тайлсета. А готовая текстура крепится в параметрах шейдера.
Как же работает шейдер? Давайте разберем подробнее:
Берется каждый пиксель с координатами (X1, Y1) на мастер анимации, ищется пиксель с таким же цветом в UV карте, и берется позиция (X2, Y2). И для готовой анимации на пикселе с координатами (X1, Y1) вставляется пиксель с текстуры из позиции (X2, Y2).
Если хотите более подробно изучить данную тему можете посмотреть видео, в котором человек объясняет эту тему и реализует ее на движке Unity. Именно из-за этого видео я решил реализовать такую фичу в своей игре на движке Godot.
Вот ссылка на это видео: https://www.youtube.com/watch?v=HsOKwUwL1bE
В итоге я решил добавить для анимаций задний фон, в который я решил засунуть волосы игрока, чтобы она двигалась с задержкой относительно игрока (например волосы или плащ) и передний фон (например элементы одежды или передние волосы). А также добавил возможность вставлять разные головные уборы:
Данная версия шейдера выглядит вот так:
Для нее нужа дополненная мастер анимация:
Красненькие и зелененькие квадратики нужны для заднего и переднего фона.
В итоге мы можем комбинировать разные скины с головными уборами и получать множество вариаций облика персонажа:
Спасибо что прочитали мою первую статью, дальше я буду выкладывать прогресс разработки моей игры и то, как я ее буду выкладывать на платформе Яндекс игры