Cocos2d-x-html5之HelloWorld深入分析与调试

时间：2023-03-10 00:12:30
Cocos2d-x-html5之HelloWorld深入分析与调试

Cocos2d-x-html5之HelloWorld深入分析与调试

另：本章所用Cocos2d-x版本为:

Cocos2d-html5-v2.1.1

http://cn.cocos2d-x.org/download

html5的时代正在来临，其可以方便的运行在多平台上并调用OPENGL 进行图形渲染，大量使用html5开发的2D和3D游戏正在涌现,Cocos2d-x也顺应形势推出了相应的版本，今天我们来学习一下Cocos2d-x在Html5上怎么运行和开发及调试。

打开HelloHTML5World，可以看到以下文件和目录：

Cocos2d-x-html5之HelloWorld深入分析与调试

res:资源图片目录：

Cocos2d-x-html5之HelloWorld深入分析与调试

src:当前程序的js文件目录：

Cocos2d-x-html5之HelloWorld深入分析与调试

main.js:主逻辑js代码文件

index.html:html5网页文件

cocos2d.js:加载Cocos2d-x库的文件

build.xml:编译cocos2d-x的html5平台版本生成的文件清单报告。

.DS_Store:系统目录显示属性存储文件，可以删除。

我们用浏览器直接打开index.html,可以看到：

Cocos2d-x-html5之HelloWorld深入分析与调试

其源码为：

[html] view
plaincopy
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Cocos2d-html5 Hello World test</title>
  6. <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
  7. </head>
  8. <body style="padding:0; margin: 0; background: #000;">
  9. <div style="text-align: center; font-size: 0">
  10. <canvas id="gameCanvas" width="800" height="450"></canvas>
  11. </div>
  12. </body>
  13. </html>
  14. <script src="cocos2d.js"></script>

可以看到，这里面关键的要点是两个地方：

1.  <canvas id="gameCanvas"width="800" height="450"></canvas>

在html5中创建了一个画布(canvas)，设定了名称和大小

2.  <scriptsrc="cocos2d.js"></script>

在网页中加载了cocos2d.js

打开cocos2d.js后，可以看到下面的代码：

[javascript] view
plaincopy
  1. (function () {
  2. //定义变量d为当前网页的文档对象
  3. var d = document;
  4. //定义变量c为一个结构，存储了一些配置属性和值。
  5. var c = {
  6. COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug
  7. box2d:false,//不使用box2d
  8. chipmunk:false,//不使用chipmunk
  9. showFPS:true,//显示FPS
  10. frameRate:60,//设定每秒60帧
  11. loadExtension:false,不载入扩展库
  12. tag:'gameCanvas', //运行cocos2d-x的画布
  13. engineDir:'../cocos2d/',//引擎的目录，这里指定为当前上级目录下的cocos2d目录中
  14. //SingleEngineFile:'',//这里注释掉了。
  15. appFiles:[//应用程序要使用到的两个js文件。
  16. 'src/resource.js',//资源定义文件
  17. 'src/myApp.js'//逻辑处理文件
  18. ]
  19. };
  20. //当前窗口加载一个事件响应处理，在DOM被加载时调用。
  21. window.addEventListener('DOMContentLoaded', function () {
  22. //当前文档创建一个脚本
  23. var s = d.createElement('script');
  24. //如果c结构中有SingleEngineFile变量并肯engineDir为空，则s中的脚本引用为SingleEngineFile指示的文件，当然，本例中这个变量注释掉了，这一段不成立。
  25. if (c.SingleEngineFile && !c.engineDir) {
  26. s.src = c.SingleEngineFile;
  27. }
  28. //如果engineDir有效，则s中的脚本引用为engineDir指定目录下的相应文件，本例中为“../cocos2d/platform/jsloader.js”。
  29. else if (c.engineDir && !c.SingleEngineFile) {
  30. s.src = c.engineDir + 'platform/jsloader.js';
  31. }
  32. else {
  33. //如果都不是，弹出对话框提示c结构成员变量设置错误。
  34. alert('You must specify either the single engine file OR the engine directory in "cocos2d.js"');
  35. }
  36. //将结构c做为一个成员变量存入到当前文档。
  37. document.ccConfig = c;
  38. //上面创建的‘script’的id设置为’cocos2d-html5’.
  39. s.id = 'cocos2d-html5';
  40. //将这个script加入到当前HTML文档的结尾。
  41. d.body.appendChild(s);
  42. //else if single file specified, load singlefile
  43. });
  44. })();

本页代码的作用是在html页面尾部中加入:

“<scriptsrc = ’../cocos2d/platform/jsloader.js’ id=’cocos2d-html5’></script>

下面我们来打开cocos2d目录下的’platform/jsloader.js’:

[javascript] view
plaincopy
  1. //脚本执行函数。
  2. (function () {
  3. //定义变量engine为一个字符串数组，元素为运行当前版本cocos2d-x要加载的所有代码文件。
  4. var engine = [
  5. 'platform/CCClass.js',
  6. 'platform/miniFramework.js',
  7. 'platform/CCCommon.js',
  8. 'platform/ZipUtils.js',
  9. 'platform/base64.js',
  10. 'platform/gzip.js',
  11. 'platform/CCMacro.js',
  12. 'platform/CCFileUtils.js',
  13. 'platform/CCTypes.js',
  14. 'platform/zlib.min.js',
  15. 'cocoa/CCGeometry.js',
  16. 'platform/Sys.js',
  17. 'platform/CCConfig.js',
  18. 'cocoa/CCSet.js',
  19. 'cocoa/CCNS.js',
  20. 'cocoa/CCAffineTransform.js',
  21. 'support/CCPointExtension.js',
  22. 'support/CCUserDefault.js',
  23. 'base_nodes/CCNode.js',
  24. 'base_nodes/CCAtlasNode.js',
  25. 'textures/CCTexture2D.js',
  26. 'textures/CCTextureCache.js',
  27. 'textures/CCTextureAtlas.js',
  28. 'misc_nodes/CCRenderTexture.js',
  29. 'misc_nodes/CCProgressTimer.js',
  30. 'effects/CCGrid.js',
  31. 'effects/CCGrabber.js',
  32. 'actions/CCAction.js',
  33. 'actions/CCActionInterval.js',
  34. 'actions/CCActionInstant.js',
  35. 'actions/CCActionManager.js',
  36. 'actions/CCActionProgressTimer.js',
  37. 'actions/CCActionCamera.js',
  38. 'actions/CCActionEase.js',
  39. 'actions/CCActionGrid.js',
  40. 'actions/CCActionTiledGrid.js',
  41. 'actions/CCActionCatmullRom.js',
  42. 'layers_scenes_transitions_nodes/CCScene.js',
  43. 'layers_scenes_transitions_nodes/CCLayer.js',
  44. 'layers_scenes_transitions_nodes/CCTransition.js',
  45. 'layers_scenes_transitions_nodes/CCTransitionProgress.js',
  46. 'layers_scenes_transitions_nodes/CCTransitionPageTurn.js',
  47. 'sprite_nodes/CCSprite.js',
  48. 'sprite_nodes/CCAnimation.js',
  49. 'sprite_nodes/CCAnimationCache.js',
  50. 'sprite_nodes/CCSpriteFrame.js',
  51. 'sprite_nodes/CCSpriteFrameCache.js',
  52. 'sprite_nodes/CCSpriteBatchNode.js',
  53. 'label_nodes/CCLabelAtlas.js',
  54. 'label_nodes/CCLabelTTF.js',
  55. 'label_nodes/CCLabelBMFont.js',
  56. 'particle_nodes/CCParticleSystem.js',
  57. 'particle_nodes/CCParticleSystemQuad.js',
  58. 'particle_nodes/CCParticleExamples.js',
  59. 'particle_nodes/CCParticleBatchNode.js',
  60. 'touch_dispatcher/CCTouchDelegateProtocol.js',
  61. 'touch_dispatcher/CCTouchHandler.js',
  62. 'touch_dispatcher/CCTouchDispatcher.js',
  63. 'touch_dispatcher/CCMouseDispatcher.js',
  64. 'keyboard_dispatcher/CCKeyboardDelegate.js',
  65. 'keyboard_dispatcher/CCKeyboardDispatcher.js',
  66. 'text_input_node/CCIMEDispatcher.js',
  67. 'text_input_node/CCTextFieldTTF.js',
  68. 'CCDirector.js',
  69. 'CCCamera.js',
  70. 'CCScheduler.js',
  71. 'CCLoader.js',
  72. 'CCDrawingPrimitives.js',
  73. 'platform/CCApplication.js',
  74. 'platform/CCSAXParser.js',
  75. 'platform/AppControl.js',
  76. 'menu_nodes/CCMenuItem.js',
  77. 'menu_nodes/CCMenu.js',
  78. 'tileMap_parallax_nodes/CCTMXTiledMap.js',
  79. 'tileMap_parallax_nodes/CCTMXXMLParser.js',
  80. 'tileMap_parallax_nodes/CCTMXObjectGroup.js',
  81. 'tileMap_parallax_nodes/CCTMXLayer.js',
  82. 'tileMap_parallax_nodes/CCParallaxNode.js',
  83. 'menu_nodes/CCMenuItem.js',
  84. 'menu_nodes/CCMenu.js',
  85. 'base_nodes/CCdomNode.js',
  86. '../CocosDenshion/SimpleAudioEngine.js'
  87. ];
  88. //取得当前文档存入d，取得上一节中创建的当前d的成员变量ccCofing存入c.
  89. var d = document;
  90. var c = d.ccConfig;
  91. //如果c的结构变量loadExtension有效，即当前程序需要加载扩展库，则在上面的变量engine所对应的字符串数组尾部添加cocos2d-x扩展库所涉及的代码文件。
  92. if (c.loadExtension != null && c.loadExtension == true) {
  93. engine = engine.concat([
  94. '../extensions/GUI/CCControlExtension/CCControl.js',
  95. '../extensions/GUI/CCControlExtension/CCControlButton.js',
  96. '../extensions/GUI/CCControlExtension/CCControlUtils.js',
  97. '../extensions/GUI/CCControlExtension/CCInvocation.js',
  98. '../extensions/GUI/CCControlExtension/CCScale9Sprite.js',
  99. '../extensions/GUI/CCControlExtension/CCMenuPassive.js',
  100. '../extensions/GUI/CCControlExtension/CCControlSaturationBrightnessPicker.js',
  101. '../extensions/GUI/CCControlExtension/CCControlHuePicker.js',
  102. '../extensions/GUI/CCControlExtension/CCControlColourPicker.js',
  103. '../extensions/GUI/CCControlExtension/CCControlSlider.js',
  104. '../extensions/GUI/CCControlExtension/CCControlSwitch.js',
  105. '../extensions/GUI/CCScrollView/CCScrollView.js',
  106. '../extensions/GUI/CCScrollView/CCSorting.js',
  107. '../extensions/GUI/CCScrollView/CCTableView.js',
  108. '../extensions/CCBReader/CCNodeLoader.js',
  109. '../extensions/CCBReader/CCBReaderUtil.js',
  110. '../extensions/CCBReader/CCControlLoader.js',
  111. '../extensions/CCBReader/CCSpriteLoader.js',
  112. '../extensions/CCBReader/CCNodeLoaderLibrary.js',
  113. '../extensions/CCBReader/CCBReader.js',
  114. '../extensions/CCBReader/CCBValue.js',
  115. '../extensions/CCBReader/CCBKeyframe.js',
  116. '../extensions/CCBReader/CCBSequence.js',
  117. '../extensions/CCBReader/CCBRelativePositioning.js',
  118. '../extensions/CCBReader/CCBAnimationManager.js',
  119. '../extensions/CCControlEditBox.js'
  120. ]);
  121. }
  122. //如果c中的engineDir设置无效，清空engine。
  123. if (!c.engineDir) {
  124. engine = [];
  125. }
  126. else {
  127. //如果c中的engineDir设置有效
  128. //如果c的结构中有结构变量box2d和chipmunk，则在变量engine所对应的字符串数组尾部添加cocos2d-x物理引擎库所涉及的代码文件。
  129. if(c.box2d || c.chipmunk){
  130. engine.push('Draw_Nodes/CCDrawNode.js');
  131. engine.push('physics_nodes/CCPhysicsSprite.js');
  132. engine.push('physics_nodes/CCPhysicsDebugNode.js');
  133. if (c.box2d)
  134. engine.push('../box2d/box2d.js');
  135. if (c.chipmunk)
  136. engine.push('../chipmunk/chipmunk.js');
  137. }
  138. //遍历engine中的所有元素，将各元素的文件相对目录转变为绝对目录。
  139. engine.forEach(function (e, i) {
  140. engine[i] = c.engineDir + e;
  141. });
  142. }
  143. //定义量时变量
  144. var loaded = 0;
  145. //在engine最尾部加上c的结构变量appFiles （即当前程序资源和逻辑所对应的js），将新数组保存到que。
  146. var que = engine.concat(c.appFiles);
  147. //再加上当前程序的主逻辑js文件。
  148. que.push('main.js');
  149. //判断浏览器是否是IE9
  150. if (navigator.userAgent.indexOf("Trident/5") > -1) {
  151. //如果是IE9
  152. //创建一个局部变量serial，存值-1
  153. this.serial = -1;
  154. //定义一个函数loadNext
  155. var loadNext = function () {
  156. //定义临时变量s为serial+1
  157. var s = this.serial + 1;
  158. //如果s所指定的索引小于que的数组数量.
  159. if (s < que.length) {
  160. //当前文档创建一个脚本标记，保存为变量f
  161. var f = d.createElement('script');
  162. //设置script的src为索引s指定的que数组元素。
  163. f.src = que[s];
  164. //将索引s存入f成员变量serial。
  165. f.serial = s;
  166. //设定scrip在被加载时调用函数loadNext。
  167. f.onload = loadNext;
  168. //将scrip放入到当前HTML文档的结尾.
  169. d.body.appendChild(f);
  170. //将数组的加载进度保存到临时变量p，在当前位置你可以处理你的加载进度条。
  171. p = s / (que.length - 1);
  172. }
  173. };
  174. //调用一下刚创建的函数，执行第一次后，就会不断的在html文档结尾加入：‘<script  src = ‘这里为que[新索引]’ serial=’索引’ onload=’loadNext’></script>’。
  175. loadNext();
  176. }
  177. else {
  178. //如果不是IE9，则遍历que数组的每个元素。
  179. que.forEach(function (f, i) {
  180. //当前文档创建一个脚本标记，保存为变量s
  181. var s = d.createElement('script');
  182. //设置scrip的async变量为false. 目前firefox和chrome都是实现了script标签的async属性.这个新的属性能让我们以一种更 简单的方式防止浏览器阻塞
  183. s.async = false;
  184. //设置script的src变量值为遍历元素。
  185. s.src = f;
  186. //设定加载时调用函数更新进度计算。
  187. s.onload = function () {
  188. loaded++;
  189. p = loaded / que.length;
  190. //TODO: code for updating progress bar
  191. };
  192. //将scrip放入到当前HTML文档的结尾.
  193. d.body.appendChild(s);
  194. //将s保存到que数组的第i个数组元素中。
  195. que[i] = s;
  196. });
  197. }
  198. })();//最后的()代表当前函数被调用。

可见jsloader.js的作用是加载cocos2d-x所要用到的所有js文件以及‘resource.js’，‘myApp.js’，‘main.js’。

打开’resource.js’：

[javascript] view
plaincopy
  1. //定义一些资源文件字符串变量。
  2. var s_HelloWorld = "res/HelloWorld.png";
  3. var s_CloseNormal = "res/CloseNormal.png";
  4. var s_CloseSelected = "res/CloseSelected.png";
  5. //创建一个结构数组，标记文件类型和对应的文件名称字符串。
  6. var g_ressources = [
  7. //image
  8. {type:"image", src:s_HelloWorld},
  9. {type:"image", src:s_CloseNormal},
  10. {type:"image", src:s_CloseSelected}
  11. //plist
  12. //fnt
  13. //tmx
  14. //bgm
  15. //effect
  16. ];

上面的文件主要是就是定义程序所要用到的资源信息。

打开myApp.js:

[javascript] view
plaincopy
  1. //创建一个cocos2d-x精灵的派生类存入CircleSprite用于计时.初始化成员变量_radians为0，即不旋转。
  2. var CircleSprite = cc.Sprite.extend({
  3. _radians:0,
  4. //重载父类(精灵) 构造函数ctor，调用其父类的相应函数。
  5. ctor:function () {
  6. this._super();
  7. },
  8. //重载父类（精灵）成员函数draw。增加绘制代码。
  9. draw:function () {
  10. //设置要绘制时的设置信息
  11. //填充色为白色
  12. cc.renderContext.fillStyle = "rgba(255,255,255,1)";
  13. //画笔色为白色
  14. cc.renderContext.strokeStyle = "rgba(255,255,255,1)";
  15. //如果当前精灵的_radians小于0，则重置为360。
  16. if (this._radians < 0)
  17. this._radians = 360;
  18. //调用cocos2d-x的绘制圆的函数，这个函数是在CCDrawingPrimitives.js中定义的，drawCircle:function (center, radius, angle, segments, drawLineToCenter)，参一为中心位置，参二为半径，参三为绘制的起始角度当然也是中心连线的起始角度，参四为圆的段数，参五为是否与中心连线。
  19. cc.drawingUtil.drawCircle(cc.PointZero(), 30, cc.DEGREES_TO_RADIANS(this._radians), 60, true);
  20. },
  21. //定义成员函数myUpdate，用于每次调用时成员变量_raduans自减6。等于每次调用顺时针旋转6度，因为设定FPS为60，所以一秒转一圈正好360度嘛。
  22. myUpdate:function (dt) {
  23. this._radians -= 6;
  24. //this._addDirtyRegionToDirector(this.getBoundingBoxToWorld());
  25. }
  26. });
  27. //由Cocos2d-x的层派生出一个类HelloWorld.
  28. var Helloworld = cc.Layer.extend({
  29. //初始化其成员变量
  30. isMouseDown:false,
  31. helloImg:null,
  32. helloLabel:null,
  33. circle:null,
  34. sprite:null,
  35. //初始化函数。
  36. init:function () {
  37. //定义临时变量保存当前实例指针。
  38. var selfPointer = this;
  39. //首先调用父类精灵的初始化函数。
  40. this._super();
  41. //取得窗口的大小
  42. var size = cc.Director.getInstance().getWinSize();
  43. //增加一个菜单按钮，设置点击后响应函数退回前一步。
  44. var closeItem = cc.MenuItemImage.create(
  45. "res/CloseNormal.png",
  46. "res/CloseSelected.png",
  47. function () {
  48. history.go(-1);
  49. },this);
  50. //设置菜单按钮精灵的锚点。
  51. closeItem.setAnchorPoint(cc.p(0.5, 0.5));
  52. //由菜单按钮创建一个菜单，设置菜单位置并放入当前层下。
  53. var menu = cc.Menu.create(closeItem);
  54. menu.setPosition(cc.PointZero());
  55. this.addChild(menu, 1);
  56. //设置菜单按钮的位置。
  57. closeItem.setPosition(cc.p(size.width - 20, 20));
  58. //创建一个文字标签，显示字符串“HelloWorld”。
  59. this.helloLabel = cc.LabelTTF.create("Hello World", "Arial", 38);
  60. //设置横向居中显示。
  61. this.helloLabel.setPosition(cc.p(size.width / 2, 0));
  62. //将文字标签加入到当前层下。
  63. this.addChild(this.helloLabel, 5);
  64. //创建一个新层lazyLayer并放入当前层
  65. var lazyLayer = new cc.LazyLayer();
  66. this.addChild(lazyLayer);
  67. // 创建当前类成员精灵，设置位置，缩放，旋转。
  68. this.sprite = cc.Sprite.create("res/HelloWorld.png");
  69. this.sprite.setPosition(cc.p(size.width / 2, size.height / 2));
  70. this.sprite.setScale(0.5);
  71. this.sprite.setRotation(180);
  72. //将新建的精灵放入到层lazyLayer.
  73. lazyLayer.addChild(this.sprite, 0);
  74. //创建两个动画。
  75. var rotateToA = cc.RotateTo.create(2, 0);
  76. var scaleToA = cc.ScaleTo.create(2, 1, 1);
  77. //让精灵运行一个动画序列，动画序列为这两个新建的动画。
  78. this.sprite.runAction(cc.Sequence.create(rotateToA, scaleToA));
  79. //创建一个计时精灵类，设置位置并放入到当前层中。
  80. this.circle = new CircleSprite();
  81. this.circle.setPosition(cc.p(40, size.height - 60));
  82. this.addChild(this.circle, 2);
  83. //这句很重要，每1/60秒响应一次它的MyUpdate函数更新。
  84. this.circle.schedule(this.circle.myUpdate, 1 / 60);
  85. //当前文字标签到运行一个移动动画。
  86. this.helloLabel.runAction(cc.MoveBy.create(2.5, cc.p(0, size.height - 40)));
  87. //开启当前视窗的触屏响应处理。
  88. this.setTouchEnabled(true);
  89. //这一句调用是让屏幕的分辩率按窗口大小来自适应避免拉伸。
  90. this.adjustSizeForWindow();
  91. //lazyLayer层的分辩率按所在画布的大小来自适应避免拉伸。
  92. lazyLayer.adjustSizeForCanvas();
  93. //设置当前窗口在改变大小时要调用函数adjustSizeForWindow
  94. window.addEventListener("resize", function (event) {
  95. selfPointer.adjustSizeForWindow();
  96. });
  97. return true;
  98. },
  99. //如果窗口在改变大小时要调用的函数，现实等比调整Cocos2d-x画布大小以适应填充网页客户区。
  100. adjustSizeForWindow:function () {
  101. //窗口客户端宽度减去body区域宽度，得到一个差值保存到新创建变量margin。
  102. var margin = document.documentElement.clientWidth - document.body.clientWidth;
  103. //如果客户端宽度小于html5中画布宽度800，设置cocos2d-x画布的宽度按照html5中画布宽度800设置，这里是限制了显示cocos2d-x画面的最小宽度。
  104. if (document.documentElement.clientWidth < cc.originalCanvasSize.width) {
  105. cc.canvas.width = cc.originalCanvasSize.width;
  106. } else {
  107. //否则，设置cocos2d-x画布的宽度按照html5中body宽度设置。
  108. cc.canvas.width = document.documentElement.clientWidth - margin;
  109. }
  110. //如果可见区域高度小于html5中画布高度450，设置cocos2d-x画布的高度按照html5中画布高度450设置。
  111. if (document.documentElement.clientHeight < cc.originalCanvasSize.height) {
  112. cc.canvas.height = cc.originalCanvasSize.height;
  113. } else {
  114. //否则，设置cocos2d-x画布的高度按照html5中body高度设置。
  115. cc.canvas.height = document.documentElement.clientHeight - margin;
  116. }
  117. //计算出cocos2d-x的画布与HTML5上的画布的缩放比例
  118. var xScale = cc.canvas.width / cc.originalCanvasSize.width;
  119. var yScale = cc.canvas.height / cc.originalCanvasSize.height;
  120. //因为一般窗口都是宽大于高，所以这里做个处理，使画面保持等比缩放。
  121. if (xScale > yScale) {
  122. xScale = yScale;
  123. }
  124. //根据等比缩放重新计算出Cocos2d-x中画布的宽高。
  125. cc.canvas.width = cc.originalCanvasSize.width * xScale;
  126. cc.canvas.height = cc.originalCanvasSize.height * xScale;
  127. //取得网页中id为Cocos2dGameContainer的文档div元素。
  128. var parentDiv = document.getElementById("Cocos2dGameContainer");
  129. if (parentDiv) {
  130. //如果找到了设置其style中的宽和高按画布的像素大小
  131. parentDiv.style.width = cc.canvas.width + "px";
  132. parentDiv.style.height = cc.canvas.height + "px";
  133. }
  134. //设置cocos2d-x中渲染区域向上移动相应距离及设置相应缩放。
  135. cc.renderContext.translate(0, cc.canvas.height);
  136. cc.renderContext.scale(xScale, xScale);
  137. //设置cocos2d-x的像素与点的缩放比例。
  138. cc.Director.getInstance().setContentScaleFactor(xScale);
  139. },
  140. // 菜单按扭（关闭按钮）按下时的响应处理。
  141. menuCloseCallback:function (sender) {
  142. //终止cocos2d-x设备运行。
  143. cc.Director.getInstance().end();
  144. },
  145. //当触屏按下事件被响应时的处理。
  146. onTouchesBegan:function (touches, event) {
  147. //设置当前层的成员变量isMouseDown为ture
  148. this.isMouseDown = true;
  149. },
  150. //当触屏按下并移动事件被响应时的处理。
  151. onTouchesMoved:function (touches, event) {
  152. //判断如果isMouseDown为ture。
  153. if (this.isMouseDown) {
  154. //如果触点有效.
  155. if (touches) {
  156. //这里本来是显示触点的，但屏蔽了。
  157. //this.circle.setPosition(cc.p(touches[0].getLocation().x, touches[0].getLocation().y));
  158. }
  159. }
  160. },
  161. //当触屏松开事件响应时的处理
  162. onTouchesEnded:function (touches, event) {
  163. //设置当前层的成员变量isMouseDown为false
  164. this.isMouseDown = false;
  165. },
  166. //当触摸被取消(比如触摸过程中被来电打断),就会调用touchesCancelled方法。
  167. onTouchesCancelled:function (touches, event) {
  168. //控制台输出日志
  169. console.log("onTouchesCancelled");
  170. }
  171. });
  172. //创建一个cocos2d-x的场景的派生类HelloWorldScene。
  173. var HelloWorldScene = cc.Scene.extend({
  174. //重载onEnter函数指定在场景被加载时要做的处理。
  175. onEnter:function () {
  176. //先调用基类cc.Scene的相应处理。
  177. this._super();
  178. //创建一个Helloworld层的实例并初始化。
  179. var layer = new Helloworld();
  180. layer.init();
  181. //将这个层加入到当前场景。
  182. this.addChild(layer);
  183. }
  184. });

可以看出myApp.js实现了程序所用到的层和场景，它是本程序的核心逻辑，如果你有看过本博对WIN32版本所写的”Cocos2d-x HelloWorld深入分析”，关于层和场景的这些处理还是比较容易理解的。不过adjustSizeForWindow 这个函数对于画布的大小重置也让我很火大，在这里介绍一下修改成让网页窗口大小改变时画布大小自动设置为网页大小的方法。在修改之前先看下这个：

Cocos2d-x-html5之HelloWorld深入分析与调试

好，现在开始动刀：

在Helloworld层中加入变量

sizeLabel:null,

然后我们在HelloWorld文字标签之后加入：

//显示大小

this.sizeLabel =cc.LabelTTF.create("ClientSize:CanvasSize","Arial",16);

this.sizeLabel.setPosition(cc.p(size.width / 2, 100));

this.addChild(this.sizeLabel, 4);

最后我们在adjustSizeForWindow函数尾部加入:

//字符串变量

var sizeString= "ClientSize:[Width:"+document.documentElement.clientWidth+",Height:"+document.documentElement.clientHeight+"]- bodySize:[Width:" +document.body.clientWidth+",Height:"+document.body.clientHeight+"]-CanvasSize:[Width:"+cc.canvas.width+",Height:"+cc.canvas.height+"]";

this.sizeLabel.setString(sizeString);

运行一下：

Cocos2d-x-html5之HelloWorld深入分析与调试

这样就可以很方便的观察各个大小了。

然后我们来继续修改代码。首先将创建lazyLayer代码屏蔽  :

// var lazyLayer =new cc.LazyLayer();

// this.addChild(lazyLayer);

并将lazyLayer加入当前层的代码

//lazyLayer.addChild(this.sprite, 0);

换成：

this.addChild(this.sprite);

lazyLayer设置大小自适应代码屏蔽：

//lazyLayer.adjustSizeForCanvas();

之后修改adjustSizeForWindow:

[javascript] view
plaincopy
  1. adjustSizeForWindow:function () {
  2. /*屏蔽原来的代码。
  3. var margin = document.documentElement.clientWidth - document.body.clientWidth;
  4. if (document.documentElement.clientWidth < cc.originalCanvasSize.width) {
  5. cc.canvas.width = cc.originalCanvasSize.width;
  6. } else {
  7. cc.canvas.width = document.documentElement.clientWidth - margin;
  8. }
  9. if (document.documentElement.clientHeight < cc.originalCanvasSize.height) {
  10. cc.canvas.height = cc.originalCanvasSize.height;
  11. } else {
  12. cc.canvas.height = document.documentElement.clientHeight - margin;
  13. }
  14. */
  15. //直接将画布大小设为窗口页面大小
  16. cc.canvas.width = document.documentElement.clientWidth;
  17. cc.canvas.height = document.documentElement.clientHeight;
  18. //计算X方向和Y方向的缩放
  19. var xScale = cc.canvas.width / cc.originalCanvasSize.width;
  20. var yScale = cc.canvas.height / cc.originalCanvasSize.height;
  21. /*
  22. if (xScale > yScale) {
  23. //  xScale = yScale;
  24. }
  25. cc.canvas.width = cc.originalCanvasSize.width * xScale;
  26. cc.canvas.height = cc.originalCanvasSize.height * yScale;
  27. */
  28. var parentDiv = document.getElementById("Cocos2dGameContainer");
  29. if (parentDiv) {
  30. parentDiv.style.width = cc.canvas.width + "px";
  31. parentDiv.style.height = cc.canvas.height + "px";
  32. }
  33. //设置渲染缓冲区位置和缩放。
  34. cc.renderContext.translate(0, cc.canvas.height);
  35. cc.renderContext.scale(xScale, yScale);
  36. cc.Director.getInstance().setContentScaleFactor(xScale);
  37. //字符串变量
  38. var size = cc.Director.getInstance().getWinSize()
  39. var sizeString = "ClientSize:[Width:"+document.documentElement.clientWidth+",Height:"+document.documentElement.clientHeight+"] - bodySize:[Width:" + document.body.clientWidth+",Height:"+document.body.clientHeight+"]- CanvasSize:[Width:"+cc.canvas.width+",Height:"+cc.canvas.height+"]";
  40. this.sizeLabel.setString(sizeString);
  41. },

这样当我们拖放窗口时，画布大小就按窗口大小了。

Cocos2d-x-html5之HelloWorld深入分析与调试

最后我们看main.js:代码，打开main.js:

[javascript] view
plaincopy
  1. //由cc.Application派生出本程序所用的cocos2d-x的程序类。
  2. var cocos2dApp = cc.Application.extend({
  3. //创建一个变量config，初始化其值为之前创建的网页文档的成员结构变量ccConfig.
  4. config:document['ccConfig'],
  5. //重载构造函数ctor。
  6. ctor:function (scene) {
  7. //调用父类的相应函数。
  8. this._super();
  9. //将参数场景scene保存到成员变量startScene做为要启动的场景。
  10. this.startScene = scene;
  11. //设置Cocos2d-x的一些配置。
  12. //使用DEBUG标记
  13. cc.COCOS2D_DEBUG = this.config['COCOS2D_DEBUG'];
  14. //初始化Debug的一些设置。
  15. cc.initDebugSetting();
  16. //取得config中tag结构变量值，即字符串’gameCanvas'做为参数调用cc.setup函数。
  17. cc.setup(this.config['tag']);
  18. //在Cocos2d-x正被加载时的响应函数。
  19. cc.Loader.getInstance().onloading = function () {
  20. //设置调用程序加载场景的draw函数，这里是为了显示进度条。
  21. cc.LoaderScene.getInstance().draw();
  22. };
  23. //在Cocos2d-x被加载完时的响应函数。
  24. cc.Loader.getInstance().onload = function () {
  25. //加载完调用程序控制管理器的didFinishLaunchingWithOptions函数。
  26. cc.AppController.shareAppController().didFinishLaunchingWithOptions();
  27. };
  28. //设置是否要预加载一些相关文件。
  29. cc.Loader.getInstance().preload(g_ressources);
  30. },
  31. //重载程序的applicationDidFinishLaunching函数。
  32. applicationDidFinishLaunching:function () {
  33. // 初始化Cocos2d-x的设备。
  34. var director = cc.Director.getInstance();
  35. // 设置使用高清屏显示模式
  36. //     director->enableRetinaDisplay(true);
  37. // 从config中的showFPS变量取得设置是否显示FPS
  38. director.setDisplayStats(this.config['showFPS']);
  39. // 设置FPS
  40. director.setAnimationInterval(1.0 / this.config['frameRate']);
  41. //运行当前要启动的场景。
  42. director.runWithScene(new this.startScene());
  43. return true;
  44. }
  45. });
  46. //这里创建一个程序的实例，运行场景HelloWorldScene。
  47. var myApp = new cocos2dApp(HelloWorldScene);

main.js还是很容易理解的，创建场景运行场景。但这里有一个重要的函数cc.setup。它必须讲一下：

打开coco2d/platform下的CCApplication.js我们来看一下：

[javascript] view
plaincopy
  1. //定义cc.setup函数，参数有三个，
  2. cc.setup = function (el, width, height) {
  3. //取得cc中id为el的值或者id为 ’#’+el的值。
  4. var element = cc.$(el) || cc.$('#' + el);
  5. //如果元素的tgaName变量值为’CANVAS’，判断参数有效，保存宽度和高度。
  6. if (element.tagName == "CANVAS") {
  7. width = width || element.width;
  8. height = height || element.height;
  9. //新建一个HTML5中的DIV标记给cc.container做为存放画布的区域层。
  10. cc.container = cc.$new("DIV");
  11. //保存画布
  12. cc.canvas = element;
  13. //将画布放入到DIV中。
  14. cc.canvas.parentNode.insertBefore(cc.container, cc.canvas);
  15. cc.canvas.appendTo(cc.container);
  16. //判断参数有效，如果有效，取参数宽高，如果无效，取480,320。
  17. cc.container.style.width = (width || 480) + "px";
  18. cc.container.style.height = (height || 320) + "px";
  19. //设置DIV的id为’Cocos2dGameContainer’，在myApp.js中有取得网页中id为Cocos2dGameContainer的文档div元素，自然就是指这个DIV了。
  20. cc.container.setAttribute('id', 'Cocos2dGameContainer');
  21. //设置DIV的画布的大小与DIV一致。
  22. cc.canvas.setAttribute("width", width || 480);
  23. cc.canvas.setAttribute("height", height || 320);
  24. } else {//如果元素的tgaName变量值为’DIV’。
  25. if (element.tagName != "DIV") {
  26. cc.log("Warning: target element is not a DIV or CANVAS");
  27. }
  28. //判断参数有效，如果有效，取参数宽高，如果无效，取DIV的宽高。
  29. width = width || parseInt(element.style.width);
  30. height = height || parseInt(element.style.height);
  31. //新建一个HTML5中的Canvas标记返回给cc.canvas
  32. cc.canvas = cc.$new("CANVAS");
  33. //在cc.canvas下增加一个子类名称为gameCanvas
  34. cc.canvas.addClass("gameCanvas");
  35. //设置DIV的画布的大小与DIV一致。
  36. cc.canvas.setAttribute("width", width || 480);
  37. cc.canvas.setAttribute("height", height || 320);
  38. //保存DIV到cc.container并将画布放入到这个DIV之中。
  39. cc.container = element;
  40. element.appendChild(cc.canvas);
  41. //判断参数有效，如果有效，取参数宽高，如果无效，取480,320。
  42. cc.container.style.width = (width || 480) + "px";
  43. cc.container.style.height = (height || 320) + "px";
  44. }
  45. //设置DIV使用相对布局方式和style属性。
  46. cc.container.style.position = 'relative';
  47. cc.container.style.overflow = 'hidden';
  48. cc.container.top = '100%';
  49. //这里取出cc.canvas的Context给cc.renderContext，即设置渲染目标缓冲区为上面创建的DIV的显示设备上下文。
  50. cc.renderContext = cc.canvas.getContext("2d");
  51. //这里设置渲染目标缓冲区类型为画布类型
  52. cc.renderContextType = cc.CANVAS;
  53. //如果渲染目标缓冲区类型为画布类型
  54. if (cc.renderContextType == cc.CANVAS) {
  55. //因为cocos2d-x的坐标系是左下角为0,0点，而html的坐标系为左上角0,0点，为了在html上显示正确的图像，将渲染目标缓冲区设置到画布的左下角位置。
  56. cc.renderContext.translate(0, cc.canvas.height);
  57. //创建一个可以绘制到标缓冲区的cc.drawingUtil实例对象。
  58. cc.drawingUtil = new cc.DrawingPrimitiveCanvas(cc.renderContext);
  59. }
  60. //设置Cocos2dx中的画布大小。
  61. cc.originalCanvasSize = cc.size(cc.canvas.width, cc.canvas.height);
  62. //设置DIV。
  63. cc.gameDiv = cc.container;
  64. //输出引擎版本到日志
  65. cc.log(cc.ENGINE_VERSION);
  66. //设置关闭响应菜单
  67. cc.setContextMenuEnable(false);
  68. //是否是移动游览器，如果是，增加对于用户输入控制的处理。
  69. if(cc.Browser.isMobile)
  70. cc._addUserSelectStatus();
  71. //下面是一些显示属性的设置和响应。
  72. var hidden, visibilityChange;
  73. if (typeof document.hidden !== "undefined") {
  74. hidden = "hidden";
  75. visibilityChange = "visibilitychange";
  76. } else if (typeof document.mozHidden !== "undefined") {
  77. hidden = "mozHidden";
  78. visibilityChange = "mozvisibilitychange";
  79. } else if (typeof document.msHidden !== "undefined") {
  80. hidden = "msHidden";
  81. visibilityChange = "msvisibilitychange";
  82. } else if (typeof document.webkitHidden !== "undefined") {
  83. hidden = "webkitHidden";
  84. visibilityChange = "webkitvisibilitychange";
  85. }
  86. function handleVisibilityChange() {
  87. if (!document[hidden])
  88. cc.Director.getInstance()._resetLastUpdate();
  89. }
  90. if (typeof document.addEventListener === "undefined" ||
  91. typeof hidden === "undefined") {
  92. cc.isAddedHiddenEvent = false;
  93. } else {
  94. cc.isAddedHiddenEvent = true;
  95. document.addEventListener(visibilityChange, handleVisibilityChange, false);
  96. }
  97. };

好了，所有的js代码基本讲完了，现在为了更好的显示整个程序的流程，现在我们用安装FireBug的Firefox浏览器来进行调试。请先安装一下Firefox，然后在组件管理器里安装FireBug.

Cocos2d-x-html5之HelloWorld深入分析与调试

FireBug可以很方便的调试js并监控变量和堆栈。

用Firefox打开index.html。之后我们在画布上右键“使用FireBug查看元素”:

Cocos2d-x-html5之HelloWorld深入分析与调试

可以看到相应语句对应的元素在网页上反蓝显示。

我们在FireBug里开启脚本进入cocos2d.js，我们在其中的尾部加入断点后重新载入页面，我们会看到中断的代码以及右边的监控：

Cocos2d-x-html5之HelloWorld深入分析与调试

我们可以看到d.body.appendChild的参数s的属性表为

src=”../cocos2d/platform/jsloader.js”,id=”cocos2d-html5”.

所以执行完这一句之后会调用执行jsloader.js,我们在其增加本实例所用的js处加入断点。

Cocos2d-x-html5之HelloWorld深入分析与调试

可以看到.在右边que的数组元素尾部增加了“resource.js”,”myApp.js”,”main.js”。

我们在main.js里可以增加断点看一下cc.setup的函数执行情况:

Cocos2d-x-html5之HelloWorld深入分析与调试

按F11进入:

Cocos2d-x-html5之HelloWorld深入分析与调试

进入函数内部我们可以在右边看到参数值并跟踪执行:

Cocos2d-x-html5之HelloWorld深入分析与调试

通过FireBug的跟踪，我们可以深入的理解js脚本的整个执行情况。在main.js中我们可以加断点观察当前网页上的显示状态，如果没有断点，你是否有看到过这个进度显示的页面呢？好了，下课！

Cocos2d-x-html5之HelloWorld深入分析与调试

相关文章