はじめに

(前回)[http://qiita.com/samuneP/items/f2d24911803debbcaa48]
cocos2dx-3.0rc0 で環境は作ったと思います
ので、今回は cocoStudioで UIを表示します

cocoStudio

起動したらUI Editorを選びます。
Imageとかボタンとかテキストとか好きに貼付けてください
今回は　640x960 の縦画面にしたいのでサイズは変更しました
そして exportをします
export以下に jsonファイルと画像ディレクトリが出来るので
それをプロジェクトのres以下に置きます

C++ソース

基本的にだいたいの事はLuaスクリプトで完結しますが、ソースを少し確認しましょう

Classes/AppDelegate.cpp

bool AppDelegate::applicationDidFinishLaunching()
{
    // initialize director
    auto director = Director::getInstance();
    auto glview = director->getOpenGLView();
    if(!glview) {
        glview = GLView::createWithRect("Mimico", Rect(0,0,900,640));
        director->setOpenGLView(glview);
    }

//    glview->setDesignResolutionSize(480, 320, ResolutionPolicy::NO_BORDER);
    glview->setDesignResolutionSize(640, 960, ResolutionPolicy::NO_BORDER);

    // turn on display FPS
    director->setDisplayStats(true);

    // set FPS. the default value is 1.0/60 if you don't call this
    director->setAnimationInterval(1.0 / 60);


    auto engine = LuaEngine::getInstance();
    ScriptEngineManager::getInstance()->setScriptEngine(engine);
    engine->executeScriptFile("src/main.lua");

    return true;
}

最初に画面の設定をしてます
今回縦画面の 640x960 にしたので
setDesignResolutionSize の部分を変更しました

auto engine = LuaEngine::getInstance();
ScriptEngineManager::getInstance()->setScriptEngine(engine);
engine->executeScriptFile("src/main.lua");

この部分がスクリプトを起動してますね

Lua部分

サンプルのソースは、色んな事をしています。
背景を読み込み、ドラッグで背景を動かしています
そしてメニューボタンを作りメニューがオープンし、メニュー項目クリックでメニュークローズ
そして音楽を鳴らす

この部分を超シンプルにし、更に UIとして cocoStudioのデータを読み込ませてみます

main.lua

require "Cocos2d"
-- cclog
cclog = function(...)
    print(string.format(...))
end

-- for CCLuaEngine traceback
function __G__TRACKBACK__(msg)
    cclog("----------------------------------------")
    cclog("LUA ERROR: " .. tostring(msg) .. "\n")
    cclog(debug.traceback())
    cclog("----------------------------------------")
end

local function main()
    collectgarbage("collect")
    -- avoid memory leak
    collectgarbage("setpause", 100)
    collectgarbage("setstepmul", 5000)
    cc.FileUtils:getInstance():addSearchResolutionsOrder("src");
    cc.FileUtils:getInstance():addSearchResolutionsOrder("res");
    local schedulerID = 0
    --support debug
    local targetPlatform = cc.Application:getInstance():getTargetPlatform()
        ---------------

    local visibleSize = cc.Director:getInstance():getVisibleSize()
    local origin = cc.Director:getInstance():getVisibleOrigin()



    -- create BG
    local function createLayerBG()
        local layerBG = cc.Layer:create()

        local bg = cc.Sprite:create("farm.jpg")
        bg:setPosition(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2)
        layerBG:addChild(bg)

        return layerBG
    end



    -- create UI
    local function createLayerUI()
        local layerUI = cc.Layer:create()

        -- add cocoStudio
        local ui = ccs.GUIReader:getInstance():widgetFromJsonFile("ui.json")
        layerUI:addChild(ui,1)

        return layerUI
    end


    -- run
    local sceneGame = cc.Scene:create()
    sceneGame:addChild(createLayerBG())
    sceneGame:addChild(createLayerUI())

    if cc.Director:getInstance():getRunningScene() then
        cc.Director:getInstance():replaceScene(sceneGame)
    else
        cc.Director:getInstance():runWithScene(sceneGame)
    end

end


xpcall(main, __G__TRACKBACK__)

local ui = ccs.GUIReader:getInstance():widgetFromJsonFile("ui.json")
layerUI:addChild(ui,1)

この２行です

次はボタンのイベントとったり、画像変えたり、動かそうと思います

cocos2dx-3.0rc0 LuaバインディングでcocoStudioを扱う

はじめに

cocoStudio

C++ソース

Lua部分