六 手遊開發神器 cocos2d-x editor 之場景切換

基礎教程所有代碼地址在：https://github.com/makeapp/cocoseditor-samples

接着上一節，我們已經創建了一個主遊戲場景MainLayer，現在我們需要創建一個開始場景StartLayer，包括StartLayer.ccbx和StartLayer.js兩個文件，點擊StartLayer上的開始按鈕，遊戲切換到主遊戲場景。

先看運行效果；

代碼下載地址：http://www.kuaipan.cn/file/id_25348935635744469.htm?source=1

 

   首先創建StartLayer.ccbx和StartLayer.js文件，如下圖操作（sources右擊----new---layer）（sources右擊---new---controller）

   創建成功後，指定控制器；

   

     我們設計開始場景，一個顏色背景層，一個MenuItem按鈕；

添加MenuItem時候主要把參數target=doc選上 

   場景設計完畢，我們開始編程StartLayer.js ，只需要加入一個函數onPlayClicked(),點擊player後跳轉到MainLayer.js;

//
// CleanerScoreScene class
//
var StartLayer = function () {
    cc.log("StartLayer")
};

StartLayer.prototype.onDidLoadFromCCB = function () {
//    this.rootNode.onUpdate = function (dt)
//    {
//        this.controller.onUpdate();
//    };
//    this.rootNode.schedule(this.rootNode.onUpdate);

    if (sys.platform == 'browser') {
        this.onEnter();
    }
    else {
        this.rootNode.onEnter = function () {
            this.controller.onEnter();
        };
    }

    this.rootNode.onExit = function () {
        this.controller.onExit();
    };
};

StartLayer.prototype.onEnter = function () {
}

StartLayer.prototype.onUpdate = function () {

}

StartLayer.prototype.onPlayClicked = function () {
    cc.BuilderReader.runScene("", "MainLayer");
}

StartLayer.prototype.onExit = function () {

}

   然後再去設置Main.js,讓主函數先啓動StartLayer; 也別忘記加入這行代碼require("StartLayer.js");

if (sys.platform == 'browser') {
    var require = function (file) {
        var d = document;
        var s = d.createElement('script');
        s.src = file;
        d.body.appendChild(s);
    }
} else {
    require("jsb.js");
}

cc.debug = function (msg) {
    cc.log(msg);
}

cc.BuilderReader.replaceScene = function (path, ccbName) {
    var scene = cc.BuilderReader.loadAsSceneFrom(path, ccbName);
    cc.Director.getInstance().replaceScene(scene);
    return scene;
}

cc.BuilderReader.loadAsScene = function (file, owner, parentSize) {
    var node = cc.BuilderReader.load(file, owner, parentSize);
    var scene = cc.Scene.create();
    scene.addChild(node);
    return scene;
};

cc.BuilderReader.loadAsSceneFrom = function (path, ccbName) {
    cc.BuilderReader.setResourcePath(path + "/");
    return cc.BuilderReader.loadAsScene(path + "/" + ccbName);
}

cc.BuilderReader.loadAsNodeFrom = function (path, ccbName, owner) {
    cc.BuilderReader.setResourcePath(path + "/");
    return cc.BuilderReader.load(path + "/" + ccbName, owner);
}

cc.BuilderReader.runScene = function (module, name) {
    var director = cc.Director.getInstance();
    var scene = cc.BuilderReader.loadAsSceneFrom(module, name);
    var runningScene = director.getRunningScene();
    if (runningScene === null) {
        cc.log("runWithScene");
        director.runWithScene(scene);
    }
    else {
        cc.log("replaceScene");
        director.replaceScene(scene);
    }
}

var ccb_resources = [
    {type: 'image', src: "Resources/HelloWorld.png"},
    {type: 'image', src: "Resources/CloseNormal.png"},
    {type: 'image', src: "Resources/CloseSelected.png"}
];

require("MainLayer.js");
require("StartLayer.js");

if (sys.platform == 'browser') {

    var Cocos2dXApplication = cc.Application.extend({
        config: document['ccConfig'],
        ctor: function () {
            this._super();
            cc.COCOS2D_DEBUG = this.config['COCOS2D_DEBUG'];
            cc.initDebugSetting();
            cc.setup(this.config['tag']);
            cc.AppController.shareAppController().didFinishLaunchingWithOptions();
        },
        applicationDidFinishLaunching: function () {
            var director = cc.Director.getInstance();
            // director->enableRetinaDisplay(true);
            // director.setDisplayStats(this.config['showFPS']);
            // set FPS. the default value is 1.0/60 if you don't call this
            director.setAnimationInterval(1.0 / this.config['frameRate']);
            var glView = director.getOpenGLView();
            glView.setDesignResolutionSize(1280, 720, cc.RESOLUTION_POLICY.SHOW_ALL);
            cc.Loader.preload(ccb_resources, function () {
                cc.BuilderReader.runScene("", "StartLayer");
            }, this);
            return true;
        }
    });
    var myApp = new Cocos2dXApplication();
} else {
    cc.BuilderReader.runScene("", "StartLayer");
}

  

    一切都好了，點擊運行；先進入開始界面，點擊play跳入遊戲主界面

下一篇文章 我會介紹cocos2d-x  editor的字體設計       筆者（李元友）

資料來源：cocos2d-x  editor