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