リンク

Senchan Office（このサイトの運営者）

Cocos 2d-xのサイト

PR

アクションを利用する

Cocos Code IDEとLua言語を使ったサンプルコードと例文集です。

アクションを使用するとスプライトに様々な動きをつけることができます。Cocos2d-xには多くのアクションが用意されています。

サンプルコード

プロジェクトの新規作成で作成されるGameScene.のGameScene.create()を下記のサンプルコードと書き換えます。 サンプルコードを実行するとスプライトが画面左下から中央まで移動します。（画像はスプライトのページと同じものを利用しています。）

function GameScene.create()
    local scene = GameScene.new()
    local visibleSize = cc.Director:getInstance():getVisibleSize()

    -- スプライトを作成
    local sprite = cc.Sprite:create("character.png")
    sprite:setPosition(0, 0)
    scene:addChild(sprite)

    -- アクションを実行
    local action = cc.MoveTo:create(3, cc.p(visibleSize.width/2, visibleSize.height/2))
    sprite:runAction(action)

    return scene
end

ss_action.png

アクションの例文（移動系）

Cocos2d-xにはいろいろなアクションが用意されています。ここでは移動に関するアクションの例を示します。

移動する

MoveTo、MoveByを使うとノードを移動させることができます。 MoveToはその座標まで、MoveByは現在の座標から指定した座標を加えて移動します。

local action = cc.MoveTo:create(3, cc.p(100, 100))
sprite:runAction(action)

MoveTo

create(duration, position)
指定した位置まで移動するアクションを作成します。

  • (float) duration:アクションの実行時間
  • (vec2_table) position:座標

MoveBy

create(duration, position)
現在位置から指定した座標を加えて移動するアクションを作成します。

  • (float) duration:アクションの実行時間
  • (vec2_table) position:座標

回転する

RotateTo、RotateByを使うとノードを回転させることができます。RotateToは指定した角度まで最短方向で回転、RotateByでは現在の角度から値を加えて回転します。

local action = cc.RotateTo:create(3, 45) -- 3秒かけて45度回転
sprite:runAction(action)

ちなみにcreate(3, 720, 0)のように引数を3つにすると、3D座標でX軸中心の回転やY軸中心の回転を行えます。

RotateTo

create(duration, deltaAngle)
create(duration, deltaAngleX, deltaAngleY)
指定した角度まで回転するアクションを作成します。回転は最短方向で回転します。

  • (float) duration:アクションの実行時間
  • (float) deltaAngle:角度
  • (float) deltaAngleX:X軸の角度
  • (float) deltaAngleY:Y軸の角度

RotateBy

create(duration, deltaAngle)
create(duration, deltaAngleX, deltaAngleY)
現在の角度に指定した角度を加えて回転するアクションを作成します。

  • (float) duration:アクションの実行時間
  • (float) deltaAngle:角度
  • (float) deltaAngleX:X軸の角度
  • (float) deltaAngleY:Y軸の角度

拡大縮小

ScaleTo、ScaleByを使うとノードを拡大縮小することができます。ScaleToは指定した倍率に、ScaleByは現在の倍率に掛けあわせて拡大縮小します。

local action = cc.ScaleTo:create(3, 2.0) -- 3秒かけて2倍に拡大
sprite:runAction(action)

ScaleTo

create(duration, s)
create(duration, sx, sy) create(duration, sx, sy, sz)
指定した倍率まで拡大するアクションを作成します。

  • (float) duration:アクションの実行時間
  • (float) s:縦と横の比率
  • (float) sx:横方向の比率
  • (float) sy:縦方向の比率
  • (float) sz:Z方向の比率

ScaleBy

create(duration, s)
create(duration, sx, sy) create(duration, sx, sy, sz)
現在の倍率から指定した倍率を掛けあわせて拡大するアクションを作成します。

  • (float) duration:アクションの実行時間
  • (float) s:縦と横の比率
  • (float) sx:横方向の比率
  • (float) sy:縦方向の比率
  • (float) sz:Z方向の比率

ジャンプ

JumpTo、JumpByを使います。 アクションの時間、移動先の座標、ジャンプの高さ、ジャンプの回数をcreateメソッドの引数に指定します。

local action = cc.JumpTo:create(3, cc.p(300, 300), 50, 5) -- 3秒間、(300,300)へ移動、高さ50、ジャンプ5回
sprite:runAction(action)

JumpTo

create(duration, position, height, jumps)
移動先の座標、高さ、ジャンプの回数を指定してノードをジャンプさせるアクションを作成します。

  • (float) duration:アクションの実行時間
  • (vec2_table) position:移動先の座標
  • (float) height:高さ
  • (int) jumps:ジャンプの回数

JumpBy

create(duration, position, height, jumps)
移動する座標、高さ、ジャンプの回数を指定してノードをジャンプさせるアクションを作成します。

  • (float) duration:アクションの実行時間
  • (vec2_table) position:移動する座標
  • (float) height:高さ
  • (int) jumps:ジャンプの回数

アクションの例文（連続実行、同時実行、繰り返し、停止）

ここでは複数のアクションを扱う方法や、アクションの停止などの例を示します。

連続してアクションを実行する

複数のアクションを連続して実行するには、Sequenceを使います。

:
local action1 = cc.MoveTo:create(3, cc.p(100, 100))
local action2 = cc.RotateTo:create(3, 45) -- 3秒かけて45度回転
local sequence = cc.Sequence:create(action1, action2)
sprite:runAction(sequence)

この例では、（100,100)へ移動後に45度回転します。

Sequence

create(action1, action2, ...)
アクションを連続して実行します。

  • (cc.FiniteTimeAction) action1:アクション

同時並行でアクションを実行する

複数のアクションを同時並行で実行するには、Spawnを使います。

:
local action1 = cc.MoveTo:create(3, cc.p(100, 100))
local action2 = cc.RotateTo:create(3, 45) -- 3秒かけて45度回転
local spawn = cc.Spawn:create(action1, action2)
sprite:runAction(spawn)

この例では(100,100)へ45度回転しながら移動します。

Spawn

create(action1, action2, ...)
アクションを同時並行で実行します。

  • (cc.FiniteTimeAction) action1:アクション

アクションを繰り返す

アクションを繰り返すにはRepeat、RepeatForeverを使います。 Repeatは繰り返す回数を指定します。 RepeatForeverは永久に繰り返します。

local action = cc.RotateBy:create(1, 45) -- 1秒かけて45度回転
local repeatAction = cc.Repeat:create(action, 3) -- 3回繰り返す
sprite:runAction(repeatAction)

Repeat

create(action, times)
アクションを指定回数繰り返します。

  • (cc.FiniteTimeAction) action:アクション
  • (unsigned int) times:繰り返し回数

RepeatForever

create(action)
アクションを永久に繰り返します。

  • (cc.FiniteTimeAction) action:アクション

アクションを停止する

アクションを止めるにはノードのstopAllActionsメソッドやstopActionメソッドを使います。

-- すべてのアクションを停止する
sprite:stopAllActions()
-- 特定のアクションを停止する
sprite:stopAction(action)

一時的にアクションを止めたり、再開する

アクションを一時的に止めたり、再開するにはノードのpauseメソッドやresumeメソッドを使います。

-- アクションを一時停止する
sprite:pause()
-- アクションを再開する
sprite:resume()

アクションの例文（その他）

よく使いそうなその他のアクションです。

フェードイン・フェードアウト

FadeIn、FadeOut、FadeToを使うとノードをフェードイン・フェードアウトすることができます。
FadeInは透明の状態から徐々に現れます。最初にスプライトを透明にしておく必要があります。
FadeOutは徐々に透明になります。
FadeToは指定した透明度へ変化します。

sprite:setOpacity(0)
local action = cc.FadeIn:create(3) -- 3秒かけて出現する
sprite:runAction(action)

FadeIn

create(duration) 不透明状態に変化させます。

  • (float) duration:アクションの実行時間

FadeOut

create(duration) 透明状態に変化させます。

  • (float) duration:アクションの実行時間

FadeTo

create(duration, opacity) 指定した透明度へ変化させます。

  • (float) duration:アクションの実行時間
  • (unsigned char) opacity:透明度

画像の反転

X方向、またはY方向に画像を反転するには、FlipX、FlipYを使います。

local action = cc.FlipX:create(true)
sprite:runAction(action)

(通常は他のアクションと組み合わせて使います。ただ反転するならアクションを使わずにsprite:setFlippedX(true)を使います。）

表示、非表示

Showを使うと表示、Hideを使うと非表示にできます。

local action = cc.Hide:create()
sprite:runAction(action)

ToggleVisibilityは表示・非表示を切り替えます。

local action = cc.ToggleVisibility:create()
sprite:runAction(action)

（これも通常は他のアクションと組み合わせて使います。）

逆方向のアクションを得る

作成したアクションの逆の動作を得るにはreverse()メソッドを使います。 （すべてのアクションで、逆の動作を得られるわけではありません。）

local action = cc.RotateBy:create(3, 45) -- 3秒かけて45度回転
sprite:runAction(action:reverse())

一定時間待機する

何もしないで一定時間待機するには、DelayTimeを使います。Sequenceと組み合わせて使うことが多いです。

local action1 = cc.DelayTime:create(3) -- 3秒待機
local action2 = cc.RotateTo:create(3, 45) -- 3秒かけて45度回転
local sequence = cc.Sequence:create({action1, action2})
sprite:runAction(sequence)

アクションの実行で、関数を呼び出す

CallFuncを使います。Sequenceと組み合わせて使うことが多いと思います。

-- 呼ばれる関数を準備
local function func(node)
    print("funcが呼ばれました。")
end

-- アクションを実行
local action = cc.RotateTo:create(3, 45) -- 3秒かけて45度回転
local callFunc = cc.CallFunc:create(func)
local sequence = cc.Sequence:create({action, callFunc})
sprite:runAction(sequence)

引数にテーブルのデータを渡すこともできます。

local function func(node, value)
end

local value = {}
local callFunc = cc.CallFunc:create(func, value)

自身を削除する

自身を削除するにはRemoveSelfを使います。これも単体で使うことはなく、他のアクションと組み合わせて使うことになります。

local action = cc.RotateTo:create(3, 45) -- 3秒かけて45度回転
local remove = cc.RemoveSelf:create()
local sequence = cc.Sequence:create({action, remove})
sprite:runAction(sequence)

この例では、3秒かけて45度回転した後、自身のスプライトを削除します。

イージング

イージングを使用するとアクションの実行に時間変化を与えることができます。
下記の例ではイージングを使わないと等速移動ですが、EaseInにより、初速が遅くなっています。

local action = cc.MoveTo:create(3, cc.p(200, 200))
local easein = cc.EaseIn:create(action, 2)
sprite:runAction(easein)

EaseInの代わりにEaseOutを使用すると終速が遅くなり、EaseInOutを使用すると初速と終速ともに遅くなります。
EaseBackInは一度逆方向に戻ってから移動します。 EaseBounceInはバウンドしてから移動します。 EaseElasticInはゴムの伸縮のような効果があります。

EaseIn（EaseOut, EaseInOut）

create(action, ratio)

  • (cc.FiniteTimeAction) action:アクション
  • (float) ratio:比率。通常は1以上を指定する。

EaseBackIn（EaseBackOut, EaseBackInOut）

create(action)

  • (cc.FiniteTimeAction) action:アクション

EaseBounceIn（EaseBounceOut, EaseBounceInOut）

create(action)

  • (cc.FiniteTimeAction) action:アクション

EaseElasticIn（EaseElasticOut, EaseElasticInOut）

create(action, period=0.3)

  • (cc.FiniteTimeAction) action:アクション
  • (float) period:初期値0.3
ページトップへ戻る
Copyright(C) 2014 - 2018 「Cocos Code IDEとLua言語でゲームを作る」逆引き辞典for Lua All rights Reserved.