闲得无聊 之 Cocos2d html5引擎 显示一个菜单

上次显示了一张图片作为背景， 现在在背景之上添加一个菜单start, options, about, ext之类的。

先ps一张图片，里面放置菜单文字，如下

每个菜单项给设定两种状态，即 正常状态 和 选择状态

先修改Resources.js 把图片资源添加进去

var dirImg = "res/";
var dirMusic = "res/music/";
//image
var s_begin_bg = dirImg + "mogu_bg.jpg";
var s_menu_font = dirImg + "mushroom_menu_font.png";

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

然后在初始化MenuScene的时候创建菜单

修改MenuLayer.js的init方法

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);
			//create game title
			var imageCache = cc.TextureCache.getInstance().addImage(s_menu_font);
			var title = cc.Sprite.createWithTexture(imageCache, cc.rect(0, 0, 624, 62));
			title.setPosition(winSize.width/2, winSize.height/2+150);
			this.addChild(title, 1);
			//create game menu
			var start_normal = cc.Sprite.createWithTexture(imageCache, cc.rect(0, 62, 160, 62));
			var start_hover = cc.Sprite.createWithTexture(imageCache, cc.rect(230, 62, 160, 62));
			var options_normal = cc.Sprite.createWithTexture(imageCache, cc.rect(0, 124, 230, 65));
			var options_hover = cc.Sprite.createWithTexture(imageCache, cc.rect(230, 124, 230, 65));
			var about_normal = cc.Sprite.createWithTexture(imageCache, cc.rect(0, 191, 180, 62));
			var about_hover = cc.Sprite.createWithTexture(imageCache, cc.rect(230, 190, 180, 62));
			var exit_normal = cc.Sprite.createWithTexture(imageCache, cc.rect(0, 248, 150, 62));
			var exit_hover = cc.Sprite.createWithTexture(imageCache, cc.rect(230, 248, 150, 62));
			
			var start = cc.MenuItemSprite.create(start_normal, start_hover, this.onStart, this);
			var options = cc.MenuItemSprite.create(options_normal, options_hover, this.onOptions, this);
			var about = cc.MenuItemSprite.create(about_normal, about_hover, this.onAbout, this);
			var exit = cc.MenuItemSprite.create(exit_normal, exit_hover, this.onExit, this);
			
			
			var menu = cc.Menu.create(start, options, about, exit);
			menu.setPosition(0, 0);
		
			start.setPosition(winSize.width/2, winSize.height/2+80);
			options.setPosition(winSize.width/2, winSize.height/2+20);
			about.setPosition(winSize.width/2, winSize.height/2-40);
			exit.setPosition(winSize.width/2, winSize.height/2-100);
			this.addChild(menu, 1);
			
			bRet = true;
		}
		return bRet;
	},
	onStart:function(){
		var scene = cc.Scene.create();
		scene.addChild(GameLayer.create());
		cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene));
	},
	onAbout:function(){
		
	},
	onOptions:function(){
		var scene = cc.Scene.create();
		scene.addChild(OptionsLayer.create());
		cc.Director.getInstance().replaceScene(cc.TransitionFade.create(1.2, scene));
	},
	onExit:function(){
		
	}

}

上面是用texture创建sprite，然后以sprite创建menuitemsprite，之后把menuitemsprite组合成menu.

cocos2d html5中有好几种menuitem，如下图

MenuItemAtlasFont是从font纹理创建菜单项, MenuItemFont是从字体创建菜单项， 字体可以是系统系统，比如Arial, Consolas等， 也可以是从*.fnt文件创建。

MenuItemSprite是从精灵对象创建， MenuItemImage是直接从图片创建， MenuItemToggle是创建切换菜单，可以是切换文字，精灵和图片。

具体用法可以参看 http://www.cocos2d-x.org/reference/html5-js/index.html