• cocos2dx-js 初探 整体流程helloworld.html分析


    我们下载的是cocos2dx-js的精简版本,主要是为了分析简单明了,能更清楚的看到架构流程。
    下载地址:
    http://cocos2d-x.org/filecenter/jsbuilder/
    下载轻量版。
    百牛信息技术bainiu.ltd整理发布于博客园
    ----------------------
    服务器模拟使用xampp软件。
    调试使用360浏览器自带调试。
    开发环境当前没找到一个好的,暂时使用notepad++编辑,如有好的,请告知。
    -----------------
    一般学习一个引擎的思路便是阅读引擎自带的demo源码,熟悉架构以及模块。关于demo,我们下载完整版本,在cocos2d-js-v3.1samplesjs-testssrc 这个路径下。
    关于api查询,可在官网找到,具体为http://www.cocos2d-x.org/wiki/Reference。
    ------------
    下面我们来分析demo,熟悉下流程。

    我们来看的是
    HelloWorld.html这个文件.


    <!DOCTYPE html>
    <html>
    <head>
    <title>Hello Cocos2d-JS</title>
    <script type="text/javascript" src="cocos2d-js-v3.1-lite.js" charset="UTF-8"></script>
    </head>
    <body>
    <canvas id="gameCanvas" width="800" height="450"></canvas>
    <script type="text/javascript">
    window.onload = function(){
    cc.game.onStart = function(){
    //load resources
    cc.LoaderScene.preload(["HelloWorld.png"], function () {
    var MyScene = cc.Scene.extend({
    onEnter:function () {
    this._super();
    var size = cc.director.getWinSize();
    var sprite = cc.Sprite.create("HelloWorld.png");
    sprite.setPosition(size.width / 2, size.height / 2);
    sprite.setScale(0.8);
    this.addChild(sprite, 0);

    var label = cc.LabelTTF.create("Hello World", "Arial", 40);
    label.setPosition(size.width / 2, size.height / 2);
    this.addChild(label, 1);
    }
    });
    cc.director.runScene(new MyScene());
    }, this);
    };
    cc.game.run("gameCanvas");
    };
    </script>
    </body>
    </html>


    简单来拆分下:
    <script type="text/javascript" src="cocos2d-js-v3.1-lite.js" charset="UTF-8"></script>
    引入引擎js
    <canvas id="gameCanvas" width="800" height="450"></canvas>
    需要一个id为gameCanvas tag为canvas的标签,为渲染使用。

    主角代码为:
    <script type="text/javascript">
    window.onload = function(){
    cc.game.onStart = function(){
    //load resources
    cc.LoaderScene.preload(["HelloWorld.png"], function () {
    var MyScene = cc.Scene.extend({
    onEnter:function () {
    this._super();
    var size = cc.director.getWinSize();
    var sprite = cc.Sprite.create("HelloWorld.png");
    sprite.setPosition(size.width / 2, size.height / 2);
    sprite.setScale(0.8);
    this.addChild(sprite, 0);

    var label = cc.LabelTTF.create("Hello World", "Arial", 40);
    label.setPosition(size.width / 2, size.height / 2);
    this.addChild(label, 1);
    }
    });
    cc.director.runScene(new MyScene());
    }, this);
    };
    cc.game.run("gameCanvas");
    };
    </script>


    我们可以看到标准的框架:
    window.onload = function(){
    };
    代码写在这里,当环境加载完毕触发。
    cc.game.onStart
    给这个赋值。
    cc.game.run("gameCanvas");
    这个真正开始引擎。
    cc.LoaderScene.preload 为加载前面列出来的数组资源,加载完毕后进入第二个函数。
    加载完毕,创建了一个Scene ,这个为场景。
    cc.director.runScene(new MyScene());
    这个为将场景加载进入导演里面,此时才会去绘制,显示,以及响应。
    我们来看下var MyScene里面的元素,在onEnter里面添加了一些元素,比如sprite label 使用addChild 将其加载进入scene里面,最终呈现出来。


    流程整理为:
    Window.onload 里面配置cc.game.onStart 为自己加载的第一个界面。
    使用 cc.game.run("gameCanvas");进行引擎启动。

    下面我们来看下引擎里面的cc.game.run函数的实现:

    run: function (id) {
    var self = this;
    var _run = function () {
    if (id) {
    self.config[self.CONFIG_KEY.id] = id;
    }
    if (!self._prepareCalled) {
    self.prepare(function () {
    self._prepared = true;
    });
    }
    if (cc._supportRender) {
    self._checkPrepare = setInterval(function () {
    if (self._prepared) {
    cc._setup(self.config[self.CONFIG_KEY.id]);
    self._runMainLoop();
    self._eventHide = self._eventHide || new cc.EventCustom(self.EVENT_HIDE);
    self._eventHide.setUserData(self);
    self._eventShow = self._eventShow || new cc.EventCustom(self.EVENT_SHOW);
    self._eventShow.setUserData(self);
    self.onStart();
    clearInterval(self._checkPrepare);
    }
    }, 10);
    }
    };
    document.body ?
    _run() :
    cc._addEventListener(window, 'load', function () {
    this.removeEventListener('load', arguments.callee, false);
    _run();
    }, false);
    },

    我们看,这里为首次进入初始化代码。

    if (!self._prepareCalled) {
    self.prepare(function () {
    self._prepared = true;
    });
    }
    关键代码:在
    if (cc._supportRender) 里面,这个默认肯定是要支持渲染的。
    cc._setup()设置默认参数,一些全局对象创建。

    _runMainLoop: function () {
    var self = this, callback, config = self.config, CONFIG_KEY = self.CONFIG_KEY,
    director = cc.director;
    director.setDisplayStats(config[CONFIG_KEY.showFPS]);
    callback = function () {
    if (!self._paused) {
    director.mainLoop();
    if(self._intervalId)
    window.cancelAnimationFrame(self._intervalId);
    self._intervalId = window.requestAnimFrame(callback);
    }
    };
    window.requestAnimFrame(callback);
    self._paused = false;
    }

    关键函数requestAnimFrame 执行刷新频率, director.mainLoop(); 一直执行,推动游戏执行。
    调用配置的onstart 函数执行真正代码。
    self.onStart();

  • 相关阅读:
    实验五
    实验四
    实验三
    实验二
    寄存器(内存访问)
    实验一
    寄存器
    Mermaid 绘图总结
    电脑查看系统版本
    _ZNote_Chrom_插件_Chrom运行Android软件_APK
  • 原文地址:https://www.cnblogs.com/bainiu/p/7589101.html
Copyright © 2020-2023  润新知