HTML5 Phaser ECMAScript 6

Часть 20: Подготовка данных для игровой сцены

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

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

Кроме двух словарей (язык пользователя и изучаемый язык) мне также нужны изображения и аудио с произношением слова. Для ускорения загрузки сцены, графику я решил поместить в атлас изображений. Как быстро, просто и главное БЕСПЛАТНО создавать атлас изображений я расскажу в отдельном посте (а также как автоматически конвертировать svg в png). В Phaser есть возможность создавать аудио атлас, но разбор как это сделать, я отложил на потом.

Имея все необходимые данные для урока, я их подгрузил в preload() методе сцены. Делается это по тому же принципу, как мы подгружали базовые ресурсы игры в Preload сцене (для загрузки JS файлов надо использовать метод load.script()). Обратите внимание, по завершении загрузки, фоновое изображения как и полоска загрузки автоматически удаляется с сцены.

эркан изучения новых слов

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

На сцене в Tiled я поместил только одну карточку, а остальные добавил программно. Сделал я так по двум причинам: во первых мне все равно придется обновлять значения иконок и текста для каждой карточки, во вторых мне нужно было их перемещать по экрану (менять их x координату). Для себя я сделал вывод: Tiled и любой другой редактор подходит только для генерации статичных интерфейсов, но динамику по любому придется делать программно.

карточка в Tiled редакторе, bg слой пришлось отключить, он почему то всегда поверх остальных

Исходя из вышеупомянутой логики, макет карточки я тоже собрал в Tiled редакторе. Такой подход даст мне возможность менять дизайн карточки в будущем в визуальном редакторе. Насколько это правильно, покажет время. Генерация карточек довольно простая процедура, стоит только обратить ваше внимание на то, что группе можно задать класс создаваемых объектов. По умолчанию это Phaser.Sprite, но мне надо создавать объекты LessonCard

this.question_group.classType = LessonCard;

После такой манипуляции, создание и добавление новых объектов в группу это одна строчка кода:

this.question_group.create(card.x + (index * card.width) + (index * 48), card.y, 'learn_question');

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

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

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