読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

アクションの設定:Cocos2d-x v3.7(JavaScript)

 ノード(シーン、レイヤー、スプライト等)にアクションを設定します。
 アクションとは、ノードに移動、拡大縮小、回転等の動きや変化(アニメーション)を設定するものです。
 Cocosには、いろいろな種類のアクションが用意されています。またそれらを組み合わせて使うことも出来ます。
 
 アクションを設定するクラスとその使用例を紹介しています。

目次

アクション

 様々なアクションを設定するクラスを紹介します。(全部は紹介出来ていません。)

『〜By』は変化量、『〜To』は絶対値

 まず補足ですが、名前が『〜By』のクラスは引数に現在値からの変化量を設定します。『〜To』のクラスは引数に絶対値を設定します。

直線移動

『cc.moveBy(時間, 移動量dX, 移動量dY)』

 ノードを『現在の位置(x, y)』から、『(x+dX, y+dY)の位置』に、設定した時間[秒]で移動します。

『cc.moveTo(時間, X, Y)』

 ノードを『現在の位置(x, y)』から、『(X, Y)の位置』に、設定した時間[秒]で移動します。

拡大縮小

 アンカーポイントを中心に拡大縮小します。

『cc.scaleBy(時間, 倍率)』

 ノードを『現在のサイズ』から、『現在の幅と高さに"設定した倍率"を掛けたサイズ』に、設定した時間[秒]で変化させます。

『cc.scaleBy(時間, 幅の倍率, 高さの倍率) 』

 ノードを『現在のサイズ』から、『現在の幅と高さに"それぞれ設定した倍率"を掛けたサイズ』に、設定した時間[秒]で変化させます。

『cc.scaleTo(時間, 倍率)』

 ノードを『現在のサイズ』から、『元の幅と高さに"設定した倍率"を掛けたサイズ』に、設定した時間[秒]で変化させます。

『cc.scaleTo(時間, 幅の倍率, 高さの倍率) 』

 ノードを『現在のサイズ』から、『元の幅と高さに"それぞれ設定した倍率"をかけたサイズ』に、設定した時間[秒]で変化させます。

回転

アンカーポイントを中心に回転します。

『cc.rotateBy(時間, 回転角度dA)』

 ノードを『現在の角度a』から、『(a+dA)度』まで、設定した時間[秒]で回転させます。+値で時計回りです。
 Z軸(画面に垂直な軸)周りの回転です。

『cc.rotateBy(時間, x軸回り回転角度dA, y軸回り回転角度dB)』

 ノードを『現在の角度(x軸回りa度, y軸回りb度)』から、『(x軸回りa+dA度, y軸回りb+dB度)』まで、設定した時間[秒]で回転させます。+値で時計回りです。
 ブラウザ起動の場合、『cc.rotateBy(時間, x軸回り回転角度dA, 0)』のように第3引数が0の場合、『cc.rotateBy(時間, 回転角度dA)』の動作になってしまいました。第3引数が0以外だと正しく動作するようです。MacOSシミュレータだと0でも正しく動作しました。

『cc.rotateTo(時間, 角度A)』

 ノードを『現在の角度a』から、『A度』まで、設定した時間[秒]で回転させます。近回り(回転する角度が小さくなる方向に回転)します。
 Z軸(画面に垂直な軸)周りの回転です。

『cc.rotateTo(時間, x軸回り角度A, y軸回り角度B)』

 ノードを『現在の角度(x軸回りa度, y軸回りb度)』から、『(x軸回りA度, y軸回りB度)』まで、設定した時間[秒]で回転させます。近回り(回転する角度が小さくなる方向)します。
 ブラウザ起動の場合、『cc.rotateTo(時間, x軸回り角度A, 0)』のように第3引数が0の場合、『cc.rotateTo(時間, 角度A)』の動作になってしまいました。第3引数が0以外だと正しく動作するようです。MacOSシミュレータだと0でも正しく動作しました。

傾斜

 アンカーポイントを中心に傾斜します。

『cc.skewBy(時間, 傾斜角度dA, 傾斜角度dB)』

 ノードを『現在の傾斜(回転角度a, 角度b)』から『(角度(a+dA), 角度(b+dB))』まで、設定した時間[秒]で傾斜させます。角度Aは+値でY軸を時計回り、角度Bは+値でX軸を反時計回りです。
 Z軸(画面に垂直な軸)周りの傾斜です。

『cc.skewTo(時間, 角度A, 角度B)』

 ノードを『現在の傾斜(角度a, 角度b)』から『(角度A, 角度B)』まで、設定した時間[秒]で傾斜させます。近回り(回転する角度が小さくなる方向に回転)します。

ジャンプ

『cc.jumpBy(時間, 移動量dX, 移動量dY, ジャンプの高さ, ジャンプの回数)』

 ノードを『現在の位置(x, y)』から、『(x+dX, y+dY)の位置』に、ジャンプしながら、設定した時間[秒]で移動します。

『cc.jumpTo(時間, X, Y, ジャンプの高さ, ジャンプの回数)』

 ノードを『現在の位置(x, y)』から、『(X, Y)の位置』に、ジャンプしながら、設定した時間[秒]で移動します。

ベジェ曲線

『cc.bezierBy(時間, [cc.p(x1, y1), cc.p(x2, y2), cc.p(x3, y3)])』

 ノードを『(x, y)、(x1+x, y1+x)、(x2+x, y2+x)、(x3+x, y3+x)で構成されたベジェ曲線』に沿って、設定した時間[秒]で移動します。

『cc.bezierTo(時間, [cc.p(x1, y1), cc.p(x2, y2), cc.p(x3, y3)])』

 ノードを『(x, y)、(x1, y1)、(x2, y2)、(x3, y3)で構成されたベジェ曲線』に沿って、設定した時間[秒]で移動します。

色合いの変化

『cc.tintBy(時間, 変化量dR, 変化量dG, 変化量dB)』

 ノードを『現在の色合い(r:赤, g:緑, b:青)』から、『(r+dR, g+dG, b+dB)』に、設定した時間[秒]で変化します。
 各色の値の範囲は0〜255で、255を超えると0にリセット(-255)されます。

『cc.tintTo(時間, R, G, B値)』

 ノードを『現在の色合い(r:赤, g:緑, b:青)』から、『(R, G, B)』に、設定した時間[秒]で変化します。

不透明度の変化

『cc.fadeIn(時間)』

 ノードを『現在の不透明度』から、『不透明度255』まで、設定した時間[秒]で変化します。
 不透明度の値の範囲は0〜255です。

『cc.fadeOut(時間)』

 ノードを『現在の不透明度』から、『不透明度0』まで、設定した時間[秒]で変化します。
 不透明度の値の範囲は0〜255です。

『cc.fadeTo(時間, 不透明度)』

 ノードを『現在の不透明度』から、『設定した不透明度』まで、設定した時間[秒]で変化します。
 不透明度の値の範囲は0〜255です。

点滅

『cc.blink(時間, 点滅の回数)』

 ノードを設定した時間[秒]内に、設定した回数点滅させます。
 点滅は、『不透明度0』と『開始時の不透明度』の繰り返しです。

遅延

『delayTime(時間)』

 設定した時間[秒]、待機します。

ノードの削除

『cc.removeSelf()』

ノードを削除し、メモリから開放します。

関数の実行

『cc.callFunc(function(){}, 対象のノード)』

 関数を実行します。

イージング

 上記の各アクションは、一定速度での移動・変化ですが、加速度的に変化するように設定します。

『アクション.easing(cc.easeIn(加速度))』

 加速しながら移動・変化します。

『アクション.easing(cc.easeOut(加速度))』

 減速しながら移動・変化します。

『アクション.easing(cc.easeOutIn(加速度))』

 最初は加速しながら移動・変化し、最後は減速しながら移動・変化します。
 以降は省略しますが下記の『〜In』で終わるものは、『〜Out』『OutIn』も有ります。

『アクション.easing(cc.easeSineIn())』

サイン曲線的に加速しながら移動・変化します。
 『easeIn』と同様に『〜Out』、『』

『アクション.easing(cc.easeExponentialIn())』

 指数関数曲線的に加速しながら移動・変化します。

『アクション.easing(cc.easeElasticIn(設定時間に対する1周期の割合))』

 始点を中心に振動し、振幅を大きくしながら、移動・変化します。引数を1/4とした場合、4回振動します。

『アクション.easing(cc.easeBounceIn(設定時間に対する1周期の割合))』

 始点から進行方向に弾み、弾み幅を大きくしながら、移動・変化します。引数を1/4とした場合、4回振動します。

『アクション.easing(cc.easeBackIn())』

 一度進行方向と逆に振ってから、移動・変化します。

アクションの制御

連続実行

『cc.sequence(アクション1, アクション2, ...)』

 設定したアクションを連続で実行します。

同時実行

『cc.spawn(アクション1, アクション2, ...)』

 設定したアクションを同時に実行します。

繰り返し実行

『cc.repeat(アクション, 回数)』

 設定したアクションを、設定回数繰り返し実行します。

『cc.repeatForever(アクション)』

 設定したアクションを、永久に繰り返し実行します。

アクションの実行と停止

『ノード.runAction(アクション)』

 ノードに対して、設定したアクションを実行します。

『ノード.stopAction(アクション)』

ノードの指定したアクションを停止します。

使用例

 ボタンにアクションを設定しています。

buttonToMain.setPosition(320, 120); // ボタンの現在位置を設定
		
var move1 = cc.moveBy(1.0, 240, 480); // 1秒かけて(320+240, 120+480)の位置に直線移動
var ease1 = move1.easing(cc.easeIn(3)); // 加速度的な移動にする
var rotate1 = cc.rotateBy(1.0, 720); // 1秒かけて時計回りに2回転
var ease2 = rotate1.easing(cc.easeIn(3));  // 加速度的な回転にする
var scale1 = cc.scaleBy(1.0, 1.5); // 1秒かけて1.5倍のサイズに拡大
var ease3 = scale1.easing(cc.easeIn(3)); // 加速度的な変化にする
var spawn1 = cc.spawn(ease1, ease2, ease3); // 移動と回転と拡大を同時に行う

var delay1 = cc.delayTime(0.5); // 0.5秒間停止
		
var func1 = cc.callFunc(function(){ // 関数を実行
	buttonToMain.setOpacity(0); // 透明にする
}, buttonToMain);
		
var delay2 = cc.delayTime(0.5); // 0.5秒間停止

// 1秒かけてベジェ曲線に沿って元の位置に戻る
var bezier1 = cc.bezierBy(1.0, [cc.p(0, 0), cc.p(-600, -200), cc.p(-240, -480)]); 
var fade1 = cc.fadeIn(1.0); // 不透明にする
var scale2 = scale1.reverse(); // 元のサイズに縮小
var spawn2 = cc.spawn(bezier1, fade1, scale2); // 移動、透明度の変更、縮小を同時に行う
		
var seq1 = cc.sequence(spawn1, delay1, func1, delay2, spawn2); // 作成したアクションを連続で行うシーケンスを作成
var repeat1 = cc.repeat(seq1, 2); // シーケンスを2回繰り返す
		
buttonToMain.runAction(repeat1); // ボタンにアクションを設定して実行

注意点

小文字と大文字に注意

 『cc."m"oveBy()』と『cc."M"oveBy()』のように名前が小文字で始まるものと大文字で始まるものがあります。
 『Cocos Code IDE』のコード補完では両方表示されます。
 しかしこれらは、下記のような違いが有りますのでご注意を。

move1 = cc.moveBy(); // MacOSのシミュレータ、ブラウザ起動でともに実行できる
move1 = cc.MoveBy(); // MacOSのシミュレータでは実行できるが、ブラウザ起動では実行できない
move1 = new cc.MoveBy(); // MacOSのシミュレータ、ブラウザ起動でともに実行できる

『cc.rotateBy(時間, x軸回り角度A, 0)』と『cc.rotateTo(時間, x軸回り角度A, 0)』の不具合?

 ブラウザ起動の場合、『cc.rotateBy(時間, x軸回り角度A, 0)』のように第3引数が0の場合、『cc.rotateBy(時間, 角度A)』の動作になってしまう。第3引数が0以外だと正しく動作する模様。MacOSシミュレータだと0でも正しく動作。『cc.rotateTo』も同様。
 
以上です。

あとがき

アクションの組み合わせで、いろいろな動きができますね。

広告を非表示にする