HTML5 Phaser ECMAScript 6, Phaser - полезные советы

Часть 36: Мини игра «Правда или Ложь» за один день!

Закончил мини игру «правда или ложь», посмотреть можно тут. Вся сцена была создана очень быстро и эффективно, благодаря новому методу. Очень хотеться рассказать вам про него, а также как я наше способ в JavaScript создавать класс который наследует свойства и методы сразу у двух родителей. Но разумней будет сначала отшлифовать неровности в этом методе, а уже потом рассказыавть вам. Лучше я вам расскажу интересные решения, которые я использовал:

мини игра Правда или Ложь для сбора энергии

Относительно недавно я добавлял в игру магазин покупки разных бонусов и энергии. Магазин сам по себе это слой который накрывает игровую сцену и имеет простенькую форму по середине. На практике оказалось, что можно свободно нажимать сквозь такой вот popup =) Дело в том, что все спраиты в Phaser не обрабатывают нажатие мышки поумолчанию (из соображений экономии ресурсов). Это просто картинки декораций… поэтому клик по картинке popup для Phaser ничего не значит, а вот кнопка под ним уже умеет обрабатывать это событие, и управление передается ей. Что бы решить эту задачу, достаточно включить inputEnabled=true для полупрозрачной мембраны которая покрывает форму.

Еще стоит обратить внимание на yoyo эффект для анимации (когда ваша анимация автоматом проигрывается наоборот и возвращает анимированный объект в исходное положение). Ошибку связанную с ней в моей игре я нашел случайно. Если вы помните, то при увеличении числа счетчика (монетки, энергия и т.д.), у меня увеличивалась иконка счетчика, а при уменьшении — наоборот уменьшалась. Так вот… перед тем как начинать новую анимацию, надо отключить старую (туториалах именно так и учат). Но используя метод yoyo, я рассчитывал, что исходные значения объекта будут автоматом восстановлены перед следующим стартом… Но если анимация в прошлый раз была остановлена в середине, допустим при масштабе 1.5х, то эффект yoyo после анимации вернет его в «исходное» положение 1.5х (с чего он и начинал). По этому важно, после торможения анимации, вручную восстанавливать исходные значения объекта и только после этого запускать новую.

анимированный счетчик чисел в игре (из за маленького количества кадров в gif анимация чисел не совсем плаваная)

Теперь давайте взглянем на вот такой красивый эффект счетчика. При обновлении числового значения, счетчик плавно меняет числа. Сделать такой эффект оказалось довольно просто с помощью tween. В его задачу входит плавная смена свойства объекта. Но ведь свойство не обязательно должно быть визуальным. Если установить обработчик onUpdateCallback, то при каждом обновлении этого свойства мы сможем что-то делать:

update_tween = this.game.add.tween(this).to({animated_score: value}, duration, Phaser.Easing.Sinusoidal.Out);
this.update_tween.onUpdateCallback(function(tween, percent, tween_data) {
  this.text = Math.round(this.animated_score);
}, this)
this.update_tween.start();

Как видите, у моего объекта есть исходное значение свойства animated_score, после мы говорим tween-у, что надо плавно изменить его на value функцией Sinusoidal.Out. Phaser делает все за нас… а нам достаточно в обработчике onUpdateCallback выводить результат на экран this.text = Math.round(this.animated_score).

Для сведения, наша функция обработчик получает три переменные: первая переменная это сама анимация (tween), вторая — процент анимации и третья — доп данные (мне не понятные). На практике, все эти переменные нам не нужны, так как на момент вызова обработчика, свойство объекта уже будет иметь новое значение =)

this.button_false = this._create_group(stage_map, 'false', ButtonGroup(Phaser.Group));
this.button_true = this._create_group(stage_map, 'true', ButtonGroup(Phaser.Group));
this.misc = this._create_group(stage_map, 'misc');
this.progress = this._create_group(stage_map, 'progress', PowerProgressGroup(Phaser.Group));
this.reward = this._create_group(stage_map, 'reward');
this.card = this._create_group(stage_map, 'card');

Вообще, все визуальные редакторы которые я нашел, умеют работать с спрайтом, текстом… но ни один из них не умеет собирать составной элемент (из нескольких картинок), что бы в Phaser можно был о с ним работать как с одной переменной. По этому я написал свой собственный обработчик TileMap файла и используя Tiled редактор, всего несколькими строчками кода могу создать довольно сложную сцену (код выше это вся сцена игры Правда или Ложь). Как я и писал в начале поста, данный метод настолько упрощает разработку, что всю игру я сделал за полтора дня. Постараюсь рассказать об этом в следующем посте =)

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

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