Привет!
В этой статье я хочу рассказать об особенностях разработки викторины в стиле «4 фото — 1 слово» / «Brandomania».
Для начала коротко о команде. Мы небольшая, но отважная группа разработчиков из Волгограда. Любим писать мобильные приложения на заказ. А когда есть свободное время пилим разные игрушки для души и для портфолио. Конкретно этот проект очень сильно затянулся, делали его почти год, с несколькими паузами, из-за работы над основными проектами. Чистого времени ушло около трех недель.
Примерно год назад я наткнулся в App Store на игру Brandomania, которая очень увлекла и меня и моих друзей, можно было часами сидеть и отгадывать логотипы разных фирм, иногда ответы приходили во сне, в душе, за приемом пищи и т.д. Такие игры не требуют быстрой реакции и в них можно играть даже пьяным, даже сильно. В тот момент у меня родилась идея сделать подобную игрушку, но на тематику, которая понравится таким же айтишникам, как и я, но без сильного перегиба, т.е. без вопросов про ООП, железо, сети, и т.д. Также мы хотели сделать игру с балансом в плане in-app покупок. Потому как в App Store куча викторин с диким донатом и пройти их без вливания денег очень трудно. Идеальная тематика, на мой взгляд — видеоигры. Все любят играть и все любят отгадывать.
Хорошо, с темой и форматом игры определились, теперь предстояло самое сложное. Все работы по разработке такой игры мы разделили на три составляющие:
- Дизайн (Проектирование интерфейса, рисование графики, анимация)
- Контент (Составление базы вопросов, перевод на английский язык)
- Программирование
Дизайн
Сразу оговорюсь, что дизайнера-энтузиаста у нас нет, и всю его работу делали сами. Все знают какие из программистов дизайнеры, поэтому конструктивная критика всегда приветствуется. Обычно проектирование интерфейса начинают с iPhone, а потом после утверждения делают версию для iPad. У нас же все вышло ровно наооборот. Во-первых, у меня лично iPad, и эту игру, в первую очередь хотел для своего устройства. Ну, а во-вторых, мне казалось проще сначала сделать большую версию интерфейса, с крупными элементами, и потом все это перенести на маленький экран iPhone.
Цветовая гамма, шрифт и стиль вдохновлены вышедшей iOS 7 в июне (именно в тот период делался дизайн). Сложностей c iPad никаких не возникло — места много.
Интерфейс экрана c вопросом на iPad:
Самое интересное началось, когда мы пытались уместить весь интерфейс в маленьком (по сравнению с планшетом) экране телефона.
Главный экран и экран с выбором вопроса перенеслись относительно легко, а вот с экраном вопроса возникла небольшая сложность. Проблема заключалась в оптимальном размещении клавиатуры. В версии для планшета мы сделали 2 ряда по 10 букв 70х70 px каждая. На iPhone такой роскоши нет. Ширина экрана — 640px, т е на каждый элемент (буква+отступ) максимум 64px, а еще желательно сделать минимальные отступы от краев. Да и на iPhone 1px намного мельче, в сравнении с iPad. Сделали несколько макетов, потом все эти макеты на скорую руку набросали в X-Code, и «щупали» на реальных устройствах, чтобы выбрать самый удобный.
Разные варианты расположения клавиатуры на iPhone:
Первый вариант. Самый очевидный — максимально использовать ширину экрана для расположения 10 кнопок в ряд. На практике буквы мне показались слишком мелкими, не удобно нажимать на реальном девайсе. Мешает и практический отсутствующий отступ (часто срабатывает не та буква), и маленький размер кнопки.
Второй вариант — «безумный». Прибавить еще одну букву к клавиатуре и разместить в три ряда по 7 кнопок. В принципе, пальцу удобно. Но выглядит просто ужасно — отбрасываем.
Рисуем третий вариант — немного упрощаем задачу игрокам, убирая две буквы, и размещаем 9 кнопок на одном ряду. Это нам позволяет увеличить оступы в сравнении с вариантом 1, и увеличить саму кнопку-букву. Клавиатура устраивает, но верхний бар смотрится как-то слишком перегруженным. Поэтому, работаем дальше.
Четвертый вариант — это практически финальный. Отсутствует «подложка» к кнопкам подсказкам и соц сетям. Ну и плюс еще несколько мелочей.
Контент
Составление базы вопросов, на самом деле, не легкий труд. Каждый вопрос состоит из:
- Названия игры (ответ, который надо отгадать)
- Текстовая подсказка
- Скриншот размером 1024х768
В нашей игре содержится 234 вопроса. И за этим стоит очень большая работа.
Для начала мы составили список всех игр, когда план по количеству выполнили заполняли недостающий материал (картинки, подсказки)
Названия первых трех десятков составили быстро, это твои лично любимые игры, которые легко взять из головы без помощи интернета. А вот что делать дальше? Откуда взять еще две сотни игр, да еще таких, которые можно угадать? Ответ очевиден. На помощь пришел интернет. Мы копались на различных игровых сайтах, отечественных и зарубежных, находили популярные игры, знакомились и открывали для себя новые названия, студии. Это было интересно. Игры, популярные исключительно на территории СНГ в игру мы не включили, т.к. эти вопросы вряд ли отгадают в других странах.
После того как список был утвержден, мы начали дополнять базу скриншотами и подсказками. Со скриншотами, кстати, тоже не все так просто. Размер картинок нам нужен 1024х768 (размер экрана iPad), а многие современные игры заточены под ширикоформатные экраны, и «олдскульный» формат 1024х768 найти проблематично. Приходилось идти на различные ухищрения — резали/сжимали картинку.
Перевод игры сделали через фриланс. Надеемся, качественно.
Если будет время, то добавим еще парочку паков с вопросами.
Программирование
Проект разрабатывали в X-code, без использования каких-либо игровых движков.
Выбор уровня на главном экране сделан с помощью iCarousel. Очень хорошая штука, много настроек, широкий функционал. Советую.
База вопросов в проекте хранится в JSON файлах, которые при сборке загружаются в Core Data. Изображения изначально хранились в PNG формате, но при таком раскладе вес приложения был почти пол-гигабайта, поэтому пришлось переконвертировать все в JPG.
Экран с выбором вопросов сделан на обычной CollectionView. Единственный нюанс, это то что все это дело сильно тормозило, т.к. в каждой ячейке грузилась оригинальная картинка вопроса размером 1024х768. Когда сделали отдельные preview-файлы меньшего размера, лаги пропали.
Также отмечу что в приложение мы воткнули Google аналитику.
Монетизация
Игра есть в 2 версиях. В платной больше уровней для отгадывания и 200 монет сверху.
Также можно купить дополнительные монетки для открытия новых уровней и покупки подсказок. Донат не сильный, монет хватает, если все отгадывать, даже есть запас на некоторое количество ошибок и покупку подсказок. Рекламу решили не вставлять. Меня она всегда раздражает.
Ссылки в App Store:
Lite-версия
Полная версия
PS. В игре очень много контента, поэтому, если найдете какие-либо ошибки или неточности, будем рады обратной связи.
PPS. Проект достаточно гибкий, и легко меняется. Если есть желание сделать свою викторину под iOS в схожем формате (картинка-вопрос + ответ не длинней 18 символов), то пишите в личку, обсудим детали. С вас база вопросов, с нас все программирование.
Автор: ok34
