Forums » Code » Mobile analog control plugins (designed for Ejecta)

I've spent quite some time getting solid mobile controls down for 2D IOS games (and mobile games in general). This weekend I've open-sourced some of my efforts in this regard, so I figured I'd share them with you guys:

https://github.com/dmarchand/impact-mobile-plugins


There are two plugins here, "touch-joystick" and "touch-joystick-zone"


Touch-Joystick is designed to provide solid analog joystick-style controls for 2D games without having a clunky on-screen controller. On-screen controllers really suck on tablets, as they often require the user to check back and see if they're still keeping their fingers over the controls.

This module lets the user dynamically place the joystick, essentially. When they touch the screen, the initial touch point is logged and stored in the plugin. When they move that same finger around, it updates the delta between the movement position and the origin, and lets you pull it out of the plugin. You can also specify a maximum (real analog sticks only go so far, after all!).

Using it is pretty simple! Call new TouchJoystick(), store a reference to it somewhere useful, and you're good to go! In your update loop, simply check TouchJoystick.delta (has x and y properties), and translate the results to movement in your game!

If you have areas that you don't want to allow the touch to occur in, simply add them via TouchJoystick.addDeadZone(x,y,width,height).



The other plugin is a bit more complicated. It creates a region on the screen that accepts touch motions, essentially. It's useful, for example, if you want to create a box that essentially says "swipe in here to swing your sword". This lets you gain the functionality of multiple sticks without having to bog the user down with really complicated controls.

It's used much like touch-joystick, except that when instantiating it, you pass in the coordinates and size of the area. You may optionally pass in a minimum swipe length value as well, since you probably don't want the player to swing their sword if they simply touch inside the box.



These plugins both work excellently on IOS using Ejecta.
There's still an issue on regular mobile browsers, it seems like the multi-touch doesn't register if you have a TouchJoystick and a TouchJoystickZone. I'm hoping to look at it this week. In the meantime, if anyone sees the cause of it, feel free to let me know!

Sounds great!
Can't wait to try your TouchJoystick.
Got any starter code for easy use with impact?

This is awesome! Using it now. However, I'm running into a problem using the Zone plugin for two separate joysticks that can be used simultaneously. I'm defining them like this:

this.joystick1 = new TouchJoystickZone(0, 0, ig.system.width / 2, ig.system.height);

this.joystick2 = new TouchJoystickZone(ig.system.width / 2, 0, ig.system.width / 2, ig.system.height);

I am then setting player movement in player.js using these two joysticks. joystick1 controls player rotation and joystick2 controls acceleration and brakes. These work great on their own, but as soon as I am using one joystick and tap on the other side of the screen to activate the other joystick, the first joystick starts not working as it should (almost as if it's being influenced by the coordinates of the second joystick). Sometimes the first joystick becomes totally inactive.

Eg rotation on its own works fine, but when I add the acceleration from the second joystick into it the player ship keeps rotating to the same angle when the rotation joystick is moved, or not responding at all. Draw calls I have for the first joystick also disappear.

I thought that creating two separate joysticks would totally separate their processes, but this doesn't seem to be the case. Is there any way to make this work?

Thanks again for the awesome plugin.

I'm sorry to hijack this thread, but I figured my AnalogStick plugin could be useful as well. I used it in the mobile version of X-Type - which has two analog sticks to control movement and shooting direction.

Put this in lib/plugins/analog-stick.js: https://gist.github.com/3939020

You can read the .angle and .amount (distance from center (0..1)) or .input.x and .input.y (distance from center on each axis (-1..1)) for each analog stick you create.

Example from X-Type:

// lib/game/main.js
init: function() {
	
	// ....

	var baseSize = 60;
	var stickSize = 30;
	var margin = 20;
	var y = ig.system.height - baseSize - margin;
	var x1 = baseSize + margin;
	var x2 = ig.system.width - baseSize - margin;

	this.stickLeft = new ig.AnalogStick( x1, y, baseSize, stickSize );
	this.stickRight = new ig.AnalogStick( x2, y, baseSize, stickSize );
},

draw: function() {
	this.parent();

	this.stickLeft.draw();
	this.stickRight.draw();
}


// lib/game/entities/player.js
update: function() {

	// left stick - move the ship
	this.vel.x = ig.game.stickLeft.input.x * this.speed;
	this.vel.y = ig.game.stickLeft.input.y * this.speed;
	
	// right stick - rotate the ship and shoot if we can
	if( ig.game.stickRight.amount > 0 ) {
		this.angle = ig.game.stickRight.angle - Math.PI/2;
		if( this.lastShootTimer.delta() > 0 ) {
			this.shoot();
			this.lastShootTimer.set(0.05);
		}
	}

	this.parent();
}

Thanks, Dominic, this solved my problem! I mashed your plugin with dmarchand's to allow the player to tap anywhere within a specified zone to activate the joystick and changed some of the draw code to show a rotation joystick on the left and a forward/backward thrust on the right (I hope you don't mind me going Frankenstein on your code): http://pastebin.com/n77dZdk3

You guys are awesome. dmarchand, your plugin works nicely. dominic, ended up using yours as it already draws some kind of joystick on screen. Just what I needed.

dmarchand, I love the touch-joystick.
I am having trouble getting the deadzones to work.

Do you have an example?