Cocos2d-JS中的文本菜單

時間 2019-11-05

原文原文鏈接

文本菜單是菜單項只能顯示文本，文本菜單類包括了cc.MenuItemLabel、cc.MenuItemFont和cc.MenuItemAtlasFont。cc.MenuItemLabel是個抽象類，具體使用的時候是使用cc.MenuItemFont和cc.MenuItemAtlasFont兩個類。
文本菜單類cc.MenuItemFont，它的其中一個構造函數定義以下：
html

[html] view plain copy微信

ctor(value, //要顯示的文本 app
callback, //菜單操做的回調函數指針函數
target) 字體

文本菜單類cc.MenuItemAtlasFont是基於圖片集的文本菜單項，它的其中一個構造函數定義以下：
網站

[html] view plain copythis

ctor (value, //要顯示的文本 spa
charMapFile, //圖片集文件 .net
itemWidth, //要截取的文字在圖片中的寬度指針
itemHeight, //要截取的文字在圖片中的高度
startCharMap //開始字符
callback ) //菜單操做的回調函數指針

本節咱們會經過一個實例介紹一下文本菜單的使用，這個實例如圖4-12所示，其中菜單Start是使用cc.MenuItemFont實現的，菜單Help是使用cc.MenuItemAtlasFont實現的。

文本菜單實例

下面咱們看看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);
cc.MenuItemFont.setFontName("Times New Roman"); ①
cc.MenuItemFont.setFontSize(86); ②
var item1 = new cc.MenuItemFont("Start", this.menuItem1Callback, this); ③
var item2 = new cc.MenuItemAtlasFont("Help",
res.charmap_png,
48, 65,' ',
this.menuItem2Callback, this); ④
var mn = new cc.Menu(item1, item2); ⑤
mn.alignItemsVertically(); ⑥
this.addChild(mn); ⑦
return true;
},
menuItem1Callback:function (sender) {
cc.log("Touch Start Menu Item " + sender);
},
menuItem2Callback:function (sender) {
cc.log("Touch Help Menu Item " + sender);
}
});

上述代碼第①和②行是設置文本菜單的文本字體和字體大小。第③行代碼是建立cc.MenuItemFont菜單項對象，它是一個通常文本菜單項，構造函數的第一個參數是菜單項的文本內容，第二個參數是點擊菜單項回調的函數指，this.menuItem1Callback是函數指針，this表明函數所在的對象。
第④行代碼是建立一個cc.MenuItemAtlasFont菜單項對象，這種菜單項是基於圖片集的菜單項。res.charmap_png變量也是在resource.js文件中定義的，表示"res/menu/tuffy_bold_italic-charmap.png"路徑。
還有第⑤行代碼var mn = new cc.Menu(item1, item2)是建立菜單對象，把以前建立的菜單項添加到菜單中。第⑥行代碼mn.alignItemsVertically()是設置菜單項垂直對齊。第⑦行代碼是this.addChild(mn)是把菜單對象添加到當前層中。
注意上述代碼第④行cc.MenuItemAtlasFont類在Web平臺下運行正常做用，可是在JSB本地運行顯示有誤，咱們能夠使用下面代碼替換。

[html] view plain copy