Forums » Help » Reposition area of Touch button after a tween?

Hey Dom,

Im working on mobile buttons for my game as well and i am using the Touch Button plugin for this. I am able to get it to work but when i animate my buttons using tween.js i noticed the area properties are not repositioned along with the new x and y positions.

If you load my game on your mobile device browser you will see what i mean:
http://gamedev.arcadehype.com/wfmobile/

I tried to manually update the area properties of each button in my buttons array but doesn't seem to work.

Here is the code i am using (i have 3 buttons but just displaying the code for one):

var xPos = ig.system.width / 2 + 120;
var playBtn_in = new TWEEN.Tween(this.buttons[0].pos).to({x: xPos}, 2000).easing(TWEEN.Easing.Elastic.EaseInOut).delay(2000).start();

this.buttons[0].area = {x1: xPos, y1: 24, x2: xPos + 80, y2: (24 + 16)};

Appreciate the help, thanks.

The TouchButton calculates an .area, based on the scaling of the canvas. Have a look how the init() method calculates this area. You could replicate this and put it in another function:

resize: function( x, y, width, height ) {
	var internalWidth = parseInt(ig.system.canvas.offsetWidth) || ig.system.realWidth;
	var s = ig.system.scale * (internalWidth / ig.system.realWidth);
	
	this.pos = {x: x, y: y};
	this.size = {x: width, y: height};
	this.area = {x1: x * s, y1: y * s, x2: (x + width) * s, y2: (y + height) *s};
},

And then just call this.buttons[0].resize( x, y, width, height )

Hey Dom,

Thanks for that suggestion, works great. One thing i should point out though is the line this.pos - it repositions the buttons before the tween even takes place so i commented out that line and now just the touch area gets repositioned.

Cheers!

Hey Dom,

I ran into another problem. When i switch screen states it looks like the touch buttons stop working. After im done playing and i return to the home screen the menu buttons animate back in but the touch functionality stops working.

Have a look and see if there is something you can spot that maybe is preventing the touch events from firing or if there are any other issues. I've been diagnosing my code now for the last 30 minutes and cant seem to find what the problem is.

If you can help out i would appreciate it.

Thanks.

I think it&039;s because the #unbindTouch method isn't doing what it's supposed to.

element.removeEventListener actually expects the exact same method that was bound to it as the second parameter. However, you're actually creating a new function that just does the same as the one you bound, but is not the same.

You&039;d have to save a reference to the two callback methods that are created in #bindTouch in order to be able to remove them later on.

I guess something like this should work (untested):

boundTouches: {},
bindTouch: function( selector, action ) {
	var element = ig.$( selector );
	
	var that = this;
	this.boundTouches[action] = {
		start: function(ev) { that.touchStart( ev, action ); },
		end: function(ev) { that.touchStart( ev, action ); },
	};
	
	element.addEventListener('touchstart', this.boundTouches[action].start, false);
	element.addEventListener('touchend', this.boundTouches[action].end, false);
},

unbindTouch: function( selector, action, ) {

	var element = ig.$( selector );

	var that = this;

	element.removeEventListener('touchstart', this.boundTouches[action].start, false);
	element.removeEventListener('touchend', this.boundTouches[action].end, false);
},

Or you could just switch to the TouchButton plugin entirely.

I apologize for this mess. Better mobile support is one of the main goals of Impact 2 - and that includes touch buttons :)

Hey Dom,

Not working man. I placed your code into the input.js file and no luck.

You mentioned just switching to the TouchButton plugin entirely...so is there an event conflict happening between Impact and the TouchButton plugin??

This fix should definitely be high on your priority list for Impact 2. I wasn't expecting these kinds of complications upon purchasing your framework considering we live in a touch world now.

Yes, I believe the problem is that Impact&039;s #bindTouch doesn&039;t play nice with the TouchButton plugin under certain circumstances - such as when the whole canvas is bound to an action via #bindTouch.

In this case, the event handler for the bindTouch will cancel the event, so that it never reaches the TouchButton. I thought properly unbinding the bindTouch would fix it, but there may be something else going on in your game.

Place some breakpoints or log messages in these handlers to see what's going on exactly. Or send me the source via mail and I'll have a closer look.

Yea it looks like you're right. If i apply the bindTouch to the canvas at the beginning of my StartScreen method none of my buttons work.

Is there a way to flush out all previous events? unbindAll doesnt seem to do the trick so we need another solution. Can i apply the touch button plugin to the entire canvas? If so i will just use the touch button throughout my entire game and see if that helps.

Let me know, thanks.

Hey Dom,

How do you remove or unbind a touch button once its been created??

Hey Dom,

I got it working now. I removed all the bindTouch methods from Impact and i am just using the Touch button class for everything now.

What a nightmare, you should completely scrap the bindTouch class that impact currently has and just make the touch button plugin a part of the Impact framework. One thing i would do though is modify the touch button to allow for dom elements if possible.

Or you're going to have to find a way to make the bindTouch and touch button to play nicely with each other.