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

4 篇文章 0 订阅
3 篇文章 0 订阅

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

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


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

  

     结构如下:


   触控模块代码

    box_tm:setTouchEnabled(true)
    box_tm:setTouchSwallowEnabled(true)                       
    box_tm:addTouchEventListener(function(event, x, y, prevX, prevY)

       local x,y = x,y
    
             if event == 'began' then
               
          
             elseif event == "moved" then

                cc,yy = box:getParent():convertToNodeSpace(ccp(x,y))     -- 变为世界坐标系
                
              --box_tm:convertToWorldSpace(ccp(x,y))
                box_tm:setPosition(cc,yy)

                local up_x , up_y = box_tm:getPosition()
                local loangle =  self:CosAngle(up_x, up_y, box_x ,box_y)
              
                if  handle2 == nil then 
                     handle2 =   scheduler.scheduleGlobal(handler(self,self.TouchScheduler),0.1) -- 启动定时器
                end
               
                if up_y > box_tm_y then     -- 判断在上边
                  --todo
                   if loangle >= 0 and loangle <= 22.5  then
                    --todo
                      dir_bar = "右"
 
                   elseif loangle > 22.5 and loangle <= 62.5  then
                    --todo
                     dir_bar = "右上"
                    
                   elseif loangle >67.5 and loangle <= 112.5 then
                     dir_bar = "上"
                      
                   elseif  loangle >= 112.5 and loangle < 157.5 then
                     dir_bar = "左上"
                     
                   else
                     dir_bar = "左"
                      
                   end
                else                      -- 判断在下面
                  --todo
                   if loangle >= 0 and loangle <= 22.5  then
                    --todo
                       dir_bar = "右"
                   elseif loangle > 22.5 and loangle <= 62.5  then
                    --todo
                       dir_bar = "右下"
                   elseif loangle >67.5 and loangle <= 112.5 then
                       dir_bar = "下"
                   elseif  loangle >= 112.5 and loangle < 157.5 then
                       dir_bar = "左下"
                   else
                    --todo
                       dir_bar = "左"
                   end
                end
             
               
             elseif event == "ended" then

                box_tm:setPosition(box_tm_x,box_tm_y) 

                self.critSprite:stopAllActions()

                        self.up_bar = 0
                        self.leftUp_bar =0
                        self.left_bar =0
                        self.rightUp_bar =0
                        self.right_bar =0
                        self.down_bar = 0
                        self.leftDown_bar = 0
                        self.rightDown_bar = 0

               scheduler.unscheduleGlobal(handle2)
               handle2 = nil

             end
             return true
            end)
    定时器中代码:

 

function Backpack:TouchScheduler()


   run_x,run_y = self.critSprite:getPosition()
   
   local speed = 3

   if dir_bar == "上" then

      if self.up_bar == 0 then
         self:State("上")

         self.up_bar = 1
         self.rightUp_bar = 0
         self.right_bar = 0
         self.leftUp_bar = 0
         self.left_bar = 0
         self.down_bar = 0
         self.leftDown_bar = 0
         self.rightDown_bar = 0

      end

    self.critSprite:setPosition(run_x, run_y + speed)

   elseif dir_bar == "下" then

      if self.down_bar == 0 then
         self:State("下")

         self.down_bar = 1
         self.rightUp_bar = 0
         self.right_bar = 0
         self.leftUp_bar = 0
         self.left_bar = 0
         self.up_bar = 0
         self.leftDown_bar = 0
         self.rightDown_bar = 0
      end 
    
    self.critSprite:setPosition(run_x, run_y - speed)
   …………        -- 就这样的不多写了 最好把<span style="font-family: 'Comic Sans MS';">self:State("下")  中的 汉字改为英文(编码问题要小心)。我这就不改了,大家注意就是。</span>
     状态:

function Backpack:State(...)

    local dir = ...
     if dir == "上" then
        self:Action(0,8)                -- 这里要注意参数是从第几个编号开始,往后多少张图
             
     elseif  dir == "下" then
        self:Action(32,8)

     elseif  dir == "左" then
        self:Action(48,8)

     elseif  dir == "右" then
        self:Action(16,8)

     elseif  dir == "左上" then
        self:Action(56,8)

     elseif  dir == "右上" then
        self:Action(8,8)

     elseif  dir == "左下" then
        self:Action(40,8)

     elseif  dir == "右下" then
        self:Action(24,8)
  
     end

end
 
   动画:

function Backpack:Action(st,la)
  
   self.critSprite:removeFromParentAndCleanup(true)
   self.frames = display.newFrames("000%d.tga", st, la)
  
   self.critSprite = display.newSprite(self.frames[1])
                        :addTo(display:getRunningScene(), SECOND_MENU_Z_ORDER)
   self.critSprite:setScale(0.6)
  
   animation = display.newAnimation(self.frames, 1 / 9)
   transition.execute(self.critSprite,CCAnimate:create(animation),{
               onComplete = function()
        
                end})

   self.critSprite:playAnimationForever(animation)
end

最后完成的效果如下:



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

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

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

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

                                                                                                                                                                    博主QQ:   294678265

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值