Geometry Dash is a super cool game where you dodge obstacles and jump to the beat. Ever dreamed of creating your own Geometry Dash levels in Scratch? Today, I’m here to guide you through making a simple version in Scratch. Get ready to unleash your creativity and have loads of fun!
Goal
I'm going to show you how to make a simple version of Geometry Dash! Here's what we're aiming to create:
- Automatically scrolling levels
- A player that jumps when you click the mouse
- A player that breaks apart when hitting obstacles
- Particle effects
Gameplay Video ( 7s )
First up, take a look at this gameplay video. It’ll give you a good idea of what we’re about to code, so you can get a feel for what we're aiming for. Check it out!
Ok! Let's get scratching!
Stage
First, let's start by quickly setting up the background! Open the Stage to begin.
Then, click Backdrops.
Select the Rectangle tool.
Adjust color settings.
- Color 65
- Saturation 80
- Brightness 100
You can play around with the color settings however you like! They're not really important.
Draw a big square.
That's it!
Level
Next, let's create a sprite called Level!
Here’s how to do it:
- Click on the Choose a Sprite button at the bottom right of the screen.
- Select Paint to draw your own sprite.
- Name this new sprite "Level."
This will be used to display the level info in your game. Let's get started!
Name it Level.
Draw a ground
Let's draw the foundation ground!
Adjust the color settings first.
- Color 65
- Saturation 100
- Brightness 55
As I said before, you can use any color you like.
Draw a wide rectangle.
Preview
Set X and Y to 0, and then it should look like this below.
Draw obstacles
Next, let's draw obstacles.
We need to change the color just a bit. So I set the brightness to 30.
After that, add an outline to your ground. You can use any color you like, but adding an outline is important!
- Outline Thickness 3
- Color 50
- Saturation 30
- Brightness 100
Draw a small square on the ground.
Select the Reshape tool.
Now, click around the center of the top edge. New point added right?
Select the left point of the top edge, and click the Delete button.
Let's do the same on the right.
Select the point you added again, and click the 'Pointed' button.
Ta-da! A beautiful triangle has appeared!
Ok! Let's get coding!
Coding Auto-Scrolling Levels
Put the green flag block.
Set X and Y to 0.
Switch costume to costume1 that we have just made.
Put show block.
Create clone of myself.
Put 'repeat unil' block.
Insert the expression 'x position < -460' in the condition.
And chage x by -10 inside of the loop.
Put hide block at last.
Here’s the list of completed blocks. Take a look!
Preview
Smash the green flag!
Ok! Keep coding!
Coding Clone
Put this hatblock.
First, switch the clone's costume to the next one. (We don’t actually have a 'next' yet, but that’s okay!)
Set X to 460 and Y to 0.
Put 'repeat until' block.
Insert the expression 'x position < 0' into the condition.
Change x by -10 inside the loop.
After this loop, create clone of myself again.
Let's duplicate 'repeat until' block.
Move the duplicated blocks below and remove the second 'create clone of myself' block.
Change its condition from 0 to -460.
Finally put the delete this clone block.
Preview
Wow! Now our game is scrolling forever! Cool!
But do you see the black outline on the ground? It might cause bugs later, so let's delete it now.
Add more costumes
Since we only have one costume, the scrolling view is a bit boring, right? Now’s the perfect time to add more costumes!
Duplicate costume1.
Duplicate costume2 too!
In costume3, let's copy the triangle.
Then click the paste button.
Now we've got the same triangle!
Scale down the new triangle.
Preview
Alright, now we can see different costumes appearing one by one.
Player
Let's make a new sprite!
Name it Player.
Costume
The player has a really simple shape—a square.
Select the rectangle tool and adjust the color.
Here are some sample color settings, but feel free to play around with the fill and outline colors!
Fill
- Color 30
- Saturation 100
- Brightness 80
Outline
- Color 35
- Saturation 78
- Brightness 100
Let's draw a square that's 30 wide and 30 tall.
And also draw eyes just for fun!
Click the stop button and drag and drop the player on the ground.
Then check that the X and Y positions are adjusted.
Coding
Put the green flag block first.
Place the 'go to x and y' block. Since we moved the player sprite earlier, the values are already adjusted.
Set X to -180.
Point in direction 90.
Set the size to 100% here, as we’ll be changing it later.
Place 'show' block.
Variable 'speed Y'
Create a variable named 'speed Y' for this sprite only to implement jumping.
Set speed Y to 0.
Place 'forever' loop block.
Block 'Gravity'
Create a new block definition named 'Gravity' to use in the loop.
Place this inside the loop.
In Gravity, change y by speed Y.
Put 'if' block.
Insert 'touching color' block into the condition.
Then adjust the color settings using the eyedropper tool to select the color of the ground.
After the 'if' block, change speed Y by -2.
Inside the 'if' block, change y by '0 - speed Y', which results in a positive 2 because speed Y is generally negative.
Set speed Y to 0.
Variable 'jumping?'
Create a new variable named 'jumping?' for this sprite only.
Set 'jumping?' to 0, which means false.
Variable '! YES' and '! NO'
Let's create a variable to use as a constant so we can clearly distinguish between zero as a number and zero as meaning false.
Open Stage.
Initialize '! YES' and '! NO' variables here.
Be careful not to change these after clicking the green flag, as they are constants.
Back to Player.
Replace '! NO' with the zero of 'jumping?', not 'speed Y'.
Preview
Good enough! The player appears and seems to be running on the ground. Let's keep coding guys!
Block 'Jump'
Create a new block definition named 'Jump'.
Place this definition inside the forever loop in the sequence that starts with the green flag.
In Jump definition, place 'if' block first.
Insert 'not mouse down' into the condition.
In this case, stop this script.
Add an 'if' block with an 'and' condition.
On the left side of the 'and' condition, insert 'jumping? = ! NO'.
For the right side, create a slightly more complex expression: '(abs of speed Y) < 5'.
Then insert this into the right side.
Good, these conditions mean that the player isn’t jumping and the absolute value of speed Y is less than 5.
Add a new sound for jumping.
Here’s how:
- Click on the Sounds tab at the top of the screen while your sprite is selected.
- Then, click Choose a Sound at the bottom to browse Scratch’s sound library.
- Select the sound called "Jump" to use it as your jumping sound.
Type 'jump' in the search input and select 'Jump'.
Place sound block inside of the 'if' block.
Set speed Y to 15.
Set 'jumping?' to 1, which is the variable '! YES'.
Preview
Looks good! But the obstacles aren’t working at all, right? Let’s create the 'Game Over' functions.
Game Over
Create a new block definition named 'Game Over'.
Use this definition inside of the forever loop block.
In 'Game Over', place 'if' block at first.
Insert 'touching color' block into the condition.
Then adjust the color settings using the eyedropper tool to match the color of the obstacles' edges.
Message 'Game Over'
Create a new message named 'Game Over'.
Broadcast this message inside of the 'if' block.
Add Gameover sound here. Choose a Sound.
Find and select 'Crunch' from the Scratch sound library.
Place sound block here.
Handling Game Over Message
Stop other scripts in sprite.
Open Level sprite.
Make the same blocks here.
Spin
Let's create a function to make the player spin while jumping.
Place an 'if - else' block here within the forever loop.
Insert the expression 'jumping? = ! YES' into the condition.
Turn 11 degrees to the right when the condition is true, and point in direction 90 when the condition is false.
Preview
Cool! It looks more like Geometry Dash, right?
Explosion
Let's create an effect where the player bursts apart when they hit an obstacle!
First, when I receive 'Game Over', hide.
Block '_Explode'
Create a new block definition named '_Explode'.
To make it easy to recognize block definitions with 'Run without screen refresh' checked, I’ll add an underscore at the beginning of the name.
Add this to the sequence that starts with the 'when I receive Game Over' block.
In the definition of '_Explode', place 'repeat 10 times' block.
In this loop, create clone of myself.
Clone
Set size to 30%.
Place 'show' block.
Point in direction 90.
And insert 'pick random 1 to 360' into the field.
Place a 'repeat 8 times' loop block.
Move 3 steps inside of the loop.
Finally delete this clone.
Preview
Boom! The player exploded when it hit the obstacle!
Particles
Create a new sprite!
Name it Particles.
Costume
Select the rectangle tool and adjust color settings.
Fill
- Color 30
- Saturation 100
- Brightness 100
Outline
Draw a 10 by 10 square, and feel free to adjust its size.
Then duplicate costume1.
Resize the square to 5 by 10.
Duplicate costume2.
Resize the square to 10 by 5.
Duplicate costume3.
Resize the square to 10 by 7.
Coding
Place the green flag block.
First of all, hide.
Place the forever loop block.
Create clone of myself inside.
Clone
Go to Player.
Change y by 10.
Change y randomly by a value from -15 to 0.
Set size to 100%.
Switch to a random costume from 1 to 4.
Then show.
Place 'repeat 5 times' block.
Change x randomly by a value lfrom -20 to -10.
Change y by 3.
Change size by 5.
Finally delete the clone.
Oops, I forgot to set the ghost effect here, so let's place the 'set ghost effect to 20' block."
Message 'Game Over'
When this sprite receives 'Game Over', then stop other scripts in sprite.
Preview
Super! The particles are following the player!
Refactoring
Let's improve our coding a bit.
Open the Level sprite.
Variable 'speed X'
Set speed X to -10.
Replace -10 with this block.
Obstacles
Remove the triangle from costume1, because it appears right after the game starts, and that's too soon.
Duplicate costume3.
Copy the ground.
Paste, resize and move it to next to the triangles.
Like this below.
Preview
Hmm, looks good. But there’s a hidden bug here.
Let’s continue coding a bit more before explaining the bug.
Move obstacles to the left of the ground.
Draw two poles in the same way.
Add a rectangle filled with the same color as the triangle's edge.
Flatten it and place it between the poles.
Like this below.
Copy and paste.
Preview
See what's going on!
Oh no! The player goes through the poles, and the game still goes on! That doesn't make sense!
Fix the bug
First, create the outline of a pole, making it the same as the triangle's outline.
Copy and paste the other pole.
Flatten it and move it to the top of a pole.
Repeat this for as many poles as you’ve created.
Then, only the tops of the poles have no outline, while the rest does.
Preview
Marvelous! We've succeeded in creating a GeometryDash-like game in Scratch! Woohoo!
