HTML5 Phaser ECMAScript 6

Часть 41: Пошаговая Инструкция; Сокрашение Слов; Мягкий Перенос (шаг 2)

Продолжаем серию статей на тему, как все же я решился выложить игру «Учим Английские Слова с Картинками: ENGLISH LINDUO» в паблик Play Google-а и какие изменения пришлось мне внести, что бы игра не набрала отрицательных отзывов сразу в первый день. Первую часть можно почитать тут.

Первые отзывы игроков помогли решить невидимую для разработчика (меня) ошибку
Сразу после запуска, скинул ссылку Элсперу и Заксу (напомню, они тоже ведут публичную разработку игры), в надежде что они свежим глазом заметят то, что я мог упустить. Мне и самому особо не нравились термины «бонус времени» и «бонус сердечек», а тут и коллеги обратили внимание на запутанность данных терминов. Свободного места по инструкцию, в окошке не было, по этому я решил добавить название нижнему разделу: «условие сдачи экзамена», что улучшало понимание назначения этих двух параметров. А после переименовал их в «количество ошибок» и «количество таймаутов», что как мне кажется должно было восприниматься как: допустимое количество ошибок, что бы сдать экзамен =) А для пущей наглядности добавил цифру на иконку (от 0 до 4).

окошко экзамена с заголовко и новыми терминами

Как я реализовал пошаговую инструкцию в программе, несколькими строчками кода
После того как я внес правки в окошко начала экзамена, меня не переставала покидать мысль, что пользователь может не разобраться по какому принципу идет обучение. Зачем нужна сила и монетки… По этому я придумал простой способ отображать в игре пошаговую инструкцию. Конечно можно показать пару визуальных скриншотов (как я и делал во всех своих старых проектах и это существенно повышало «понимаемость» продукта), но на этот раз решил сделать что-то покруче — интерактивный туториал. Это когда игра просит игрока нажать на определенной кнопке интерфейса.

Реализовать интерактивный туториал можно несколькими способами: можно сделать изображение всей сцены и добавить только одну живую кнопку, на которую и должен кликнуть игрок; можно наложить на игровую сцену мембрану и клонировать кнопку; и наконец, можно наложить мембрану и изменить нужной кнопке z индекс. Последний вариант мне понравился больше всего НО на практике он мне не подошел. Дело в том, что части интерфейса у меня объединены в логические группы, это ускоряет манипуляции с ними. Теперь представьте, что на сцене у меня группа для кнопок, и группы для хидера и футера. Накладываем на всю сцену прозрачную мембрану и пытаемся поднять z индекс кнопке… на практике мы подымаем z индекс этой кнопки в своей групп, но относительно остальных групп, кнопка остаться на прежнем месте. Если попытаться поднять z индекс всей группе (как я не подумав попробовал сделать), то все кнопки в группе подымаются выше мембраны, вместо одной =) В результате пришлось писать код this.sbs_manager.add_to_step(step, this.button_learn), который временно переносил кнопку из ее родной группы в группу мембраны и сохранял при этом откуда ее взял, что бы потом одной командой вернуть ее обратно родителю на место this.sbs_manager.restore_from_step(step).

пример пошаговой инструкции

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

пример сокращения слов на карточках

Сложность разбивания текста на строки с нестандартным языком (мягкий перенос)
Когда мне казалось ну вот сейчас точно все готово, появилась проблема с тайским языком. Дело в том, что в тайском все слова пишутся вместе, а значит одно тайское предложение для Phaser-а это как бы одно очень длинное слово (без пробелов), которое разбивать на несколько строк нельзя. Ищя решение я вспомнил про текстовой профессор MS Word, который для красивой разбивки слов по слогам, использовал символ мягкого переноса (CTRL + «-«). К сожалению в HTML такой фишки пока нет… во всяком случае не во всех браузерах и точно не для тайского, где отдельное слово может состоять из нескольких слов (каждый из которых имеет смысл) и сбивающий программу с толку. Для этого сами тайцы используют контекст из предыдущих предложений. Но в моем случае предложения известны заранее, по этому я просто проставил спец символ между словами, а потом написал алгоритм разбивки такого предложения на несколько строк. Получилось эффектно.

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

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *