[Dev Story] Игра «Пазлы: Маша и Медведь» для iPad

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

Сложная — простая игра. (Максим Кочурин)

Идея сделать адекватный пазл для детей родилась как-то сама собой. Ну не то, что бы прям спонтанно – но в воздухе витала идея сделать что-то с популярным брендом «Маша и Медведь» помимо продажи всех серии в одноименном приложении. Мой выбор пал на пазлы, как на самую легкореализуемую игровую механику (это я тогда так думал).

Шаг 1. Изучение рынка

На рынке (читай в AppStore) – полный мрак в этом направлении. То, что я нашел – не дай Бог. Попадались, конечно, интересные экземпляры – как отечественные, так и западные, но что бы вот так взять и сказать «Вау!» — нет. Отдельные «фичи» — да, но общее впечатление – не очень. Идея укрепилась, и появилось обоснование продолжить.

Шаг 2. Давайте поиграем!!!

Я купил несколько «физических» пазлов (реальных, в «Окее») и собрал команду (программиста и дизайнера) в конференц-зале на «совещание»:). Это было эпично.:))) Особенно порадовало лицо сотрудника из суппорта после его вопроса: «А что вы тут делаете?» и нашего ответа: «Работаем»…
В общем, мы наигравшись вдоволь и поняв механику пазлов не понаслышке, решили, что сделать их круто для iPad– вполне реально и я начал писать ТЗ, рисовать схемы и мы… отвлеклись так месяца на 3 на другие проекты – такое бывает.

Шаг 3. ТЗ (техническое задание)

По понятным причинам скинуть все ТЗ не представляется реальным, но некоторые выдержки все таки дам.
1. Сделать принципиальную схему приложения, расписать переходы по всем экранам (поверьте, такая схема поможет в итоге всем, проверено).
У меня это было примерно так — схема

2. Расписать все экраны и набросать макеты в любом редакторе:
Пример ранних макетов и того, что в итоге вышло (все-таки дизайн – великая силища):
1. Главный экран
2. Магазин
3. Экран информации
4. Менюшки
5. Начало игры
6. Игровое поле

3. Расписать схему: у нас схема была простая – создать шаблоны «нарезки», подгрузить с веба картинки и уже программно их «резать». Быстро. Красиво. Практично. А на практике – долго, трудоемко, много цифр (координаты, координаты, координаты)…
Не буду грузить подробностями, не в них соль. Как обычно — прописали поведение, фичи и т.д. Обсудили с программистами, дизайнерами, директорами – собрали «альфу» и протестировали (у нас есть замечательный тестер – маленький сын генерального директора :)).

Шаг 4. Простое-сложное

О простом:
В общем, фичи, которые мы туда впихнули и, соответственно, считаем, что придумали (часть из них получились настолько естественными, что как-то и не фичи в общем-то). Но что сделано, то сделано:)
1. Детский режим. Главное в детской игре для меня было «не заставить ребенка почувствовать себя неудачником» — в жопу хардкор (туда же и переворачивание пазлов).
2. Прозрачность. Пазлы, на поле, с которыми мы сейчас не взаимодействуем – прозрачные (почти). Хотя есть минус тут – после тестов выявился процент людей, который любит собирать частями. Ну тут всем не угодишь.
3. Авто подтягивание. Ну, это вообще естественно. Но многие опробованные мною игры были чудовищными в этом плане – я хочу собирать пазл, а не попадать в пиксели. Потому – авто подтягивание. В детском режиме – супер авто подтягивание.
4. Подсветка. Под девизом – «Отдай ребенку айпад и забудь». Каждый следующий шаг для комфортной игры – подсвечивается.

Эти и остальные фичи можно посмотреть в самой игре – она тут

Сложности:
1. Юристы – каждый скриншот прикреплен к договору в виде цветной картинки. Маразм, но без этого, как я понимаю, в мире законности — никуда.
2. Размеры – каждый пазл – под все размеры….уххх…
3. Монетизация – в итоге решили – лучше продавать все паком с огромной скидкой. Покупать отдельно на 50 серий в будущем – все равно не вариант. (Тут бы мнения послушать хаброжителей.
4. Пиксели – шаг влево, шаг вправо – дыра!!!!
5. Развитие – а вот тут как раз сложностей не очень много – загрузка своих фото, другие картинки (Лунтик и другие) и так далее.
6. Тормоза – до сих пор в некоторых моментах хотелось бы шустрее…

И как вывод, кратко: делать игры – прикольно.Посмотрим, насколько прибыльно, но что это прикольно – это факт. Мне понравилось, будем продолжать.

Первый опыт программирования под iOS — «закодим Машу» (Сергей Краевский)

Пазлы по мотивам известного всему прогрессивно мыслящему человечеству мультика «Маша и медведь» стали моим первым опытом написания приложений для iOS. Можно, конечно, в красках расписать о незабываемых первых впечатлениях от работы с макосью, Xcode и прочих шагах на пути к становлению iOS-разработчиком. Но лучше остановлюсь на ключевых моментах.

Первое, с чем пришлось столкнуться (кроме ужасных хоткеев в IDE) — это синтаксис Objective-C. У него есть свои минусы, но с ними вполне можно свыкнуться и с должной долей комфорта писать приложения. Если есть опыт программирования на C/C++, то начать писать можно едва ли не в первый день изучения языка. Стандартная библиотека вполне неплохая, большинство базово необходимых вещей в ней присутствует, плюс, можно использовать код, написанный на C и C++ — например, у нас используется физический движок Chipmunk, можете сами догадаться в каком месте приложения ;). Главные недостатки, на мой взгляд — многословность языка (даже 100 символов на строку иногда не хватает); контейнеры, в которых нельзя хранить примитивные типы; отсутствие перегрузки операторов. Тем не менее, повторюсь,- писать на нем вполне можно.

Из эппловских фреймворков понравился CoreData — для работы с наборами данных, с помощью которого очень удобно отслеживать изменения в моделях данных. Это, плюс Key-Value Observing облегчает взаимодействие и уменьшает количество связей между частями программы.

Язык — языком, но надо писать приложения. Кроме стандартных трудностей при переходе на новую платформу, которые решаются чтением документации и stackoverflow, встретился ряд неожиданностей и проблем, несколько более нетривиальных.

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

Еще внезапно оказалось, что нет стандартной реализации VK API (ага, я ленив), и на эту тему есть лишь пара статей. Пришлось делать небольшую библиотеку самому, благо, особых трудностей при этом не встретилось.
С непривычки долго ругался на горизонтально скроллящуюся таблицу, в которой ячейки приходиться изысканно поворачивать на π/2.

Для внутренней подсветки ячеек пазлов я хотел использовать CoreImage, но, как выяснилось, скорость работы у него, хмм… ну неудовлетворительная. По результатам недолгих поисков нашлась просто шикарная библиотека работы с изображениями: GPUImage (https://github.com/BradLarson/GPUImage), в которой имеется огромное количество функций обработки, и очень быстро работающих.

Отдельно стоит сказать про поддержку устаревающих версий iOS и первого iPad. Здесь для меня также крылась пара подводных камней — в частности, блокирующая анимация UIView; или то, что не вызываются метод UIViewController'а viewWillAppear. В 4й iOS также пришлось отключить расхваленную мной библиотеку GPUImage — при работе с ее методами приложение просто падало. А на первом iPad очень удобно оказалось тестировать ситуации с получением предупреждений о нехватке памяти =)

Как я «резала» Машу...:) (Наталья Маркина)

С чего начались «Пазлы: Маша и Медведь»? Было когда-то у нас приложение про Майкла Джексона со встроенной мини-игрой, пазлами, и супер-популярное приложение Маша и Медведь. И неожиданно нашему проджект менеджеру пришла идея объединить пазлы и Машу и сделать удобное детское приложение.

И понеслась: накачали все возможные приложения с App Store, играли, оценивали, отмечали в них плюсы и минусы, и думали как создать свое идеальное приложение. Купили настоящие наборы пазлов, мы несколько часов просидели в конференцзале, изучая вроде бы простую игру.

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

Вообще, когда придумываешь что-то для детей, думаешь как уловить и задержать внимание ребенка, сам в него невольно превращаешься. «Нельзя заставлять детей долго ждать», «некоторые дети еще не умеют читать» – поучал нас проджект менеджер. Поэтому большинство кнопочек имеют графическое представление. Чтобы в пазлы смогли играть совсем малыши, мы придумали детскую кнопку, которая подскажет куда поставить нужную детальку, правда теперь и взрослым, не хочется от нее отказываться.

Вот так с любовью и вниманием к детям думали мы над каждой кнопочкой.
С технической стороны, возникли сложности только с «нарезанием» шаблонов деталек и их позиционированием. Тут пришлось работать в тесном сотрудничестве с программистом, проверяли чтобы детальки как следует «стыковались», «перерезали», «подтягивали» по пикселям детальки, и если бы не терпение программиста, неизвестно какими бы получились наши пазлы.

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

Запускаем «Машу» в космос (Светлана Кочурина)

Это наша первая игра, поэтому к освещению игры мы подошли очень ответственно. Ознакомились с разными историями разработчиков о том, как они продвигали свои игры… что «зашло», а что не «зашло». Плюс был уже хороший опыт в продвижении iOS-приложений. В общем, расскажу, какую кампанию мы планировали к запуску игры «Пазлы: Маша и Медведь». Если будет интересно, позже напишу, что из этого получилось, а что нет.

Подготовка

1. Просмотрела все возможные игры-пазлы в App Store. Составила SWOT-анализ.
2. Выписала основные «фичи» нашего приложения.
3. Выбрала основные площадки для публикации:
Популярные сайты тематики iOS – размещение статьи/банера;

• ukrainianiphone.com
• planetiphone.ru
• appleinsider.ru
• ipod-touch-max.ru
• iphoneapps.ru
• ipaded.ru
• procontent.ru
• ipadstory.ru
• 4ipad.ru
• Apps4all

Сайты, которые специализируются на публикации пресс-релизов;

• app100.ru
• pressuha.ru
• press-release.biz.ua
• livebusiness.ru
• press-release.com.ua
• forpress.ru

You Tube – съемка промо-ролика и его распространиение;
Форумы родителей – размещение статьи/банера;

• mosmama.ru
• crazymama.ru

Сайты, направленные на игры iOS – размещение статьи/банера;

• ipadmania.org
• ipadzona.ru
• games-tv.ru

Сайты, посвященные детским приложениям и играм на iOS – размещение статьи/банера;

• geekdad.ru
• babyipad.ru
• kidsreview.ru

AdMob – реклама как в наших приложениях(Home Ad), так и в других;
Кросс-ссылки в наших приложениях на игру;
Соц.сети – Вконтакте, Facebook, Twitter – опять таки как на наших страницах, так и реклама в других группах по тематике iOS, «Маша и Медведь», а также в группах посвященных воспитанию детей;
Хабр:) — размещение пресс-релиза на нашем блоге компании.

Реализация

Сейчас работа по продвижению в процессе, по результатам месяца — напишу отдельную статью, где расскажу про тонкости Rus AppStore (возможно, даже с цифрами)

UP: За сутки в App Store — 7-е место в ТОП-бесплатных приложений iPad — так что система работает, с меня статья 100 пудов.

Всем спасибо :)

Автор: MaksimKochurin