HTML5 Phaser ECMAScript 6

Часть 16: Tiled и генерация кнопки тремя строчками (шаг 2)

Разбирая как работает метод createFromObjects() в исходниках, я обратил внимание, что класс, который ему передается не обязательно делать на базе Sprite =) Также я определил, что числовое значение спраита можно заменить на имя объекта (это улучшало читабельность кода). А так как первые 3 параметра (game, x, y, которые использует createFromObjects() при создании объекта) подходят для большинства классов, появилось желание вовсе ничего не писать!

программа Tiled для создания карты, но в нашем случае сцены

Вот как можно создать кнопку на месте спраита в карте:

this.stage_map.createFromObjects('misc', 'arrow_up', 'map_icon_arrow', null, true, false, this.misc, Phaser.Button);
(this.arrow_up_button = this.misc.getByName('arrow_up')).setFrames(null, 1, null, null);
this.arrow_up_button.onInputUp.add(this.on_button_up_click, this);

Изящно не правда ли? А вот как создать мою панель счетчик:

this.stage_map.createFromObjects('menu', 'score', 'bar_medium_bg', null, true, false, this.menu, ScoreBar);
(this.score_bar = this.menu.getByName('score')).init();

Надо заметить, что значения icon_key, text_center_x и text_center_y для объекта ScoreBar я передаю через свойства в Tiled программе. Это дает мне возможность менять их прямо в Tiled, потом нажать Ctrl+E (экспорт карты) и сразу посмотреть визуальный результат нажав F5 в браузере. Почти как свой редактор сцен! Сложности возникла только при создании текстового объекта:

this.stage_map.createFromObjects('misc', 'title', null, null, true, false, this.misc, Phaser.Text, false);
(this.title = this.misc.getByName('title')).setTextBounds(0, 0, this.title.boundsWidth, this.title.boundsHeight);

Его свойства Phaser пока не умеет читать. Пришлось задавать все значения через properties объекта в Tiled программе:

boundsHeight=48
boundsWidth=367
scale.x=1
scale.y=1
style.boundsAlignH="center"
style.boundsAlignV="middle"
style.fill="#f8c573"
style.font="bold 36px Arial"
text="Выберите Урок"

Все параметры, кроме первых двух напрямую обновляют свежо испеченный объект. А вот первые два — необходимы, что бы знать размер прямоугольника, в котором надо выравнять текст. Дело в том, что после создания объекта методом createFromObjects() значения полей width, height автоматически обновляются и у меня нет возможности считать их исходные значения.

this.stage_map.createFromObjects('lesson', 'lesson', 'map_lesson_bg', 0, true, false, this.lesson, LessonButton);
this.lesson_button = {};
this.lesson.iterate('name', 'lesson', Phaser.Group.RETURN_TOTAL, function(child) {
  (this.lesson_button[child.index] = child).init();
}, this);
this.lesson_button[5].set_exam();

Это последний кусок кода, на который я бы хотел обратить ваше внимание. Используя метод iterate можно перебрать все созданные объекты в группе (которые удовлетворяют условие name = lesson), выполнить для них init() метод и сохранить в массив для последующего использования в программе.

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

2 thoughts on “Часть 16: Tiled и генерация кнопки тремя строчками (шаг 2)

  1. Хороший блог, очень интересные у тебя статьи, спасибо тебе большое, продолжай пожалуйста!

  2. Спасибо за поддержку Владимир! Сегодня постараюсь найти время и написать как мне удаось сделать плавный скролинг тачом. А также вроде нашел решение, как скрыть часть уроков, которые выходят за пределы «экрана» (аналогия overflow:hidden для div блока в css).

    Вот с чем пока не определился, как хранить иконки уроков. Владимир, их у меня 60 цветных и 60 однотонных… если созжать atlas текстур, то каждая иконка будет загружена индивидуально, а для кнопки мне желательно иметь spritesheet, что бы переключать между цветной и однотонной через свойство frame.

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

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