5 tricks to design an 80s style game for mobile with Justinmind
Design a mobile game straight from the 80s in a prototyping tool? Difficult. But not impossible. Here are 5 tricks to get it right
It’s 2018 and we are still obsessed with the 80s.
If Stranger Things, Ready Player One and The Goldbergs are anything to go by then it doesn’t look like this love affair with the past is gonna end any time soon.
In the spirit of all things retro, we’ve got 5 tricks up our sleeve you can use to design a mobile game that looks like it’s time travelled straight from 1984.
Don’t get too excited. Justinmind is built for prototyping web and mobile apps. Not game design. But what’s a little fun between friends? Let’s get our arcade game on.
Design your own 80s style game. Download Justinmind.
Set game trigger with On Variable Change
Games from the 80s are… let’s say limited. There’s no 3D, no AR… But, we won’t let that stop us.
A variable change can act as a global trigger for your game. It is what can make all the UI elements interact.
To execute the game, we’ll use an On Variable Change event.
In the Variables palette, add a variable. Name it whatever you like. Give it a value of 0.
Now we have the variable. We want this variable to add one indefinitely. This will create a never ending loop, of sorts. This loop is what allows the elements to interact.
The loop will end when two elements interact with one another (for example, if two UI elements come into contact with one another). We’ll show you that trick below.
In the Screen palette, add an “On Page Load” > “Set value” event. Click Variables and choose your variable. Choose “Calculated” at the bottom of the Dialog.
In the Expression builder, add your variable and plus 1. Click OK. Nothing will happen until you simulate your prototype. This counter acts as a trigger for the same.
Use keyboard events to control your character
When it comes to designing a game, you’re going to need a way to control whatever is on the screen.
If you’ve got an avatar that has to move (or escape immediate peril) then keyboard events are going to come in useful.
A keyboard event enables you to press a key on your keyboard and then have something happen as a result of that input.
In Justinmind, you can create keyboard events.
From the widgets palette, drag an image widget to your canvas. Double click it to add your image.
A good tip is to use SVG files. They can scale at any size and won’t lose any of their quality. Our image a knock-off Han Solo whose laser-gun slinging scares all the alien wildlife.
Click on the image and, in the Events palette, click “Add Event”. In the Dialog that appears choose Keyboard > On Key Down as your trigger. Choose your key. We have chosen the up arrow.
Now choose your action. In this case, you want to choose a ‘Move’ event from the dropdown. Click the image in the Dialog and set your X and Y axis. This will determine how far the image will move when you press the up key.
Create movement with individual frames
Animation will bring your game to life. It’s what will make your characters move fluidly throughout the screen. Well, at least as fluidly as characters from the 1980s can.
Let’s say your character’s arms lifts as they shoot.
A simple two frame set up is all we need to do that. This can be created with a couple of dynamic panels.
To do this you’ll need two images to represent one frame of the movement.
First, drag a dynamic panel onto your canvas. Then add another panel inside of it.
In your first panel, add your first frame image. In the next panel, add your other frame.
Now in the Events palette, add an event. In the Dialog, choose Keyboard > On Key Down > Space > Set Active Panel. Make sure the first dynamic panel is active. Repeat this step but this time set the second dynamic panel as active. Click OK.
When you simulate the prototype, your image should move between those two frames when you press the spacebar.
Use Area conditions to create conflict
In our example mobile game, the character shoots his gun to prevent being hit by space invaders. We can create Events in our prototype to achieve this.
First, you’ll need a variable. Add one in the Variable palette. Give it a name of your choice and a value of 0 and click OK.
Next, let’s add an event to Screen 1 so that the space invaders move automatically upon page load.
Select Screen 1 in the Outline palette and click Add Event in the Events palette. Add an “On Page Load” event and “Set Value”, selecting the Variable you created from the Variables tab.
Now we need to add another Event. Select “On Variable Change” > Select your Variable > “Set Value”. Click “Calculated” and add your Variable plus “1”.
On the widget you want to move indefinitely, add a condition in the Condition builder using the Intersect function in the Areas grouping. Finally, add a Move event and click OK.
Add sound effects
Is any game complete without the pew-pew of a laser gun or the final grunt from your enemy as they fall to the ground? No. Definitely not.
This is where sound effects come in. They’re a great way to add a bit of realism (OK, maybe not that real…) and fun to your video game.
In Justinmind, you can add .wav and .mp3 sound files to your game.
To do this, select the UI element on the canvas that you want to trigger the audio file.
In the Events palette, click “Add Event”. Add an “On Click” or “On Tap” event. You’ll then be asked to choose your audio file. Click OK.
You’re not going to make the next Fortnite any time soon. It’s not what a prototyping tool is for.
But you can still create simplistic games that work like the real deal using a few of Justinmind’s powerful prototyping capabilities. Good luck! And don’t forget to save. 😉
- The ultimate mockup tool to design websites and mobile appsOur powerful mockup tool lets you create and share highly interactive mockups, while getting feedback on every aspect. Your whole team can benefit from enhanced collaboration and seamless developer-designer handoff. And best of all? It's absolutely free to download.