Hackernoon logoHow to Make an Interactive Pixelated Game in 30 Minutes Without Coding by@dominiconorton

How to Make an Interactive Pixelated Game in 30 Minutes Without Coding

Dominic Norton Hacker Noon profile picture

@dominiconortonDominic Norton

Hackathon Expert, No Code Junkie

Ever thought about getting into gaming but lack the technical skills. Here's how you can create your first game in 30 minutes!

1. Create a Flowlab.io account and select my games, new game then empty project

2. Click on the canvas, select create. Under type, type grass and then select edit sprite.

3. Select browse, select category, pixel-blocks, the grass block and then ok.

4. Click and drag your grass block in place. Then click on the block and select clone. Duplicate the block to create a ground surface and then select done cloning.

5. Select the canvas again, select create and change the type label to person and edit sprite. (in the physics settings, make sure the object is movable)

6. Click on browse, select category then pixel-chars. Select a character and choose ok.

7. Drag your character into place. Click on it and select edit, then behaviours.

To make your character move. Select keyboard in triggers, change the key to the right arrow key (make sure repeating is selected). Under logic & math select number, change the label to forward and the number to 6. Lastly, add velocity from properties. Connect down to get and out to x.

Repeat this process but change the key to the left arrow, the label to backwards and the number to -6.

8. Now we're going to make our character jump. Select keyboard in triggers, change the key to the up arrow key. Under logic & math select number, change the label to jump and the number to 12. Lastly, add impulse from components. Connect down to get and out to y.

9. Add the flip block in properties. Then connect backward to flip and forward to back.

9. We're going to add an animation to our character. Click on the character and select edit sprite. Then select the animation column, pick animation, create new, then name it run. Select the plus icon and change the character image, repeat this two more times then press ok.

Then add animation from the properties tab. Connect down from the left and right keyboard triggers to the start on the animation block and the up to the stop on the animation block.

10. Add a new object to ensure that your player doesn't fall off the map.

11. Add a new object called coins. Make sure it is not solid but enable collisions in the physics settings. (I've added some additional terrain).

12. Return to the behaviours setting for our player the add the collision block in triggers. Select coins as your type. Add the number block in logic & math and give it a label named score and a current value of 0. Then add the label tab in GUI and give it a value of 0. Connect the collision block's hit to the score block "+" and the score block to the label's value.

Create another label block but this time type "score". Then click ok

13. Click and drag the labels to make the score and value clear.

14. Lastly, to make the coins disappear on the player collision. Select then coin and add a behaviour. Select the collision trigger and change the type to player. Add destroyer from components and link hit to destroy.

15. Congratulations, now you can test your platformer game. It should look something like the image below. Here's a link to our version: https://flowlab.io/game/play/1703330

In part 2 we will be adding more complex features such as music, enemies and health status. You can find an example here: https://flowlab.io/game/play/1702939


Join Hacker Noon

Create your free account to unlock your custom reading experience.