モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

周期処理:Cocos2d-x v3.7(JavaScript)

 周期処理とは、一定時間おきに指定した関数を実行する処理です。
 入力や状態の変化を監視したり、連続した動きを作成したりする場合等、様々な場面で使用する処理です。
 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()』の中に書いておくと、画面遷移時等に周期処理が停止されます。


以上です。

あとがき

 ここでは、周期処理と読んでいますが、スケジュール処理とか毎フレーム処理とかタイマー処理とか、いろいろ表現がありますね。