Найдены лучшие кроссовки на лето

Dev Story Буквоед. История для родителей и малышей

|
FavoriteLoading В закладки
Буквоед. История для родителей и малышей

ТЕКСТ: ЕВГЕНИЙ БРЯНЦЕВ. Привет. Я — разработчик приложений для iOS. На прошлой неделе мы с моделлером Натальей Лутцевой и программистом Михаилом Голубом выпустили забавное приложение для детей Буквоед. Это такая азбука, в которой буквами надо кормить милого, но вечно голодного персонажа. Тащишь букву или несколько к Буквоеду, он пережевывает и произносит название буквы. Приложение работает на айпаде, айфоне и айподтаче. Я расскажу, как мы разрабатывали персонажа, интерфейс и снимали ролик.

Идея
Cамая простая — монстр ест букву и сразу ее произносит. Это понятно и прикольно.

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

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

Стали прорабатывать варианты фактур. Пробовали мохнатенькие фактуры, чтобы персонаж был похожим на чувачков из Big Planet, но тут фактуры явно не катили.

Получался ковер настенный :) это явно не то. Решили делать просто матовым зеленым.

Продолжили работать с формой, анимацией жевания, прической, эмоциями и начал появляться какой-то конкретный персонаж.

Получившейся образ мы проработали в деталях и сделали рендеры всех кадров анимации.

Интерфейс для айпада, выбор фона и шрифта
Я уверен в том, что все хорошие приложения для детей до 6 лет должны быть без меню с кнопкой Start, без рекламы, а в бесплатных и лайт версиях не должно быть ссылок на полную версию. Потому, что дети жмут все подряд и не ожидают, что вдруг откроется эпстор или диалоговое окно. В Буквоеда мы даже не встроили rate me. Для большинства приложений можно избежать ненужных, непонятных этапов для ребенка. Приложение должно запускаться и быть готовым к работе. Так мы и сделали. После запуска появляется сразу весь алфавит и можно кормить Буквоеда.

Шрифт
Мы очень долго искали подходящую гарнитуру. Конечно же выбрали Букварную. Тоненькая, красивая, легкая. И сразу видно чем буквы различаются между собой. Именно этой гарнитурой раньше набирали азбуки и учебники.

Почему такой простой деревянный фон? – Все очень просто. На градиентных фонах буквы висят в воздухе. А если фон имеет рисунок дерева, то легче запоминать расположение буквы, изгибы выносных элементов. Да и просто приятней. Фон не должен отвлекать. Мы перебрали несколько цветовых сочетаний, фактур, контрастов, букв с фоном.

Остановились на зеленом фоне и бело-желтых буквах. Яркость подобрали такую, чтобы буквы были заметны и видны днем на улице. Потом подобрали максимально возможные расстояния между буквами, чтобы детские пальчики не ошибались. Строчки сделали с разным количеством букв, чтобы избежать коридоров. Асимметричные смотрятся приятней.

Озвучка
С нами согласился работать актер Александр Кудринский. Он и посоветовал нам хорошую студию звукозаписи. Работать с профессионалами очень приятно — Саша придал персонажу характер и очень забавно озвучил. На каждую букву мы делали около 20 записей — озвучка должна была получаться игровой, мультяшной, но с правильной дикцией.

Звуковые файлы для прослушки: 1.wav, 2.wav, 3.wav

Отобрав звуки принялись за иконку и надпись – логотип. Тут с первого раза получилось неплохо.

Все, можно собирать. Отдали материалы Мише Голубу. Он довольно быстро, за несколько часов собрал рабочую версию и мы при случае начали давать играть детям. Детям сразу понравилось, это было приятно.

Хоть мы и собрали рабочую версию быстро, но на то, чтобы отловить все баги и подогнать анимацию ушел примерно месяц. И ура! Миша собрал готовую версию под айпад. С ней мы уже могли начать снимать рекламный ролик.

Хорошо, когда есть друзья. Да еще с белой комнатой, двумя камерами, светом и умеющие снимать. С нами работал Алексей Антонов из студии Yatta! Мы решили сделать все просто — снять детей и то, как они играют с Буквоедом. Собрали всех знакомых мам с маленькими детьми, привезли в студию, включили свет, дали айпад, запустили Буквоеда и стали снимать. Мы очень обрадовались, что детям Буквоед понравился. Они первый раз увидели его и все эмоции сняты честно. Не знаю, правда, чтобы я делал, если бы он им не понравился) Ролик смонтировали уже через 3 дня.

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

Миша предложил следующее решение — когда тянешь влево-вправо до 30 градусов к горизонтальной оси — работает скролл. Когда тянешь вниз — буква тащится на кормление.

Так решили сделать. Запустили. Интерфейс хоть и стал работать, но срабатывание по-прежнему осталось непредсказуемым. Этого не должно быть. Добавлять кнопки скролла влево-вправо тоже не решение. Мы все думали как сделать правильно, а время шло. Мы выбрали такой вариант, когда буквы скроллятся по нажатию на одну из крайних. То есть нажал на крайнюю буквы — ряд сдвинулся на одну букву. Конечно, такой способ не “интуитивный”, зато дает четкий предсказуемый результат. Так решили и сделать. Собрали билд и отправили на проверку. Ровно через 7 дней приложение прошло проверку и попало в магазин. Мы обрадовались и стали раздавать промокоды разработчикам и друзьям, слушать отзывы. Выловили баг на айподтаче — там было две Г. На айфонах все пытались тянуть букву и скролл не срабатывал. Уже после релиза мы опять принялись думать над тем, как правильно сделать переключение и драг буквы. И нашли решение: для корректной интуитивно – понятной работы со слайдером и дрэгом надо развести зоны их срабатывания — просто опустить центральную букву на строчку ниже. Тогда все круто работает. Пользователю понятно наглядно, что именно эту букву надо тащить на кормление. А при перетягивании крайних букв срабатывает скролл и буквы летают по прикольной дуге.

Именно это решение мы встроили в обновление вместе с фиксом багов на айподтаче. Если у вас есть идеи того, как можно решить проблему с интерфейсом на айфоне другим способом — буду рад выслушать, а если она будет лучше последнего варианта, то мы даже внедрим ваш способ. Спасибо за внимание. Очень надеемся, что детишкам наш веселый Буквоед придется по вкусу :)

iPhone + iPad: $0.99 [iTunes link]

Данная история опубликована в рамках нашей рубрики Developer Story, где разработчики делятся секретами своей внутренней кухни.
Оставайся в теме. Подпишись на наш Telegram 👏
FavoriteLoading В закладки
undefined
iPhones.ru
ТЕКСТ: ЕВГЕНИЙ БРЯНЦЕВ. Привет. Я — разработчик приложений для iOS. На прошлой неделе мы с моделлером Натальей Лутцевой и программистом Михаилом Голубом выпустили забавное приложение для детей Буквоед. Это такая азбука, в которой буквами надо кормить милого, но вечно голодного персонажа. Тащишь букву или несколько к Буквоеду, он пережевывает и произносит название буквы. Приложение работает...
Прокомментировать

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

  1. ruslanred avatar
    ruslanred21 августа 2011
    0

    ооо! здорово!! отличное описание процесса!!!
    как приедет малыш с каникул со своим айпадом-тут же куплю ее ему, я как раз искал “алфавитную” програмку ему

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @ruslanred, спасибо)

    vvORDpress avatar
    vvORDpress22 августа 2011
    0

    Что-то мне это напоминает?
    http://itunes.apple.com/us/app/id402798311?mt=8

  2. iRoccka avatar
    iRoccka21 августа 2011
    0

    Можно было и промокодов дать пяток :)

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @iRoccka, к сожалению промокоды разлетелись за два дня

  3. ZESTxKiLL avatar
    ZESTxKiLL21 августа 2011
    0

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

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @ZESTxKiLL, Спасибо)

  4. Ahiless avatar
    Ahiless21 августа 2011
    0

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

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @Ahiless, Лучше, чтобы ребенок долшье смотрел на букву и запоминал связь начертания буквы с ее названием

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @bryantsev, дольше)

  5. Awaking avatar
    Awaking21 августа 2011
    0

    “Дело в том, что на айфоне было БЫВ” – исправляйте.
    Спасибо, статья действительно интересна

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @Awaking, да, что-то много автозамен ;)

  6. ttyd0 avatar
    ttyd021 августа 2011
    0

    Есть предложение – сделайте вариант “наоборот”: “Буквоед” сначала говорит букву, а потом ждёт когда её ему скормят, если не верно – выплёвывает и морщится =). В текущем варианте ребёнок кормит ему всё подряд, то, что это весело – понятно, но, по-моему скромному мнению, усвоение материала было бы лучше чередуя упражнения.

    З.Ы. Переключение режимов сделать не в игре, а в настройках, действительно, детям лишние кнопки и переключатели ни к чему.

    mikla avatar
    mikla21 августа 2011
    0

    @ttyd0, Согласен. Вариант с “наоборот” можно было бы сделать как другой уровень/режим обучения…

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @ttyd0, лучше мы сделаем, чтобы Буквоед требовал какие-то конкретные буквы и немножко толстел, если правльную скормить. А если напрвильную, то худел бы)

    vvORDpress avatar
    vvORDpress22 августа 2011
    0

    @ttyd0, Точноно, точно…
    http://itunes.apple.com/us/app/id402798311?mt=8

  7. Sergio777 avatar
    Sergio77721 августа 2011
    0

    Поддерживаю предложение ttydo.

  8. Deeen avatar
    Deeen21 августа 2011
    0

    Купил, доволен, для моего малыша когда еще чуточку подрастет будет как раз. Пока пробежались бегло по программе, и хотелось бы выразить пожелание – когда берешь 2-ве буквы, было бы здорово что бы они произносились вместе (вместо М, А, сочетание как МА…, или же стандартный набор слов – МА…ма, т.д.)

    Думаем ребенку так было бы еще интереснее комбинировать буквы что бы услышать знакомое или незнакомое слово :)

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @Deeen, пока достаточно азбуки)

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @Deeen, это правильный ход мыслей, но учить детей читать надо не по слогам. Насколько я знаю учить читать надо слова целиком, начиная с односложных. Исправьте меня, если я ошибаюсь

  9. valexv avatar
    valexv21 августа 2011
    0

    Кстати да, пусть будет такой режим наоборот. В качестве проверки усвоенного материала. А на счет сколов для айфон, а нужен ли он вообще? Пусть появляется буква, зверь ее съедает, и на ее месте появляется другая ранжиром или по алфавиту. Зачем там скрол?

    valexv avatar
    valexv21 августа 2011
    0

    @valexv, Не ранжиром, а рандомом и не скол, а скрол. Ох уж эта автозамена.

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @valexv, Ну есть буквы, которые нравятся и тем более, что подряд все делать неинтересно)

  10. rh1no avatar
    rh1no21 августа 2011
    0

    баг нашелся))
    буквы Г и Д:
    http://dl.dropbox.com/u/13142374/Bukvoed_bug.MOV
    ps: тоже ЗА поддержку идеи ttydo

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @rh1no, в новой версии уже исправлен этот баг и внедрен новый интерфейс для айфонов. Буквоед обновится через несколько дней

  11. direktor avatar
    direktor21 августа 2011
    0

    И я внесу предложение))

    В настройках сделать опцию с “десткой” фонетикой. Т.е. некоторые буквы произносить так, как они понятны для совсем маленьких детей, а именно вместо Эф – Фэ, вместо Эм – Мэ… И так далее.

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @direktor, да, ссамого начала мы записали и названия букв и звуки (глухие и звонкие). Но звучание буквы в слове зависит от соседних букв. И лучше не путать ребенка, дать ему возможность выучить именно названия букв.

    vegorov avatar
    vegorov22 августа 2011
    0

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

  12. mikla avatar
    mikla21 августа 2011
    0

    Как вариант, в следующие обновления включить ещё персонажей, возможно даже с in app purchase, по $0,99 их сделать и доп. доход иметь с этого.

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @mikla, спасибо, но я уже писал, что в детских приложениях не должно быть функционала касающегося не игры, а покупок, статусов или ретинга игры

  13. Stylusss avatar
    Stylusss21 августа 2011
    0

    Программа примитивна, а расписали процесс как-будто инфините блейд создавали, но по видео детям, вроде, нравится, но тоже предполагаю на минут 10 не больше.
    Про наоборот отличная идея! А так программа глупая.

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @Stylusss, если бы вы принялись учить названия букв с нуля, она бы не показалась вам примитивной, а наоборот — максимально удобной и продуманной

  14. DanSmir avatar
    DanSmir21 августа 2011
    0

    Ждем хакнутой версии ;)

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @DanSmir, она стоит того, чтобы купить, а не воровать ;)

  15. rh1no avatar
    rh1no21 августа 2011
    0

    DanSmir, жди бан))

  16. snake302 avatar
    snake30221 августа 2011
    0

    Брату очень нравитсо)) рад, что есть ткие разработчики) Спасибо!

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @snake302, рады, что есть для кого делать)

    bryantsev avatar
    bryantsev21 августа 2011
    0

    @snake302, кстати, у нас еще есть две бесплатные клевые детские программы, думаю тоже понравтся

    llirikos avatar
    llirikos22 августа 2011
    0

    @bryantsev, названия в студию )

  17. ONESTEP22 августа 2011
    0

    А как стать художником для рисования приложений? програмить я не умею, а всякие красивые штуки нарисовал бы

    bryantsev avatar
    bryantsev22 августа 2011
    0

    @ONESTEP, надо просто много рисовать и найти того, кому это все понравится

    Артур Малосиев avatar
    Артур Малосиев23 августа 2011
    0

    @ONESTEP, надо войти на форуме в раздел Поиск работы для разработичиков и запостить пост о себе. Вас заметят.

    encodeGDS avatar
    encodeGDS27 августа 2011
    0

    @ONESTEP, По поводу рисования графики для игр пиши мен на мыло. ([email protected]). Думаю что-нибудь да сообразим.

  18. ArTiKo avatar
    ArTiKo22 августа 2011
    0

    сПокольку ребёнок как раз вошёл в возраст “буквоедства”, на айфонах семьи есть практически все имеющиеся в русском аппсторе азбуки/буквари. И ребёнок их активно юзает!.. После прочтения данного материала таки купил буквоеда(ранее, сталкиваясь с ним в аппсторе, игнорировал поскольку не вызывал никакого интереса)… Что хочу сказать – не знаю как прога выглядит и юзается на айпаде, но на айфоне – это форменный кошмар! – анимация убогая, герой прорисован как инопланетяне в голливудских фильмах двадцатилетней давности… Управление настолько ненативно по отношению к концепции мультитач от эппл, что пользоваться программой не хочется. – Это я на Wndows CE тапал стилом(пальцем) куда-то для того чтоб подвинуть контент. Apple подарил нам мультитач-жесты! И та скорость, с которой дети их усваивают(самостоятельно!!!) однозначно показывают степень их нативности! Так почему программка для детей ХХI века пытается вернуть их в эпоху динозавров?.. И не надо нам тут рассказывать про то что бедный сенсор путается в управлении – мы знаем что это не так(конечно при условии что дизайнер интерфейса профи).
    – Вполне предсказуемо – ребёнок скормил две буквы и сказал “не нравится. я лучше лягушку конфеткой покормлю” и запустил Cut the Rope… :)
    В общем, неуд вам, господа газработчики!

    bryantsev avatar
    bryantsev22 августа 2011
    0

    @ArTiKo, в новой версии отличный интерфейс и нет багов. На афйоне и аподе тач работает отлично.

    vvORDpress avatar
    vvORDpress22 августа 2011
    0

    @ArTiKo, Вот это попробуйте http://itunes.apple.com/us/app/id402798311?mt=8

    uzipof avatar
    uzipof23 августа 2011
    0

    @ArTiKo, Честно говоря именно “геймплей” отталкивает меня от покупки данного приложения, по этой же причине моему ребенку не понравилась Живая азбука – нет действий, листать буковки конечно хорошо, но не очень интересно, здесь мне кажется так же…, а вот “Азбука” обзор которой был недавно на этом сайте пришлась по душе, она правда очень хорошая – ему нравится двигать предметы и слушать стихи, некоторые он уже начал повторять =)…

    Как по мне так это правда занятие на несколько минут(сужу только по своему ребенку), поскольку ребенку тяжело усидеть на одном месте, кормя монстра буквами, но кроме как произношение – монстр не производит каких либо действий, он не подпрыгивает от радости, не читает стихи про букву, в него нельзя поторкать пальцем, он статичен 90% времени которое проводит ребенок с приложением, именно игнорирование детской психологии и восприятия игр то что останавливает меня от покупки приложения… Это конечно ИМХО, но основано оно на наблюдениях за ребенком и то как он “играет” с азбуками на моем афоне.

    ArTiKo avatar
    ArTiKo26 августа 2011
    0

    @uzipof, Живая азбука нам понравилась – дизайн хорош. И хоть интерактив не очень большой, мой регулярно в ней копается – там медийки достаточно много.
    Азбука, которую тут обозревали мы тоже юзаем. Мой нашёл в ней чит-код!!! :) – заставляет азбуку читать стишки хором из двух дядь сразу!!! Я офигел! :)
    Оказывается для этого по стишку надо тапнуть не пальцем, а локтем! Я когда первый раз увидел этот жест, чуть в осадок не выпал! :) Правда вместо детского локтя сгодятся два взрослых пальца как оказалось – срабатывает практически всегда…

  19. bryantsev avatar
    bryantsev25 августа 2011
    0

    Сегодня вышла версия 1.1 с новым клевым интерфейсом для айфона и айпод-тача в которой иcправлены все ошибки!

  20. ArTiKo avatar
    ArTiKo26 августа 2011
    0

    Ну вышла новая версия… Обновился… Как было на 4ом айфоне две буквы “Г”, так и осталось… Буквы теперь скролятся. Это конечно хорошо. Но почему у скрола нет инерции? – Одним свайпом можно запросто с буквы А до Я пролистнуть, что у ребёнка как раз постоянно и получается!.. Почему нельзя скормить хомячку соседние от центральной буквы? – Коль скоро они тянутся пальцем – это было бы логично. Потом, почему соседние буквы располовинены? Неужели нельзя было сделать видимую “параболу” с зонами уменьшения(линзами) слева и справа? – Чтоб буква по центру была большая, а крайние маленькими, но видимыми полностью. Ну или чтоб они были в виде пиктограммок-подсказок с указателями – туда листнёшь, на букву С попадёшь, обратно двинешься – к П вернёшься. Такое впечатление складывается, что прога предназначена для скучных корпоративных нужд, и безусловно рассчитана на взрослого, усидчивого представителя офисного планктона с высшим образованием – настолько зануден интерфейс…
    И опять – как верно подмечено выше – персонаж статичен и анимирован так, что живым не выглядит вообще. Не партнёр по игре, а страшила.
    В общем, всё же неуд Вам, господа разработчики! :(

    bryantsev avatar
    bryantsev27 августа 2011
    0

    @ArTiKo, Буквы видны наполовину, чтобы сосредоточить внимание на той букве, которую сейчас будут произносить и не путать ребенка.
    Нельзя скормить соседние буквы, потому-что появляется путаница и ложные срабатывания в интерфейсе — мне кажется, вы невнимательно прочли статью.
    Размер букв не меняется — ребенку должны быть хорошо видны все буквы.
    Мне кажется в было бы тупо делать пиктограмки-подсказки-указатели “обратно двинешься – к П вернёшься” для ребенка, который еще не умеет читать, а учит буквы. Согласитесь.
    Основная задача, чтобы ребенок брал какую-то букву и сразу узнавал, как она называется. Сам искал буквы. Детям не нужны указатели.
    Интерфейс не занудный. Он простой. Не надо этого боятся. Вы сейчас читаете черным по белому, не занудно ведь? ;)
    И самое главное, что Буквоед сделан для детей. Хорошо, просто и главное понятно. Не для офисного планктона, не упячка. Неверное представление, что для детей надо делать все размалеванное, переливающееся и с мишкой. Для них надо делать просто и хорошо. Им нравится. Они просто играют и учат буквы. Проверьте)

  21. Walkmanoff avatar
    Walkmanoff2 сентября 2011
    0

    Уважаемые товарищи разработчики и их потенциальные клиенты. Выкладывать непроверенную версию программы ценою в 1 бакс в аппстор совсем не дело. Не айс. Впредь буду относиться к вашим программным продуктам с осторожностью. НЕ РУКОМЕНДУЮ и НЕ СОВЕТУЮ НИКОМУ. Уважающая себя и своих клиентов компания так не делает. Неуд.
    http://www.youtube.com/watch?v=JmK38RkQVAM

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

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

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

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

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