はじめに
メソッドを一定間隔で繰り返す方法を紹介します。
Unityでいうところの「Update」と「FixedUpdate」に当たります。
・一定時間ごとに繰り返す→「Timer」
・固定フレームで繰り返す→「StartTick」
・フレームレートで繰り返す→「EnterFrame」
準備
以下のスクリプトを用意してください。継承するクラスは egret.DisplayObjectContainer か eui.UILayer です。
今回は egret.DisplayObjectContainer で行います。
Main.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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で無限に繰り返します。
次に、
|
1 2 |
timer.addEventListener(egret.TimerEvent.TIMER,this.timeMethod,this); timer.start(); |
で実行します。
timerを停止するときは
|
1 |
timer.stop(); |
timerの実行間隔を途中で変更するときは一度stop()しないと、stage上にtimerが残っているので、処理が重複実行される場合があります。
繰り返し回数を設定し、繰り返しが終わった時に処理を実行する場合は「egret.TimerEvent.TIMER_COMPLETE」をaddEventListenerに使用します。
Main.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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フレーム固定で繰り返しを行いたい場合は
|
1 2 3 4 |
private time :number = 0 ; this.time = egret.getTimer(); egret.startTick(this.timeMethod,this); |
のようにstartTickを記述してください。
使用するメソッドはboolean型の返り値が必要になります。公式ドキュメントによると、返り値がtrueのとき、コールバック関数が実行された直後に再描画し、falseなら再描画しないらしいです。しかし、今回は違いが見受けられませんでした。とりあえずfalseでいいでしょう。
|
1 2 3 4 5 6 7 8 9 10 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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です。
おわりに
Github
