Forums » Code » HTML Buttons plugin!

Hey folks

I just wrote a plugin to extend input.js and enable mouse clicking on HTML elements.
It basically injects a new version of touchbind that check to see if ontouchstart exists, if not then it will bind a click event to the passed in element.

Check out the code and example at github: https://github.com/empika/ImpactJS-Plugins.

Cheers
Edd

Just realized that this fired on both mousedown and mouse up so I have added options to pass in separate function names for mousedown, mouseup and click. They all default to false so you can either pass them in or not.

@empika - any working example?

Hey fugufish, if you check out the github page there is example code for your main.js, enitity_button (or whatever entity you check a button is pressed) and the HTML.

I'll upload an working example project with both of my plugins in when I get some time tomorrow, but the readme should get you started for now.

Any questions, just ask :)

Another request for a live sample here, I'd love to give this a try but cant get it to work. I added a ig.main() call to the main.js sample you put on github, and all the classes are loading, but it's not seeing the click event.

From empika's twitter stream last night - http://labs.nixmc.com/~eddy/game/

Thanks Hareesun.

I will try and get a permanent unminified version of the code up over the next couple of days as that link will probably get change as I experiment on things.

NightGoat, can you explain what you mean by adding an ig.main() call. Perhaps paste your code?

Hey

I have put my test code up on github, you can find it here: https://github.com/empika/ImpactJS-Demo-Code

I will also keep the live demo (although compressed) so you can see how this stuff should be behaving here: http://labs.nixmc.com/~eddy/game/

Cheers

Here are the plugins

https://github.com/empika/ImpactJS-Plugins

I'm, trying to use your html_button plugin but I'm unable to get it working properly.

My code in main:

//binds for touch devices
  ig.input.bindTouch( '#buttonLeft', 'tbLeft' );
  ig.input.bindTouch( '#buttonRight', 'tbRight' );
  ig.input.bindTouch( '#buttonOk', 'tbOk' );

My code for buttons:

//this button works properly
if ( (ig.input.pressed('ok')) || (ig.input.pressed('tbOk')) ) 
			ig.system.setGame( MyGame );
//thouse work, but not as I expect ->
if ( (ig.input.state('left')) || (ig.input.state('tbLeft')) ) {
	this.vel.x -= 100;
}
else if ( (ig.input.state('right')) || (ig.input.state('tbRight')) ) {
	this.vel.x += 100;
}
else {
	this.vel.x = 0
}

What happens is that when i press left or right buttons with the mouse, the button remains 'pressed' whatever i do afterwards, so the paddle continues his movement until it hits the level end.

I have tryed this:

if ( (ig.input.state('left')) || (ig.input.pressed('tbLeft')) ) {
			this.vel.x -= 100;
}
else if ( (ig.input.state('right')) || (ig.input.pressed('tbRight')) ) {
	this.vel.x += 100;
}
else {
	this.vel.x = 0
}

But the paddle moves only a bit and stops before i release the mouse button forcing me to click the mouse over and over to be able to move.

What i expected is that the buttons react to the mouse as the if the pointer was the finger of the person.. i mean, when i press the mouse button over a 'touch'-button it reamins pressed until i release the mousebutton, and then stops being pressed..

What am I doing wrong?

I can't get this plugin to work at all even after looking at the source code of the working example. It seems overly complicated because of the other game features like the interface.

What is the simplest way to detect when a DOM element is clicked and pass a message into Impact? For example, can you make some text with a hyperlink that just changes a global variable in Impact, such as click=true?

I figured out how to do it more simply for my basic needs.

If you create a button or DIV tag in index.html like this:

<input type="button" id="sep" onclick="ig.game.loadLevelFromHTMLbutton(8, id)" value="SEP"></input>

Then position it on the canvas:

ig.$("#sep").style.position = 'absolute';
ig.$("#sep").style.left = (70) + 'px';
ig.$("#sep").style.top = (80) + 'px';

Then you can have a function in main.js that handles the click to change the level whatever.

Inside the function in which you pass the button ID you can also change the colour of the button text to show it was affected.

var currentButton = ig.$("#"+buttonID); // sep
currentButton.style.color = "red"; // change the colour when pressed

No plugins required to do this.

Perfect plugin man. I'm making a game for both mobile and browser, and having bindTouch do both touch or mouseclick depending on the user agent is rad.

I was going to spend some time and throw a plugin together to do just this, but instead i checked to see if one already existed. Saved me some time!