За основу мы взяли размеры обложки для Яндекс Игр, где и будет опубликована игра. Требования — 800×470 пикселей. Убираем нули и увеличиваем размер в два раза, получаем 160×94 — идеальный размер для крупных пикселей.

1 слой: Черный фон

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

5 слой: Корабли

Сразу добавим на 5 слой сами корабли прямо из Unity. Они служат ориентирами для рисования. Мы раскрасили их в красный и синий цвета, как в игре. Их изначальный размер — 50×50 пикселей.

2 слой: Звезды

Тут всё просто. Настраиваем инструмент Spray в Aseprite и распыляем полупрозрачные белые звезды по всему фону. Добавляем немного красных звезд около красного корабля и синих — около синего. В центре размещаем фиолетовые звезды.

3 слой: Черная дыра

Хоть её и нет в самой игре (пока что), игра является дополнением к нашей прошлой игре Cosmo Captain, где главная тема — червоточина. Черная дыра здесь служит отсылкой к лору. Рисуем её так:

• Включаем полупрозрачный карандаш и рисуем от центра размашистые произвольные линии. Сначала фиолетовым, затем розовым, а в самом центре — белым.

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

4 слой: Огненные выхлопы

Рисуем огненные выхлопы из турбин кораблей. Используем полупрозрачный карандаш:

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

• Затем добавляем оранжевый цвет и повторяем процесс дважды.

• Завершаем белым цветом у основания турбин, чтобы подчеркнуть яркость.

6 слой: Название

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

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

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

P.S.: Всю работу выполняет один человек, но писать от имени студии проще =)

Создание этого шедевра заняло у Уэйна 22 месяца в вялотекущем режиме, музыкальный фон сделан в программе KORG M01

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

Программа для анимации, которую использует Уейн, называется Butterfly inchworm animation II. Он начал анимировать на консоли DSi ещё в 2012, на первой версии программы, тогда она называлась Inchworm Animation и имела ещё более жесткие ограничения по памяти.

Программа, в которой он рисует фоны, называется Colors! 3D, сейчас даже есть версия для Nintendo switch.

И наконец для звукового сопровождения Уэйн использует одну из программ музыкальной фирмы KORG (M01), о них тут. Хотя в Inchworm тоже есть забавный синтезатор случайных звуковых эффектов.

Все эти программы для Nintendo 2DS/3DS уже невозможно приобрести официально, но можно достать например в hShop, альтернативе почившему freeShop.

Теперь подробнее к пайплайну:

Рисуем фоны в Colors! 3D

Colors! 3d это довольно простой растровый графический редактор с неплохими для DS возможностями, тут есть 5 3d слоёв, глубину которых можно отредактировать, их можно использовать как простые слои в 2д редакторах, не включая 3д экран. Есть возможность импортировать фото из галереи или с камер и экспортировать в разном разрешении. Также есть возможность совместной арт-сессии по WiFi вместе с друзьями. Несмотря на свою простоту, выглядит данный редактор серьезно и стильно.

Чтобы изображение без проблем импортировалось в inchworm, при создании холста нужно выбирать формат landscape.

Анимируем в Butterfly inchworm animation II

Далее импортируем фоны и анимируем покадр в Butterfly inchworm animation II

Inchworm очень забавный инструмент для анимации, причем некоторые умельцы даже умудряются делать при помощи него кукольную стопмоушен анимацию (есть поддержка всех камер). Тут есть очень интересные интерактивные штуки, такие как штампы и частицы, также есть возможность рисовать прямо поверх воспроизводимой анимации (для этого в параметрах кисти есть настройка скорости оставляемого шлейфа). В окне таймлайн есть возможность управлять слоями анимации и аудиодорожками. На них можно ставить ключи, такие как: PLAY, HOLD, HIDE, LOOP, PATTERN и SLIDE.
Большим минусом данного инструмента являются жесткие ограничения по количеству слоёв и кадров. Всего можно добавить 5 слоёв анимации и одну аудиодорожку, либо 4 слоя и 2 аудиодорожки. На все слои анимации можно как угодно распределить в общей сложности 100 кадров, их можно замораживать при помощи специальных ключей hold. В общем для успешного использования нужно включать голову чтобы не выходить за рамки ограничений.

Получившаяся анимация будет иметь разрешение 400x240 пикселей, экспортируем кадры целиком или послойно в png
и перетаскиваем по ftp на ПК при помощи FTPD. Файлы будут лежать по пути SD:\private\Nintendo 3DS\app\JFYE

На ПК:

Открываем последовательность кадров чем угодно, но мне удобно в Aseprite (граф.редактор для пиксельарта), устанавливаем длительность кадра (для 25fps это 40мс)

Можно экспортировать слоями и полировать в aseprite. Конечный результат экспортируем в gif и скейлим в 200% (800x480) или 500% (2000x1200)

Либо используем ffmpg и командную строку для сборки кадров в mpg или gif

ffmpeg -framerate 25 -i ИМЯ%04d.png -vf scale=800:480,setsar=1:1 ИМЯ.gif

Эта картинка начиркана мною на приставке за 10 минут, чтобы проверить работоспособность пайплайна:

Подводя итог

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

Это чем-то напомнило мне, как в Etch-a-Sketch Animator (анимационная игрушка 1986 года) можно было сделать только 12 рисунков, но если вы умело меняли время и порядок, вы могли создать впечатление, будто их больше. На самом деле я не возражал против ограничения количества изображений… это напомнило мне о написании эффективного твита. :)