We have a working game. Now we can focus on making it look good - that is juice.
We have a working game. Now we can focus on making it look good - that is juice.
Embedded Files
BACKGROUND
BACKGROUND
Select the Main Node and add a Node2D as child
Select the Main Node and add a Node2D as child
Rename it to Background
Rename it to Background
Attach a new script to the Background
Attach a new script to the Background
To get a checkerboard pattern, we look at the grid coordinates (X, Y).
To get a checkerboard pattern, we look at the grid coordinates (X, Y).
If you add x + y, the result alternates between Even and Odd.
If you add x + y, the result alternates between Even and Odd.
If the result is odd we paint that square colour A (Light Green)
If the result is odd we paint that square colour A (Light Green)
If the result is even we paint that square colour B (Dark Green)
If the result is even we paint that square colour B (Dark Green)
In The background script
In The background script
Add variables for the two colours
Add variables for the two colours
Also add variables for the
Also add variables for the
grid size and screen dimensions
grid size and screen dimensions
Create a draw function
Create a draw function
Determine how many columns and rows there are
Determine how many columns and rows there are
Loop through every column and row
Loop through every column and row
Find where you are on the grid
Find where you are on the grid
Draw a 40 x 40 cell
Draw a 40 x 40 cell
If the cell position is even
If the cell position is even
colour light green
colour light green
If the cell position is odd
If the cell position is odd
colour dark green
colour dark green
In the ready function
In the ready function
Call the redraw function
Call the redraw function
So that the grid is painted
So that the grid is painted
Each time the game starts
Each time the game starts
SNAKE HEAD
SNAKE HEAD
Right-Click on the Head node
Right-Click on the Head node
Choose Change Type
Choose Change Type
Select Sprite2D
Select Sprite2D
Assign the head_right.png
Assign the head_right.png
To the Texture property
To the Texture property
In the Offset property
In the Offset property
Turn OFF Centered
Turn OFF Centered
Add variables to preload
Add variables to preload
The different head textures
The different head textures
We must swap to when we
We must swap to when we
Change directions
Change directions
Update the onready reference
Update the onready reference
So it points to the Sprite2D
So it points to the Sprite2D
Instead of the ColorRect
Instead of the ColorRect
Now update the process function
Now update the process function
To swap the head texture
To swap the head texture
Based on the direction the snake
Based on the direction the snake
Is facing
Is facing
SNAKE BODY & TAIL
SNAKE BODY & TAIL
Add variables for all the different textures
Add variables for all the different textures
These textures represent all the different
These textures represent all the different
Possible directions of the tail and body
Possible directions of the tail and body
Create a new function to update the body
Create a new function to update the body
Go through every single piece of the body one by one.
Go through every single piece of the body one by one.
Check who's in front of me (previous) and who is behind (next).
Check who's in front of me (previous) and who is behind (next).
If I'm the first block, the 'front' is the Head.
If I'm the first block, the 'front' is the Head.
If I'm the last block, I am the tail.
If I'm the last block, I am the tail.
Draw an arrow from Me to the Front neighbour.
Draw an arrow from Me to the Front neighbour.
Draw another arrow from Me to the Back neighbour.
Draw another arrow from Me to the Back neighbour.
Do my neighbours share the same X alignment?
Do my neighbours share the same X alignment?
(i.e., are both X's zero?). If so, we are stacked vertically.
(i.e., are both X's zero?). If so, we are stacked vertically.
Do my neighbours share the same Y alignment? (i.e., are both Y's zero?).
Do my neighbours share the same Y alignment? (i.e., are both Y's zero?).
If so, we are lined up horizontally.
If so, we are lined up horizontally.
If we aren't straight, we must be turning.
If we aren't straight, we must be turning.
Add the two arrows together.
Add the two arrows together.
If I have no neighbour behind me, I am the tail.
If I have no neighbour behind me, I am the tail.
Just point me toward the back of the snake piece in front of me.
Just point me toward the back of the snake piece in front of me.
Update the add_body_part function
Update the add_body_part function
To use Sprite2D instead of ColorRect
To use Sprite2D instead of ColorRect
Give it a starting position
Give it a starting position
Set centered to false
Set centered to false
Set a default texture
Set a default texture
Call the update_body_sprites function
Call the update_body_sprites function
Using Vector Math can be abstract and confusing - let's refactor the code
Using Vector Math can be abstract and confusing - let's refactor the code
Add a helper function which will
Add a helper function which will
Tell us if our neighbour is
Tell us if our neighbour is
To the right or left of us
To the right or left of us
Above or Below us
Above or Below us
Now modify the update_body_sprites function to determine which body part to add:
Now modify the update_body_sprites function to determine which body part to add:
THE APPLE
THE APPLE
Select the food node
Select the food node
Right-Click it and choose Change Type
Right-Click it and choose Change Type
Select Sprite2D
Select Sprite2D
Set the Texture to apple.png
Set the Texture to apple.png
In Offset disable Centered
In Offset disable Centered
Change the ready variable
Change the ready variable
Which references the apple
Which references the apple
To a Sprite2D
To a Sprite2D
When we spawn food
When we spawn food
We should only spawn in free space
We should only spawn in free space
We mustn't spawn inside the snake
We mustn't spawn inside the snake
Adjust the move_food function
Adjust the move_food function
To loop through all the positions
To loop through all the positions
Of the snake to check that we
Of the snake to check that we
Didn't choose one of them before
Didn't choose one of them before
Choosing a final spawn position
Choosing a final spawn position
This is the end of the tutorial.
This is the end of the tutorial.
You can expand it further by:
You can expand it further by:
Increase the speed of the snake every ten apples eaten.
Increase the speed of the snake every ten apples eaten.
Add a win condition when there are no available spaces to spawn food
Add a win condition when there are no available spaces to spawn food
Add a game over screen with stats from the game
Add a game over screen with stats from the game
CONGRATULATIONS ON COMPLETING THE TUTORIAL!
CONGRATULATIONS ON COMPLETING THE TUTORIAL!
Page updated
Google Sites
Report abuse