COCOS-HTML5-3.9版本学习(二)HTML5的COCOS结构模板

前端之家收集整理的这篇文章主要介绍了COCOS-HTML5-3.9版本学习(二)HTML5的COCOS结构模板前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

通过今天的研究,我根据官方文档的例子自己写的一个结构模板,下面就分享下:

下图是项目结构:


首先我们来看下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);
	}
});

我在这里简单的加入了一个背景图,效果如下:




好了,我的项目简单的模板完成。

原文链接:https://www.f2er.com/cocos2dx/340454.html

猜你在找的Cocos2d-x相关文章