Forums » Help » TouchButton Plugin Help

Hello there.
I've been lately trying to add touch buttons to my game. The documentation for Input suggests using the TouchButton plugin to ease use of touch buttons.
However, when I use it, it gets drawn, but fails to recognize any input. I have tested it on Chrome (iPad & Android), a built-in internet browser (Android), Opera (Android), Chrome (PC), Firefox (PC & Android), IE9 (PC) and CocoonJS (Android) but all failed.

MyGame = ig.Game.extend({
	buttons: [],
	// This was done as part of debugging
	leftButton: new ig.Image('media/button-left.png'),
	rightButton: new ig.Image('media/button-right.png'),
	shootButton: new ig.Image('media/button-shoot.png'),
	jumpButton: new ig.Image('media/button-jump.png'),
	
	init: function() {
		// Initialize your game here; bind keys etc

		// ...

		ig.input.bind(ig.KEY.LEFT_ARROW, 'left');
		ig.input.bind(ig.KEY.RIGHT_ARROW, 'right');
		ig.input.bind(ig.KEY.X, 'jump');
		ig.input.bind(ig.KEY.C, 'shoot');
		
			// Touch buttons

			var ypos = ig.system.height - 60;
			this.buttons = [
				new ig.TouchButton('left', 0, ypos, 60, 60, this.leftButton),
				new ig.TouchButton('right', 60, ypos, 60, 60, this.rightButton),
				new ig.TouchButton('shoot', ig.system.width-120, ypos, 60, 60, this.shootButton),
				new ig.TouchButton('jump', ig.system.width-60, ypos, 60, 60, this.jumpButton),
			];
		
			// ...

	},
	
	update: function() {
		// ...
	},
	
	draw: function() {
		// Draw all entities and backgroundMaps
		this.parent();

		// ...

		for(var i = 0; i < this.buttons.length; i++) {
			this.buttons[i].draw();
		}
	}
});

The original TouchButton class did not take the Game's scaling into account when checking the touch positions; so your buttons were on the screen somewhere, just not where you expected them :)

Try this updated version please: https://gist.github.com/3824284

Interesting. I thank you for updating the TouchButton plugin, but it still doesn't work right for me. Changing the scaling from 2 to 1 or 3 didn't work as well.
My main game code:

ig.main( '#canvas', MyGame, 60, 320, 240, 2 );

Thinking about it, it's also missing the Canvas' position on the page, so this only worked when the Canvas is in the top left corner and the view isn't scrolled.

Again, please try the update version: https://gist.github.com/3824284

Make sure you Canvas element has no CSS padding or border. You can have a <div> wrapper with padding/borders if you need.

It works now. Thank you.

I'm having similar issues and mine still isn't working using the latest. I click the buttons but the events never seem to fire. Do they work on the PC w/ mouse as well or just mobile touches?


Here's what I have:

StartScreen = ig.Game.extend({
	startGame: false,
	instructText: new ig.Font( 'media/04b03.font.png' ),
	background: new ig.Image('media/web/title.png'),
	blood: new ig.Image('media/web/bloodsplatter.png'),
    playBtn: new ig.Image('media/web/play.png'),
    nogBtn: new ig.Image('media/web/nog.png'),
	buttons: [],


	init: function(){
		//store.open();
		ig.input.bind( ig.KEY.SPACE, 'play');


		var ypos = ig.system.height - 48;
		this.buttons.push( new ig.TouchButton('play', ig.system.width - this.playBtn.width, ig.system.height - this.playBtn.height, 220, 220, this.playBtn) );


	},
	update: function(){
		/*if(this.startGame){
		 ig.system.setGame(MyGame);
		 }*/
        this.parent();
		if(ig.input.state('play')){
            console.log("PLAY");
			ig.system.setGame(MyGame)
		}

        if(ig.input.state("leftclick")){

        }
	},
	draw: function(){
		this.parent();
        this.background.draw(0,0);

		var x = ig.system.width/2,
			y = ig.system.height - 10;
		this.instructText.draw( 'Press Spacebar To Start', x+40, y, ig.Font.ALIGN.CENTER );
		this.blood.draw(ig.system.width - this.blood.width,ig.system.height - this.blood.height,0,0);

        // Draw all touch buttons - if we have any
        for( var i = 0; i < this.buttons.length; i++ ) {
            this.buttons[i].draw();
        }

	},
	start: function(){
		this.startGame = true;
	}
});

I just compiled this and threw it on my iphone inside of Ejecta and still no dice. I'm using the Button.js plugin instead for now until I can get a response.

Any word from the creator of this plugin? I still haven't had much luck getting this to work.

Your code looks fine, I guess.

Are you doing anything "funky" with CSS? Scaling the canvas to a different aspect ratio or something? Can you maybe upload your game so we can have a look?

Dominic. Sorry but since I had last posted to this thread my game has changed by about 5000 lines :). I'm no longer attempting to use the TouchButtons plugin and I've instead gone on to use a heavily modified version of Buttons.js Plugin. I was working inside of the Ejecta Shell so I had and CSS. Here's how I was scaling the canvas. But I think I mostly copied that from the Ejecta documentation.

In my next game, which I'll likely be starting once this game gets through the app-store (7-10 days) I'll retry to use those buttons, since I wasn't crazy about Button.js. If I run into the same problems, I'll add you to my github repo for you to check out. Thanks for the help!

var height = 350;
var scale = window.innerHeight / height;
var width = window.innerWidth / scale;

if( ig.ua.mobile ) {
    ig.main('#canvas', StartScreen, 60, width, height, 1, ig.ImpactSplashLoader );
}else{
    ig.main('#canvas', StartScreen, 60, 525, 350,1, ig.ImpactSplashLoader ); // Iphone 4
	//ig.main('#canvas', StartScreen, 60, 600, 350,1, ig.ImpactSplashLoader );
}

Use this code in touch-buttons.js to test events in Chrome and in iOS:

Change lines:

document.addEventListener('touchstart', this.touchStart.bind(this), false);
document.addEventListener('touchend', this.touchEnd.bind(this), false);

to this:

if (ig.ua.iOS) {
    document.addEventListener('touchstart', this.touchStart.bind(this), false);
    document.addEventListener('touchend', this.touchEnd.bind(this), false);
} else {
    ig.system.canvas.addEventListener('touchstart', this.touchStart.bind(this), false);
    ig.system.canvas.addEventListener('touchend', this.touchEnd.bind(this), false);
}

Then open dev tools in Chrome --> Settings --> Overrides --> Select "Emulate touch events".

Now you can test your code in web browser (Chrome) and in iphone/ipad simulator or own device (Ejecta) as well.