CVP认证学习笔记--(何小成)004--实现自定义场景

这节课的内容讲的是如何在cocos中添加自定义场景，一个看似很简单的内容，包含了很多cocos的运行机制原理。
以前我们都直接在app.js中写代码，然后运行查看效果，这节课详细讲解了cocos从启动到运行的一个流程，分为以下几步：

index.html

由于cocosjs基于h5进行开发，因此启动还是从html页面为入口，在index.html中，有一下几句代码：

1	<canvas id="gameCanvas" width="480" height="720"></canvas>

可以看出，整个cocos的游戏是基于canvas进行绘制的，第一句就定义了一个gameCanvas；
然后加载了CCBoot.js，记载一些cocos

cocos开发库及资源配置加载

1	src="frameworks/cocos2d-html5/CCBoot.js"

cocos通过CCBoot.js加载cocos的启动文件，可以点开CCBoot.js查看cocos启动时都加载些什么内容，其中就能看到project.json也是在这个过程中加载的，project.json中，定义了cocos游戏的一些配置参数，其中包括加载的js文件，使用的引擎，使用的模块等信息。

main.js

1	cocos src="main.js"

当CCBoot.js启动完之后，才轮到man.js出场，按照以往的惯例，main函数一般都是程序的入口，main.js中的关键函数如下：

cc.game.onStart = function(){
//判断当前项目是native game还是h5(我们写的这些代码可以直接打包app)
//如果是 h5则删掉loading的DOM节点
if(!cc.sys.isNative %26%26 document.getElementById("cocosLoading")) //If referenced loading.js, please remove it
document.body.removeChild(document.getElementById("cocosLoading"));
// Pass true to enable retina display, on Android disabled by default to improve performance
cc.view.enableRetina(cc.sys.os === cc.sys.OS_IOS ? true : false);
// Adjust viewport meta
cc.view.adjustViewPort(true);
// Setup the resolution policy and design resolution size
cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
// Instead of set design resolution, you can also set the real pixel resolution size
// Uncomment the following line and delete the previous line.
// cc.view.setRealPixelResolution(960, 640, cc.ResolutionPolicy.SHOW_ALL);
// The game will be resized when browser size change
cc.view.resizeWithBrowserSize(true);
//以上4行主要来设置屏幕的适配和窗口,SHOW_ALL表示适配全屏幕
//load resources
// 预加载所有纹理图片资源，加载完成之后回调function,g_resources在哪定义的？一会揭晓
cc.LoaderScene.preload(g_resources, function () {
//当资源加载完成，调用导演类来实现第一个场景的加载HelloWorldScene,src/app.js定义的
//cc.director.runScene(new HelloWorldScene());
//现在我们要定义一个新的场景类，然后加载
cc.director.runScene(new myScene());//先保存这个文件，然后编辑src/myscene.js
}, this);
};
cc.game.run();

可以看到main.js加载了cocos的一些核心类，其中最重要的就是加载了游戏的第一个运行的场景，这里我已经改成了我自己的场景myScene，通过main.js启动第一个场景之后，整个游戏才真正的跑起来了。

以上三个步骤就是cocos项目的启动的一个大概过程，其中讲到了一个场景的概念，我个人认为cocos的这些设计理念特别符合我们人类的主观认识，把游戏和电影中的一些内容对应。cocos中有导演、场景、图层和精灵的概念。一般来说，一场电影中只会有一个导演，cocos游戏中，一般会有一个导演类；一场电影会有多个镜头，对应cocos中就是多个场景，而同一时刻，只会同时运行一个场景，就像电影中不可能同时出现多个镜头；电影场景中的房屋，天空，大地，就对应cocos中的图层；而房屋中的桌椅板凳、天空中的云、地面上的人，就对应cocos中的精灵。通过电影的这么一个过程，我们比较能够容易的理解cocos的一个机制原理。

以上基本就是课程的全部内容，然后作业呢，也跟课程一样，要完成很简单，但背后内容，还真的是很多的，我自定义的场景内容如下：

var myLayer = cc.Layer.extend({
    ctor:function(){
        this._super();
        var size = cc.winSize;
        var txt1 = new cc.LabelTTF("这里是游戏场景","",50);
        txt1.setPosition(size.width/2,size.height-txt1.height);
        var txt2 = new cc.LabelTTF("我的名字是何金成","",50);
        txt2.setPosition(size.width/2,txt1.height-txt1.height/2);
        this.addChild(txt1);
        this.addChild(txt2);
        return true;
    }
});

var myScene = cc.Scene.extend({
    ctor:function(){
        this._super();
        var layer1 = new myLayer();
        this.addChild(layer1);
    }
});

最后运行效果

http://www.cocoscvp.com/usercode/2016_04_09/8ab000a365413ab9ebdb5a3533571828bbdd552f/