Forums » Help » Always on Screen Button

Hi, how do I make on screen buttons to control a character?, I want to use the jumpnrun sample to make buttons to control the character.
Thanks.

Mouse or touchscreen? Is the element going to be on-screen inside or outside the canvas?

inside...it works for both?

It can be set up independently, which is why I asked, and it can be set up to work off elements outside the canvas. (And in fact, the supplied Jump 'n' Run demo does not support mouse or touch at all. Which is a shame because it would otherwise be a great example of how to do it. If you look through the code, there is no mention of any ig.Input binding other than binding the arrow keys and X and C)

Looking at the documentation for ig.Input, it says that you can bind a mouse press to the Canvas object, which would effectively be done as:

ig.Input.bind( ig.KEY.MOUSE1, 'leftclick' );

That would have it respond to mouse events. (It's not 100% clear whether that would also respond to touch, specifically tap, events but it seems likely that the touch based browsers would pass it through as they do for all other events)

Then in the Game or Entity update() method, something to the effect of:

if (ig.Input.state('leftclick') && ig.Input.mouse.x >= 0 && ig.Input.mouse.x < 50 && ig.Input.mouse.y >= 0 && ig.Input.mouse.y < 50)
{
    // do something
}

This would check if the left-click (i.e. ig.KEY.MOUSE1 button were pressed) and the mouse co-ordinates were in the 0,0 - 49,49 area of the canvas and handle it from there (since there isn't a built in button class), which means you can redraw the screen or not, as appropriate.

As far as drawing goes, all you'd need to do would be to draw the buttons in the Game's draw() method to make sure it's updated each frame, which means you could have different button images for pressed/not pressed.

do you have any code sample to use buttons always on screen?

No, I don't. But I've just given you the skeleton that you'd need to do the event management.

As far as actually drawing the images... this is covered in the manual too. I can't actually make it any simpler than this without either 1) writing your exact code for you, or 2) teaching you how to write in JavaScript and recovering what's in the manual for Impact...

In your game's init() method add this to load the image.

this.img = new ig.Image( 'path/to/image.png' );

Then in the .draw() method of your game, you will need to have something to the effect of:

this.parent();
this.img.draw(x, y);

where x and y are the position on the screen to draw the button. This makes sure that your custom game will call the original (master) draw method then your own custom buttons drawn on top of everything else.

Thanks :D.....you know why firebug told me that the input.state is not a function,
I add to the requires the input statement and doesn't work

How and where are you calling it? Trying to debug code without seeing it is virtually impossible...

Hi @Arantor, good example, it works perfectly!!

Do you know, how to show the "pointer" cursor when mouse is over the button?
just to show user that is an active button

Thanks