标签:
选择完毕点击Nextbutton进入到例如以下图所看到的配置执行环境对话框。在该对话框中我们能够配置项目执行时信息。
Orientation项目是配置模拟器的朝向,当中landscape是横屏显示。portriat是竖屏显。Desktop Runtime Settings中的Title是设置模拟器的标题。Desktop Windows initialize Size是设置模拟器的大小。
Add Native Codes是设置加入本地代码到project。在本来中我们不须要加入本地代码。
最后点击Finishbutton完毕创建操作。创建好project之后,例如以下图所看到的。
假设我们想调试程序,能够设置断点,例如以下图所看到的。点击行号之前的位置,设置断点。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cocos2d-html5 Hello World test</title> <link rel="icon" type="image/GIF" href="res/favicon.ico"/> <meta name="apple-mobile-web-app-capable" content="yes"/> ① <meta name="full-screen" content="yes"/> <meta name="screen-orientation" content="portrait"/> <meta name="x5-fullscreen" content="true"/> <meta name="360-fullscreen" content="true"/> ② <style> body, canvas, div { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } </style> </head> <body style="padding:0; margin: 0; background: #000;"> <canvas id="gameCanvas" width="800" height="450"></canvas> ③ <script src="frameworks/cocos2d-html5/CCBoot.js"></script> ④ <script src="main.js"></script> ⑤ </body> </html>上述代码第①~②行是设置网页的meta信息。meta信息是网页基本信息。这些设置能够使得index.html网页非常好地在移动设备上显示。
第④行代码是导入JavaScript文件CCBoot.js,我们不须要维护该文件。第⑤行代码是导入JavaScript文件main.js,我们须要维护该文件。
2、main.js文件
main.js负责启动游戏场景,不管Web浏览器执行还是本地执行都是通过该文件启动游戏场景的,main.js代码例如以下:
c
c.game.onStart = function(){ ① cc.view.adjustViewPort(true); ② cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL); ③ cc.view.resizeWithBrowserSize(true); ④ //load resources cc.LoaderScene.preload(g_resources, function () { ⑤ cc.director.runScene(new HelloWorldScene()); ⑥ }, this); }; cc.game.run(); ⑦上述代码第①行是启动游戏,cc.game是一个游戏启动对象。代码第②~④行是设置游戏视图属性,当中第③行是设置游戏视图大小,它涉及到屏幕适配问题。cc.ResolutionPolicy.SHOW_ALL是屏幕适配策略。
第⑥行代码是执行HelloWorldScene场景,cc.director是导演对象。执行HelloWorldScene场景会进入到该场景。
第⑦行代码cc.game.run()是执行游戏启动对象。
3、project.json文件
项目配置信息project.json文件代码例如以下:
{ "project_type": "javascript", "debugMode" : 1, "showFPS" : true, ① "frameRate" : 60, ② "id" : "gameCanvas", "renderMode" : 0, "engineDir":"frameworks/cocos2d-html5", "modules" : ["cocos2d"], ③ "jsList" : [ ④ "src/resource.js", ⑤ "src/app.js" ⑥ ] }project.json文件採用JSON字符串表示。我们重点关注有标号的语句,当中第①行代码是设置是否显示帧率调试信息,帧率调试就是显示在左下角文字信息。第②行代码是设置帧率为60,即屏幕1/60秒刷新一次。第③行代码是载入游戏引擎的模块。Cocos2d-JS引擎有非常多模块,模块的定义是在HelloJS\frameworks\cocos2d-html5\moduleConfig.json,我们在资源管理器中才干看到该文件,这些模块在场景启动的时候载入。因此一定要依据须要导入,否则造成资源的浪费。
比如我们再加入一个chipmunk物理引擎模块,代码第③能够改动例如以下形式:
"modules" : ["cocos2d","chipmunk"]
代码第④~⑥行是声明须要载入的JavaScript文件,这里的文件主要是有我们编写的。我们每次加入一个JavaScript文件到project中。就须要在此处加入声明。
4、config.json文件
仅仅有在Cocos Code IDE中执行才须要该文件,它是配置模拟器执行信息的,该文件在project公布时候和Web环境下执行都没实用处。
但假设想Cocos Code IDE中执行,并改变模拟器大小和方向,能够改动该文件,config.json文件代码例如以下:
{ "init_cfg": { ① "isLandscape": true, ② "name": "HelloJS", ③ "width": 960, ④ "height": 640, ⑤ "entry": "main.js", ⑥ "consolePort": 6050, "debugPort": 5086, "forwardConsolePort": 10088, "forwardUploadPort": 10090, "forwardDebugPort": 10086 }, "simulator_screen_size": [ { "title": "iPhone 3Gs (480x320)", "width": 480, "height": 320 }, … … ] }上述代码第①行是初始配置信息,当中第②行是设置横屏显示还是竖屏显示,第③行代码name属性是设置模拟器上显示的标题。第④和⑤行是设置屏幕的宽和高,第⑥行代码是设置入口文件。
var res = { ① HelloWorld_png : "res/HelloWorld.png", CloseNormal_png : "res/CloseNormal.png", CloseSelected_png : "res/CloseSelected.png" }; var g_resources = []; ② for (var i in res) { g_resources.push(res[i]); ③ }上述代码第①行是定义JSON变量res,它为每个资源文件定义一个别名,在程序中訪问资源,资源名不要“写死[ 写死被称为硬编码(英语:Hard Code或Hard Coding)。硬编码指的是在软件实作上,把输出或输入的相关參数(比如:路径、输出的形式或格式)直接以常量的方式书写在源码中,而非在执行时期由外界指定的设置、资源、数据或格式做出适当回应。
——引自于维基百科 http://zh.wikipedia.org/zh-cn/%E5%AF%AB%E6%AD%BB
]”。而是通过一个可配置的别名訪问,这样当环境变化之后改动起来非常方便。
第②行代码是定义资源文件集合变量g_resources,它的的内容是通过代码第③行把res变量中的资源文件循环加入到g_resources中。当然我们能够採用以下逐一加入:
var g_resources = [ //image res.HelloWorld_png, res.CloseNormal_png, "res/CloseSelected.png" ];放在g_resources变量这的资源,会在场景当中的时候载入的。在Web浏览器下执行假设载入的资源找不到会报出404错误。
var HelloWorldLayer = cc.Layer.extend({ ① sprite:null, //定义一个精灵属性 ctor:function () { //构造方法 this._super(); //初始化父类 var size = cc.winSize; //获得屏幕大小 var closeItem = new cc.MenuItemImage( ② res.CloseNormal_png, res.CloseSelected_png, function () { cc.log("Menu is clicked!"); }, this); closeItem.attr({ x: size.width - 20, y: 20, anchorX: 0.5, anchorY: 0.5 }); ③ var menu = new cc.Menu(closeItem); //通过closeItem菜单项创建菜单对象 menu.x = 0; ④ menu.y = 0; ⑤ this.addChild(menu, 1); //把菜单加入到当前层上 var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38); //创建标签对象 helloLabel.x = size.width / 2; helloLabel.y = 0; this.addChild(helloLabel, 5); this.sprite = new cc.Sprite(res.HelloWorld_png); //创建精灵对象 this.sprite.attr({ x: size.width / 2, y: size.height / 2, scale: 0.5, rotation: 180 }); ⑥ this.addChild(this.sprite, 0); this.sprite.runAction( cc.sequence( cc.rotateTo(2, 0), cc.scaleTo(2, 1, 1) ) ); //在精灵对象上执行一个动画 helloLabel.runAction( cc.spawn( cc.moveBy(2.5, cc.p(0, size.height - 40)), cc.tintTo(2.5,255,125,0) ) ); //在标签对象上执行一个动画 return true; } }); var HelloWorldScene = cc.Scene.extend({ ⑦ onEnter:function () { ⑧ this._super(); ⑨ var layer = new HelloWorldLayer(); ⑩ this.addChild(layer); //把HelloWorldLayer层放到HelloWorldScene场景中 } });
还有上述代码第⑧行是声明onEnter方法,它是在进入HelloWorldScene场景时候回调的。onEnter方法是从重写父类的方法,我们必需通过this._super()语句调用父类的onEnter方法,见代码第⑨行所看到的。
《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:
京东:http://item.
标签:
原文地址:http://www.cnblogs.com/gcczhongduan/p/5209232.html