Фирменный стиль и дизайн интерфейса

Предыдущие части рассказа читайте в нашем блоге.

Одной из задач было сделать хороший узнаваемый фирменный стиль для WitchCraft.

Выбор шрифта - это всегда сложная задача, поскольку от него многое зависит, а нормальных качественных бесплатных "незаезженных" шрифтов не так много (мы сразу отказались от идеи использовать Comic Sans или Arial - это моветон).

01 wc draft

Мы очень долго искали подходящий шрифт и настолько отчаялись найти что-то хорошее, что уже почти согласились нарисовать свой собственный (при этом нам пришлось бы потратить много сил и времени на его разработку). В тот момент я наткнулся в интернете на один бесплатный шрифт, который имитировал заголовок фильма "Алиса в стране чудес" - этот шрифт идеально подошел к нашей надписи WitchCraft. Оставалось сделать так, чтобы название игры выглядело красиво, передавало и поддерживало волшебную атмосферу. У нас получилось несколько таких вариантов:

Проектировать интерфейс игры мы начали с создания главного меню. Изначально планировалось на начальном экране сделать зацикленную сценку с насыщенной анимацией, где ведьма убегает от разъярённых крестьян с вилами и факелами за дерево, а потом, оседлав свою избу, отбивается от них.

 

03 menu SD

От этой идеи пришлось отказаться - точнее не отказаться, а записать ее в наш супер-секретный список задач "на потом".

Центральным элементом главного меню стало дерево, на котором прибиты таблички "История", "Аркады", "Бонусы" - просто и понятно. В левой части меню красивый пейзаж королевства N с логотипом игры и кнопкой для вызова справки, а в правой части меню выбора эпизодов, аркад и бонусных материалов.

04-menu

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

Главное меню нужно было оживлять и самым простым решением этой проблемы было добавить немного облаков. Также я попробовал свои силы в спрайтовой анимации и для менюшки сделал свой первый анимационный Loop - колышущийся флаг на вершине замка. Флаг сделан в 3D при помощи специального плагина к After Effects - Free Form.

05 flag

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

06 iconsВ нашей игре много интересных диалогов и поэтому нужно было сделать хорошие плашки с портретами персонажей, чтобы на них было приятно смотреть и читать с них текст.

07 dialogs

Еще одной сложностью при создании интерфейсов было выдержать единый стиль в различных игровых режимах. Игра получилась достаточно разнообразной и каждый новый уровень предлагал новые цели и задачи и новые пути их достижения - и пользователю приходилось по новому взаимодействовать с интерфейсом игры. Т.е. для разных типов геймплея нужно было сделать интерфейс максимально знакомый для игрока - чтобы не вносилась дополнительная путаница - "А что это? Куда нажимать? Что делать?". У нас получилась такая универсальная левая боковая плашка:

08 left side

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

Еще интересным моментом было создание экранов загрузки (splash screen'ов). Когда игре необходимо загрузить новый уровень мы показываем игроку такую замечательную картинку (используется в режиме истории):

10 Splash Screen

В игре у нас 4 аркадных режима и для каждого из них мы нарисовали свой собственный Splash Screen (экран загрузки):

В какой-то момент разработки, когда проект стал действительно большим и комплексным, мы решили, что нужно помочь пользователю разобраться, как играть в нашу игру. Была написана справка по игровым механикам, которая доступна из любого места в игре, а также по этой ССЫЛКЕ.

Продолжение читай в нашем блоге в нашем блоге.

Яндекс.Метрика