すくまりのメモ帳すくまりのメモ帳
← 記事一覧に戻る

【Egret Engine】メソッドを繰り返す方法「Timer」「StartTick」「Enter_Frame」

2019-01-30
【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です。

おわりに

フィア: これで繰り返しはバッチリだね!

カレン: きっちり使い分けられるようにマスターしてね!

Github

Githubにてコード公開中です。

HTML5 Egret Engine 入門へ戻る

HTML5 Egret Engine 入門へ戻る