Cocos2d-JS中的精靈菜單和圖片菜單

時間 2019-11-05

原文原文鏈接

精靈菜單的菜單項類是cc.MenuItemSprite，圖片菜單的菜單項類是cc.MenuItemImage。因爲cc.MenuItemImage繼承於cc.MenuItemSprite，因此圖片菜單也屬於精靈菜單。爲何叫精靈菜單呢？那是由於這些菜單項具備精靈的特色，咱們可讓精靈動起來，具體使用時候是把一個精靈放置到菜單中做爲菜單項。
精靈菜單項類cc.MenuItemSprite，它的其中一個構造函數定義以下：
html

[html] view plain copy 微信

ctor(normalSprite, //菜單項正常顯示時候的精靈 app
selectedSprite, //選擇菜單項時候的精靈函數
callback, //菜單操做的回調函數指針網站
target this
) spa

使用cc.MenuItemSprite比較麻煩，在建立cc.MenuItemSprite以前要先建立三種不一樣狀態所須要的精靈（即normalSprite、selectedSprite和disabledSprite）。cc.MenuItemSprite還有一些其它的構造函數，在這些函數中能夠省略disabledSprite參數。
若是精靈是由圖片構成的，咱們可使用cc.MenuItemImage實現與精靈菜單一樣的效果。cc.MenuItemImage類的其中一個構造函數定義以下：
.net

[html] view plain copy 指針

ctor(normalImage, //菜單項正常顯示時候的圖片 code
selectedImage, //選擇菜單項時候的圖片
callback, //菜單操做的回調函數指針
target
)

cc.MenuItemImage還有一些構造函數，在這些函數中能夠省略disabledImage參數。
本節咱們會經過一個實例介紹一下精靈菜單和圖片菜單的使用，這個實例以下圖所示。

精靈菜單和圖片菜單實例

下面咱們看看app.js 中HelloWorldLayer中初始化代碼以下：

[html] view plain copy

var HelloWorldLayer = cc.Layer.extend({
ctor:function () {
this._super();
var size = cc.director.getWinSize();
var bg = new cc.Sprite(res.background_png);
bg.x = size.width/2;
bg.y = size.height/2;
this.addChild(bg);
// 開始精靈
var startSpriteNormal = new cc.Sprite(res.start_up_png); ①
var startSpriteSelected = new cc.Sprite(res.start_down_png); ②
var startMenuItem = new cc.MenuItemSprite(
startSpriteNormal,
startSpriteSelected,
this.menuItemStartCallback, this); ③
startMenuItem.x = 700; ④
startMenuItem.y = size.height - 170; ⑤
// 設置圖片菜單
var settingMenuItem = new cc.MenuItemImage(
res.setting_up_png,
res.setting_down_png,
this.menuItemSettingCallback, this); ⑥
settingMenuItem.x = 480;
settingMenuItem.y = size.height - 400;
// 幫助圖片菜單
var helpMenuItem = new cc.MenuItemImage(
res.help_up_png,
res.help_down_png,
this.menuItemHelpCallback, this); ⑦
helpMenuItem.x = 860;
helpMenuItem.y = size.height - 480;
var mu = new cc.Menu(startMenuItem, settingMenuItem, helpMenuItem); ⑧
mu.x = 0;
mu.y = 0;
this.addChild(mu);
},
menuItemStartCallback:function (sender) {
cc.log("menuItemStartCallback!");
},
menuItemSettingCallback:function (sender) {
cc.log("menuItemSettingCallback!");
},
menuItemHelpCallback:function (sender) {
cc.log("menuItemHelpCallback!");
}
});

在上面的代碼中第①～②行是建立兩種不一樣狀態的精靈，第③行代碼是建立精靈菜單項cc.MenuItemSprite對象，第④～⑤行代碼是設置開始菜單項（startMenuItem）位置，注意這個座標是(700, 170)，因爲(700, 170)的座標是UI座標，須要轉換爲OpenGL座標，這個轉換過程就是startMenuItem.y = size.height - 170。
第⑥和⑦行代碼是建立圖片菜單項cc.MenuItemImage對象。第⑧行代碼是建立cc.Menu對象。
另外，因爲背景圖片大小是1136 x 640，咱們能夠在建立工程的時候，建立一個1136 x 640橫屏的工程，若是你建立工程不是這個尺寸，咱們能夠修改根目錄下的main.js文件，內容以下：

[html] view plain copy