Cubic Games. История о портировании игрушки детства
Идея перенести знаменитую игрушку Brick Game на айфон родилась в 2011 году, и, собственно, реализована была тогда же, но написать обзор я решил только сейчас. За игру мы взялись вместе: дизайнер Артем Прудентов (я) и программист Дмитрий Николин. У меня, как дизайнера, было огромное желание удариться в качество отрисовки по-максимуму. Так, чтобы прыгнуть выше крыши. Перфекционизм мешает жить.
Все мы хорошо помним те времена, когда первые электронные гаджеты стали постепенно попадать в наши руки. Каким волшебством тогда казался японский магнитофон, электронные наручные часы, всяческие приставки Денди, и прочие новинки. Китай брал новые высоты своей экономики и нашего воображения. Мастхев — в эту категорию попали многие вещи, которые навсегда останутся в нашей памяти. Одна из таких идей — игра Тетрис принадлежала русскому ученому Алексею Пажитнову, которая в последствии была так удачно обыграна китайскими умельцами. Именно Тетрис в последствии оброс разного рода играми, которые были упакованы в единую электронную игрушку под названием Brick Game. Сегодня я расскажу об истории этой игры, портированной на айфон.
Вот как выглядит один из вариантов Brick Game.
Первое, с чего все началось — я поехал разыскивать эту игрушку по магазинам. Как оказалось, копий игры вышло крайне много, но только немногие напоминали ту самую оригинальную игру. Отыскал за 1 день, купил за 80 рублей в каком-то магазине сувениров. У этого экземпляра был наиболее качественный экран, и звук — что немаловажно.
Фон
Приехав домой, я сел тщательно рассматривать мельчайшие детали, которые можно было бы отобразить на экране айфона. Например, я обратил внимание, что зеленоватый фон экрана имеет как будто странный мелкий рельеф. Немного напоминает поверхность мелкой наждачной бумаги. Тут на помощь пришел эффект, от которого принято в основном избавляться — шум.
Подобрал подходящий уровень шума, залил макеты на реальное устройство — получилось вполне похоже. Идем дальше.
Ячейки
Именно в этой игрушке ячейка состоит из внутреннего квадрата и отдельной рамки по периметру. Нужно было максимально точно определить толщину линии и стороны внутреннего квадрата. Задача непростая: размеры линий и расстояний менее миллиметра, поэтому штангенциркулем особо не воспользуешься. Все осложнялось привязкой к пикселям, поскольку не хотелось их дробить, чтобы не «мылить» картинку.
В итоге наиболее близкое соотношение было найдено.
Неактивные ячейки
На монохромных экранах подобного типа есть особенность — неактивные ячейки видно при разных углах наклона экрана. Поэтому все неактивные ячейки на экране нужно было обозначить, но сделать их едва заметными. Была еще идея привязать значение прозрачности к наклонам устройства — тогда при разных углах было бы по-разному видно ячейки. Совсем идеально. Но мы решили до такой степени не заморачиваться, иначе разработка рисковала неоправдано затянуться.
Полуактивные ячейки
Из-за низкой скорости отклика и некоторого послесвечения активные ячейки при быстром перемещении оставляют за собой едва заметный след. Это тоже учли. В итоге получилось 3 состояния ячейки.
Тень от ячеек
Есть еще одна совсем неприметная особенность: активные ячейки отбрасывают тень на фон. Это тоже можно было привязать к наклонам, но мы отказались от этой идеи, потому что также не хотелось затягивать процесс.
Корпус
Нужно было довольно реалистично показать не только закругления и различные фаски, но и плоские поверхности. Плоская — не значит однотонная. Свет от одного точечного источника никогда не падает одинаково по всей площади участка. На все плоские поверхности лучше сразу накладывать едва заметный градиент. Это как раз та хитрость, когда непонятно почему, но смотрится фотореалистично. Сравните два варианта.
Корпус с однотонной заливкой: 
Корпус с градиентами: 
Если присмотреться к материалу корпуса, это не просто серая пластмасса. У нее также есть мелкий рельеф, который я отобразил шумом немного с другой зернистостью.
Кнопки
Самое сочное и интересное. В оригинальной игре кнопки круглые, выпуклые, и выполнены из глянцевого желтого пластика. Так и хочется их нажимать. Но кнопка не существует самостоятельно. Она установлена в вырезанном в корпусе отверстии. Отверстие, а точнее его края, тоже нужно показать. Без лишних слов я продемонстрирую как добиться такого же эффекта на экране. Вот из каких элементов состоит одна кнопка:
Квадрат пунктиром — это прозрачная область нажатия. Кнопка может быть такой малой, что пальцем в нее не попадешь. В данном случае так и есть, поэтому габариты изображения с кнопкой больше, чем сама кнопка. Разумеется, пунктира в действительности нет. Этот квадрат полностью прозрачный.
Теперь пошагово процесс формирования кнопки: 
Кстати, кнопка+отверстие нужны в двух состояниях: нажатая и не нажатая. Хотя в оригинале кнопка и жесткая, но я решил в нашей игре сделать ее чуть мягче, то есть придать другой характер отражений, что преумножает эффект нажатия. Плюс ко всему добавить небольшую аккуратную тень, что тоже улучшит восприятие.
Мы решили сделать несколько вариантов управления, и один из них — джойстик. Под него нужно было нарисовать специальную область. Получилось вот так:
Осталось нарисовать мелкие элементы на экране вроде чашки, обозначающей паузу, значка звука, и подобрать шрифт.
Макет готов: 
Дополнительно к оригинальному виду игры мы решили добавить еще один вариант — розовый. Получилось довольно забавно.
Звук
Мы записали оригинальные звуки на микрофон в студии. Но такого качества, как оказалось, было совсем недостаточно. После эквализации и компрессии все зазвучало ярко и сочно, просто шикарно.
Звук до обработки: http://www.iphones.ru/wp-content/uploads/2015/05/demo_orig.mp3
Звук после обработки: http://www.iphones.ru/wp-content/uploads/2015/05/demo_final.mp3
Программирование
Самая непонятная часть для многих :) Но к счастью особых проблем с этим не было за исключением мелких багов и вылетов. Спустя 4 года приложение настолько оптимизировано, что можно и сейчас от души барабанить по кнопкам, полностью отдаваясь атмосфере игры. Программист (Дима) справился с задачей на отлично.
Всего в приложении 4 игры: стрелялка, змейка, гонки, и заполнялка. Эти игры показались нам наиболее динамичными, и простыми в реализации. Тетрис по мнению многих оказался скучной игрушкой, и до него очередь не дошла. Хотелось бы в комментариях услышать ваше мнение стоит ли добавлять эту игру в приложение.
Во всех играх реализован механизм увеличения скорости. Причем мы отказались от простого линейного прибавления скорости, а решили сделать некое подобие интеллектуальной системы, которая следит за вашими успехами и, в зависимости от этого, усложняет или упрощает вам задачу. Так получилось намного интереснее и игра не надоедает на первых двух-трех уровнях. Особенно хорошо это заметно в стрелялках и гонках. Один из наших личных рекордов — собрали длину змейки в 200 квадратиков (на поле 10×20), то есть она занимала абсолютно все игровое поле.
Статистика
Всего на приложение мы потратили около 2 недель вместе с дизайном, программированием, тестированием. Ревью прошли без проблем. Продвижением приложения мы совсем не занимались, но за все время все же собрали некоторую статистику. За 2011 год бесплатное приложение скачали 1650 раз. Примерно по 137 раз в месяц.
Не так давно решили оформить платный пост в группу с тематикой 90х во ВКонтакте с численностью 1 млн. человек. Из них 140 тысяч с айфонами. За 1 день пост охватил аудиторию 50 тысяч человек, из них по ссылке в AppStore перешли 100 раз по данным биржи ВКонтакте и 390 раз по данным аналитики iTunesConnect. Купили приложение 12 раз. Конверсия из просмотра в покупку получилась по разным данным 3–10%.
Одно дело статистика, а другое — собственное удовлетворение. То, что мы делали, доставляло нам большое удовольствие. Как процесс, так и результат. А дальше слово за вами.
[embedded content]
iPhone: 59 руб. [Скачать в App Store]
Артем Темный
мы тестируем кнопки UpToLike
