通过今天的研究,我根据官方文档的例子自己写的一个结构模板,下面就分享下:
下图是项目结构:
首先我们来看下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);
}
});
我在这里简单的加入了一个背景图,效果如下:
好了,我的项目简单的模板完成。