Идея перенести знаменитую игрушку Brick Game на айфон родилась в 2011 году, и, собственно, реализована была тогда же, но написать обзор я решил только сейчас. За игру мы взялись вместе: дизайнер Артем Прудентов (я) и программист Дмитрий Николин. У меня, как дизайнера, было огромное желание удариться в качество отрисовки по-максимуму. Так, чтобы прыгнуть выше крыши. Перфекционизм мешает жить.
Все мы хорошо помним те времена, когда первые электронные гаджеты стали постепенно попадать в наши руки. Каким волшебством тогда казался японский магнитофон, электронные наручные часы, всяческие приставки Денди, и прочие новинки. Китай брал новые высоты своей экономики и нашего воображения. Мастхев — в эту категорию попали многие вещи, которые навсегда останутся в нашей памяти. Одна из таких идей — игра Тетрис принадлежала русскому ученому Алексею Пажитнову, которая в последствии была так удачно обыграна китайскими умельцами. Именно Тетрис в последствии оброс разного рода играми, которые были упакованы в единую электронную игрушку под названием Brick Game. Сегодня я расскажу об истории этой игры, портированной на айфон.
Вот как выглядит один из вариантов Brick Game.
Первое, с чего все началось — я поехал разыскивать эту игрушку по магазинам. Как оказалось, копий игры вышло крайне много, но только немногие напоминали ту самую оригинальную игру. Отыскал за 1 день, купил за 80 рублей в каком-то магазине сувениров. У этого экземпляра был наиболее качественный экран, и звук — что немаловажно.
Фон
Приехав домой, я сел тщательно рассматривать мельчайшие детали, которые можно было бы отобразить на экране айфона. Например, я обратил внимание, что зеленоватый фон экрана имеет как будто странный мелкий рельеф. Немного напоминает поверхность мелкой наждачной бумаги. Тут на помощь пришел эффект, от которого принято в основном избавляться — шум.
Подобрал подходящий уровень шума, залил макеты на реальное устройство — получилось вполне похоже. Идем дальше.
Ячейки
Именно в этой игрушке ячейка состоит из внутреннего квадрата и отдельной рамки по периметру. Нужно было максимально точно определить толщину линии и стороны внутреннего квадрата. Задача непростая: размеры линий и расстояний менее миллиметра, поэтому штангенциркулем особо не воспользуешься. Все осложнялось привязкой к пикселям, поскольку не хотелось их дробить, чтобы не «мылить» картинку.
В итоге наиболее близкое соотношение было найдено.
Неактивные ячейки
На монохромных экранах подобного типа есть особенность — неактивные ячейки видно при разных углах наклона экрана. Поэтому все неактивные ячейки на экране нужно было обозначить, но сделать их едва заметными. Была еще идея привязать значение прозрачности к наклонам устройства — тогда при разных углах было бы по-разному видно ячейки. Совсем идеально. Но мы решили до такой степени не заморачиваться, иначе разработка рисковала неоправдано затянуться.
Полуактивные ячейки
Из-за низкой скорости отклика и некоторого послесвечения активные ячейки при быстром перемещении оставляют за собой едва заметный след. Это тоже учли. В итоге получилось 3 состояния ячейки.
Тень от ячеек
Есть еще одна совсем неприметная особенность: активные ячейки отбрасывают тень на фон. Это тоже можно было привязать к наклонам, но мы отказались от этой идеи, потому что также не хотелось затягивать процесс.
Корпус
Нужно было довольно реалистично показать не только закругления и различные фаски, но и плоские поверхности. Плоская — не значит однотонная. Свет от одного точечного источника никогда не падает одинаково по всей площади участка. На все плоские поверхности лучше сразу накладывать едва заметный градиент. Это как раз та хитрость, когда непонятно почему, но смотрится фотореалистично. Сравните два варианта.
Корпус с однотонной заливкой:
Корпус с градиентами:
Если присмотреться к материалу корпуса, это не просто серая пластмасса. У нее также есть мелкий рельеф, который я отобразил шумом немного с другой зернистостью.
Кнопки
Самое сочное и интересное. В оригинальной игре кнопки круглые, выпуклые, и выполнены из глянцевого желтого пластика. Так и хочется их нажимать. Но кнопка не существует самостоятельно. Она установлена в вырезанном в корпусе отверстии. Отверстие, а точнее его края, тоже нужно показать. Без лишних слов я продемонстрирую как добиться такого же эффекта на экране. Вот из каких элементов состоит одна кнопка:
Квадрат пунктиром — это прозрачная область нажатия. Кнопка может быть такой малой, что пальцем в нее не попадешь. В данном случае так и есть, поэтому габариты изображения с кнопкой больше, чем сама кнопка. Разумеется, пунктира в действительности нет. Этот квадрат полностью прозрачный.
Теперь пошагово процесс формирования кнопки:
Кстати, кнопка+отверстие нужны в двух состояниях: нажатая и не нажатая. Хотя в оригинале кнопка и жесткая, но я решил в нашей игре сделать ее чуть мягче, то есть придать другой характер отражений, что преумножает эффект нажатия. Плюс ко всему добавить небольшую аккуратную тень, что тоже улучшит восприятие.
Мы решили сделать несколько вариантов управления, и один из них — джойстик. Под него нужно было нарисовать специальную область. Получилось вот так:
Осталось нарисовать мелкие элементы на экране вроде чашки, обозначающей паузу, значка звука, и подобрать шрифт.
Макет готов:
Дополнительно к оригинальному виду игры мы решили добавить еще один вариант — розовый. Получилось довольно забавно.
Звук
Мы записали оригинальные звуки на микрофон в студии. Но такого качества, как оказалось, было совсем недостаточно. После эквализации и компрессии все зазвучало ярко и сочно, просто шикарно.
Звук до обработки:
Звук после обработки:
Программирование
Самая непонятная часть для многих :) Но к счастью особых проблем с этим не было за исключением мелких багов и вылетов. Спустя 4 года приложение настолько оптимизировано, что можно и сейчас от души барабанить по кнопкам, полностью отдаваясь атмосфере игры. Программист (Дима) справился с задачей на отлично.
Всего в приложении 4 игры: стрелялка, змейка, гонки, и заполнялка. Эти игры показались нам наиболее динамичными, и простыми в реализации. Тетрис по мнению многих оказался скучной игрушкой, и до него очередь не дошла. Хотелось бы в комментариях услышать ваше мнение стоит ли добавлять эту игру в приложение.
Во всех играх реализован механизм увеличения скорости. Причем мы отказались от простого линейного прибавления скорости, а решили сделать некое подобие интеллектуальной системы, которая следит за вашими успехами и, в зависимости от этого, усложняет или упрощает вам задачу. Так получилось намного интереснее и игра не надоедает на первых двух-трех уровнях. Особенно хорошо это заметно в стрелялках и гонках. Один из наших личных рекордов — собрали длину змейки в 200 квадратиков (на поле 10х20), то есть она занимала абсолютно все игровое поле.
Статистика
Всего на приложение мы потратили около 2 недель вместе с дизайном, программированием, тестированием. Ревью прошли без проблем.
Продвижением приложения мы совсем не занимались, но за все время все же собрали некоторую статистику. За 2011 год бесплатное приложение скачали 1650 раз. Примерно по 137 раз в месяц.
Не так давно решили оформить платный пост в группу с тематикой 90х во ВКонтакте с численностью 1 млн. человек. Из них 140 тысяч с айфонами. За 1 день пост охватил аудиторию 50 тысяч человек, из них по ссылке в AppStore перешли 100 раз по данным биржи ВКонтакте и 390 раз по данным аналитики iTunesConnect. Купили приложение 12 раз. Конверсия из просмотра в покупку получилась по разным данным 3-10%.
Одно дело статистика, а другое — собственное удовлетворение. То, что мы делали, доставляло нам большое удовольствие. Как процесс, так и результат. А дальше слово за вами.
iPhone: 59 руб. [Скачать в App Store]
Артем Темный
31 комментариев
Форум →Ну что можно сказать, видно, что душа приложена к игре, но пора бы адаптировать игру под iPhone 5/6/6+
@FloodZik, есть некоторая проблема: в горизонтальном режиме пропорции становятся уродливыми. думаем, что возможно придется нарисовать заново под вертикальную ориентацию.
На мой взгляд, добавить тетрис совсем не помешает
@Rainmik, а еще что хотелось бы?
лично мне хотелось бы классический тетрис. Ориентация должна быть обязательно вертикальная. Особое внимание к кнопкам управления: гораздо удобнее (особенно актуально это на больших скоростях) когда кнопки перемещения расположены по краям. т.е. под две руки! Кнопки поворота и сброса – между ними, причем кнопка поворота должна быть третьей слева (т.е. для управления правой рукой), сброса (наименее важная из всех) – второй слева.
@Rainmik, получается 4 кнопки в ряд?
Вертикальную ориентацию мы рассматривали, но попробуйте так ухватиться за устройство. Неудобно даже на iPhone 6+, а уж о других и говорить не приходится. Пальцы неудобно так сгибать.
@imger, попробуйте поиграть в classic blocks. на 4,7 дюймовом экране вполне играбельно. мне все там нравится, кроме расположения кнопок.
Читал – думал наконец-то нормальный тетрис появился… ан нет, самую интересную игру и не добавили. Добавите тетрис и оптимизируете под 6+ – 100% куплю и дороже.
Вообще странный у вас подход… именно в тетрис народ днями и ночами рубился, а этот шлак типа змеек и стрелялок только для красивых надписей “9999 in 1”
@iT0xa, полностью солидарен с товарищем.
@iT0xa, с самим тетрисом все неоднозначно в плане прав. Но я думаю он появится у нас.
@iT0xa, +1
Придумайте что то свое оригинальное. Эти римейки украденной классики никому не нужны в современном мире. Не забывайте что ваша аудитория в основном уже родилась в эпоху мобильного интернета.
@FAStTheory, кто будет ЦА, определяет автор. Очевидно, что в данном случае основаная ЦА — это как раз те, кто застали упомянутую игру.
@SOb_S, Ну тогда не стоит расчитывать на какую то прибиль изначально.
@SOb_S, согласен
@FAStTheory, не скажите. но вот idos решает все эти проблемы. Я хоть и вырос на досе, мне это довольно быстро надоедает. Хотя ностальжи все дела…
Однозначно ждем добавление самого тетриса, ну и еще помню был там “арканоид” или как я его называл тогда “теннис”
1. Хотелось бы бесплатной версии с кучей рекламы, но с возможностью ее убрать за те же 59р. Покупать непонятно что – сорри уж… Но в вишлист добавлю сейчас.
2. У меня на такой штуке были тетрис, причем в нескольких режимах, падали иногда кубики которые могли убивать лишнее или заполнять пробел где он нужен.
Без тетриса – совсем не айс(. Уж не знаю возможно есть какие-либо лицензионные ограничения на него.
3. Еще был арканойд.
4. Понимаю что совсем других денег и сил стоит, но все же мечта детства – дойдя до значимых чисел увидеть мультик))).
5. Ну и вообще беда этой игры было быстрое надоедание. Тогда это было некритично – альтернатив не было. Сейчас – это чисто понастольгировать на часок, а для этого в любой лавчонке можно прикупить оригинал поиграть и выкинуть.
Штука в том что у оригинальной brick game возможностей улучшить игру нет никаких. То ли дело айфон – хочешь – улучшай детализацию игры по мере прохождения (кубики становятся все меньше, а объекты все красивее), хочешь меняй правила игры – добавляй 3д и прочее что захочется. Возможности неограниченны.
Но это все слишком затратные ресурсы разработки.
А вот добавить ачивок, добавить социальных штук, добавить всякие бонусы – те же гонки можно ломать машинку ухудшая управляемость (при встрече с препятствиями), а можно найти ремонтный комплект – возвращая к исходному состоянию. В змейке можно при обычной игре периодически открывать какой-нть ход, пройдя в который надо пройти хитрую полосу препятствий и получить очки итп. Добавить простейший текстовый сторилайн и конечные уровни наконец, помимо классических режимов.
На тетрис вроде лицензия нужна
@skrizl, Нужна, они удаляют все клоны, могут жестко забанить акк
@skrizl, вот я об этом же думаю. Кстати, послушайте в брендятине про тетрис. Там такую заваруху устроили.
Сам был разработчиком какое-то время. Потом бросил. Дело не всегда благодарное. Так что уважаю любого, кто довел свой проект до продаж.
Я бы сделал по-другому.
Оставить только экран (Адаптировать только ровно под 16:9) Вертикально естесвенно. Т.е. вся игровая область во весь экрн айфона.
Тут не так много кнопок и все можно легко перенести на простые тапы по экрану. Один тап – поворот. Два тапа – ускорить падение.
Слайды влево и вправо – перемещение. Все эти кнопки и фоны по краям совершенно лишние) Те, кто играл и так додумаю, всеравно все смотрели на экран в основном.
Ну и да, всякие гоночки добавить) (Они может у вас и есть, я не качал игру)
@replay, слайды и тапы не приносят удовольствия в сравнении с кнопочным управлением. Кроме того, на высокой скорости разделить один и два тапа будет невозможно (можно, правда, совсем отказаться от ускоренного падения)
@Rainmik, пожалуй, соглашусь с вами. Мы пробовали рисовать только экран – атмосферу он так не передает, как серый корпус и желтые кнопки. Смотрится не очень хорошо.
Да и соотношение сторон экрана совсем другое. А классическое поле это 10х20 ячеек.
я все понимаю, но это не геймдев, а записки дизайнера. Ни единой строки, полезной для разработчика )
@Alorya, дизайн это составляющая разработки. А данная рубрика – просто история о разработке. Не обязательно с обсуждением кода.
@imger, комментарий был бы справедлив, если бы речь шла о дизайне в реалиях IOS. Какие-то особенности и хитрости, фишечки и баги системы.
А тут мы видим просто дизайн. К разработке нулевое отношение.
В игру тетрис не добавить сам тетрис? – “гениально…”
аналоговый тетрис рулез во все года)
Тетрис нужен! И обязательно с саунтреком (коробейники).
Нашли орфографическую ошибку в новости?
Выделите ее мышью и нажмите Ctrl+Enter.Как на iPhone отключить размытие фона в портретном фото
Выводим звук из приложений macOS на разные устройства
Как отправить обычное СМС вместо iMessage?
Почему в Авиарежиме недоступны фото и видео на iPhone
Как загрузить музыку на iPhone с Mac?
Как сохранять «живые» фото для отправки на другие устройства?
Почему в Safari на Mac некорректно работают сервисы Google
Как изменить номер телефона в WhatsApp и Telegram, чтобы не потерять доступ к учетке