Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Юзибилити и дизайн для IT проектов
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
30
Битрикс24

Битрикс24

www.bitrix24.ru

22
Отследить-посылку

Отследить-посылку

B2B-сервис трекинга посылок

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Devicerra

Devicerra

devicerra.com

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

11
myPreza

myPreza

mypreza.ru

9
Reader

Reader

Интернет-журнал о современных технологиях.

9
ADN Digital Studio

ADN Digital Studio

adn.agency

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

От эскиза до релиза: как нарисовать игру для AppStore, в которую хочется играть

1 492 0 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Процесс разработки графики игры Road Story стал для нас увлекательным квестом. Мы расскажем, как создавалась художественная часть игры этап за этапом и покажем, что из этого получилось.

b_5744b93d8bf36.jpg

Начало. Получаем задание

«Игрок – пилот перекрестка, регулировщик в будущем. Игровая карта – перекресток. Машина, выезжающая на перекресток, отдает управление пилоту и он должен пропускать машины, избегая столкновений как можно дольше» - так один из руководителей инди-студии “Smartphoneware” Сергей Симковский объяснил нам идею игры. Ага, то есть хочешь город без пробок – на, пробуй! Разруливаешь нерегулируемый перекресток, ускоряя или приостанавливая машины, за это получаешь очки, бонусные машины и другие вкусняшки. Настоящий таймкиллер с повторяющимся геймплеем, что-то вроде волка с яйцами (игру «Ну, погоди!» помним?). Тут разобрались, переходим к стилю.

Немного предыстории. Для ребят из Smartphoneware мы в свое время нарисовали Cybernarium, там все было по-взрослому – киберпанк и si-fi.

b_5744b93e968d6.jpg

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

b_5744b93f9f75e.jpgb_5744b940a5638.jpgb_5744b941e9b19.jpg

"Делай раз". Эскизы и наброски.

Сначала мы вертели и крутили ракурс – хотелось, чтобы игра хорошо смотрелась на любых картах, но при этом не выродилась в плоское 2D. Остановились на виде сверху, который и объем передает и универсален для всех карт. Стали рисовать улицу и пытаться вписать текст в городской пейзаж, сначала в виде зданий:

b_5744b9435e1ca.jpg

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

b_5744b94499027.jpg

Получилось интереснее. Стали добавлять цвет.

b_5744b94674017.jpg

Заказчик одобрил стиль. Правда сказал, что изображение получается слишком резким. Да, и грязь на дороге «как в Одессе после 1го апреля». Поэтому смягчили линии и переходы, добавили градиентов. Сменили черную «кладбищенскую» оградку.

b_5744b94924129.jpg

Заказчик уже принимал его и в таком виде, но нам все казалось, что чего-то не хватает. Хотелось сделать такой экран, который интересно рассматривать - маленький мир, в котором дети смеются, машины гудят, а ветер колышет шарики в парке. Мы предложили добавить немного мелкой анимации и заказчик согласился. В это было вложено много сил – кот на крыше махал хвостом, работал фонтан в парке, собака, привязанная к забору, облаивала машины.

Результат оправдал ожидания - улица явно ожила. Экран всем понравился, его приняли и вставили в альфа-версию. Однако в свет он так и не вышел. Но об этом позже, а пока идем на следующий уровень.

"Делай два". Сохраняем целостность.

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

Первая идея - концепция плоского комикса, нарисованного на листах.

b_5744b94a3b0be.jpgb_5744b94bd06d5.jpg

Заказчик доволен. Этот концепт идет в альфа-версию, и также (та-да-дам) не выходит в свет. Да, да, так бывает в процессе рождения игры: делается кусок клевой работы, принимается… А потом выбрасывается.

На самом деле, заказчик решил поменять принципы монетизации игры. Изначально, игрок должен был играть разными талантами и, повышая уровни, получать бонусы. Все это имело много условий, уровней-переуровней, использовались реплеи, накопления опыта и в итоге все стало слишком сложным и серьёзным. Тогда было принято решение систему упростить – убрать все лишнее и добавить бонусные машины и открытие новых карт за деньги, что повлекло за собой много переделок. Да, решение было нелегким. Но, все же игра создается не из-за любви к искусству (хотя из-за нее тоже), а для зарабатывания денег.

Итак, всплакнув, мы принялись за новые эскизы. Теперь заказчик хотел видеть блочную систему интерфейса, достаточно простую и понятную, однако эффектную. Мы предложили несколько на выбор:

b_5744b94cdcdc0.jpgb_5744b94de9556.jpgb_5744b94ef01a4.jpg

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

b_5744b9513388f.jpg

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

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

b_5744b952763db.jpgb_5744b9542a5ca.jpg

Потом были машинки, ну тут уж мы наигрались. Хотелось сделать так, чтобы маленький пацаненок на них смотрел и говорил "Ва-а-у-у-у!". Много думали над цветами, надо ж сделать не только красиво, но и «играбельно». Слишком большая гамма очень сильно отвлекает, а при быстрой игре быстрее реагируешь на цвет, чем на форму.

b_5744b9550b703.jpgb_5744b95614efc.jpg

И на десерт, так сказать, last but not the least – иконка. Это – наше любимое, потому мы хотели, чтобы получилось жгуче. По опыту знаем, что удачная иконка очень влияет на количество скачек. Есть даже примеры, когда на AppStore игры покупаются просто по иконке, не видя остального. Потому нарисовали заказчику сразу 2 набора для тестирования (сюрпрЫз!).

b_5744b9575b1e2.jpgb_5744b95892d03.jpg

Кстати, мы не стали дожидаться тестирования в полевых условиях и провели опрос сами. По его результатам уже наметился явный лидер - одна из иконок нравится на 32% большему количеству людей. Есть варианты, какая? Можете проверить себя и принять участие в опросе.

Ну вот, вроде бы все готово, пьем шампанское и расходимся. Но не все так просто. Помните наш маленький мир с шариками и котами на крыше? Так вот именно его нам пришлось переделать в угоду маркетингу игры.

«Делай три». Точнее раз. Наша песня хороша, начинай сначала.

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

По ходу также пришло ощущение, что игре недостает персонализации. Так родилась финальная идея статичной иллюстрации - девушка на фоне игрового перекрестка в реальной перспективе.

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

b_5744b95b41266.jpg

Но такой она стала позже. А сначала были трансформации сродни фотографиям с сайта косметолога из серии «До и После»:

b_5744b95c6036a.jpgb_5744b95d70290.jpgb_5744b95e7fb49.jpgb_5744b95fe6244.jpg

Конечно, это еще не все. Были еще разные диалоговые окна, кнопки, ачивки, уровни. Много-много тестирований и переделок, дорисовок и перерисовок. И, наконец, состоялся релиз.

Релиз.

Ура, ура, ура, недавно, RoadStory увидела свет и теперь вы сами можете увидеть и пощупать ее, а также поделиться своими впечатлениями с нами и со своими друзьями:

b_5744b960bbc5f.jpg

b_5744b96194d01.jpg

А вот видео-демонстрация геймплея игры:

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

Скачивайте и наслаждайтесь!

Источник

0
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Комментариев еще не оставлено
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать