仿coc聊天框的cocos2d实现
前段时间出的手游有点流行左侧弹出/拉出式的聊天界面,不知道是不是受COC的影响。于是Cici把以前传统的左下角显示加点击按钮弹出整个聊天界面Duang的一下也改成这种了。下面简单的记录一下。
--初始位置 弹出时,要考虑一下在不同分辨率下的缩放问题。由于Cici这个聊天系统所在的程序是根据宽高等比缩放,但缩放比例取宽比和高比之中小的那一个进行适配的,所以要先比较比例。(当前程序中是以960X640为标准屏幕大小) local width = chatViewNode:getContentSize().width if winSize.width/winSize.height < 960/640 then rateWidth = winSize.width/960 *width else rateWidth = winSize.height/640*width end local move = CCMoveTo :create(0.3,ccp(chatViewPos.px + rateWidth,chatViewPos.px)) chatViewNode:runAction(move)
首先给屏幕添加touch事件。
local function onTouchW(event,x,y) if event == "moved" then moveChatView(x,y) end if event == "ended" then endMoveChatView(x,y) end end 在move和stopmove的实现,由于是touch事件关联,所以我在每帧的touch检测中setPosition来改变位置而不是用runAction。
这里我们需要两个变量来记录最开始touch的位置和上一帧的位置。 local chatViewLastPositon = nil local touchTag=false -----touch的标志 local firstTouchX = nil --当chatViewLastPositon点击为nil的时候设置的用于判断有没有移动过 function moveChatView(x,y) local width = 计算过分辨率适配的chatView的width local posiX = chatView的position ---如果还没有被touch过 if touchTag==false then --检查touch的坐标是否在按钮Node的坐标里面 local touch =nodeContainsPt("按钮的Node",(ccp(x,y))) touchTag = touch end ---如果已经touch了按钮 if touchTag==true then ---如果第一次touch坐标和上一次touch坐标还没有值就先赋值 if chatViewLastPositon == nil then chatViewLastPositon = x firstTouchX = x else ---计算改变的距离 local dertX = x- chatViewLastPositon ---三种边界情况的计算 if posiX<width and posiX >0 then chatView["node"]:setPositionX(dertX+chatView["node"]:getPositionX()) chatViewLastPositon = x elseif posiX == width then if x<=chatViewLastPositon then chatView["node"]:setPositionX(dertX+chatView["node"]:getPositionX()) chatViewLastPositon = x end elseif posiX == 0 then if x>=chatViewLastPositon then chatView["node"]:setPositionX(dertX+chatView["node"]:getPositionX()) chatViewLastPositon = x end end end end end function endMoveChatView(x,y) local width = 计算过分辨率适配的chatView的width local posiX = chatView的position if chatViewLastPositon~=firstTouchX and chatViewLastPositon~= nil then ---这里如果在半途中松开手会有自动弹回的效果 if posiX<=(width/2) then chatViewNode:setPositionX(px) chatView.isChatViewOpen = false else chatViewNode:setPositionX(width) chatView.isChatViewOpen = true end end chatViewLastPositon = nil firstTouchX = nil touchTag = false end
最后讲讲怎么判断点击坐标是否在按钮内~
function nodeContainsPt(pNode,pt) --pt为点位世界坐标系点 -----把pt转为pNode下的本地坐标 local touchLocation = pNode:getParent():convertToNodeSpace(pt) local bBox=pNode:boundingBox() local bRet = bBox:containsPoint(touchLocation) return bRet end 大概的效果图如下~ (我了个去去去~csdn的网页版格式肿么这么麻烦。。。泪目) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |