Как мы меню делали... (Часть 3)⁠⁠

Я разработчик игры CyberArena и администратор сообщества начинающих разработчиков без обязательств «Мельница Инди-игр».

И сегодня я расскажу, как мы от такого меню:

пришли к такому:

Ну, может, сперва пару слов о первом варианте. Тут, конечно, хвастаться совсем нечем, но, возможно, кому-то и это будет полезно. Рисовали мы его в приложении Aseprite. Это очень удобная программа, и если уметь рисовать, то в ней можно делать очень крутые штуки. Мы — не умели))

Ну и собственно к более интересной части —> как мы сделали новую менюшку. Как писал ранее рисовать мы не умеем, но умеем в триде. Так и появилось решение. Мы нарисовали меню в блендере. Покрасили в Фотошоп сабспеитере и там же сделали рендер. Ну и пикрализировали изображение.

Так вот, если будете рисовать для своей игры подобные менюшки, обратите внимание на важные моменты:

1. Цвет: Если элементы однотонные, рисуйте их белыми. Именно белыми, а не в цвет вашего меню. Тогда, если изменится дизайн или палитра, вы всегда сможете перекрасить их прямо в движке. Покрашенные же спрайты придется перерисовывать.

2. Прозрачность: Рисуйте их максимально непрозрачными. Если у вас есть градация прозрачности, то тот элемент, который должен быть наименее прозрачным, делайте полностью залитым. Прозрачность вы также добавите в движке.

   • Лайфхак: Если ваш художник таки нарисовал их полупрозрачными и они плохо видны, можно наложить несколько одинаковых изображений друг на друга в движке, чтобы добиться нужной плотности. Но это плохая практика («костыль»).

3. Растягивание: Если планируете растягивать рамку, заранее продумайте, чтобы по центру была зона, которую можно либо растянуть, либо затайлить незаметно для игрока.

Как мы сделали новое меню

Как я писал ранее, рисовать мы не умеем, зато умеем в 3D. Так и появилось решение: мы создали меню в Blender, покрасили в Substance Painter, там же сделали рендер с пикселизацией изображения.

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

Общие тени: При изменении состояния кнопок могут меняться тени на соседних объектах. Из-за этого спрайт кнопки может оказаться в два, а то и в три раза больше самой кнопки. Не забывайте отключать на них Raycast, иначе не поймете, почему часть интерфейса перестала реагировать на мышь.

Объем: Если вы делаете кнопку отдельным рендером для последующей анимации, не забудьте отрендерить под ней тень! Иначе на контрасте с другими элементами она будет выглядеть слишком плоско.

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

Спасибо всем! Надеюсь, было интересно. Приглашаю потестить нашу игру!