ブロックチェーンゲーム制作チェーン -Minimal Arcade Medal-

ブロックチェーン技術、ゲーム作成のためのコード、ドット絵やアニメーションの作り方を解説するブログです。最終的に記事の内容を組み合わせることで誰でもブロックチェーンゲームが作れるようにしたいです。Micro Arcade MedalというdApps開発中です。

ジャンプさせたり色を変えたりしたい:アクションの逆引きーCocosCreator

ジャンプや色を変化させる、大きさを変化させるなどのアクションの付け方を逆引きできるようにまとめました。


公式にリファレンスはあります。


cc


かし、何をしたいときにどれを呼べば良いというのが逆引き形式で乗っておらず、不便だと感じました。
なので逆引きでどのメソッド使えばいいのか簡易リファレンスとしてまとめました。


全てのアクション関係のメソッドはカバーしたと思うのですが、抜け漏れありましたら教えてください。。


それぞれ実際にどのようなアニメーションになるかはここを参照するとわかりやすいと思います。
Actions · Cocos Developer Guide

アクションのスピードを変えたい、スローモーションにしたい、早送りにしたい


speed(action, speed)

  • speedの値が大きいほど時間がかかる

他のノードを追いたい

follow(followedNode, rect)

  • 2つ目の引数はどこからどこまで追いかけるかという境界線を設定している

くねくね動かしたい

cardinalSplineTo(duration,points,tension)

cardinalSplineBy(duration,points,tension)

catmullRomTo(dt, points)

catmullRomBy(dt, points)

bezierBy ( t c )

bezierTo ( t c )

  • cardinalAplineToの場合、
    • どのくらいの時間で、
    • どの点を通り(配列で管理)
    • どのくらいくねるか
    • tension0は直線、大きくなればなるほど曲線が緩くなる
    • ToとByの違いは、Toは絶対座標に移動、Byは相対座標、つまりアクションを取るノードからみてどのくらい進むのか
  • cardinalSplineとcatmullRom、Bezierの違いは指示の仕方、同じ効果を達成できる
  • ex: cc.cardinalSplineTo(2,[cc.p(350, 350),cc.p(500, 500),cc.p(600,300)],1),

位置を変えたい

updatePosition(newPos)

徐々に加速させたいor徐々に減速させたい

easeIn(rate)

easeOut(rate)

  • Inは加速
  • outは減速
  • action.easing(cc.easeIn(rate)のように書く
  • ex:cc.moveTo(0.5,cc.p(100,100)).easing(cc.easeIn(0.4))
  • カーブの描き方によるバリエーションがひくほどある
  • 以下easeファミリー
    • easeInOut: slow > fast > slow
    • easeExponential~: 指数関数的に
    • easeSine~:サインカーブ
    • easeElastic~:ラジアンカーブ
    • easeBounce~:バウンシングエフェクト
    • easeBack~:逆方向にゆっくり動いた後、正しい方向に加速していく、逆もある
    • easeBezierAction:ベジェ曲線でモーションカーブかける
    • easeQuadraticAction~: 二次方程式カーブ
    • easeQuarticAction~:四次の代数方程式<=わからん
    • easeQuinticAction~:5次曲線
    • easeCircleAction~:円形
    • easeCubicAction~:キュービックライン

見えなくしたい

toggleVisibility()

消したい

removeSelf(isNeedCleanUp)

  • isNeedCleanUpはBooleanでメモリから消すかどうか

ひっくり返したい

flipX(flip)

flipY(flip)

アニメーションなしで即座に配置したい

place ( pos [y ] )

  • posは座標orx座標、数字の場合、2つ目の引数がy座標
  • 絶対座標にアニメーションなしで配置する

コールバックアクションを作りたい

callFunc ( selector [selectorTarget ] [data ] )

  • コールバックとは、他の関数に引数として渡される関数のこと
  • 渡された関数の実行は別の関数によって管理される
  • 好きな文脈でまとまった処理を実行できる
  • var finish = cc.callFunc(this.removeSprite, this);
    • finishと書くとremoveSpriteを実行して画像を消すというアクションを行う

異なるアクションを組み合わせたい

sequence ( tempArray )

  • アクションの配列を入れると順番に実行してくれる
  • ex: 水平に動いた後にジャンプして消える

アクションを繰り返したい

repeat ( action times )

repeatForever ( action )

アクションを同時に実行したい

spawn ( tempArray )

  • アクションの配列が入る

回転させたい

rotateTo ( duration deltaAngleX [deltaAngleY ] )

rotateBy ( duration deltaAngleX [deltaAngleY ] )

  • Toは0基準で指定された数値になるまでオブジェクトを回転する。
  • Byはオブジェクトから見て何度回転するかを指定する。

直線移動させたい

moveTo ( duration position y )

moveBy ( duration deltaPos deltaY )

  • Toは絶対座標、指定されたポイントまで動く
  • Byは相対座標、オブジェクトの位置から指定された値分動く

斜めに歪めたい

skewTo ( t sx sy )

skewBy ( t sx sy )

ジャンプさせたい

jumpBy ( duration position [y ] height jumps )

jumpTo ( duration position [y ] height jumps )

大きくしたり小さくしたい

scaleTo ( duration sx [sy ] )

scaleBy ( duration sx [sy ] )

点滅させたい

blink ( duration blinks )

透明度を変えたい、フェイドイン、フェイドアウト

fadeTo ( duration opacity )

fadeIn ( duration )

fadeOut ( d )

色を変えたい

tintTo ( duration red green blue )

tintBy ( duration deltaRed deltaGreen deltaBlue )

アクションの実行を遅らせたい

delayTime ( d )

アクションを巻き戻したい

reverseTime ( action )

アクションを起こすターゲットを動的に書き換えたい

targetedAction ( target action )

  • runActionで設定されるターゲットを上書きする。


以上です!


sequenceとspawnを使うことで、アクションを組み合わせることができます。


様々な動きが作れるようになります!