Cocos2d-X lua 学习笔记之消息弹窗

实现游戏中需要在屏幕底部弹出消息提示弹窗，经过特定时间后渐隐消失。当有新的消息提示时，原来没有消失的弹窗会上移，并继续渐隐直至消失。

转载声明：http://blog.csdn.net/operhero1990/article/details/47165365

1、使用cocostudio建立一个最简单的弹窗界面，命名为hintFrame

设置黑底的透明度为100/255，这样能起到一个蒙版的效果。两个Label分别显示消息题目和内容。

2、创建控制弹窗的lua类脚本，命名为UI_hintFrame

local SPACING = 5

--init
function UI_hintFrame:init()
	-- data
	-- ===============================

	-- ui
	-- ===============================
	self.wigetRoot = ccs.GUIReader:getInstance():widgetFromJsonFile(config.dirUI.root .. "hintFrame.json")

	self.x, self.y = self.wigetRoot:getPosition()	--保存弹窗初始位置，方便移动完后返回原位置

	self.opacity = {}   --保存初始透明度
	for i, v in ipairs(<span style="font-family: Arial, Helvetica, sans-serif;">self.wigetRoot</span>) do
		self.opacity[i] = v:getOpacity()
	end

	self:addCCNode(self.wigetRoot)
end

function UI_hintFrame:setInfo(param_)
<pre name="code" class="plain"><span style="white-space:pre">	</span>

<span style="white-space:pre">	</span>self.wigetRoot:setVisible(false)  --先隐藏

-- 初始化你的Label显示内容endfunction UI_hintFrame:pop(callBack_) --弹窗渐隐方法 并传入回调函数local x_, y_ = self.wigetRoot:getPosition()local trigOver_ = false-- call backlocal function onActionOver()if trigOver_ == true thencclog_("not possible")returnendtrigOver_
= trueself.wigetRoot:setVisible(false)self.wigetRoot:stopAllActions()for i, v in ipairs(self.component) dov:stopAllActions()endif callBack_ ~= nil thencallBack_()endendlocal function playerAnimation()local delay_ = cc.DelayTime:create(2)local fadeOut_ = cc.FadeOut:create(1)for
i, v in ipairs(self.component) dov:runAction(cc.Sequence:create(delay_:clone(), fadeOut_:clone(), cc.CallFunc:create(onActionOver)))endendself.wigetRoot:setVisible(true)-- 透明度还原for i, v in ipairs(self.component) dov:setOpacity(self.opacity[i])end-- 位置还原self.wigetRoot:setPosition(self.x,
self.y)playerAnimation()endfunction UI_hintFrame:moveUp(pos_) --弹窗上移方法local x_, y_ = self.wigetRoot:getPosition()local sz_ = self.wigetRoot:getSize()local newY_ = sz_.height + SPACING + y_self.wigetRoot:runAction(cc.MoveTo:create(1, cc.p(x_, newY_)))end

3、创建弹窗管理脚本，命名为hintFrameMgr.lua

local hintFrameMgr = {}
local index = 1

-- 本地数据
-- ==================
hintFrameMgr.hintFrameInfoList = {}  --新的弹窗需求会先储存在此
hintFrameMgr.popedHintFrame = {}     --存储需要上移的弹窗
hintFrameMgr.hintFrames = {}         --存储可用于显示的弹窗实体

local function popNextHintFrame()
	while hintFrameMgr.hintFrameInfoList[1] ~= nil do
		if table.getn(hintFrameMgr.hintFrames) > 0 then
			local function popHintFrameOver()
				table.insert(hintFrameMgr.hintFrames, hintFrameMgr.popedHintFrame[1])
				table.remove(hintFrameMgr.popedHintFrame, 1)
				popNextHintFrame()
			end
			local ui_ = hintFrameMgr.hintFrames[1]
			if ui_:setInfo(hintFrameMgr.hintFrameInfoList[1]) then
				for i, v in ipairs(hintFrameMgr.popedHintFrame) do  --第二个弹窗需求出现时，第一个才做上移操作
					v:moveUp(pos_)
				end
				ui_:pop(popHintFrameOver)
				table.insert(hintFrameMgr.popedHintFrame, ui_)
				table.remove(hintFrameMgr.hintFrames, 1)
			end
			table.remove(hintFrameMgr.hintFrameInfoList, 1)
		else
			break
		end
	end
end

-- 全局方法
-- ==================
function hintFrameMgr.popHintFrame(param_)  --提交新的弹窗需求
	table.insert(hintFrameMgr.hintFrameInfoList, param_)
	popNextHintFrame()
end

function hintFrameMgr.attachHintFrame(uis_)  --初始化弹窗实例
	hintFrameMgr.hintFrames = uis_
	hintFrameMgr.popedHintFrame = {}
end

function hintFrameMgr.detachHintFrame()
end

return hintFrameMgr

3、在scene中调用UI_hintFrame和hintFrameMgr类，进行初始化

	local HINT_MAX_FRAMES = 3  --一次显示最多弹窗数

	self.hintFrames = {}
	for i = 1, HINT_MAX_FRAMES do
		local ui_ = UI_hintFrame.new()
		self:addMsgUI(ui_.layer)
		self.hintFrames[i] = ui_
	end
	self.hintFrameMgr = require("obj/hintFrameMgr")
	self.hintFrameMgr.attachHintFrame(self.hintFrames) --调用hintFrameMgr初始化HINT_MAX_FRAMES个弹窗实例

4、在scene中提交弹窗需求

hintFrameMgr.popHintFrame(param_)

5、代码逻辑

UI_hintFrame：读取hintFrame.json，获得UI实体。并实现上移和渐隐方法

hintFrameMgr：提供方法attachHintFrame将UI实体存储在hintFrames表中。每次有新的弹窗需求，会从hintFrames提取一个实体并初始化显示信息

提供方法popHintFrame接收新的弹窗需求，并调用私有方法popNextHintFrame来实现多个弹窗显示逻辑：

1、新的弹窗需求先存储在hintFrameInfoList中。

2、从hintFrameInfoList提取一个需求，从hintFrames取出一个实例并初始化显示。

3、执行渐隐效果。

4、压入popedHintFrame中。

由于第一个弹窗不需要移动，所以没有调用上移方法。当有新的弹窗需求到来时，重复步骤1~3，执行popedHintFrame弹窗的上移方法，最后执行步骤4。这样整个显示逻辑就完整了

6、显示效果展示

版权声明：本文为博主原创文章，未经博主允许不得转载。