Virtual Stick

Samah

(Posted 2011) [#1]

One of the staple components of many touchscreen games is the so-called "virtual stick". Basically it's a small circle that you touch and move your thumb around in a similar manner to an analog stick on a game controller.

Here's my take on it, though it's mostly a work-in-progress. If you see any glaring errors, please fix and/or let me know. ;)

The test app is ugly, but the VirtualStick class is pretty easy to use.
If you're testing it on Android, it'd be best to force landscape and fullscreen.

strict
import mojo

class VirtualStickTestApp extends App
	const PLAYFIELD_WIDTH:float = 200
	const PLAYFIELD_HEIGHT:float = 200
	const PLAYER_SPEED:float = 5
	
	' our virtual stick
	field mystick:MyStick
	
	' whether or not we're "touching"
	#if TARGET="android" then
		field touching:bool[] = new bool[32]
	#else
		field touching:bool
	#endif
	
	' the "player"'s location
	field playerX:float = PLAYFIELD_WIDTH/2
	field playerY:float = PLAYFIELD_HEIGHT/2
	field playfieldX:float
	field playfieldY:float = 10
	
	method OnCreate:int()
		mystick = new MyStick
		mystick.SetRing(100, DeviceHeight()-100, 40)
		mystick.SetStick(0, 0, 15)
		mystick.SetDeadZone(0.2)
		mystick.SetTriggerDistance(5)
		playfieldX = DeviceWidth()-PLAYFIELD_WIDTH-10
		SetUpdateRate 30
		return 0
	end
	
	method OnUpdate:int()
		' update the stick usage
		#if TARGET="android" then
			for local i:int = 0 to 31
				if TouchHit(i) then
					touching[i] = true
					mystick.StartTouch(TouchX(i), TouchY(i), i)
				elseif TouchDown(i) then
					mystick.UpdateTouch(TouchX(i), TouchY(i), i)
				elseif touching[i] then
					touching[i] = false
					mystick.StopTouch(i)
				end
			end
		#else
			if MouseHit(0) then
				touching = true
				mystick.StartTouch(MouseX(), MouseY(), 0)
			elseif MouseDown(0) then
				mystick.UpdateTouch(MouseX(), MouseY(), 0)
			elseif touching then
				touching = false
				mystick.StopTouch(0)
			end
		#endif

		' update the player position
		if mystick.GetVelocity() <> 0 then
			playerX += mystick.GetDX() * PLAYER_SPEED
			playerY -= mystick.GetDY() * PLAYER_SPEED
			if playerX < 0 then
				playerX = 0
			elseif playerX > PLAYFIELD_WIDTH then
				playerX = PLAYFIELD_WIDTH
			end
			if playerY < 0 then
				playerY = 0
			elseif playerY > PLAYFIELD_HEIGHT then
				playerY = PLAYFIELD_HEIGHT
			end
		end
		return 0
	end
	
	method OnRender:int()
		Cls(0,0,0)
		
		mystick.DoRenderRing()
		mystick.DoRenderStick()
		DrawOutlineRect(playfieldX, playfieldY, PLAYFIELD_WIDTH, PLAYFIELD_HEIGHT)
		DrawCircle(playfieldX + playerX, playfieldY + playerY, 5)
		
		' some test info
		DrawText("angle="+mystick.GetAngle(), 10, 10)
		DrawText("vel="+mystick.GetVelocity(), 10, 30)
		DrawText("dx="+mystick.GetDX(), 10, 50)
		DrawText("dy="+mystick.GetDY(), 10, 70)
		return 0
	end
end

class MyStick extends VirtualStick
	method RenderRing:void(x:float, y:float)
		SetColor 0, 0, 255
		super.RenderRing(x, y)
		SetColor 255, 255, 255
	end
	
	method RenderStick:void(x:float, y:float)
		SetColor 0, 255, 0
		super.RenderStick(x, y)
		SetColor 255, 255, 255
	end
end

class VirtualStick
private
	' the coordinates and dimensions for the virtual stick's ring (where the user will first touch)
	field ringX:float
	field ringY:float
	field ringRadius:float
	
	' the coordinates and dimensions for the stick (what the user is pushing around)
	' X/Y is relative to the centre of the ring, and positive Y points up
	field stickX:float = 0
	field stickY:float = 0
	field stickRadius:float
	field stickAngle:float
	field stickPower:float
	
	' where the user first touched
	field firstTouchX:float
	field firstTouchY:float
	
	' power must always be >= this, or we return 0
	field deadZone:float
	
	' we need to move the stick this much before it triggers
	field triggerDistance:float = -1
	field triggered:bool = false
	
	' the index of the touch event that initiated the stick movement
	field touchNumber:int = -1
	
	' clips the stick to be within the ring, and updates angles, etc.
	method UpdateStick:void()
		if touchNumber>=0 then
			local length:float = Sqrt(stickX*stickX+stickY*stickY)
			stickPower = length/ringRadius
			if stickPower > 1 then stickPower = 1
			
			if stickPower < deadZone then
				stickPower = 0
				stickAngle = 0
				stickX = 0
				stickY = 0
			else
				if stickX = 0 and stickY = 0 then
					stickAngle = 0
					stickPower = 0
				elseif stickX = 0 and stickY > 0 then
					stickAngle = 90
				elseif stickX = 0 and stickY < 0 then
					stickAngle = 270
				elseif stickY = 0 and stickX > 0 then
					stickAngle = 0
				elseif stickY = 0 and stickX < 0 then
					stickAngle = 180
				elseif stickX > 0 and stickY > 0 then
					stickAngle = ATan(stickY/stickX)
				elseif stickX < 0 then
					stickAngle = 180+ATan(stickY/stickX)
				else
					stickAngle = 360+ATan(stickY/stickX)
				end
				if length > ringRadius then
					stickPower = 1
					stickX = Cos(stickAngle) * ringRadius
					stickY = Sin(stickAngle) * ringRadius
				end
			end
		end
	end
	
public

	' the angle in degrees that the user is pushing, going counter-clockwise from right
	method GetAngle:float()
		return stickAngle
	end
	
	' the strength of the movement (0 means dead centre, 1 means at the edge of the ring (or past it)
	method GetVelocity:float()
		return stickPower
	end
	
	' based on the angle and velocity, get the DX
	method GetDX:float()
		return Cos(stickAngle) * stickPower
	end
	
	' based on the angle and velocity, get the DY
	method GetDY:float()
		return Sin(stickAngle) * stickPower
	end
	
	' we just touched the screen at point (x,y), so start "controlling" if we touched inside the ring
	method StartTouch:void(x:float, y:float, touchnum:int)
		if touchNumber < 0 then
			if (x-ringX)*(x-ringX) + (y-ringY)*(y-ringY) <= ringRadius*ringRadius then
				touchNumber = touchnum
				firstTouchX = x
				firstTouchY = y
				triggered = false
				if triggerDistance <= 0 then
					triggered = true
					stickX = x-ringX
					stickY = ringY-y
				end
				UpdateStick()
			end
		end
	end
	
	' a touch just moved, so we may need to update the stick
	method UpdateTouch:void(x:float, y:float, touchnum:int)
		if touchNumber>=0 and touchNumber = touchnum then
			if not triggered then
				if (x-firstTouchX)*(x-firstTouchX)+(y-firstTouchY)*(y-firstTouchY) > triggerDistance*triggerDistance then
					triggered = true
				end
			end
			if triggered then
				stickX = x - ringX
				stickY = ringY - y
				UpdateStick()
			end
		end
	end
	
	' we just released a touch, which may have been this one
	method StopTouch:void(touchnum:int)
		if touchNumber>=0 and touchNumber = touchnum then
			touchNumber = -1
			stickX = 0
			stickY = 0
			stickAngle = 0
			stickPower = 0
			triggered = false
		end
	end
	
	method DoRenderRing:void()
		RenderRing(ringX, ringY)
	end
	
	method DoRenderStick:void()
		RenderStick(ringX+stickX, ringY-stickY)
	end
	
	' draws the stick (may be overridden to do images, etc.)
	method RenderStick:void(x:float, y:float)
		DrawCircle(x, y, stickRadius)
	end
	
	' draws the outside ring (may be overridden to do images, etc.)
	method RenderRing:void(x:float, y:float)
		DrawCircle(x, y, ringRadius)
	end
	
	' set the location and radius of the ring
	method SetRing:void(ringX:float, ringY:float, ringRadius:float)
		self.ringX = ringX
		self.ringY = ringY
		self.ringRadius = ringRadius
	end
	
	' set the location and radius of the stick
	method SetStick:void(stickX:float, stickY:float, stickRadius:float)
		self.stickX = stickX
		self.stickY = stickY
		self.stickRadius = stickRadius
	end
	
	method SetDeadZone:void(deadZone:float)
		self.deadZone = deadZone
	end
	
	method SetTriggerDistance:void(triggerDistance:float)
		self.triggerDistance = triggerDistance
	end
end

function Main:int()
	new VirtualStickTestApp
	return 0
end

function DrawOutlineRect:void(x:float, y:float, width:float, height:float)
	DrawLine(x, y, x+width, y)
	DrawLine(x, y, x, y+height)
	DrawLine(x+width, y, x+width, y+height)
	DrawLine(x, y+height, x+width, y+height)
end

Raz	(Posted 2011) [#2]

Nice one thank you :) This will be very handy for me soonish.

pinete

(Posted 2011) [#3]

useful!!! :) thank you very much!

therevills

(Posted 2011) [#4]

Cool :)

Im not a fan of this sort of controls as it blocks the screen (with the control and your fingers), but I realise in some games you need to do it this way on a touch screen device...

Oh BTW why do you loop thru all 32 touch events?

			for local i:int = 0 to 31
				if TouchHit(i) then
					touching[i] = true
					mystick.StartTouch(TouchX(i), TouchY(i), i)
				elseif TouchDown(i) then
					mystick.UpdateTouch(TouchX(i), TouchY(i), i)
				elseif touching[i] then
					touching[i] = false
					mystick.StopTouch(i)
				end
			end

Samah

(Posted 2011) [#5]

Because I'm a noob and don't know how the touch system works yet. :)
What's the best way to check for a touch event in a given area? I can't guarantee it'll be the first touch event.

I threw that code together really quickly, so I realise now I can make it check only the relevant touch event once it's been started.

Updated version:

strict
import mojo

class VirtualStickTestApp extends App
	const PLAYFIELD_WIDTH:float = 200
	const PLAYFIELD_HEIGHT:float = 200
	const PLAYER_SPEED:float = 5
	
	' our virtual stick
	field mystick:MyStick
	
	' the "player"'s location
	field playerX:float = PLAYFIELD_WIDTH/2
	field playerY:float = PLAYFIELD_HEIGHT/2
	field playfieldX:float
	field playfieldY:float = 10
	
	method OnCreate:int()
		mystick = new MyStick
		mystick.SetRing(100, DeviceHeight()-100, 40)
		mystick.SetStick(0, 0, 15)
		mystick.SetDeadZone(0.2)
		mystick.SetTriggerDistance(5)
		playfieldX = DeviceWidth()-PLAYFIELD_WIDTH-10
		SetUpdateRate 30
		return 0
	end
	
	method OnUpdate:int()
		' update the stick usage
		UpdateStick()

		' update the player position
		if mystick.GetVelocity() <> 0 then
			playerX += mystick.GetDX() * PLAYER_SPEED
			playerY -= mystick.GetDY() * PLAYER_SPEED
			if playerX < 0 then
				playerX = 0
			elseif playerX > PLAYFIELD_WIDTH then
				playerX = PLAYFIELD_WIDTH
			end
			if playerY < 0 then
				playerY = 0
			elseif playerY > PLAYFIELD_HEIGHT then
				playerY = PLAYFIELD_HEIGHT
			end
		end
		return 0
	end
	
	method OnRender:int()
		Cls(0,0,0)
		
		mystick.DoRenderRing()
		mystick.DoRenderStick()
		DrawOutlineRect(playfieldX, playfieldY, PLAYFIELD_WIDTH, PLAYFIELD_HEIGHT)
		DrawCircle(playfieldX + playerX, playfieldY + playerY, 5)
		
		' some test info
		DrawText("angle="+mystick.GetAngle(), 10, 10)
		DrawText("vel="+mystick.GetVelocity(), 10, 30)
		DrawText("dx="+mystick.GetDX(), 10, 50)
		DrawText("dy="+mystick.GetDY(), 10, 70)
		return 0
	end
	
	method UpdateStick:void()
		if mystick.GetTouchNumber() < 0 then
			#if TARGET="android" then
				for local i:int = 0 to 31
					if TouchHit(i) and mystick.GetTouchNumber() < 0 then
						mystick.StartTouch(TouchX(i), TouchY(i), i)
					end
				end
			#else
				if MouseHit(0) then
					mystick.StartTouch(MouseX(), MouseY(), 0)
				end
			#endif
		end
		
		if mystick.GetTouchNumber() >= 0 then
			#if TARGET="android" then
				if TouchDown(mystick.GetTouchNumber()) then
					mystick.UpdateTouch(TouchX(mystick.GetTouchNumber()), TouchY(mystick.GetTouchNumber()))
				else
					mystick.StopTouch()
				end
			#else
				if MouseDown(0) then
					mystick.UpdateTouch(MouseX(), MouseY())
				else
					mystick.StopTouch()
				end
			#endif
		end
	end
end

class MyStick extends VirtualStick
	method RenderRing:void(x:float, y:float)
		SetColor 0, 0, 255
		super.RenderRing(x, y)
		SetColor 255, 255, 255
	end
	
	method RenderStick:void(x:float, y:float)
		SetColor 0, 255, 0
		super.RenderStick(x, y)
		SetColor 255, 255, 255
	end
end

class VirtualStick
private
	' the coordinates and dimensions for the virtual stick's ring (where the user will first touch)
	field ringX:float
	field ringY:float
	field ringRadius:float
	
	' the coordinates and dimensions for the stick (what the user is pushing around)
	' X/Y is relative to the centre of the ring, and positive Y points up
	field stickX:float = 0
	field stickY:float = 0
	field stickRadius:float
	field stickAngle:float
	field stickPower:float
	
	' where the user first touched
	field firstTouchX:float
	field firstTouchY:float
	
	' power must always be >= this, or we return 0
	field deadZone:float
	
	' we need to move the stick this much before it triggers
	field triggerDistance:float = -1
	field triggered:bool = false
	
	' the index of the touch event that initiated the stick movement
	field touchNumber:int = -1
	
	' clips the stick to be within the ring, and updates angles, etc.
	method UpdateStick:void()
		if touchNumber>=0 then
			local length:float = Sqrt(stickX*stickX+stickY*stickY)
			stickPower = length/ringRadius
			if stickPower > 1 then stickPower = 1
			
			if stickPower < deadZone then
				stickPower = 0
				stickAngle = 0
				stickX = 0
				stickY = 0
			else
				if stickX = 0 and stickY = 0 then
					stickAngle = 0
					stickPower = 0
				elseif stickX = 0 and stickY > 0 then
					stickAngle = 90
				elseif stickX = 0 and stickY < 0 then
					stickAngle = 270
				elseif stickY = 0 and stickX > 0 then
					stickAngle = 0
				elseif stickY = 0 and stickX < 0 then
					stickAngle = 180
				elseif stickX > 0 and stickY > 0 then
					stickAngle = ATan(stickY/stickX)
				elseif stickX < 0 then
					stickAngle = 180+ATan(stickY/stickX)
				else
					stickAngle = 360+ATan(stickY/stickX)
				end
				if length > ringRadius then
					stickPower = 1
					stickX = Cos(stickAngle) * ringRadius
					stickY = Sin(stickAngle) * ringRadius
				end
			end
		end
	end
	
public

	method GetTouchNumber:int()
		return touchNumber
	end
	
	' the angle in degrees that the user is pushing, going counter-clockwise from right
	method GetAngle:float()
		return stickAngle
	end
	
	' the strength of the movement (0 means dead centre, 1 means at the edge of the ring (or past it)
	method GetVelocity:float()
		return stickPower
	end
	
	' based on the angle and velocity, get the DX
	method GetDX:float()
		return Cos(stickAngle) * stickPower
	end
	
	' based on the angle and velocity, get the DY
	method GetDY:float()
		return Sin(stickAngle) * stickPower
	end
	
	' we just touched the screen at point (x,y), so start "controlling" if we touched inside the ring
	method StartTouch:void(x:float, y:float, touchnum:int)
		if touchNumber < 0 then
			if (x-ringX)*(x-ringX) + (y-ringY)*(y-ringY) <= ringRadius*ringRadius then
				touchNumber = touchnum
				firstTouchX = x
				firstTouchY = y
				triggered = false
				if triggerDistance <= 0 then
					triggered = true
					stickX = x-ringX
					stickY = ringY-y
				end
				UpdateStick()
			end
		end
	end
	
	' a touch just moved, so we may need to update the stick
	method UpdateTouch:void(x:Float, y:float)
		if touchNumber>=0 then
			if not triggered then
				if (x-firstTouchX)*(x-firstTouchX)+(y-firstTouchY)*(y-firstTouchY) > triggerDistance*triggerDistance then
					triggered = true
				end
			end
			if triggered then
				stickX = x - ringX
				stickY = ringY - y
				UpdateStick()
			end
		end
	end
	
	' we just released a touch, which may have been this one
	method StopTouch:void()
		if touchNumber>=0 then
			touchNumber = -1
			stickX = 0
			stickY = 0
			stickAngle = 0
			stickPower = 0
			triggered = false
		end
	end
	
	method DoRenderRing:void()
		RenderRing(ringX, ringY)
	end
	
	method DoRenderStick:void()
		RenderStick(ringX+stickX, ringY-stickY)
	end
	
	' draws the stick (may be overridden to do images, etc.)
	method RenderStick:void(x:float, y:float)
		DrawCircle(x, y, stickRadius)
	end
	
	' draws the outside ring (may be overridden to do images, etc.)
	method RenderRing:void(x:float, y:float)
		DrawCircle(x, y, ringRadius)
	end
	
	' set the location and radius of the ring
	method SetRing:void(ringX:float, ringY:float, ringRadius:float)
		self.ringX = ringX
		self.ringY = ringY
		self.ringRadius = ringRadius
	end
	
	' set the location and radius of the stick
	method SetStick:void(stickX:float, stickY:float, stickRadius:float)
		self.stickX = stickX
		self.stickY = stickY
		self.stickRadius = stickRadius
	end
	
	method SetDeadZone:void(deadZone:float)
		self.deadZone = deadZone
	end
	
	method SetTriggerDistance:void(triggerDistance:float)
		self.triggerDistance = triggerDistance
	end
end

function Main:int()
	new VirtualStickTestApp
	return 0
end

function DrawOutlineRect:void(x:float, y:float, width:float, height:float)
	DrawLine(x, y, x+width, y)
	DrawLine(x, y, x, y+height)
	DrawLine(x+width, y, x+width, y+height)
	DrawLine(x, y+height, x+width, y+height)
end

Virtech

(Posted 2011) [#6]

@Samah

Could you possibly update your example (or add one) that show how to create 2 virtual sticks? Thanks

Samah

(Posted 2011) [#7]

@Virtech
I'm currently working on an app that uses two sticks, and I'm cleaning up/enhancing the VirtualStick class as I go. Once I'm happy with it I'll post the updated code with an example on using any number of sticks.

It's sorta hard for me to test multiple sticks at the moment since the Nexus One's multitouch is so damned awful. Once the Xoom comes out (early next month hopefully) I'm ordering a Nexus S with it.

Virtech

(Posted 2011) [#8]

Cool! Looking forward to it :)

Edit: Multitouch on my samsung galaxy s works pretty good. I can test dual stick support on my phone if you wish.

Perturbatio

(Posted 2011) [#9]

This looks useful. Thanks :)

Loofadawg

(Posted 2011) [#10]

Works great on my Captivate !

xzess

(Posted 2011) [#11]

superb thanks very much for sharing!

dopeyrulz

(Posted 2011) [#12]

Samah,

This works great on Windows Phone 7 - thanks for sharing. Would be be possible to implement an old school 4/8 way stick with this process?

I've sorta hacked in a check based on the angles but something where it would lock directly into position (on the 8 axis of the compass) would be great.

Samah

(Posted 2011) [#13]

I'm going to clean this up a bit at some point and check it in to the Diddy project.

dopeyrulz

(Posted 2011) [#14]

Ah - ok. Sounds good. Thanks again for the code.

NoOdle

(Posted 2011) [#15]

Thanks, this works great on the iPhone as well :)

Neuro

(Posted 2012) [#16]

This code actually works great but one issue i noticed on IOS target, that if you have 2 virtual joysticks on screen, the second one won't activate if the first joystick is touched first. However, if the second joystick is touched then both of them will actually work.

Oddly enough, this does NOT occur in HTML5 (when running on an IOS browser) though, not sure whats causing it to do this in IOS.

EDIT : nevermind, figured out the problem :)

Paul - Taiphoz

(Posted 2012) [#17]

I was also wondering about the looping through the touch events, as I understand it the first touch event is assumed to be the player 1 finger and gets treated as such.

So you would I think be able to drop that loop and just look for touch 1, unless your planning duel sticks, then it would be touch 1 and 2, touch two being called into play as soon as a second finger touches the screen at the same time.

I might be wrong tho, like you iv not really played with touch much at all. but all that being said I'm glad your working this into Diddy because its something I have on my todo list for Terminal 2, so you doing it now is gona save me tons of time.

thanks. and nice work.

therevills

(Posted 2012) [#18]

EDIT : nevermind, figured out the problem :)

What was the issue and how did you fix it?

Neuro

(Posted 2012) [#19]

What was the issue and how did you fix it?

Wasn't really an issue, it was me stupidly forgetting to also filter by the IOS target on the second virtual joystick which is why it never activated :).