前回は、cocos2d-htmlによるSpriteのFadeInとFadeOutアクションのお話でした。
今回は、Spriteを動かすときに使用する「Move」アクションについてご紹介します。
Layerに追加したSpriteに直線的な移動動作をさせるためには
「MoveTo」もしくは、「MoveBy」アクションを使用します。
初期位置は ( 200, 100 ) にセットしました。
初めに「MoveTo」のご紹介です。
以下をご覧ください。
設定は、var action = cc.MoveTo.create() で行っています。
create()で、指定する引数は
「アクション時間」、「座標」
以上の2点です。
画像では create(1.0, cc.p(200, 200))となっていますので
1.0秒かけて 座標(x:200,y:200)まで移動する
ということになります。
次に「MoveBy」のご紹介です。
以下をご覧ください
特に変わった箇所はありません。
create()の引数も先ほどと同じです。
唯一、変わっているのは
cc.MoveTo.create() → cc.MoveBy.create()
と、Move後の「To」が「By」になっていることです。
MoveByの場合どのような動きになるのか、こちらをご覧ください。
さきほどとは全然違う場所にSpriteがあります。
これは「MoveTo」が絶対座標を指定するのに対して
「MoveBy」は相対座標を指定する為です。
ここでいう相対座標というのは
「Spriteが配置されている座標を原点とした座標」
と解釈してください。
このプロジェクトを例に説明しますと
circleの座標→setPositionで指定した x:200, y:100 ※これがMoveByで指定する座標の原点になる
MoveByで指定した引数→ x:200, y:200
なので
200 + 200 = 400
100 + 200 = 300
となり、先ほどの「MoveBy」は
1.0秒かけて 座標(x:400, y:300) まで移動する。
となるわけです。
「MoveTo」も「MoveBy」も同じ直線運動をするためのアクションですが、
どちらを使うかは状況によって変わってくると思いますので、色々と応用しながら使用してみてください。
以上で、 MoveTo・MoveBy の紹介は終わりとなります。
<次回以降の更新について>
次回は、BezeirTo・BezeirByを紹介したいと思います。