Dev Story Cubic Games. История о портировании игрушки детства

Информатор avatar | 31
FavoriteLoading В закладки
Cubic Games. История  о портировании игрушки детства

Идея перенести знаменитую игрушку Brick Game на айфон родилась в 2011 году, и, собственно, реализована была тогда же, но написать обзор я решил только сейчас. За игру мы взялись вместе: дизайнер Артем Прудентов (я) и программист Дмитрий Николин. У меня, как дизайнера, было огромное желание удариться в качество отрисовки по-максимуму. Так, чтобы прыгнуть выше крыши. Перфекционизм мешает жить.

Все мы хорошо помним те времена, когда первые электронные гаджеты стали постепенно попадать в наши руки. Каким волшебством тогда казался японский магнитофон, электронные наручные часы, всяческие приставки Денди, и прочие новинки. Китай брал новые высоты своей экономики и нашего воображения. Мастхев — в эту категорию попали многие вещи, которые навсегда останутся в нашей памяти. Одна из таких идей — игра Тетрис принадлежала русскому ученому Алексею Пажитнову, которая в последствии была так удачно обыграна китайскими умельцами. Именно Тетрис в последствии оброс разного рода играми, которые были упакованы в единую электронную игрушку под названием Brick Game. Сегодня я расскажу об истории этой игры, портированной на айфон.

Вот как выглядит один из вариантов Brick Game.

bg

Первое, с чего все началось — я поехал разыскивать эту игрушку по магазинам. Как оказалось, копий игры вышло крайне много, но только немногие напоминали ту самую оригинальную игру. Отыскал за 1 день, купил за 80 рублей в каком-то магазине сувениров. У этого экземпляра был наиболее качественный экран, и звук — что немаловажно.

Фон

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

01

Подобрал подходящий уровень шума, залил макеты на реальное устройство — получилось вполне похоже. Идем дальше.

Ячейки

Именно в этой игрушке ячейка состоит из внутреннего квадрата и отдельной рамки по периметру. Нужно было максимально точно определить толщину линии и стороны внутреннего квадрата. Задача непростая: размеры линий и расстояний менее миллиметра, поэтому штангенциркулем особо не воспользуешься. Все осложнялось привязкой к пикселям, поскольку не хотелось их дробить, чтобы не «мылить» картинку.

02

В итоге наиболее близкое соотношение было найдено.

Неактивные ячейки

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

03

Полуактивные ячейки

Из-за низкой скорости отклика и некоторого послесвечения активные ячейки при быстром перемещении оставляют за собой едва заметный след. Это тоже учли. В итоге получилось 3 состояния ячейки.

04

Тень от ячеек

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

Корпус

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

Корпус с однотонной заливкой:
05

Корпус с градиентами:
06

Если присмотреться к материалу корпуса, это не просто серая пластмасса. У нее также есть мелкий рельеф, который я отобразил шумом немного с другой зернистостью.

07

Кнопки

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

08

Квадрат пунктиром — это прозрачная область нажатия. Кнопка может быть такой малой, что пальцем в нее не попадешь. В данном случае так и есть, поэтому габариты изображения с кнопкой больше, чем сама кнопка. Разумеется, пунктира в действительности нет. Этот квадрат полностью прозрачный.

Теперь пошагово процесс формирования кнопки:
09

Кстати, кнопка+отверстие нужны в двух состояниях: нажатая и не нажатая. Хотя в оригинале кнопка и жесткая, но я решил в нашей игре сделать ее чуть мягче, то есть придать другой характер отражений, что преумножает эффект нажатия. Плюс ко всему добавить небольшую аккуратную тень, что тоже улучшит восприятие.

10

Мы решили сделать несколько вариантов управления, и один из них — джойстик. Под него нужно было нарисовать специальную область. Получилось вот так:

11

Осталось нарисовать мелкие элементы на экране вроде чашки, обозначающей паузу, значка звука, и подобрать шрифт.

12

Макет готов:
13

Дополнительно к оригинальному виду игры мы решили добавить еще один вариант — розовый. Получилось довольно забавно.

14

Звук

Мы записали оригинальные звуки на микрофон в студии. Но такого качества, как оказалось, было совсем недостаточно. После эквализации и компрессии все зазвучало ярко и сочно, просто шикарно.

Звук до обработки:

Звук после обработки:

Программирование

Самая непонятная часть для многих :) Но к счастью особых проблем с этим не было за исключением мелких багов и вылетов. Спустя 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]

Артем Темный

1 Звезд2 Звезды3 Звезды4 Звезды5 Звезд (1 голосов, общий рейтинг: 4.00 из 5)
undefined
iPhones.ru
Идея перенести знаменитую игрушку Brick Game на айфон родилась в 2011 году, и, собственно, реализована была тогда же, но написать обзор я решил только сейчас. За игру мы взялись вместе: дизайнер Артем Прудентов (я) и программист Дмитрий Николин. У меня, как дизайнера, было огромное желание удариться в качество отрисовки по-максимуму. Так, чтобы прыгнуть выше крыши....
Прокомментировать

🙈 Комментарии 31

  1. FloodZik avatar
    FloodZik13 мая 2015
    0

    Ну что можно сказать, видно, что душа приложена к игре, но пора бы адаптировать игру под iPhone 5/6/6+

    imger avatar
    imger13 мая 2015
    0

    @FloodZik, есть некоторая проблема: в горизонтальном режиме пропорции становятся уродливыми. думаем, что возможно придется нарисовать заново под вертикальную ориентацию.

  2. Rainmik avatar
    Rainmik13 мая 2015
    0

    На мой взгляд, добавить тетрис совсем не помешает

    imger avatar
    imger13 мая 2015
    0

    @Rainmik, а еще что хотелось бы?

  3. Rainmik avatar
    Rainmik13 мая 2015
    1

    лично мне хотелось бы классический тетрис. Ориентация должна быть обязательно вертикальная. Особое внимание к кнопкам управления: гораздо удобнее (особенно актуально это на больших скоростях) когда кнопки перемещения расположены по краям. т.е. под две руки! Кнопки поворота и сброса – между ними, причем кнопка поворота должна быть третьей слева (т.е. для управления правой рукой), сброса (наименее важная из всех) – второй слева.

    imger avatar
    imger13 мая 2015
    0

    @Rainmik, получается 4 кнопки в ряд?
    Вертикальную ориентацию мы рассматривали, но попробуйте так ухватиться за устройство. Неудобно даже на iPhone 6+, а уж о других и говорить не приходится. Пальцы неудобно так сгибать.

    Rainmik avatar
    Rainmik13 мая 2015
    0

    @imger, попробуйте поиграть в classic blocks. на 4,7 дюймовом экране вполне играбельно. мне все там нравится, кроме расположения кнопок.

  4. iT0xa avatar
    iT0xa13 мая 2015
    4

    Читал – думал наконец-то нормальный тетрис появился… ан нет, самую интересную игру и не добавили. Добавите тетрис и оптимизируете под 6+ – 100% куплю и дороже.
    Вообще странный у вас подход… именно в тетрис народ днями и ночами рубился, а этот шлак типа змеек и стрелялок только для красивых надписей “9999 in 1”

    Rainmik avatar
    Rainmik13 мая 2015
    0

    @iT0xa, полностью солидарен с товарищем.

    imger avatar
    imger13 мая 2015
    0

    @iT0xa, с самим тетрисом все неоднозначно в плане прав. Но я думаю он появится у нас.

    Vikont avatar
    Vikont13 мая 2015
    0

    @iT0xa, +1

  5. FAStTheory avatar
    FAStTheory13 мая 2015
    2

    Придумайте что то свое оригинальное. Эти римейки украденной классики никому не нужны в современном мире. Не забывайте что ваша аудитория в основном уже родилась в эпоху мобильного интернета.

    SOb_S avatar
    SOb_S13 мая 2015
    1

    @FAStTheory, кто будет ЦА, определяет автор. Очевидно, что в данном случае основаная ЦА — это как раз те, кто застали упомянутую игру.

    FAStTheory avatar
    FAStTheory13 мая 2015
    0

    @SOb_S, Ну тогда не стоит расчитывать на какую то прибиль изначально.

    imger avatar
    imger13 мая 2015
    0

    @SOb_S, согласен

    friend avatar
    friend13 мая 2015
    0

    @FAStTheory, не скажите. но вот idos решает все эти проблемы. Я хоть и вырос на досе, мне это довольно быстро надоедает. Хотя ностальжи все дела…

  6. Oleg avatar
    Oleg13 мая 2015
    0

    Однозначно ждем добавление самого тетриса, ну и еще помню был там “арканоид” или как я его называл тогда “теннис”

  7. ilcom avatar
    ilcom13 мая 2015
    0

    1. Хотелось бы бесплатной версии с кучей рекламы, но с возможностью ее убрать за те же 59р. Покупать непонятно что – сорри уж… Но в вишлист добавлю сейчас.

    2. У меня на такой штуке были тетрис, причем в нескольких режимах, падали иногда кубики которые могли убивать лишнее или заполнять пробел где он нужен.
    Без тетриса – совсем не айс(. Уж не знаю возможно есть какие-либо лицензионные ограничения на него.

    3. Еще был арканойд.

    4. Понимаю что совсем других денег и сил стоит, но все же мечта детства – дойдя до значимых чисел увидеть мультик))).

    5. Ну и вообще беда этой игры было быстрое надоедание. Тогда это было некритично – альтернатив не было. Сейчас – это чисто понастольгировать на часок, а для этого в любой лавчонке можно прикупить оригинал поиграть и выкинуть.
    Штука в том что у оригинальной brick game возможностей улучшить игру нет никаких. То ли дело айфон – хочешь – улучшай детализацию игры по мере прохождения (кубики становятся все меньше, а объекты все красивее), хочешь меняй правила игры – добавляй 3д и прочее что захочется. Возможности неограниченны.
    Но это все слишком затратные ресурсы разработки.

    А вот добавить ачивок, добавить социальных штук, добавить всякие бонусы – те же гонки можно ломать машинку ухудшая управляемость (при встрече с препятствиями), а можно найти ремонтный комплект – возвращая к исходному состоянию. В змейке можно при обычной игре периодически открывать какой-нть ход, пройдя в который надо пройти хитрую полосу препятствий и получить очки итп. Добавить простейший текстовый сторилайн и конечные уровни наконец, помимо классических режимов.

  8. skrizl avatar
    skrizl13 мая 2015
    0

    На тетрис вроде лицензия нужна

    FAStTheory avatar
    FAStTheory13 мая 2015
    0

    @skrizl, Нужна, они удаляют все клоны, могут жестко забанить акк

    friend avatar
    friend13 мая 2015
    0

    @skrizl, вот я об этом же думаю. Кстати, послушайте в брендятине про тетрис. Там такую заваруху устроили.

  9. Огрызок с палочкой avatar
    1

    Сам был разработчиком какое-то время. Потом бросил. Дело не всегда благодарное. Так что уважаю любого, кто довел свой проект до продаж.

  10. replay avatar
    replay13 мая 2015
    0

    Я бы сделал по-другому.

    Оставить только экран (Адаптировать только ровно под 16:9) Вертикально естесвенно. Т.е. вся игровая область во весь экрн айфона.

    Тут не так много кнопок и все можно легко перенести на простые тапы по экрану. Один тап – поворот. Два тапа – ускорить падение.

    Слайды влево и вправо – перемещение. Все эти кнопки и фоны по краям совершенно лишние) Те, кто играл и так додумаю, всеравно все смотрели на экран в основном.

    Ну и да, всякие гоночки добавить) (Они может у вас и есть, я не качал игру)

    Rainmik avatar
    Rainmik13 мая 2015
    0

    @replay, слайды и тапы не приносят удовольствия в сравнении с кнопочным управлением. Кроме того, на высокой скорости разделить один и два тапа будет невозможно (можно, правда, совсем отказаться от ускоренного падения)

    imger avatar
    imger13 мая 2015
    0

    @Rainmik, пожалуй, соглашусь с вами. Мы пробовали рисовать только экран – атмосферу он так не передает, как серый корпус и желтые кнопки. Смотрится не очень хорошо.
    Да и соотношение сторон экрана совсем другое. А классическое поле это 10х20 ячеек.

  11. Alorya avatar
    Alorya13 мая 2015
    0

    я все понимаю, но это не геймдев, а записки дизайнера. Ни единой строки, полезной для разработчика )

    imger avatar
    imger13 мая 2015
    0

    @Alorya, дизайн это составляющая разработки. А данная рубрика – просто история о разработке. Не обязательно с обсуждением кода.

    Alorya avatar
    Alorya14 мая 2015
    0

    @imger, комментарий был бы справедлив, если бы речь шла о дизайне в реалиях IOS. Какие-то особенности и хитрости, фишечки и баги системы.
    А тут мы видим просто дизайн. К разработке нулевое отношение.

  12. Hetfield avatar
    Hetfield13 мая 2015
    0

    В игру тетрис не добавить сам тетрис? – “гениально…”

  13. miller_ avatar
    miller_13 мая 2015
    0

    аналоговый тетрис рулез во все года)

  14. bykoff avatar
    bykoff16 мая 2015
    0

    Тетрис нужен! И обязательно с саунтреком (коробейники).

Вы должны авторизоваться или зарегистрироваться для комментирования.

Нашли орфографическую ошибку в новости?

Выделите ее мышью и нажмите Ctrl+Enter.

Как установить аватар в комментариях?

Ответ вот здесь