Приступая к дизайну мобильной игры, постарайтесь абстрагироваться от технических подробностей и игровой механики, даже если код-прототип уже написан и протестирован. Возьмите карандаш, бумагу (больше бумаги!), устройтесь поудобнее и сосредоточьтесь на высокоуровневых аспектах и интерфейсе игры. Можно начать с эскизов главных компонентов:
-
основная механика игры;
-
черновой сюжет и главные персонажи;
-
наброски графического оформления;
-
эскизы всех экранов, сценарий переходов между ними и инициаторы переходов (к примеру, окончание игры).
Возьмем для примера создание знаменитой, старой как мир «Змейки» (Snake) для платформы Android.
Основная механика игры
Не спешите сразу тщательно вырисовывать изображения в Paint, Photoshop и Gimp, поработайте над черновыми вариантами на бумаге и состаьте из них таблицу. Так будет проще увидеть общую картину, менять эскизы местами и выстраивать связи. Для этого вам понадобятся ножницы, карандаш/ручка/краски и много бумаги. После того как эскизы вас удовлетворят, отсканируйте их, чтобы использовать в дальнейшем.
Для начала создайте наброски базовых компонентов, которые потребуются для реализации основной механики игры.
Итак, прямоугольник обозначает экран устройства, где будут располагаться все элементы. Справа две кнопки для управления змейкой, ниже голова, нескольких звеньев хвоста и ее «еды». Цифры понадобятся для демонстрации результатов.
Теперь определимся с механикой: змейка двигается в направлении своей головы, за которой тянется хвост. Голова и элементы хвост состоят из компонентов одного размера, которые лишь немного отличаются внешне.
Когда змейка достигает границу экрана, то появляется с противоположной стороны. При нажатии кнопки ← или → змейка поворачивает на 90° в соответствующую сторону. Если змея коснется своего хвоста (укусит его), игра заканчивается.
Когда голова касается элемента («еды»), он исчезает (съедается). К счету прибавляется 10 очков, увеличивается хвост, а на поле появляется новый элемент. Когда змейка вырастет до такой степени, что займет все поле, игра закончится.
Может показаться, что для такой простой игры слишком сложное описание, но без этого можно упустить важные детали. Более продуманные многоуровневые игры нужно разбивать на несколько групп, прорабатывать их по отдельности, а затем соединять в целое.
Сюжет и оформление
В вашей фантазии могут существовать какие угодно гномы, зомби и космические путешествия, но соразмеряйте их со своими возможностями. Если у вас в команде есть хороший дизайнер (или несколько), то вам зеленый свет.
В любом случае нужно определиться стилем оформления игры. Эскизы – это основа. Отсканируйте их и придайте индивидуальности. Например, змейка может стать мистером Ням, получить «лицо» и шляпу, а «еда» станет яблоками или мышками, или что там еще любят есть змеи. Придумаем название: «Мистер Ням» или «Пожиратель змей» – так уже интереснее.
Экраны и трансформации
Теперь, когда есть база, приступим к отрисовке экранов и трансформации между ними. В нашем случае экран – это неделимый элемент, который полностью занимает дисплей и отвечает за одну составляющую игры (главное меню, игровой экран, меню настроек).
Экран, как правило, включает несколько компонентов (кнопки, элементов управления, заголовки, элементы непосредственно игры) и дает возможность игроку взаимодействовать с ними, например, переходить между экранами.
Итак, приступаем к экранам игры «Мистер Ням».
Первый экран при запуске – экран главного меню. Он должен включать название игры и логотип (в нашем случае они совпадают), фон (для связки возьмем его из игрового экрана), интерактивная кнопка PLAY/Играть (как же без нее?), интерактивная кнопка HIGHSCORES (Рекорды) для просмотра своих достижений. Наверное, еще существуют люди, которые никогда не играли в «Змейку» - для них добавим кнопку HELP ведущую на страницу с правилами. Не все любят звуки во время игры (а иногда ситуация не позволяет), поэтому разместим еще кнопку включатель/выключатель звука.
Теперь определимся с размещением этих элементов. На самом деле по этому поводу существуют научные исследования, с которыми стоит ознакомиться. Мы расположим элементы по частоте их использования.
Из главного меню можно переходить на другие экраны. Нам, соответственно, потребуются: игровой экран, экран лучших результатов и экран помощи. В большинстве игр есть еще экран настроек, но у нас настройки ограничиваются переключателем звука.
Экран HIGHSCORES
Результаты будут храниться локально и иметь доступ только для однопользовательского режима. Мы остановились на сохранении 5 лучших результатов, поэтому экран будет выглядеть примерно так:
Сверху располагается большая надпись HIGHSCORES, далее 5 лучших достижений в порядке убывания и кнопка Назад. В качестве фона также использован фон игрового экрана.
Экран HELP
Здесь описаны основные принципы игры, которые будут размещены на 3 кранах: кто есть мистер Ном и его жизненные «задачи»; как им управлять, чтобы он хорошо питался; и чего он не любит делать (поедать себя). На 2 первых экранах располагаем кнопку Далее, которая показывает, что доступна дополнительная информация, и на последнем элемент с крестиком для выхода из экрана помощи.
Игровой экран
База для него уже имеется, осталось детализировать. Первое, что должен увидеть игрок – стартовый экран с предложением начать игру. Если пользователь готов, он нажимает экран и начинает игру. Для этого не нужно создавать отдельный экран – просто на игровом экране реализуется стартовая пауза.
Далее нужно создать кнопку для приостановки игры (Pause) и ее продолжения (Resume). Также в режиме паузы должна быть кнопка с переходом на экран главного меню.
Если мистер Ням укусит себя за хвост, игра завершается – для этого нужно отрисовать отдельный экран или сообщение Game Over поверх игрового экрана. Мы выберем второй вариант.
Перед завершением игры показываем игроку его результат и предлагаем возможность возврата в главное меню.
Итак, у игрового экрана получается 4 подэкрана: подготовка к игре, собственно игровой, пауза и окончание игры.
Когда все экраны готовы, пора их связать между собой, для этого на каждом размещены интерактивные компоненты. Все переходы мы показали на эскизе стрелками, отдельно продублировали все элементы экранов.
Переходы:
-
Из главного меню – в игровой экран, экран HELP, экран HIGHSCORES.
-
Из игрового экрана – на главное меню (в режиме паузы или при окончании игры)
-
Из экранов HIGHSCORES и HELP – на главный экран. Также на экраны помощи имеются кнопки для перехода между собой.
Вот и все, дизайн можно считать готовым, осталось реализовать его в приложении.
Такой принцип работы прекрасно подходит для начинающих разработчиков и небольших простых игр. Для крупных проектов схему нужно будет скорректировать, разделить обязанности и сделать разработку дизайна более гибкой и интерактивной.