前回は、曲線移動を行う「Bezier」ついてでしたが、
今回は、拡大縮小に使用する「ScaleTo」「ScaleBy」アクション、回転に使用する「RotateTo」「RotetaTo」をご紹介します。
初めに、「ScaleTo」についてご紹介します。
アクション対象のSpriteサイズは1(等倍)にセットしました。
ScaleToのcreate() には、
「アクション時間」、「X軸方向の拡大縮小比率(絶対値)」、「Y軸方向の拡大縮小比率(絶対値)」
の3つの引数を指定します。
拡大縮小比率は、”1＝等倍”となります。
画像の通り、
X軸方向に2倍拡大し、Y軸方向に2分の1へ縮小しています。
動作させると上記のように、Action時間に設定した時間をかけて、
X軸方向に2倍拡大し、Y軸方向に2分の1へ縮小することが確認出来ました。
以上が、絶対値設定の拡大縮小「ScaleTo」の流れとなります。
次に、「ScaleBy」についてご紹介します。
アクション対象のSpriteサイズは1.5(1.5倍)にセットしました。
ScaleByのcreate() には、
「アクション時間」、「X軸方向の拡大縮小比率(相対値)」、「Y軸方向の拡大縮小比率(相対値)」
の3つの引数を指定します。
画像の通り、
X軸方向に1.5倍拡大し、Y軸方向に1倍(等倍)しています。
動作させると上記のように、Action時間に設定した時間をかけて、
X軸方向に1.5倍拡大し、Y軸方向は等倍の為、変化しないことが確認出来ました。
以上が、相対値設定の拡大縮小「ScaleBy」の流れとなります。
次に、「RotateTo」についてご紹介いたします。
アクション対象のSpriteは、下記の通りとなっております。
RotateToのcreate() には、
「アクション時間」、「回転方向(絶対値)」
の3つの引数を指定します。
回転方向は、時計回りに回転させる場合は、プラスの値を、
反時計回りに回転させるマイナスの値で設定します。
画像の通り、
画像が、時計回りに180度の位置まで回る、処理となっております。
動作させると上記のように、Action時間に設定した時間をかけて、
時計回りに180度の位置まで、回ることが確認出来ました。
また、反時計回りに180度回転させる場合は、”-180”で動作します。
以上が、絶対位置指定の回転「RotateTo」の流れとなります。
次に、「RotateBy」についてご紹介いたします。
アクション対象のSpriteは、90度回転している状態にセットしました。
RotateToのcreate() には、
「アクション時間」、「回転方向(相対値)」
の3つの引数を指定します。
画像の通り、
画像が、反時計回りに90度回る、処理となっております。
動作させると上記のように、Action時間に設定した時間をかけて、
反時計回りに90度回ることが確認出来ました。
以上が、相対位置指定の回転「RotateBy」の流れとなります。
<次回以降の更新について>
次回は、cocos2d-htmlを使用した、ブロック崩しの作成について、紹介したいと思います。