Дизайн браузерной игры UpToTab

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

Браузерная игра о браузерах

Какой браузер круче, Chrome или Firefox? Постойте, надо дать шанс старичку Internet Explorer, у него еще не все зубы выпали. И пусть это будет честное соревнование. Наши друзья из Red Collar подумали, что это неплохой сюжет для игры... Полегче, немного предыстории.

Как-то за кружкой вязкого, как гудрон, стаута, наш спецагент разговорился с креативным директором воронежского Red Collar. Прозвучала фраза: «слушай, мне кажется, мы обязательно должны сделать совместный проект». Это было на афтепати одной из конференций. Ну что, поздравляем, у кого-то есть пророческий дар.

Денис Ломов

Креативный директор Red Collar

Игровая механика

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

Собираемые баффы и дебаффы (кто не в курсе — это усиливающие предметы и наоборот, ослабляющие). Управление — «жми на пробел». Цель — собрать максимум очков, добраться до финиша и не умереть по дороге. Ну всё вроде, можно двигаться дальше.

Креативная концепция

Теперь эту самую механику нужно во что-то одеть, чтобы игралось с удовольствием. У нас тема браузеров — поэтому решаем, что нашими персонажами будут Google Chrome, его заклятый враг Mozilla Firefox и объект шуток всех айтишников, Internet Explorer.Так как Flash Player славится своей суперспособностью загружать оперативную память, то главным препятствиями на пути станет именно он. Также игрокам будут мешать всплывающие окна с назойливой рекламой и видео с Youtube. В общем, полная реалистичность с погружением, а то.

Наброски персонажей и поиск стилистики

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

Мы начали со старичка IE, который, несмотря на то, что Microsoft его уже давно не поддерживает, как-то отчаянно цепляется за жизнь. Пробуем разные варианты, упрощаем. Детализация — это круто. но нам всё это потом еще и анимировать.

Прорабатываем всех персонажей. Приходим к финальному видению стилистики.

Игровые объекты

Выбираем, что будет помогать, а что мешать нашим героям на пути к цели. Чтобы игровой процесс не казался однообразным, решаем, что для каждого браузера часть предметов будет своя — так IE может ловко подхватить пару костылей и стать более прыгучим, а Firefox поймать AdBlock и защищаться от замедляющей рекламы.

Составляем список в техзадании, обсуждаем, рисуем. Да, у всех предметов будет анимация — поэтому делаем по нескольку фреймов для каждой картинки.

Окружение

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

Так, IE путешествует среди залитых солнцем лугов (так напоминающих легендарный воллпейпер). Фон разнообразят атрибуты лохматой старины: дискеты, мониторы-трубки, узнаваемые иконки из старых версий Windows.

Интерфейс

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

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