Как нарисовать заставку или фон для игры в Aseprite

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

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

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

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

Для работы нам потребуется Aseprite или его бесплатный аналог — LibreSprite, который можно скачать здесь: LibreSprite.

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

Для того чтобы создать основу — песок острова — я поработал над небольшим набором тайлов, который при желании можно использовать и для игры.
К слову, понадобится нам здесь только песок, так как на более позднем этапе я решил, что вода в теме крушения самолёта на необитаемом острове ну просто не может быть такой простой, но об этом я расскажу чуть позже.

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

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

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

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

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

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

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

С пальмой и её тенью проблем в принципе не возникло. Берём самый простой, но понравившийся референс — и вуаля… В общем, пальма она и в Африке пальма. Точнее, посреди Тихого океана.

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

Наибольшая трудность была с водой. Как я и сказал в начале, главное в крушении самолёта на необитаемом острове — кроме самого острова и самолёта — это охвативший клочок суши огромный океан.

Самый простой вариант меня не устроил, и я стал искать решение. Не буду скрывать: решение нашлось благодаря одному видео в интернете. Посмотреть его можно по этой ссылке.

После часа работы и погружения в воду — в прямом и переносном смысле — я нарисовал приемлемый для меня вариант и перенёс его на свой рисунок.

Следует пояснить, что для рисования в данном случае потребовался режим Tiled in Both Axes, в котором то, что вы рисуете на одной плитке, автоматически повторяется и для восьми других. Очень удобный режим для тайлов, так как сокращает однотипную работу.

Анимировать воду можно по-разному. В приведённом примере используется четыре кадра со скоростью 300 миллисекунд, имитирующие волнение воды и её блеск на солнце.

Чтобы перенести воду в основной рисунок, требуется выделить её инструментом Marquee Tool (клавиша M) и сочетанием Ctrl + B сделать так, чтобы кисть начала рисовать не просто пикселями, а целыми участками воды. То есть в нашем случае — океана.

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

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

С мелкой, более светлой водой пришлось чуть сложнее — её пришлось опускать, поднимать и немного перерисовывать для каждого кадра отдельно, чтобы имитировать прибой.

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

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

Спасибо, что дочитали до конца. Если вам интересна разработка игр в целом и пиксель-арт в частности — присоединяйтесь к моей группе в VK. Поддержка мне сейчас очень нужна.