闲得无聊 之 Cocos2d html5引擎 显示一张图片

http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download 下载cocos2d html5发布包，

在Demo目录中按照HelloDomMenu例子建立相同文件结构的helloworld目录，cocos2d.js和main.js就直接复制好了，之后再做修改。

准备一张图片mogu_bg.jpg复制到res中，图片大小无所谓

在src中创建MenuLayer.js

var MenuLayer = cc.Layer.extend({
	init:function(){
		var self = this;
		var bRet = false;
        if (this._super()) {
			var winSize = cc.Director.getInstance().getWinSize();
			
			//create background
			var bg = cc.Sprite.create(s_begin_bg);
			bg.setPosition(cc.p(winSize.width/2, winSize.height/2));
			bg.setVisible(true);
			self.addChild(bg, 0);
			
			bRet = true;
		}
		return bRet;
	}
});

var MenuScene = cc.Scene.extend({
	onEnter:function(){
		var self = this;
		self._super();
		var layer = new MenuLayer();
		layer.init();
		self.addChild(layer);
	}
});

首先从s_begin_bg（图片）创建一个sprite,然后把sprite添加到创建的layer中， 图片资源可以在资源文件中配置好，

在src中创建Resources.js

var dirImg = "res/";
//image
var s_begin_bg = dirImg + "mogu_bg.jpg";

//sound

var g_resources = [
	{type:"image", src:s_begin_bg}
];

创建完简单的layer之后， 在cocos2d.js和main.js中做相关的修改

cocos2d.js中修改appFiles 的值，把Resources.js和MenuLayer.js都加进去

main.js中修改 var myApp = new cocos2dApp(MenuScene); MenuScene是MenuLayer.js中创建的Scene

一切就绪之后把cocos2d html5整个目录拷贝到任意的apache服务器，http://localhost/cocos2d-html5/Demo/helloworld/ 就会出现这张图片了。^ ^