Hello Omonz

Have you tried the Virtual Joystick objects that come with wade?

In the editor, click the orange button on the top bar (it says "Repo Browser" when you put your mouse over it). Then from the list on the left, go to "Useful Script", and then drag a Joystick into your project.

For me this worked magically out of the box. My game was already responding to onKeyUp and onKeyDown events for arrow keys, and this virtual joystick triggers these events automatically. Also you can call _.joystick.getGamepadData (if your object is called "joystick"), and this gives you an object with x and y axes.

Thanks for the reply arkam. I tried what you suggested as a test on the 'physics platformer' sample game and it still didnt work out of the box. Did you still need to do any extra mapping. Im a bit stuck and have a deadline. I think i have to map it to my character 

I am pretty sure that the joystick triggers onKeyDown events, but I think it's possible that they are not for the same keys that your platformer character is using. The joystick triggers events for arrow keys, is it possible that your character is expecting WASD instead?

Thank you i finally got it to work. The issue i have now is getting the Gui to stay on the screen as the character moves. I put all the controls on layer 2 and used wade.setLayerTransform(2,0,0) in the onUpdate function of the controls. It just makes the controls disappear. what could i be doing wrong

Hi Omonz

I think it would be easier to set the layer transform from the editor, if you're making the game in the editor - this way you can see where your objects end up once the transform has been applied.

This can be done by going to the scene settings (i.e. deselecting any selected objects or clicking the icon in the top right of the screen), then going to the Layers tab.

If you want the GUI to be aligned to the edge of the screen, as is often the case, you probably want to set its position when initializing the app, that is after the screen size has been determined.

So if you have a GUI object that want to put it in the top-left corner, you should do:

var size = _.myObject.getSprite().getSize();
var w = wade.getScreenWidth();
var h = wade.getScreenHeight();
_.myObject.setPosition(-w/2 + size.x /2, -h/2 + size.y / 2);

Additionally, if you want the object to stay there when the screen is resized:

_.myObject.setAlignment('left', 'top')

This ensures that when the users resizes the window, the object keeps its position relative to the top-left corner.

I hope this helps

Thanks Gio and Arkam. it works now. cant thank you enough