シーンの切り替え、トランジションの基本（Cocos Code IDE, Lua言語） #Lua

Cocos Code IDEを使ってLua言語で、シーンを切り替える基本です。

実行環境、IDE	Cocos2d-xバージョン	言語
Cocos Code IDE Mac OS X 1.0.0-RC2	Cocos2d-x V3.2	Lua言語

サンプルコード

プロジェクトを新規作成で作成します。（FileメニューのNew->Cocos Lua Project...から作成できます。）
プロジェクト名は適当につけてください。画面は縦画面(portrait)を指定します。

main.luaファイルを修正します。

main.lua/26行目

cc.Director:getInstance():getOpenGLView():setDesignResolutionSize(320, 480, 0) -- 縦画面用に(480, 320, 0)から(320, 480, 0)に変更

main.lua/31行目

--gameScene:playBgMusic() --使わないのでコメントアウト

GameScene.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

実行して画面をタップすると、青いシーンから緑の画面のシーンへクルッと回転して切り替わります。

解説

サンプルコードは長いですが、シーンの遷移に関する箇所はわずかです。

シーンを切り替える

ただシーンを切り替えるだけなら以下のコードで可能です。
シーンを作成し、replaceSceneを実行します。

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

トランジション（画面遷移）を使ったシーンの切り替え

シーンの切り替えにアニメーションを入れるにはトランジションを利用します。

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

ここでの例ではTransitionFlipXを使用しています。
シーンの切替時に横方向へクルッと回転します。

Cocos2d-xには他にも多くのトランジションが用意されています。いろいろ試してみてください。

その他のトランジションなど

その他、シーンの切り替えについてこちらのサイトにまとめましたので、よかったら参考にしてください。
シーンの作成と切り替え - Cocos Code IDEでゲームを作る逆引き辞典for Lua