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



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

    Начнём с того, что отметим: самое важное в книге – это текст. Именно поэтому для книг очень важным является перевод, а применительно к приложениям на 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

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 36

      +2
      Все хорошо, только Вы под Хабракат забыли убрать…
      +2
      Моему брату и сестре — в самый раз! Спасибо огромное за промо-коды :).
        +1
        Молодцы
          +1
          Хорошее дело делаете, ребята.
            0
            Какая прекрасная графика и какие вы молодцы, что сохранили ее ) Спасибо вам за вашу работу, обязательно попробуем с карапузом!

            (Заметила, что при просмотре видео всплывает реклама, это как-то неуместно, может вам переложить?)

              0
              Буду ждать про поваров )
                0
                «История о Мисс Моппет»:
                WK7YW9JPAWAK

                «Сказка о Котёнке Томе»
                W3TWYJNEJWXR

                Забрал, автору спасибо!)
                  0
                  Спасибо за видео, очень интересно!
                    +1
                    Иконки у приложений не очень, как мне кажется, слишком пёстрые.
                    Их бы поаккуратней, поспокойней сделать.
                    0
                    Спасибо! Прекрасный новогодний подарок от вас!
                    Забрал Историю — RJA6P4NMJPP9
                    Котенок — 6AAJHREE3JML
                      0
                      Молодцы. правильное дело делаете.
                        –1
                        всю жизнь мечтал, чтобы картинка ещё как-то шевелилась. Может реализуете нечто циклического gif'a?
                        А ля простое видео сопровождение. Может быть даже в стиле двигается только рука, нога, голова по 1 оси, как в деревянной игрушке «Медведь, кузнец и наковальня»
                          +1
                          Прошу Вас добавить ссылки на аппстор на данные приложения, а то через несколько дней они уйдут из хот-листа и их будет трудно найти. Особенно вторую — поиск в iTunes требует ввести «Сказка о котЁнке томе», а большинство привыкли набирать через «е».
                          А в остальном — все прелестно, спасибо.
                          +1
                          Извините за наглость, а че ПРОМОКОДЫ уже закончились?
                            0
                            Для желающих ознакомиться поближе, тем кому не досталось промокодов, выкладываем ещё:
                            «История о Мисс Моппет»:
                            LJY97JFTWJ9R
                            TNTMP34LWN79
                            H66LYY9L3HKJ
                            HWLHAXPAKRXA
                            9M99HPAL34KP
                            EP9RWAA7KMAK
                            EHARL9HKHL9W
                            R39XEE9RL6NA
                            AHTL7P4L344Y
                            LWAEPMXERFLA
                            9TEMM4MMXLXA
                            ELMKKWP6YYP4
                            P466PFYWHMRX
                            7XHHN7A4RRXY
                            4W7METELRX9E
                            E97W7WXN6WJP
                            NRFYEXEL3W6J
                            Y6PWKMHE4E9J
                            H9A37PHJ33XX
                            LH3A4HWTMFWX
                            «Сказка о Котёнке Томе»:
                            NJM7AE7PNYNJ
                            3XPKHENTW36L
                            WRHYJPL3MPP4
                            9KPJ6FLHMMJP
                            R77RTL3LLF63
                            KF3YTN49W6TL
                            Y3L9YAKK6639
                            9PW9PNJX3J6A
                            ET4A3H6NNMW7
                            AJW7TP3WR9P9
                            N4LRR7HPJKKF
                            WRXKRW9MXY7M
                            NEYA74KTWLNN
                            FPEW6KLEH96T
                            PAEMYFYF69HT
                            EENLEL7YAWAF
                            9WK6WPJWWW4A
                            PWA6RK96PYLL
                            LMHWLM7TMMAL
                            TPMA6EXAMENA
                              0
                              Спасибо. Удачи в Новом Году!
                            0
                            4W7METELRX9E — забрал спасибо

                            WRXKRW9MXY7M — тоже забрал, спасибо!
                              0
                              Большое спасибо за промо коды!
                              NEYA74KTWLNN забрал!

                              С Наступающим!
                                0
                                Большое спасибо за промо коды!
                                ЗАБРАЛ!

                                9TEMM4MMXLXA
                                R77RTL3LLF63

                                С наступающим Новым Годом!!!
                                  0
                                  Забрал
                                  NRFYEXEL3W6J

                                  Спасибо
                                    0
                                    Спасибо за коды!
                                      0
                                      Спасибо за интересную статью.
                                      Было бы интересно также узнать о монетизации приложения, удалось ли окупить разработку и за какое время?
                                        +1
                                        Спасибо! Купил.
                                          0
                                          Привет,

                                          купил обе книжки не глядя, просто потому что хочется поддержать отечественного производителя :-) К сожалению имею много критики, надеюсь, ее количество не заставит вас думать, что я зол или неконструктивен.

                                          — один раз на странице «но тут кошка прыгнула и поймала мышку» программа вылетела (повторить не смог).

                                          — в регуляторе громкости фиг поймешь, какая сейчас громкость;

                                          — анимация читаемого (красного) слова весьма спорная. Слово, на котором как раз глаз, разбивается на буквы. Озадачивает.

                                          — мисс Моппетт — стр 2 и 26 — если сильно вращать кошку, зрачки вылетают из глаз. Жесть! :-)

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

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

                                          — стр 10 — блин, кто придумал звук паука? Настроение все-таки надо держать.

                                          — стр 18 — глаз на платке есть, а дырочки нет. Получился платок с глазом.

                                          — много мелких претензий по шрифтам, но тут на вкус и цвет.

                                          Еще раз надеюсь на понимание :-)
                                            0
                                            Всегда рады конструктивной критике.

                                            — один раз на странице «но тут кошка прыгнула и поймала мышку» программа вылетела (повторить не смог).

                                            Постараемся найти причину.

                                            — в регуляторе громкости фиг поймешь, какая сейчас громкость;

                                            Всё видно, может неправильно отображается на Вашем устройстве.

                                            — анимация читаемого (красного) слова весьма спорная. Слово, на котором как раз глаз, разбивается на буквы. Озадачивает.

                                            А нам нравится.

                                            — мисс Моппетт — стр 2 и 26 — если сильно вращать кошку, зрачки вылетают из глаз. Жесть! :-)

                                            Так и было задумано!

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

                                            Она нормализованы по громкости, они абсолютно одинаковы по громкости.

                                            — стр 10 — блин, кто придумал звук паука? Настроение все-таки надо держать.

                                            Настолько скучная была картинка, что надо было её как-то оживить. А как по Вашему звучит паук?
                                              0
                                              Беларусь забыли упомянуть в списке стран, думаю не я один буду благодарен если добавите. С на ступающим всех!
                                              –3
                                              Падл-Дак, Мисс Моппет — охренеть, на таких нерусских словах вырастит какой-то ограниченный полуамериканец с нерусским менталитетом.

                                              Вот например Винни-Пухе кроме Робина и самого Винни вроде как вообще нет нерусских слов.

                                              Даже бесплатно не стал бы качать и показывать своему ребенку.
                                                +1
                                                Слышать про русский от человека, пишущего слово “вырастет” через “и”, употребляющего мат, и не употребляющего запятые – смешно.
                                                  –2
                                                  и где же там мат?

                                                  про вырастит — согласен, мозг после программирования сбоит.

                                                  Ну и одно дело дух, другое — грамотность.
                                                0
                                                А почему вы не начали с детских книг отечественных авторов?

                                                А вообще молодцы
                                                  +1
                                                  Колобки, Теремки, Репки и Пушкин в App Store и так есть, не хочется переделывать, пытаться доказать, что можешь сделать лучше или по-другому.
                                                  0
                                                  А что из себя представляет каждая страница? Каждая описана программно, или есть движок и некий набор инструкций в отдельных файликах?
                                                    +1
                                                    спустя некоторое время еще раз вернулся к этому посту после того как побродил по карте средиземья от гугл.
                                                    классно! тоже хочу создавать такие красивые штуки! ваша книга меня вдохновляет)

                                                    Only users with full accounts can post comments. Log in, please.