【Egret Engine】メソッドを繰り返す方法「Timer」「StartTick」「Enter_Frame」
はじめに
メソッドを一定間隔で繰り返す方法を紹介します。
Unityでいうところの「Update」と「FixedUpdate」に当たります。
・一定時間ごとに繰り返す→「Timer」
・固定フレームで繰り返す→「StartTick」
・フレームレートで繰り返す→「EnterFrame」
準備
以下のスクリプトを用意してください。継承するクラスは egret.DisplayObjectContainer か eui.UILayer です。
今回は egret.DisplayObjectContainer で行います。
Main.ts
class Main extends egret.DisplayObjectContainer {
public constructor() {
super();
this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
}
private addToStage() {
}
}メソッドを繰り返す方法「Timer」「StartTick」「Enter_Frame」
「Timer」を使用した繰り返しメソッド
Main.ts
class Main extends egret.DisplayObjectContainer {
public constructor() {
super();
this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
}
private addToStage() {
const timer:egret.Timer = new egret.Timer(1000,0);
timer.addEventListener(egret.TimerEvent.TIMER,this.timeMethod,this);
timer.start();
}
private timeMethod(){
console.log("途中");
}
}まず、「const timer:egret.Timer = new egret.Timer(ミリ秒, 繰り返し回数);」でegret.Timerを定義。繰り返し回数は0で無限に繰り返します。
次に、
timer.addEventListener(egret.TimerEvent.TIMER,this.timeMethod,this);
timer.start();で実行します。
timerを停止するときは
timer.stop();timerの実行間隔を途中で変更するときは一度stop()しないと、stage上にtimerが残っているので、処理が重複実行される場合があります。
繰り返し回数を設定し、繰り返しが終わった時に処理を実行する場合は「egret.TimerEvent.TIMER_COMPLETE」をaddEventListenerに使用します。
Main.ts
class Main extends egret.DisplayObjectContainer {
public constructor() {
super();
this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
}
private addToStage() {
const timer:egret.Timer = new egret.Timer(1000,3);
timer.addEventListener(egret.TimerEvent.TIMER,this.timeMethod,this);
timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE,this.timeMethod2,this);
timer.start();
}
private timeMethod(){
console.log("途中");
}
private timeMethod2(){
console.log("終了");
}
}「StartTick」を使用した固定フレームでの繰り返し
Main.ts
class Main extends egret.DisplayObjectContainer {
public constructor() {
super();
this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
}
/**
* 変数の追加
*/
private time :number = 0 ;
private addToStage() {
this.time = egret.getTimer();
egret.startTick(this.timeMethod,this);
}
private timeMethod() : boolean{
this.time += 1;
console.log(this.time);
if(this.time >=1000){
egret.stopTick(this.timeMethod,this);
console.log("終了");
}
return false;
}
}60フレーム固定で繰り返しを行いたい場合は
private time :number = 0 ;
this.time = egret.getTimer();
egret.startTick(this.timeMethod,this);
のようにstartTickを記述してください。
使用するメソッドはboolean型の返り値が必要になります。公式ドキュメントによると、返り値がtrueのとき、コールバック関数が実行された直後に再描画し、falseなら再描画しないらしいです。しかし、今回は違いが見受けられませんでした。とりあえずfalseでいいでしょう。
private timeMethod() : boolean{
this.time += 1;
if(this.time >=1000){
egret.stopTick(this.timeMethod,this);
console.log("終了");
}
return false;
}繰り返しを止めるときは「egret.stopTick(this.timeMethod,this);」のように宣言してください。
「EnterFrame」を使用したフレームレートでの繰り返し
Main.ts
class Main extends egret.DisplayObjectContainer {
public constructor() {
super();
this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
}
private addToStage() {
this.addEventListener(egret.Event.ENTER_FRAME,this.timeMethod,this);
}
private timeMethod() : void {
console.log("連続");
}
}フレームレートでメソッドを繰り返す場合は「 this.addEventListener(egret.Event.ENTER_FRAME, this.timeMethod, this);」を使用します。
フレームレートはパソコンの性能によって処理速度が異なりますので、移動などではStartTickを使用してください。
ENTER_FRAMEは連続したアニメーションなどで使用します。UnityでいうところのUpdateです。
おわりに
フィア: これで繰り返しはバッチリだね!
カレン: きっちり使い分けられるようにマスターしてね!