码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-12-06 14:05:12      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:android   javascript   cocos2dx   cocos2dx-js   

我们下载的是cocos2dx-js的精简版本,主要是为了分析简单明了,能更清楚的看到架构流程。

下载地址:

http://cocos2d-x.org/filecenter/jsbuilder/

下载轻量版。

 

 ----------------------

服务器模拟使用xampp软件。

调试使用360浏览器自带调试。

开发环境当前没找到一个好的,暂时使用notepad++编辑,如有好的,请告知。

-----------------

一般学习一个引擎的思路便是阅读引擎自带的demo源码,熟悉架构以及模块。关于demo,我们下载完整版本,在cocos2d-js-v3.1\samples\js-tests\src 这个路径下。

关于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>

需要一个idgameCanvas tagcanvas的标签,为渲染使用。

 

主角代码为:

 <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();




 

 

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

标签:android   javascript   cocos2dx   cocos2dx-js   

原文地址:http://blog.csdn.net/a332324956/article/details/41775027

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!