Pull to refresh

Сказка о разработке интерактивных книг

Reading time 5 min
Views 18K


В этой статье мы хотим поделиться нашим впечатлением и опытом о разработке двух интерактивных книг для детей: «История о Мисс Моппет» и «Сказка о Котёнке Томе».

Начнём с того, что отметим: самое важное в книге – это текст. Именно поэтому для книг очень важным является перевод, а применительно к приложениям на App Store: для книг-приложений, очень важна качественная локализация.

Читая книгу-приложение, дети и родители больше всего внимания обращают на интерактивность, на анимацию, на красочность и яркость картинок, и в последнюю очередь на буквы. Однако в отличие от англоязычных детей, для которых стараются разработчики всего мира, русские дети не так избалованы наличием на App Store интерактивных книг на русском языке с озвучкой, то есть книг для самых маленьких, где подсвечивается читаемый текст, и можно послушать каждое слово по отдельности, или даже отдельную букву в слове! Такие книги помогают изучать языки.

Мы решили делать интерактивные книги на русском языке с озвучкой текста.

Поиск книг


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

Так как мы хотели делать наши книги для детей, то текст в таких книгах должен быть простой и его должно быть мало. Картинки должны быть яркими и интересными. Именно такие книги писала в начале прошлого века Беатрикс Поттер. На английском даже существует термин picture book, в определение которого немаловажный вклад внесла Беатрикс Поттер. Из всего перечня книг, написанных замечательной писательницей, для первой пробы была выбрана детская сказка “История о Мисс Моппет”, очаровательная история из жизни кошки и мышки. Полученный результат нам нравится, но судить не нам, а нашим читателям.

Сейчас же мы выпустили приквел истории, рассказанной в нашей первой книге – это «Сказка о Котёнке Томе». Книжка увидела свет в сентябре 1907 года, и с тех пор является классикой английской детской литературы. Замечательная и добрая сказка рассказывает о манерах и как детям вести себя. Мы старались, используя во второй книге, все старые наработки, сделать еще более качественно, и интересно. Новое приложение получилось, на наш взгляд, еще лучше, и мы будем продолжать серию.

Подготовка графического материала


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

Нам попадалось несколько интерактивных книг, где использовались старые картинки. Чаще всего в них не все объекты реагируют на нажатие, либо объекты не вырезаны из заднего фона, смотрится, прямо скажем, некрасиво. Мы же решили разрезать картинки так, что весь задний фон будет дорисован. На каждую картинку необходимо было потратить много кропотливой работы по вырезанию и дорисовке недостающих частей.


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


В нашу команду входят профессиональные программисты, однако опыта разработки под iPhone ни у кого не было, и это было большим минусом.

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

Важным вопросом является правильный выбор Фреймворка, на котором происходит разработка приложения.
В качестве Фреймворка был выбран Cocos2d, он очень популярен, и много приложений в топ сделаны именно на нем. Cocos2d обладает отличной документацией и является открытым кодом, который отлично закомментирован и предельно прозрачен.

При выборе физического движка С++: Box2D или С: Chipmunk, выбор был сделан в пользу C++.
При программировании книг мы столкнулись со многими проблемами, связанными, в том числе и с тем, что целевая платформа мобильная и в ней ограничены ресурсы, так же большой проблемой была многопоточность, и мультитачность. Однако мы надеемся, что добились стабильности наших приложений.


Верстка текста


Верстка текста очень не легкое занятие, учитывая, что он должен быть растянут и должен быть сверстан динамически в программной среде. Зато векторный шрифт даже на iPhone 3, вполне читаем, не смотря на маленький масштаб.

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


Слева направо: нерастянутый текст; плавающее расстояние между словами; плавающее расстояние между буквами и словами.

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

Каждому слову необходимо сопоставить звуковой файл и время звучания слова.

В общем, подводя итог, можем сказать, текст занимает до 30% времени разработки. Но с другой стороны мы же делаем книги, и даже странно, что текст отнимает не больше половины времени.

Озвучка


Если предмет в книжке не реагирует на нажатие звуком, то это вызывает непонимание и разочарование! Подбор звука имеет огромное значение. Все звуки должны гармонировать между собой. Они должны быть выровнены по громкости, должны быть без шумов, тресков, приятными на слух. Только после того, как мы добавили звуки, книги стали оживать.

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

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

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

Итоги


Разработка пробного приложения заняла у нас около 3 месяцев. Вторую книгу, не смотря на то, что она сложнее и больше, мы сделали всего за месяц, притом, что велись постоянные работы по усовершенствованию общей основы обоих приложений, например мы добавили веревочки как в “Cut the Rope”.

На следующих видео можно кратко ознакомиться с тем, что у нас получилось.




Ссылки в App Store:
История о Мисс Моппет FULL версия
История о Мисс Моппет Lite версия

Сказка о Котёнке Томе FULL версия
Сказка о Котёнке Томе Lite версия

Для желающих ознакомиться поближе ПРОМОКОДЫ:
«История о Мисс Моппет»:
EXMWAYR9Y99A
LTYKJ3FYF6YL
XX9JA3HRNRKX
WRPLJ736FKNH
AR73K9RYLF96
ETP773379HY4
RFA9X4L96TFP
W3KNYFPATM9F
AWA7HJKLW9KA
7KL4APPNRYWT
JXPEPRFNAL4Y
N7YMH6RRF4PE
47NEAWM4W9WK
WK7YW9JPAWAK
RJA6P4NMJPP9

«Сказка о Котёнке Томе»:
TNEX4EEJNYHE
WPYFMF4LRTLN
J9F96XH9A4FK
FKR33E633LFR
7K3K6XPNP3MW
7YKTKLX6HR3L
R3Y9TW7HY4MH
X3NFJALARTAE
KTHYN6Y97KH4
TPYTTAAA3HNX
P3RHNW6XWHMN
WANWP7MTJ3K4
6AAJHREE3JML
66HHRP6L4A4J
W3TWYJNEJWXR
Tags:
Hubs:
+25
Comments 36
Comments Comments 36

Articles