周期処理とは、一定時間おきに指定した関数を実行する処理です。
入力や状態の変化を監視したり、連続した動きを作成したりする場合等、様々な場面で使用する処理です。
Cocos2d-xの周期処理の書式について説明します。
使用しているCocos2d-xのバージョンは3.7です。
目次
周期処理
『scheduleUpdate()』
- 『cc.Node』を継承したクラスで使用できます。
- 周期の間隔(時間)は指定できません。毎フレーム実行されます。
- 実行する関数の名前は『update:function(){}』と決められています。
- 『update:function(dt){}』とすると、dtを通じて、前回『update:function(dt){}』が実行されてからの時間(秒)が取得できます。
『unscheduleUpdate()』
- 『scheduleUpdate()』で開始した周期処理を停止します。
使用例
『クラスの継承:Cocos2d-x v3.7(JavaScript) - モーリーのメモ』で、作成したクラスに周期処理を追加します。
例では以下の処理を行っています。
1.指定した半径で円を描画
2.円の半径を1秒かけて『指定した半径から0』まで縮小
3.円の半径を1秒かけて『0から指定した半径』まで拡大
4.『2』と『3』を交互に切り替え
5.開始から5秒後に停止
var DrawFillCircle = cc.DrawNode.extend({ // メンバ変数 _radius:0, // 半径 _color:null, // 塗りつぶす色 _flg:true, // 反転フラグ _time:0, // 時間をカウント _sec:0, // 秒数をカウント _radiusMax:0, // 半径最大 // コンストラクタ ctor:function(radius, color){ this._super(); // 親クラスのメソッドを呼び出せるようにする this._radius = radius; // 半径を代入 this._color = color; // 塗りつぶす色を代入 this._radiusMax = radius; // 最大値とする this.draw(); // 円を描画 this.scheduleUpdate(); // 周期処理を開始 }, // 周期処理 update:function(dt){ this._time += dt; // 経過時間を計算 if(this._time >= 1){ this._sec ++; //秒数を加算 this._time = 0; // カウントを0にセット this._flg = !this._flg; // フラグ反転 } // フラグ処理 if (this._flg) { this._radius = this._radiusMax - this._radiusMax * this._time; // 半径を縮小 } else { this._radius = this._radiusMax * this._time; // 半径を拡大 } this.draw(); // 円を描画 // 5秒経過したら、周期処理を停止 if(this._sec >= 5){ this.unscheduleUpdate(); // 周期処理を停止 } }, // 円を描画 draw:function(){ this.clear(); // クリア this.drawDot( // 点を描画 cc.p(0, 0), // 中心の座標 this._radius, // 半径 this._color // 塗りつぶす色 ); }, });
呼び出し側
var circle = new DrawFillCircle(320, cc.color(0, 0, 255, 255)); // インスタンス化 circle.setPosition(cc.p(320, 480)); // 中心座標を設定 this.addChild(circle); // 表示レイヤーに追加
『schedule()』
- 『cc.Node』を継承したクラスで使用できます。
- 『scheduleUpdate()』と違い、呼び出す関数や周期の間隔(時間)等を設定できます。
- 周期の間隔(時間)を0にする場合は、『scheduleUpdate()』を使用することを推奨されています。
- 引数により、下記のような種類が有ります
『schedule(selector)』
- selector:関数を設定
『schedule(selector, interval)』
- selector:関数を設定
- interval:周期の間隔(間隔)を秒単位で設定
『schedule(selector, interval, repeat, delay)』
- selector:関数を設定
- interval:周期の間隔(間隔)を秒単位で設定
- repeat:繰り返し回数を設定(*(repeat+1)回実行されます。また『cc.REPEAT_FOREVER』を設定すると回数制限なく実行されます。)
- delay:ディレイを秒単位で設定(指定秒後に周期処理を開始)
『unschedule(selector)』
『schedule()』で開始した周期実行を停止します。
- selector:関数を設定
使用例
this.schedule(this.loopProc, 0.5, 9, 2); // 周期処理を開始
- 上記の設定の場合は、呼び出してから2秒後に、『loopProc:function(){}』で定義した関数を、0.5秒間隔で、10回繰り返し実行します。
- 『loopProc:function(dt){}』とすると、dtを通じて、前回『loopProc:function(dt){}』が実行されてからの時間(秒)が取得できます。
- 上記の設定で『interval』と『dt』は、〜20ミリ秒の誤差がありました。
『unscheduleAllCallbacks()』
- すべての周期実行を停止します。
- 『onExit()』の中に書いておくと、画面遷移時等に周期処理が停止されます。
以上です。
あとがき
ここでは、周期処理と読んでいますが、スケジュール処理とか毎フレーム処理とかタイマー処理とか、いろいろ表現がありますね。