六 手游开发神器 cocos2d-x editor 之场景切换

原创 2014年01月23日 20:03:51



基础教程所有代码地址在: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


二 CocosEditor For JS(Cocos2d-JS)工具下载和安装配置

公告: 以下安装步骤是基于 idea13.0,idea13.1可能有些差异,但基本一致的; cocos2d-x  editor是基于intellij idea上的插件,下面我来介绍它的安装和配置 ...
  • touchsnow
  • touchsnow
  • 2014年01月18日 17:38
  • 41776

六 手游开发神器 cocos2d-x editor 之场景切换

接着上一节,我们已经创建了一个主游戏场景MainLayer,现在我们需要创建一个开始场景StartLayer,包括StartLayer.ccbx和StartLayer.js两个文件,点击StartLa...
  • touchsnow
  • touchsnow
  • 2014年01月23日 20:03
  • 6708

六 CocosEditor基础教程第二季 之得分界面

前言: 这一节创建一个和  效果图 主函数显示了选择的第12关 道具选择了4 3 2;还有相应花费的钱; 代码下载 https://github.com/makeap...
  • touchsnow
  • touchsnow
  • 2014年06月08日 13:15
  • 1947

十 手游开发神器 cocos2d-x editor 之触摸事件

这一节主要是介绍cocos2dx editor的触摸事件,让小怪物跟随移动。cocos2dx editor是开发跨平台的手机游戏工具,运行window系统上,javascript脚本语言,基于coco...
  • touchsnow
  • touchsnow
  • 2014年01月25日 12:26
  • 5077

四 手游开发神器 cocos2d-x editor 游戏框架介绍

cocos2d-x editor 新建工程时会自动生成游戏框架,如下图  红色边框共有五个区域  idea 是自动生成的目录,读者不需要操作 Source是主工程目录,所有的设计和编码都...
  • touchsnow
  • touchsnow
  • 2014年01月23日 11:44
  • 14791

史上最优秀的,最快的编辑器VIM(上古神器)

给大家介绍一下非常优秀的一款编辑器vim,它诞生于可视化界面之前,的一款非常古老的编辑神器,那会儿都是黑乎乎的命令窗口,鼠标的都没有 vim可以解放我们一直抓着鼠标的手,因为vim提供了足够...
  • Yun__shen
  • Yun__shen
  • 2017年10月28日 21:57
  • 309

一 CocosEditor基础教程第二季 之选道具界面(TableView)

前言:
  • touchsnow
  • touchsnow
  • 2014年06月08日 13:10
  • 3103

三 手游开发神器 cocos2d-x editor 之基础工具 intellij idea

intellij idea 13 注册序列号:亲测有效  Orefa      00066-FEIQE-EEZDY-D9PBH-Z9W0E-SPJS1makeapp   00820-K2S8N-...
  • touchsnow
  • touchsnow
  • 2014年01月18日 18:26
  • 12592

十二 手游开发神器 cocos2d-x editor 之游戏暂停悬浮层

这一节主要是介绍cocos2dx editor的暂停界面。cocos2dx editor是开发跨平台的手机游戏工具,运行window系统上,javascript脚本语言,基于cocos2d-x跨平台游...
  • touchsnow
  • touchsnow
  • 2014年01月25日 15:36
  • 5271

九 手游开发神器 cocos2d-x editor 之粒子效果(ParticleEditor)

这一节主要是介绍cocos2dx editor的粒子效果,实现小怪物头顶有光环粒子,背景有瀑布粒子。cocos2dx editor是开发跨平台的手机游戏工具,运行window系统上,javascrip...
  • touchsnow
  • touchsnow
  • 2014年01月24日 16:43
  • 8498
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:六 手游开发神器 cocos2d-x editor 之场景切换
举报原因:
原因补充:

(最多只允许输入30个字)