Haven't written a blog for a long time! Write a eight-way joystick today based on the quick cocos2d

First of all! Immediately graduated from the recent job search, but also a bit of time has not written anything to write something!

To enter the topic, first consider the algorithm and logic. Divide the circle into eight pieces, 45 degrees per block. Positive, positive, left, and right will be divided by X and Y. Half of each side is 22.5 degrees. (PS: Start to use the slope, but found that the slope is the image of Tan, that is, the infinite approach to the maximum and minimum value of the bad to judge the final use of the Cos can also be used sin) thinking of the process diagram is as follows:

Ready to start work, the first control of the characters have eight states are: up, down, left, right, left, left, bottom, right, bottom right animation. Different states correspond to different animations, and touch points and center points are compared to determine which direction. Judgment algorithms such as:

The structure is as follows:

Touch Module Code

    Box_tm:settouchenabled (True) box_tm:settouchswallowenabled (true) box_tm:addtoucheventlist                                      Ener (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))--                becomes World coordinate system--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 (s) Elf,self.                  Touchscheduler), 0.1)--Start timer End If up_y > box_tm_y then--judge on top                      --todo if Loangle >= 0 and Loangle <= 22.5 then--todo Dir_bar = "Right" ElseIf loangle > 22.5 and loangle <= 62.5 then--todo                     Dir_bar = "top Right" ElseIf loangle >67.5 and Loangle <= 112.5 Then                     Dir_bar = "Up" ElseIf loangle >= 112.5 and Loangle < 157.5 Then                                         Dir_bar = "Upper left" else Dir_bar = "Left"                   End ELSE--judging below--todo                   If Loangle >= 0 and Loangle <= 22.5 then--todo dir_bar = "Right"  ElseIf loangle > 22.5 and loangle <= 62.5 then--todo Dir_bar =                   "Bottom Right" ElseIf loangle >67.5 and Loangle <= 112.5 then Dir_bar = "Down" ElseIf Loangle >= 112.5 and Loangle < 157.5 then Dir_bar = "bottom Left" else--                                         Todo Dir_bar = "Left" End end ElseIf event = = "Ended" then Box_tm:setposition (box_tm_x,box_tm_y) Self.critSprite:stopAllA Ctions () Self.up_bar = 0 Self.leftup_bar =0 self.left _bar =0 self.rightup_bar =0 self.right_bar =0 self.do Wn_bar = 0 Self.leftdown_bar = 0 Self.rightdown_bar = 0 schedu Ler.unscheduleglobal (handle2) Handle2 = Nil End return True end)

The code in the timer:

function Backpack:touchscheduler () run_x,run_y = self.critSprite:getPosition () local speed = 3 if Dir_bar = = "Up" Then if Self.up_bar = = 0 Then self:state ("up") Self.up_bar = 1 Self.rightup_bar = 0 SE  Lf.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 = = "Down"         Then if Self.down_bar = = 0 Then self:state ("down") 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_b AR = 0 self.rightdown_bar = 0 End self.critSprite:setPosition (run_x, Run_y-speed) ....-- This is not much to write the best <span style= "font-family: ' Comic Sans MS ';" Chinese characters in >self:state ("down") are changed to English (be careful with coding problems). I'm not going to change that, everybody. </span>

State:

function Backpack:state (...)    Local dir = ...     if dir = = "Up" then        self:action (0,8)                --here to note that the parameter is starting from the first number of numbers, and how many images                  elseif  dir = = "Down" then        self:action ( 32,8)     ElseIf  dir = = "Left" then        self:action (48,8)     ElseIf  dir = = "Right" then        self:action (16,8)     ElseIf  dir = = "top Left" then        self:action (56,8)     ElseIf  dir = = "right up" then        self:action (8,8)     ElseIf  dir = = "Left down" then        self:action (40,8)     ElseIf  dir = = "right down" then        self:action (24,8)       EndEnd

Animation:

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

The final results are as follows:

What are the problems that we can exchange together to learn common progress. There will be my QQ in the lower right corner.

I did my best to make a long GIF can not be sent out, CSDN said that support GIF I also less than 2 m out or not moving! Please know how to tell a friend, in this I first thank you!

Replace the first to send a Baidu network address: Http://pan.baidu.com/s/1pJzENqV

bo Master qq:294678265

Haven't written a blog for a long time! Write a eight-way joystick today based on the quick cocos2d