Quick cocos2dx-Lua（V3.3R1）學習筆記（五）------建立精靈 菜單，讓咱們作個最簡單的點擊菜單顯示精靈吧

 

開始第5篇筆記了，感受前面的幾篇寫的太少了，Quick cocos2dx 前面加個quick，就是就能讓咱們快速上手，快速開發......balabala

 

一,咱們來建立第一個精靈

今天咱們來建立精靈，咱們前面顯示的外星人圖片就是一個精靈。

quick給咱們提供了display.newSprite這個函數來建立精靈。

咱們進入display.lua中看看對這個函數的介紹說明。

哇，這麼長，我怎麼知道那個函數定位在哪裏（不是有搜索嗎，不能Ctrl+F搜索麼+_+）。

 

咱們換個方法，不用搜索，畢竟咱們想要看看quicks給咱們封裝了那些函數，我只要看函數列表就好了。sublime text給咱們提供的這個快捷鍵，顯示函數列表，讓咱們快速定位到想要找的函數

<<Ctrl大法之-----Ctrl+R>>

看到了吧，這樣咱們就能看到quick究竟封裝了那些函數給咱們，畢竟如今quick的文檔不是那麼全面，咱們能夠定位過去，順便看看函數的實現過程，這樣更能使用好函數

 

下面就是這個函數的參數說明了

 

建立並返回一個 Sprite 顯示對象。
-- @function [parent=#display] newSprite
-- @param mixed 圖像名或SpriteFrame對象
-- @param number x
-- @param number y
-- @param table params
-- @return Sprite#Sprite ret (return value: cc.Sprite) 
-- @see Sprite


--[[--

建立並返回一個 Sprite 顯示對象。

display.newSprite() 有三種方式建立顯示對象：

-   從圖片文件建立
-   從緩存的圖像幀建立
-   從 SpriteFrame 對象建立

咱們用第一個種方式建立

 

 

function MainScene:ctor()
	display.newSprite("Hello.png")
		:align(display.CENTER, display.cx, display.cy)   --設置錨點和圖片座標點
		:addTo(self)								   --將生成的圖片精靈加入到MainScene的子節點中

end

　　

進入模擬器，運行一下看看效果吧

 

 

顯示成功。ok，咱們用第二種方式建立精靈

第二種方式就是調用plist文件加載到精靈緩存中了，咱們把一堆小圖像打包成大圖，生成plist文件，這個文件包含了咱們要用的小圖在大圖的座標位置

至於如何打包 請搜索 TexturePacker 

這個工具使用技巧自行使用谷歌百度大法

 

function MainScene:ctor()

	display.addSpriteFrames("lqfRoleWalk.plist","lqfRoleWalk.png")
	display.newSprite("#lqfRightStop.png")
		:align(display.CENTER,display.cx, display.cy)
		:addTo(self)
		:setScale(3)     --放大3倍
end

　　

注意：與上面第一個示例不一樣的，咱們將文件載入精靈緩存中，調用display.newSprite中參數加了一個#符號，這個#符號是告訴這個函數，從緩存中加載精靈的

 

 

咱們來看顯示效果（我認可，由於我圖過小了因此放大了3倍）

 

 

二，建立菜單

原本我想用MenuItemFont函數的，結果使用後，各類提示nil value，去論壇搜索一下，才知道，quick如今推薦用UIPushButton來建立菜單的，其實我仍是很懷念用文字菜單的，就是沒找到使用方法，若是有童鞋知道的，請告知，謝謝

 

 

好吧，如今基本沒遊戲菜單仍是用文字的吧，咱們就用UIPushButton這個按鈕控件作菜單

用的就cc.ui.UIPushButton建立按鈕

 

舉個栗子來看

function MainScene:ctor()
	local button1 = cc.ui.UIPushButton.new({normal = "Button01.png",pressed = "Button01Pressed.png"})
	button1:align(display.CENTER,display.cx,display.cy)
	button1:addTo(self)
end

　　

菜單按鈕就這麼建立，咱們先看效果

 

-- @param table images 各類狀態的圖片
-- @param table options 參數表 其中scale9爲是否縮放
狀態值:
-   normal 正常狀態
-   pressed 按下狀態
-   disabled 無效狀態
 

　　

咱們看到上面咱們第二個參數中有個scale9的參數，知道的童鞋就知道這是九宮格，不知道的請百度實現原理以及這樣作的優勢，咱們用兩段代碼對比一下就能看出效果了

function MainScene:ctor()
	local button1 = cc.ui.UIPushButton.new({normal = "Button01.png",pressed = "Button01Pressed.png"})
	button1:align(display.CENTER,display.cx,display.cy)
	button1:addTo(self)
	button1:setButtonSize(400,200)
end

　　

咱們將菜單尺寸放大

 

阿西吧，真難看啊思密達！！！&……&￥#￥@（我仍是會一點思密達語言的）

咱們將傳一個九宮格參數進去看效果

function MainScene:ctor()
	local button1 = cc.ui.UIPushButton.new({normal = "Button01.png",pressed = "Button01Pressed.png"},{scale9 = true})
	button1:align(display.CENTER,display.cx,display.cy)
	button1:addTo(self)
	button1:setButtonSize(400,200)
end

　　

運行效果

很直白的看出不一樣了吧！

 

三,進入主題，給按鈕加上回調函數，來顯示隱藏圖片

話說寫了這麼多才進入主題，我語文老師會不會打我啊！O(∩_∩)O~（語文老師：我和大家說啊，做文，開頭就要點題，批卷老師哪有時間給你全看完啊。。。balabala）

 

按鈕咱們顯示了出來了，如今如何給按鈕加上處理函數呢，否則光點擊，沒效果，玩個球啊

 

 

--------------------------------
-- 註冊用戶點擊監聽
-- @function [parent=#UIButton] onButtonClicked
-- @param function callback 監聽函數
-- @return UIButton#UIButton 

-- end --

function UIButton:onButtonClicked(callback)
    self:addButtonClickedEventListener(callback)
    return self
end

function UIButton:addButtonPressedEventListener(callback)
    return self:addEventListener(UIButton.PRESSED_EVENT, callback)
end

-- start --

--------------------------------
-- 註冊用戶按下監聽
-- @function [parent=#UIButton] onButtonPressed
-- @param function callback 監聽函數
-- @return UIButton#UIButton 

-- end --

function UIButton:onButtonPressed(callback)
    self:addButtonPressedEventListener(callback)
    return self
end

function UIButton:addButtonReleaseEventListener(callback)
    return self:addEventListener(UIButton.RELEASE_EVENT, callback)
end

-- start --

--------------------------------
-- 註冊用戶釋放監聽
-- @function [parent=#UIButton] onButtonRelease
-- @param function callback 監聽函數
-- @return UIButton#UIButton 

-- end --

function UIButton:onButtonRelease(callback)
    self:addButtonReleaseEventListener(callback)
    return self
end

function UIButton:addButtonStateChangedEventListener(callback)
    return self:addEventListener(UIButton.STATE_CHANGED_EVENT, callback)
end
（這不是UIButton的函數麼，不是UIPushButton的啊 ？）咱們在UIPushButton.lua文件，會看見，其實這個按鈕繼承了UIButton了，因此咱們能調用UIButton的函數
 
function MainScene:ctor()
	local button1 = cc.ui.UIPushButton.new({normal = "Button01.png",pressed = "Button01Pressed.png"},{scale9 = true})
	button1:align(display.CENTER,display.cx,display.cy)
	button1:addTo(self)
	button1:setButtonSize(200,100)

	button1:onButtonClicked(function() 
		print("歡迎收看xxxx")
		print("你們好，我是小莫")
		print("我是小小莫")
	end	)

end

　　

看到效果了吧，咱們開始作點擊按鈕顯示圖片了，很簡單

function MainScene:ctor()
	local sprite = display.newSprite("Hello.png")
	sprite:align(display.CENTER, display.cx, display.cy)  
	sprite:addTo(self)								
	sprite:setVisible(false)



	local button1 = cc.ui.UIPushButton.new({normal = "Button01.png",pressed = "Button01Pressed.png"},{scale9 = true})
	button1:align(display.CENTER,display.cx,100)
	button1:addTo(self)
	button1:setButtonSize(200,100)

	button1.showSprieState_ = 1
	button1:setButtonLabel("normal", cc.ui.UILabel.new({UILabelType = 2,text = "顯示圖片",size = 30}))
	button1:setButtonLabel("pressed", cc.ui.UILabel.new({UILabelType = 2,text = "顯示圖片",size = 30}))
	button1:onButtonClicked(function() 
		if button1.showSprieState_ == 1 then
			button1.showSprieState_ = 2
			sprite:setVisible(true)
			button1:setButtonLabel("normal", cc.ui.UILabel.new({UILabelType = 2,text = "隱藏圖片",size = 30}))
			button1:setButtonLabel("pressed", cc.ui.UILabel.new({UILabelType = 2,text = "隱藏圖片",size = 30}))
			
		else
			button1.showSprieState_ = 1
			sprite:setVisible(false)
			button1:setButtonLabel("normal", cc.ui.UILabel.new({UILabelType = 2,text = "顯示圖片",size = 30}))
			button1:setButtonLabel("pressed", cc.ui.UILabel.new({UILabelType = 2,text = "顯示圖片",size = 30}))
			
		end		
	end	)

end