很久没写博客了!今天来写个八方向摇杆基于quick cocos2d

前端之家收集整理的这篇文章主要介绍了很久没写博客了!今天来写个八方向摇杆基于quick cocos2d前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先!马上毕业了,还算有点时间好久没写东西了就写点东西吧!

进入主题,首先先思考算法和逻辑。把圆分为八块,每块45度。正上,正下,正左,正右会被X和Y 平分。一边一半各是22.5度。(PS:开始想用 斜率的,但是发现斜率是tan的图像,也就是无限趋近最大值和最小值的不好做判断最后就用了cos也可用sin)思考计算的过程图如下:


准备工作完了就开始,首先控制的人物有八个状态分别是:上,下,左,右,左上,左下,右上,右下的动画。不同的状态对应着不同的动画,触控点和圆心点作比较来判断是哪个方向的。判断算法如下图:

结构如下:


触控模块代码

  1. Box_tm:setTouchEnabled(true)
  2. Box_tm:setTouchSwallowEnabled(true)
  3. Box_tm:addTouchEventListener(function(event,x,y,prevX,prevY)
  4.  
  5. local x,y = x,y
  6. if event == 'began' then
  7. elseif event == "moved" then
  8.  
  9. cc,yy = Box:getParent():convertToNodeSpace(ccp(x,y)) -- 变为世界坐标系
  10. --Box_tm:convertToWorldSpace(ccp(x,y))
  11. Box_tm:setPosition(cc,yy)
  12.  
  13. local up_x,up_y = Box_tm:getPosition()
  14. local loangle = self:CosAngle(up_x,up_y,Box_x,Box_y)
  15. if handle2 == nil then
  16. handle2 = scheduler.scheduleGlobal(handler(self,self.TouchScheduler),0.1) -- 启动定时器
  17. end
  18. if up_y > Box_tm_y then -- 判断在上边
  19. --todo
  20. if loangle >= 0 and loangle <= 22.5 then
  21. --todo
  22. dir_bar = "右"
  23. elseif loangle > 22.5 and loangle <= 62.5 then
  24. --todo
  25. dir_bar = "右上"
  26. elseif loangle >67.5 and loangle <= 112.5 then
  27. dir_bar = "上"
  28. elseif loangle >= 112.5 and loangle < 157.5 then
  29. dir_bar = "左上"
  30. else
  31. dir_bar = "左"
  32. end
  33. else -- 判断在下面
  34. --todo
  35. if loangle >= 0 and loangle <= 22.5 then
  36. --todo
  37. dir_bar = "右"
  38. elseif loangle > 22.5 and loangle <= 62.5 then
  39. --todo
  40. dir_bar = "右下"
  41. elseif loangle >67.5 and loangle <= 112.5 then
  42. dir_bar = "下"
  43. elseif loangle >= 112.5 and loangle < 157.5 then
  44. dir_bar = "左下"
  45. else
  46. --todo
  47. dir_bar = "左"
  48. end
  49. end
  50. elseif event == "ended" then
  51.  
  52. Box_tm:setPosition(Box_tm_x,Box_tm_y)
  53.  
  54. self.critSprite:stopAllActions()
  55.  
  56. self.up_bar = 0
  57. self.leftUp_bar =0
  58. self.left_bar =0
  59. self.rightUp_bar =0
  60. self.right_bar =0
  61. self.down_bar = 0
  62. self.leftDown_bar = 0
  63. self.rightDown_bar = 0
  64.  
  65. scheduler.unscheduleGlobal(handle2)
  66. handle2 = nil
  67.  
  68. end
  69. return true
  70. end)
定时器中代码

  1. function Backpack:TouchScheduler()
  2.  
  3.  
  4. run_x,run_y = self.critSprite:getPosition()
  5. local speed = 3
  6.  
  7. if dir_bar == "上" then
  8.  
  9. if self.up_bar == 0 then
  10. self:State("上")
  11.  
  12. self.up_bar = 1
  13. self.rightUp_bar = 0
  14. self.right_bar = 0
  15. self.leftUp_bar = 0
  16. self.left_bar = 0
  17. self.down_bar = 0
  18. self.leftDown_bar = 0
  19. self.rightDown_bar = 0
  20.  
  21. end
  22.  
  23. self.critSprite:setPosition(run_x,run_y + speed)
  24.  
  25. elseif dir_bar == "下" then
  26.  
  27. if self.down_bar == 0 then
  28. self:State("下")
  29.  
  30. self.down_bar = 1
  31. self.rightUp_bar = 0
  32. self.right_bar = 0
  33. self.leftUp_bar = 0
  34. self.left_bar = 0
  35. self.up_bar = 0
  36. self.leftDown_bar = 0
  37. self.rightDown_bar = 0
  38. end
  39. self.critSprite:setPosition(run_x,run_y - speed)
  40. ………… -- 就这样的不多写了 最好把<span style="font-family: 'Comic Sans MS';">self:State("下") 中的 汉字改为英文(编码问题要小心)。我这就不改了,大家注意就是。</span>
状态:

  1. function Backpack:State(...)
  2.  
  3. local dir = ...
  4. if dir == "上" then
  5. self:Action(0,8) -- 这里要注意参数是从第几个编号开始,往后多少张图
  6. elseif dir == "下" then
  7. self:Action(32,8)
  8.  
  9. elseif dir == "左" then
  10. self:Action(48,8)
  11.  
  12. elseif dir == "右" then
  13. self:Action(16,8)
  14.  
  15. elseif dir == "左上" then
  16. self:Action(56,8)
  17.  
  18. elseif dir == "右上" then
  19. self:Action(8,8)
  20.  
  21. elseif dir == "左下" then
  22. self:Action(40,8)
  23.  
  24. elseif dir == "右下" then
  25. self:Action(24,8)
  26. end
  27.  
  28. end

动画:

  1. function Backpack:Action(st,la)
  2. self.critSprite:removeFromParentAndCleanup(true)
  3. self.frames = display.newFrames("000%d.tga",st,la)
  4. self.critSprite = display.newSprite(self.frames[1])
  5. :addTo(display:getRunningScene(),SECOND_MENU_Z_ORDER)
  6. self.critSprite:setScale(0.6)
  7. animation = display.newAnimation(self.frames,1 / 9)
  8. transition.execute(self.critSprite,CCAnimate:create(animation),{
  9. onComplete = function()
  10. end})
  11.  
  12. self.critSprite:playAnimationForever(animation)
  13. end

最后完成的效果如下:



有什么问题大家可以交流共同学习共同进步。右下角会有我的QQ.

我尽力了,弄了很久 GIF 都发不出去,CSDN 说的是支持GIF 我也小于2M 了发出来还是不动得! 求知道朋友告知一声怎么弄的,在这我先谢谢了!

先替代的发个百度网盘地址吧:http://pan.baidu.com/s/1pJzENqV

这篇文章在quick 官方的教程中我也发过,在教程推荐的前几名上过一段时间:http://cn.cocos2d-x.org/tutorial/show?id=2789 有兴趣的可以点进去看下。

博主QQ: 294678265

猜你在找的Cocos2d-x相关文章