Prototyping with Axure • Part 4 - Creating a game!20 Aug 2018
This is part 4 in a series, you can read part 1 here.
This time I’m trying something new: a video tutorial!
In the video tutorial I’m creating a very basic version of the game Space Invaders. You can see the endresult of the video-tutorial here.
I’ll try to recap most of what I did in text form below and I’ve improved the game a lot since the video-tutorial. Read below how I did it, or play the updated version!
Assets (Aliens, user and bullets)
I just sliced all assets from an image I found online (slice image by right clicking on it or use
CMD-^ on Mac).
I name the bullet
i_bullet and the aliens
i_ because they are images). I create a dynamic panel for the user, named
dyn_user and add
pin to browser with
bottom, center, 20, 0. This way the user always starts out in the middle of the browser window in the bottom of the screen.
I’ve grouped the aliens into
g_aliens and added two labels to the page:
l_score (showing the score) and
l_message (for ‘you won’ or ‘you lost’).
Lastly I create three variables:
numAliens (amount of aliens left),
playingGame (whether the came is running (value:
1), or it’s over (
Moving the user and firing a bullet
We’re moving the user by capturing keypresses on the page. For going left:
properties › Interactions › More Events › OnPageKeyDown and adding a case
key pressed equals Left, move the
dyn_user left by 10 pixels.
We will use the
z-key for firing, because the
space-bar has a special usecase in browsers: scrolling the page. When the
z-key is pressed, we move the
i_bullet to the same position as the user.
The main loop
Our game will work with a main loop (a repeating ‘function’). In every loop we will:
- move the aliens down
- move the bullet up
- update the score
- check if an alien was shot
- check if the user lost or won
This is the part where the magic happens. I’ve added the main-loop to the page-interactions, but in hindsight it might be better to create a separate object for it (a
dyn_mainloop for instance). We can move this object off-screen to make sure no-one accidentally interacts with it.
The trick is that the mainloop is inside an interaction people don’t use that much, the
OnPageContextMenu. In this interaction we have a couple of cases:
if playingGame is 1 move g_aliens by 10 pixels down move i_bullet by 20 pixels up score + 10 set l_score to score wait 200ms if i_bullet is over area of i_alien1 hide i_alien1 score + 2000 numAliens - 1 (repeat for i_alien2 and i_alien3) if g_aliens.y is more than dyn_user.y playingGame = 0 set text on l_message to "you lost" if numAliens is 0 playingGame = 0 set text on l_message to "you won"
As you can see, the bullet is always moving, even after it hit an alien or when it’s off-screen.
I start the game as soon as the page is loaded by adding a
fire OnPageContextMenu on Page to the interaction
If this all sounds like gibberish to you: download the Axure file and play around with it a bit! Link is at the end of the article!
the game after the update 😎
After making the video-tutorial, I couldn’t resist improving the game a bit. I added an instruction in the beginning and updated the variables to make the game more exciting. But the most important change is in the way I detect if an alien was shot.
Improvement in alien-kill-detection
First “alien-kill-detection” was in the main game loop, but there I had to add it separately for every alien. With three aliens that was doable, but I want to have an army 😂 And besides that, I want different aliens do different things!
My fix? I put each alien inside it’s own dynamic panel. In the
onMove of the dynamic panel I added the detection for being shot. Axure is kind enough to trigger the
onMove also when the element is inside a group that moves, so I didn’t have to do anything else! Take a look at the Axure file to see exactly how it works (link below).
Homework assignment 🤓
- give the user multiple bullets
- make the variable
- create multiple levels
- align the aliens in the middle (like the user is)
- make it so people with high screens don’t have an advantage
- add a scoreboard (bonus-points if the scoreboard is world-wide)
Note: if you use cases and interactions this heavily in real-life, you’re probably doing it wrong! Prototyping is MAKING FAKE STUFF. Just sayin’.
This is part 4 in a series, you can read part 1 here. More is coming!