COCOS-HTML5-3.9版本学习(二)HTML5的COCOS结构模板
2016-01-04 18:00
369 查看
通过今天的研究,我根据官方文档的例子自己写的一个结构模板,下面就分享下:
其他的照搬,
我在这里简单的加入了一个背景图,效果如下:
好了,我的项目简单的模板完成。
下图是项目结构:
首先我们来看下index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <script type="text/javascript" src="js/cocos2d-js-v3.9.js"></script> <body> <canvas id="gameCanvas" width="375" height="627"></canvas> <script type="text/javascript"> window.onload = function() { cc.game.onStart = function() { //load resources cc.LoaderScene.preload(g_resources, function () { cc.director.runScene(new MyScene()); }, this); }; cc.game.run("gameCanvas"); }; </script> </body> </html>cc.director.runScene(new MyScene());这句话加载我的场景;
然后我们看下project.json文件:
{ "debugMode": 1, "frameRate": 60, "id": "gameCanvas", "renderMode": 1, "jsList": [ "js/resource.js", "js/MyScene.js" ] }
其他的照搬,
"jsList": [ "js/resource.js", "js/MyScene.js" ]
其中这个数组为js文件加载器,以后你自己定义的js都需要在这里写上他的路径。
下来是resource.js文件,也是静态资源加载文件:
var res = { BACKGROUND:"img/background.png" }; var g_resources = []; for (var i in res) { g_resources.push(res[i]); }我们的资源文件需要写在这里
var res = { BACKGROUND:"img/background.png" };
最后一个就是场景文件MyScene.js:
var MyScene = cc.Scene.extend({ onEnter: function() { this._super(); var size = cc.director.getWinSize(); //加载背景 var sprite = cc.Sprite.create(res.BACKGROUND); sprite.setPosition(size.width / 2, size.height / 2); sprite.setScale(0.8); this.addChild(sprite, 0); } });
我在这里简单的加入了一个背景图,效果如下:
好了,我的项目简单的模板完成。
相关文章推荐
- Cocos结构
- COCOS-HTML5-3.9版本学习(一)HTML5的COCOS环境
- cocos2dx 2.x与cocos2dx 3.x类库用法对比
- 安装cocos ide 遇到的问题
- Cocos在windows7下的配置与apk打包
- CocosBuilder使用记录
- cocos纯代码写一个简单的菜单
- Cocos2D实现RPG队伍菜单任意调整角色顺序的效果
- Cocos2D实现RPG队伍菜单任意调整角色顺序的效果
- Cocos2D实现RPG队伍菜单任意调整角色顺序的效果
- <我是游戏小白>cocos2d-js迈出第一步
- cocos2d-x 3.4 横板射击游戏之地图滚动实现(封装方式)
- 201215-03-19---cocos2dx内存管理--具体解释
- Cocos2D实现RPG游戏人物地图行走的跟随效果
- Cocos2D实现RPG游戏人物地图行走的跟随效果
- Cocos2D实现RPG游戏人物地图行走的跟随效果
- Cocos2D在Xcode7和iOS 9.2上IMP调用出错
- Cocos2D在Xcode7和iOS 9.2上IMP调用出错
- CocosD在Xcode7和iOS 9.2上IMP调用出错
- Cocos2D两个方法的重构一例