仿coc聊天框的cocos2d实现

概述    前段时间出的手游有点流行左侧d出/拉出式的聊天界面，不知道是不是受COC的影响。于是Cici把以前传统的左下角显示加点击按钮d出整个聊天界面Duang的一下也改成这种了。下面简单的记录一下。     首先这种界面有两种打开方式。一种是单机按钮从边侧d出，一种是通过长按按钮让界面跟随手指移动滑出。     先还是说一下界面的制作。由于按钮一直要存在于屏幕的最左边，所以按钮的父节点（整个聊天界

前段时间出的手游有点流行左侧d出/拉出式的聊天界面，不知道是不是受COC的影响。于是Cici把以前传统的左下角显示加点击按钮d出整个聊天界面Duang的一下也改成这种了。下面简单的记录一下。


首先这种界面有两种打开方式。一种是单机按钮从边侧d出，一种是通过长按按钮让界面跟随手指移动滑出。


先还是说一下界面的制作。由于按钮一直要存在于屏幕的最左边，所以按钮的父节点（整个聊天界面所在的layer）的锚点我设置为（1,0.5），然后将聊天框的UI放在锚点左侧，按钮的UI放在锚点右侧，把聊天layer add到屏幕的最左侧，这样不管屏幕大小怎样变换，按钮就能不受分辨率影响始终在最左侧。（ps.cici的界面是用ccb做的）

然后讲一讲简单的点击按钮d出界面。
我们需要知道的两个参数，聊天界面的初始位置和d出后所在位置。

--初始位置
chatVIEwPos.px = px
chatVIEwPos.py = py


收回界面代码：
local move = CCMoveto :create(0.3,ccp(chatVIEwPos.px,chatVIEwPos.py))
chatVIEw.node:runAction(move)

d出时，要考虑一下在不同分辨率下的缩放问题。由于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)

实现这滑动d出我们需要知道聊天框的宽，聊天框当前的position和手指是否在按钮的touch中~

首先给屏幕添加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	    ---这里如果在半途中松开手会有自动d回的效果	    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的网页版格式肿么这么麻烦。。。泪目）

总结

以上是内存溢出为你收集整理的仿coc聊天框的cocos2d实现全部内容，希望文章能够帮你解决仿coc聊天框的cocos2d实现所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。