There are several joystick scripts going around, however the few I stumbled upon had limited control sensitivity. A virtual analog controller should allow full 360 degree control (even if limited to certain directions within game-play, the system should allow for expansion/re-use), and MUST enable movement sensitivity (the character should move with a relative speed to the amount the joystick has moved).
In this post I am sharing a script I have written based on other implementations I have seen. Feel free to use it in your games.
below is the script in action
This movie requires Flash Player 10
If you want to skin your joystick, here is a nice inspiration link
http://dribbble.com/shots/770444-Analog-Stick/rebounds
package { import flash.events.Event; import flash.events.MouseEvent; import flash.display.MovieClip; public class VirtualJoystick extends MovieClip { private var _startX:Number = 0; private var _startY:Number = 0; private var _tension:Number = .5; private var _decay:Number = .7; private var _xSpeed:Number = 0; private var _isDragging:Boolean = false; private var _angle:int; private var _radius:int = 50; public function VirtualJoystick() { _startX = joystick.x; _startY = joystick.y; //add listeners joystick.addEventListener(MouseEvent.MOUSE_DOWN,on_mouseDown); stage.addEventListener(MouseEvent.MOUSE_UP,on_mouseUp); stage.addEventListener(Event.ENTER_FRAME, on_enterFrame); } //---------------------o // Mouse down handler //---------------------o protected function on_mouseDown(e:MouseEvent):void { _isDragging = true; } //---------------------o // Mouse up handler //---------------------o protected function on_mouseUp(e:MouseEvent):void { _isDragging = false; } //---------------------o // EnterFrame handler //---------------------o protected function on_enterFrame(e:Event):void { if( _isDragging ) { _angle = Math.atan2(root.mouseY-_startY,root.mouseX-_startX)/(Math.PI/180); joystick.rotation = _angle; joystick.knob.rotation = -_angle; joystick.knob.x = joystick.mouseX; if( joystick.knob.x > _radius ){ joystick.knob.x = _radius; } //rotate player to match joystick direction mcPlayer.rotation = _angle; //keep player on screen if( mcPlayer.y < 0 ) { mcPlayer.y = 0; } if( mcPlayer.y > stage.stageHeight ) { mcPlayer.y = stage.stageHeight; } if( mcPlayer.x < 0 ) { mcPlayer.x = 0; } if( mcPlayer.x > stage.stageWidth ) { mcPlayer.x = stage.stageWidth; } //move player proportionate to amount of joystick movement mcPlayer.y += Math.sin(_angle*(Math.PI/180))*(joystick.knob.x/8); mcPlayer.x += Math.cos(_angle*(Math.PI/180))*(joystick.knob.x/8); } else{ //Return joystick to neutral position when not touching _xSpeed = -joystick.knob.x*_tension; joystick.knob.x += _xSpeed; } } } }
UPDATE:
I have had a few people asking me for the FLA for this example, so here it is:
http://www.johnstejskal.com/blog-files/joystick.rar
I love you 🙂
I’m a bit confused as to what the difference is between joystick and joystick.knob. Some help would be appreciated!
Hi Jacob,
joystick is the whole component including the joystick backing plate and the ‘knob’ (movable circle)
knob is child of joystick and refers to the movable circle.
Let me know and I could send you an FLA with timeline code for you to play with
Thank u 🙂 useful
gonna be hard to run and jump without multitouch. thanks for dribble link though.
Hi John,
Cool joystick man. I am having some trouble and was wondering if you could send me the FLA file to mess around with a bit.
Hi John,
I was having some trouble with this and was wondering if you could send me the FLA file to mess around with.
Thanks you,
Jerome
Hi John, I am working in cs6 and I am having th hardest time implementing your joystick script into my existing game. Is there a way you could send me the fla file so I can get a better idea of how you put this together?
Any help would be so great, Thanks in advance!
Hello John, would appreciate if you can send the fla too, regards.
johnstejskal.com/blog-files/joystick.rar
I have now provided an FLA link for the example
johnstejskal.com/blog-files/joystick.rar
its a great tutorial… please send your fla in cs5 because im using flash cs5 and your fla detected as cs6 and it cannot open the file…
Is there any way that the knob can move from left to right only? Thanks. Your reply would be a great help.