quick-cocos2d-x遊戲開發【5】——創建菜單

原創

wangdi1224

2020-02-21 21:53

菜單也是遊戲中不可缺少的元素之一，quick中對於menuItem的封裝有兩種，一個是圖片菜單，一個是文字菜單。

一、圖片菜單ui.newImageMenuItem(params)

可用參數：

image: 正常狀態的按鈕圖像
imageSelected: 按鈕按下時的圖像（可選）
imageDisabled: 按鈕被禁用時的圖像（可選）
listener: 回調函數
tag: 按鈕的 Tag，會傳入回調函數。多個按鈕使用同一個回調函數時，可根據 Tag 區分哪一個按鈕被按下（可選）
x, y: 座標（可選）
sound: 按鈕按下時播放什麼音效（可選）

對於params的參數名稱是一定不可以寫錯，和上節中label一樣，所以這個還是需要多敲幾次記住一下。tag是配合多個item共用一個回調函數來使用的，所以如果單獨寫一個function，記得有一個tag參數。

簡單寫一個圖片按鈕

local item1 = ui.newImageMenuItem({
    image = "CloseNormal.png",
    imageSelected = "CloseSelected.png",
    listener = onClicked,
    x = display.cx,
    y = display.height*0.7,
    tag = 1
})

二、文字菜單ui.newTTFLabelMenuItem(params)

文本按鈕的參數非常多，除了menuitem一些基本的參數外，還可以使用ui.newTTFLabel()中的參數，例如text文本內容，size文字大小等。

再寫一個文字菜單

local item2 = ui.newTTFLabelMenuItem({
    text = "MenuItem",
    size = 50,
    aligh = ui.TEXT_ALIGN_CENTER,
    listener = onClicked,
    x = display.cx,
    y = display.height*0.3,
    tag = 2
})

和Cocos2dx一樣，我們還是需要一個Menu大管家來管理這些menuItem，如果使用原來lua的寫法，我們要addChild每一個item，quick在這裏把menu重新封裝，讓其使用和c++的寫法一樣，這就方便很多了。

local menu = ui.newMenu({item1, item2})
self:addChild(menu)

這樣就添加完成了，回調函數咱們還沒說，我們再看下。

local function onClicked(tag)
    	if tag == 1 then
    		print("item1 clicked")
    	elseif tag == 2 then
    		print("item2 clicked")
    	end
end

由於這個function是局部（local）的，所以一定要放在menuItem之前，和C一樣，否則程序會認不出該函數。當然也可以直接在listener內部就寫好回調函數，再創建一個item，

local item3 = ui.newTTFLabelMenuItem({
    text = "MenuItem2",
    size = 30,
    aligh = ui.TEXT_ALIGN_CENTER,
    listener = function ()
    	print("item3 clicked")
    end,
    x = display.cx,
    y = display.cy,
})

是不是so easy！基本的使用就是這樣，最後來一個完整的代碼和效果。

function MyScene:ctor()
	local function onClicked(tag)
    	if tag == 1 then
    		print("item1 clicked")
    	elseif tag == 2 then
    		print("item2 clicked")
    	end
	end

	local item1 = ui.newImageMenuItem({
	    image = "CloseNormal.png",
	    imageSelected = "CloseSelected.png",
	    listener = onClicked,
	    x = display.cx,
	    y = display.height*0.7,
	    tag = 1
	})

	local item2 = ui.newTTFLabelMenuItem({
	   	text = "MenuItem",
	   	size = 50,
	   	aligh = ui.TEXT_ALIGN_CENTER,
	    listener = onClicked,
	    x = display.cx,
	    y = display.height*0.3,
	    tag = 2
	})

	local item3 = ui.newTTFLabelMenuItem({
	   	text = "MenuItem2",
	   	size = 30,
	   	aligh = ui.TEXT_ALIGN_CENTER,
	    listener = function ()
	    	print("item3 clicked")
	    end,
	    x = display.cx,
	    y = display.cy,
	})

	local menu = ui.newMenu({item1, item2, item3})
	self:addChild(menu)

end

效果如下，