Adding using keyboard arrows up/down/right/left in a game


I’m pretty new in Axure. I was trying to find the answers by myself but could not manage it. I would be glad if someone could help me with explaining/sending the code for making the player in the game using arrows in the keyboard, and how I should do it so the player moves basically.
Thank you very much you all.

You can use the Page Key Down event with some conditional cases to test which key was pressed. Axure doesn’t seem to have good documentation for this, though… This is all I could find:

You can also search for “key pressed” in this forum to see some solutions others have posted.

Here is a quick demo I just made, though:
move ball with keys.rp (52.5 KB)

As you are new to Axure, I’ll explain how I made this…

  • I dragged in an Ellipse widget, set it to 50x50 px size and red fill to make a “ball”.

  • To demonstrate how movement can be constrained with boundaries, I also dragged in a Box widget and moved it behind the “ball”. The ball can only move inside the box.

  • To access the “page level” interaction events, ensure you have no widgets selected, then click in the INTERACTIONS pane, then click the “New Interaction” button. You’ll see “PAGE KEY DOWN” and “PAGE KEY UP” (“down” fires like typing, and the keyboard repeat will trigger multiple event calls, so pressing and holding an arrow key will continually move the ball; the latter fires once only, when a key is released.)

  • I created a conditional case to move the ball by 10px when the left arrow key is pressed.

    • Think of this as a test which will happen every time a keyboard key press is detected. Any key will trigger the Page Key Down event, and “Case 1” will test if that key is the left arrow key. If so, it will fire the actions in “Case 1”, otherwise it will move on to the next case (if any exist.)
    • To specify which key to test for, (first click “Enable Cases” when hovering over the event) in the Condition Builder dialog, click the “Add Logic” button, then select “key pressed”. Then you can click in the rightmost box (to right of “key value” and simply press which key you need. Or, you can press a key combination, like Shift+Left.
  • I also added boundaries (not necessary to simply move a widget, but boundaries will limit the movement based on a logical expression.)

    • In the Move event, click “MORE OPTIONS” to access the “BOUNDS” options.
    • You can set one or more boundaries of top, bottom, left, right; also logic of “greater than”, “less than” etc.
    • Then you set an expression by clicking the little fx icon. You can use raw numbers, like 10 or 53 (which would be pixel locations, where (0, 0) is top, left of the “viewport”. Typically this is the entire web browser window, but if the widget being moved is inside a dynamic panel, the pixel locations are relative to inside that dynamic panel, not the whole page.) Or, you can use a mathematical expression, which is what I’ve done. I refer to the box by creating a “local variable” to point to that widget, and some built-in properties of .top, .left, etc. (You can click “Insert Variable or Function” to browse through an extensive list of these properties and functions.)
  • For the first Case 1 (“If key pressed equals Left”) I really only need to set boundaries for left and right. But, I set up top and bottom as well, so I could easily copy and paste this whole Case 1 four times and then just alter the key to test and which direction to move the ball.

I hope this helps you. Reply if you have any further questions, and welcome to Axure!

Thank you very much!!