昨年は、大変お世話になりありがとうございました。
早速ですが、本年も引き続き開発日誌を宜しくお願いします。
前回は直線移動を行う「Move」ついてでしたが、今回は曲線移動を行う時に使用する、
「Bezier」アクションをご紹介します。
Spriteの曲線移動は「BezierTo」もしくは、「BezierBy」アクションを使用します。
これらのアクションは、指定した座標からベジェ曲線を生成し、そのラインに沿って
スプライトが移動します。
※Wikipediaにベジェ曲線の詳しい説明が記載されております。
前提の状態として、アクション対象となるSpriteの初期位置を（100, 100） に設定しておきます。
実際のアクションについてですが、まず、初めに「BezierTo」をご説明します。
Bezierを使用する場合には、制御点を設定した上で、Bezierアクションを作成しますので、
create()で指定する引数は
「アクション時間」、「制御点を設定した変数」
の2つになります。
今回は上画像の通り、
( 100, 100 ),( 400, 100 ),( 400, 200 )
の座標を設定します。
それでは、結果どのような移動になるのか、まずはこちらの画像をご覧ください。
BezierToの座標指定は、絶対座標です。
なので、先ほど指定した制御点を使用して描かれる曲線は次のようになります。
次に「BezierBy」のご紹介です。
「BezierTo」と同じく。制御点を指定します。
書き方は変わらないので、先ほどと同じように生成します。
動きの違いがわかりやすいように、BezierToの時と同じ座標を指定しています。
「BezierBy」のアクション実行後のSprite位置はこちらです。
「BezierBy」は相対座標を指定しますので、制御点の位置は下図のようになります。
circleの座標→( 100, 100 )
制御点01→ ( 100, 100 ) + ( 100, 100 ) = ( 200, 200 )
制御点02→ ( 100, 100 ) + ( 400, 100 ) = ( 500, 200 )
制御点03→ ( 100, 100 ) + ( 400, 200 ) = ( 500, 300 )
以上で、 「BezierTo」・「BezierBy」 のご紹介は終わりとなります。
<次回以降の更新について>
次回は、「画像の拡大・縮小」及び、「画像の回転」を紹介したいと思います。