PR

シーンの作成と切り替え

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

シーンはすべてのオブジェクトの土台となるものです。タイトルシーンやゲームシーンなど画面ごとにシーンを作成して切り替えることができます。シーンの切替にはトランジションと呼ばれるシーン切替の画面効果を適用することができます。

サンプルコード

プロジェクトの新規作成で作成されるGameScene.luaファイルを下記のサンプルコードと書き換えます。 実行して画面をタップすると、青いシーンから緑の画面のシーンへクルッと回転して切り替わります。

require "Cocos2d"
require "Cocos2dConstants"

local SecondScene = {}

-- 最初のシーン
local GameScene = class("GameScene",function()
    return cc.Scene:create()
end)

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

    -- レイヤーの作成
    local layer = cc.LayerColor:create(cc.c4b(0, 0, 255, 255))
    scene:addChild(layer)

    -- ラベルの作成
    local label = cc.Label:createWithSystemFont("最初のシーン", "Arial", 18)
    label:setPosition(visibleSize.width/2, visibleSize.height/2)
    layer:addChild(label)

    -- タッチイベントで呼ばれる関数
    local function onTouchBegan(touch, event)
        local scene = SecondScene.create()
        local transition = cc.TransitionFlipX:create(1, scene)
        cc.Director:getInstance():replaceScene(transition) 
    end

    -- タッチイベントの登録
    local listener = cc.EventListenerTouchOneByOne:create()
    listener:registerScriptHandler(onTouchBegan, cc.Handler.EVENT_TOUCH_BEGAN )
    local eventDispatcher = scene:getEventDispatcher()
    eventDispatcher:addEventListenerWithSceneGraphPriority(listener, scene)

    return scene
end

-- 2番めのシーン
SecondScene = class("SecondScene",function()
    return cc.Scene:create()
end)

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

    -- レイヤーの作成
    local layer = cc.LayerColor:create(cc.c4b(0, 255, 0, 255))
    scene:addChild(layer)

    -- ラベルの作成
    local label = cc.Label:createWithSystemFont("2番めのシーン", "Arial", 18)
    label:setPosition(visibleSize.width/2, visibleSize.height/2)
    scene:addChild(label)

    -- タッチイベントで呼ばれる関数
    local function onTouchBegan(touch, event)
        local scene = GameScene.create()
        local transition = cc.TransitionFlipX:create(1, scene)
        cc.Director:getInstance():replaceScene(transition) 
    end

    -- タッチイベントの登録
    local listener = cc.EventListenerTouchOneByOne:create()
    listener:registerScriptHandler(onTouchBegan, cc.Handler.EVENT_TOUCH_BEGAN )
    local eventDispatcher = scene:getEventDispatcher()
    eventDispatcher:addEventListenerWithSceneGraphPriority(listener, scene)

    return scene
end

return GameScene

ss_scene1.pngss_scene2.png

シーンの例文

シーンを切り替える

シーンを切り替えるにはDirectorクラスのreplaceSceneメソッドを使います。

local scene = SecondScene.create()
cc.Director:getInstance():replaceScene(scene)

トランジションを使ってシーンを切り替える

トランジションを使用するとシーンの切り替えに画面効果を追加することができます。
トランジションを使ってシーンを切り替えるには、シーンのインスタンスを元にトランジションを作成し、replaceSceneへ渡します。

local scene = cc.Scene:create()
local transition = cc.TransitionFlipX:create(1, scene) -- 1秒の時間をかけて画面をフリップします
cc.Director:getInstance():replaceScene(transition) 

トランジション

回転してシーンを切り替えるトランジション

回転してシーンを切り替えるには以下のトランジションを使います。クラス名にZoomが付くものは奥行きを持たせて回転します。Angularが付くものは立体的な角度を持たせて回転します。

TransitionFlipX、TransitionZoomFlipX

create(duration, scene, orientation)
水平方向に回転します。

  • (float) duration:時間
  • (cc.Scene) scene:シーン
  • (int) orientation:方向(下記から選択)

cc.TRANSITION_ORIENTATION_LEFT_OVER 次のシーンが左側にくるように回転
cc.TRANSITION_ORIENTATION_RIGHT_OVER 次のシーンが右側にくるように回転

--サンプルコード
local transition = cc.TransitionZoomFlipX:create(1, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER )

TransitionFlipY、TransitionZoomFlipY

create(duration, scene, orientation)
垂直方向に回転します。

  • (float) duration:時間
  • (cc.Scene) scene:シーン
  • (int) orientation:方向(下記から選択)

cc.TRANSITION_ORIENTATION_UP_OVER 次のシーンが上側にくるように回転
cc.TRANSITION_ORIENTATION_DOWN_OVER 次のシーンが下側にくるように回転

TransitionFlipAngular、TransitionZoomFlipAngular

local transition = cc.TransitionZoomFlipX:create(1, scene, cc.TRANSITION_ORIENTATION_LEFT_OVER ) create(duration, scene, orientation)
立体的に回転します。

  • (float) duration:時間
  • (cc.Scene) scene:シーン
  • (int) orientation:方向(下記から選択)

cc.TRANSITION_ORIENTATION_LEFT_OVER 次のシーンが左側にくるように回転
cc.TRANSITION_ORIENTATION_RIGHT_OVER 次のシーンが右側にくるように回転

フェードさせてシーンを切り替えるトランジション

フェードさせてシーンを切り替えるには以下のトランジションを使います。

TransitionCrossFade

create(duration, scene)
前のシーンがフェードアウトしながら、次のシーンがフェードインします。

  • (float) duration:時間
  • (cc.Scene) scene:シーン
--サンプルコード
local transition = cc.TransitionCrossFade:create(1, scene )

TransitionFade

create(duration, scene)
create(duration, scene, color)
前のフェードアウトした後、次のシーンがフェードインします。colorを指定するとその色を間に挟みます。

  • (float) duration:時間
  • (cc.Scene) scene:シーン
  • (color3b_table) color:

TransitionFadeTR、TransitionFadeBL、TransitionFadeUp、TransitionFadeDown

create(duration, scene) TR(TopRight)は右上へ、BL(BottomLeft)は左下、Upは上、Downは下へ向かってシーンが切り替わります。

  • (float) duration:時間
  • (cc.Scene) scene:シーン

シーンが移動しながら切り替わるトランジション

シーンが移動しながら切り替わるトランジションは以下のクラスを使います。Moveはシーンに被さるように、Slideはシーンを押し出すように切り替わります。Lは次のシーンが左から、Rは右からTは上から、Bは下から移動してきます。

TransitionMoveInL、TransitionMoveInR、TransitionMoveInB、TransitionMoveInT
シーンに被さるように切り替わります。

TransitionSlideInL、TransitionSlideInR、TransitionSlideInB、TransitionSlideInT
シーンを押し出すように切り替わります。

create(duration, scene)メソッド

  • (float) duration:時間
  • (cc.Scene) scene:シーン
--サンプルコード
local transition = cc.TransitionMoveInL:create(1, scene )

シーンを書き換えるように切り替わるトランジション

シーンを上から書き換えるように切り替わるトランジションは以下のクラスを使います。

TransitionProgressHorizontal 水平方向に切り替わります。
TransitionProgressVertical 垂直方向に切り替わります。
TransitionProgressInOut 内側から外側に向かって切り替わります。
TransitionProgressOutIn 外側から内側に向かって切り替わります。
TransitionProgressRadialCW 時計回りに切り替わります。
TransitionProgressRadialCCW 反時計回りに切り替わります。

create(duration, scene)メソッド

  • (float) duration:時間
  • (cc.Scene) scene:シーン
--サンプルコード
local transition = cc.TransitionProgressHorizontal:create(1, scene )

ページをめくるように切り替わるトランジション

シーンをページをめくるように切り替えるにはTransitionPageTurnクラスを使います。

TransitionPageTurn

create(duration, scene, backwards)
ページをめくるようにシーンを切り替える。

-- (bool) backwards:falseでページをめくるように、trueでページが被さるように切り替わる。

--サンプルコード
local transition = cc.TransitionPageTurn:create(1, scene, false )

その他のトランジション

その他のトランジションです。

TransitionShrinkGrow 前のシーンが縮小しながら次のシーンが拡大して切り替わる。
TransitionSplitCols、TransitionSplitRows 縦や横に割れて切り替わる。
TransitionTurnOffTiles 小さなタイル状で切り替わる。
TransitionRotoZoom 前のシーンが回転しながら縮小して、次のシーンが回転しながら拡大して切り替わる。
TransitionJumpZoom 前のシーンがジャンプして退場し、次のシーンがジャンプしながら現れる。

create(duration, scene)メソッド

  • (float) duration:時間
  • (cc.Scene) scene:シーン
--サンプルコード
local transition = cc.TransitionShrinkGrow:create(1, scene )
Copyright(C) 2014 - 2015 「Cocos Code IDEとLua言語でゲームを作る」逆引き辞典for Lua All rights Reserved.