
Игрушка для самых маленьких Стирайка

Идея была очень простой, хотелось написать игрушку для детей, которая будет работать на мобильных устройствах. Мысль рисовать арт самому была отброшена сразу и бесповоротно.
Общаясь с дизайнером Ниной мы выделили базовые вещи которые должны быть в игре:
- игровой процесс должен быть простой и понятной детям, даже тем, которые ещё не умеют читать.
- графика обязана быть красочной и привлекательной.
- озвучка приятной для слуха, как взрослого так и ребёнка.
- разработка должна быть простой и интересной.
- игра должна работать быть адаптирована под мобильники и планшеты.
Процесс подготовки дизайна был запущен и я принялся за разработку прототипа приложения.
Разработка
Несмотря на то, что приложение простое. Разработка получилась довольно занятной. По факту движок приложения переписывался минимум три раза. При том, что сама разработка велась в свободное от основных задач время. Чистого времени разработки получилось, примерно, полторы недели. Но весь этот процесс позволил прощупать все этапы производства мобильных приложений.
До Stage3d
Ок, есть два слоя. Слой картинки и слой поверхности которую нужно сделать прозрачной. Логично предположить задачу можно решить с использованием слоёв, и то что её решили не один раз и придумывать свой велосипед смысла нет. Ищем, находим два отличных, проверенных временем, примера:
Erase and Redraw an Image
и
Erase an image using your mouse in AS3
Радуемся, впиливаем код в приложение, тестируем на эмуляторе. Круто всё собралось, работает. Радость резко оканчивается при первом же запуске на реальном устройстве. Всё очень сильно тормозит, не играбельно.
Начинаем думать, а что если рисовать кривыми? Ищем. Ага, такой велосипед тоже есть у Nicolas Barradeau:
smooth drawing
Опять радуемся, но уже с опасением что на устройстве будет тормозить. Проверяем на устройстве, действительно жутко тормозит.
Начинаем копать дальше.
Появляется мысль. Если режим смешивания слоёв Erase не поддерживается в GPU режиме на устройстве по умолчанию, то может есть обходной путь?
И такой путь есть.
Stage3d и Starling
В Starling нашлась такая замечательная штука как RenderTexture, на её основе можно не только рисовать но и стирать. Ещё в Starling есть хорошая поддержка multitouch. А главное есть скорость и никаких тормозов. В общем кодинг был приятный и безболезненный.
Был, пожалуй, только один сложный момент. На некотором этапе приложению перестало хватать памяти, но это решилось упаковкой текстур при помощи утилиты texturepacker. Утилита платная, но денег своих стоит.
По плану игра должна была поддерживать как формат телефонов, так и планшеток. Адаптация под iOS и Android прошла довольно гладко, особенно под iOS где нет такого множества экранов как в Android.



Тестирование
Парк устройств нормальный, так что тестировать было интересно. Но самое главное устройство которое нужно иметь для тестирования это iPod Touch 4й генерации. Это устройство имеет всего 256 MB памяти и экран ретина. И ему очень, очень тяжко работать с графикой. Ну по крайней мере так показалось в процессе тестирования.
Публикация
Я очень волновался по поводу публикации приложения, и не рассчитывал что всё пройдёт гладко (особенно при тестировании отладке на iPod Touch 4й генерации). Но в аппстор приложение прошло с первого раза.

Play Google как я понял, так вообще не имеет явной модерации.
Ещё необходимо было промо видео для игрушки, в этой задаче помогло то, что AIR он и на десткопе прекрасно работает. Кстати, если кто знает хороший способ снять видео с экрана iOS или Android, то расскажите очень интересно.
Appstore
Платная версия:
WipeIt on the appstore
Промо коды:
MEXLLJA9HKKW
NMNJWK6E7NK3
A44FTPXMJF3R
T3TH4N93FLY9
PW96LR4FL974
AY9ALK6976R9
WX7XW6NM9L64
LXJ9KY37H6MM
34RKK7PFH97A
KWWHE9L7ML3F
Play Google
Платная версия
WipeIt
Бесплатная с рекламой
WipeIt free
Необходимые доработки
Ложка дёгтя, или то что сейчас не нравится мне в игре.
1) Кнопки звука должны иметь положения вкл/выкл
2) Обработку сравнения изображений нужно вынести в отдельный поток, благо в AIR 3.4 появились потоки (workers).
3) Добавить возможность смены языка на лету. Сейчас это привязано к локали телефона.
4) Убрать переходы по клику на лого на экране выбора уровня и игровом. Дети случайно тыкают.
5) Было бы круто адаптировать игру на планшетках в горизонтальном режиме. Сейчас доступен только вертикальный. А детям удобней играть когда iPad лежит/стоит на подставке и его не нужно держать руками.
6) Доделать и выпустить веб версию игры.
7) После всех правок выложить бесплатную версию с рекламой на appstore.
Вопросы, баги, пожелания в комменты.
Комментарии (30)
iPhone 4S (без джейлбрейков) — после сплешскрина показывает белый экран и все.
На iPad 1 не проверял — не хотел еще один промо-код тратить.
Можешь поставить support.apple.com/kb/DL1465 вот такую штуку.
Подключить телефон,
перейти на вкладку Console,
тыкнуть Clear console,
запустить игру и посмотреть может что дельное упадёт в консоль.
Sep 23 16:51:59 iPhone-4S-Alex kernel[0] : launchd[1765] Container: /private/var/mobile/Applications/3E8AD265-4FD9-4A4D-B80F-0F1400F0B52F [69] (sandbox)
Sep 23 16:51:59 iPhone-4S-Alex kernel[0] : launchd[1766] Builtin profile: PasteBoard (sandbox)
Sep 23 16:52:59 iPhone-4S-Alex SpringBoard[15] : Posting 'com.apple.iokit.hid.displayStatus' notifyState=0
Sep 23 16:52:59 iPhone-4S-Alex SpringBoard[15] : MultitouchHID: detection mode: 3->255
Sep 23 16:52:59 iPhone-4S-Alex UserEventAgent[12] : DEBUG: Changing screen blanked state: 1
Sep 23 16:52:59 iPhone-4S-Alex UserEventAgent[12] : DEBUG: We could backup; waking backupd to decide
Sep 23 16:52:59 iPhone-4S-Alex UserEventAgent[12] : TRACE: <MBManagerClient: 0xfe2f080> establishing connection with daemon…
Sep 23 16:52:59 iPhone-4S-Alex UserEventAgent[12] : TRACE: <MBConnection: 0xfe2edc0> sending {
command = kMBMessageWakeUp;
}
Сегодня обновился до 6-й версии, все равно белый экран.
Возможно проблемы с памятью.
У меня 4s с ios 6 работает без вопросов.
П.С. Не забудь поспамить на сайты / форумы по теме…
iPad 3 — работает почти без тормозов, но не идеально.
Что же там такого что памяти не хватало? Статичные картинки, да отрисовка.
Под Андроид решается несколькими прогами, которые требую прав рута. Под iOS не нашел, но у вас же интерфейс одинаковый, можно снять только для Андроида. Да и на Апп Сторе видео не покажешь.
В мобильном Air, говорят, пока их нет.
Кривые руки позволили забить всю память картинками.)
Так и есть. Ну как сделают так в поток вынесу. Сейчас из за этого есть притормаживания.
For mobile, Workers will not be introduced on mobile for ActionScript Workers 1.0 but in a future release. We have plans on how to make this work on mobile, but it was too short to make it happen. It gives also a way for developers to start using it on desktop very soon, get used to it and use it on mobile later on, with I am sure some feature requests
Наверно это уже придирки, а не «ложка дегтя», но если «раскрасить» картинку по периметру — приложение поздравит с раскраской )
Раскраску считаешь в процентах от общей картинки?
Вот вариант решения:
forum.starling-framework.org/topic/screenshot-via-context3ddrawtobitmapdata
Но тестировать всё желательно на реальных устройствах.
en.wikipedia.org/wiki/List_of_ARM_microprocessor_cores
Графика в игре понравилась, симпатично оформлено. Иконка вообще отличная. А это в деле мобильных приложений, особенно для детей, очень важно. Некоторые из раскрашиваемых зверушек я правда уже видел в других приложениях — раскрасках (ежа и панду например). Это видимо клипарт какой-то?
а вот с геймплеем не все пока ясно. прыгает с выбора картинки на раскраску и обратно, пальцем пока не водит, только тыкает и до конца ничего не раскрашивает. но это нормально, ребенку нужно привыкнуть и понять, что ему нравится делать в этой игрушке.
единственный серьезный трабл со стороны игры это все таки тормоза. Когда тестил я, делал это неторопливо и медленно — они были не так заметны. Но когда стал смотреть как играет дочка — стало ясно видно лаги — как картинка реагирует с заметной задержкой после нажатия. Это может влиять и на то, что ребенок не хочет задерживаться на раскраске. Так что необходимость в оптимизации еще есть, не знаю как с возможностями в случае AIR.