Devlog 4: Adding a Main Menu

Hello again!
In this devlog, I’ll cover the creation of the main menu, and more specifically, how i made the game title.

Menu Buttons

First off, we have to add a few buttons that the user can press to start and quit the game . Godot makes this easy with the Button node. All we have to do is add a few of these nodes inside a VBoxContainer and optionally, create a theme for them. For this project, I decided to create a very simple theme that uses the BetterVCR font and highlights the button if it’s hovered/focused.
The last thing that I did was make the buttons “recoil” when they’re pressed. This can be done by scaling the button down when it’s pressed and adding a tween to scale it back up when it’s released:

var tween: Tween
		
button.button_down.connect(func() -> void:
	# Scale the button down
	button.offset_transform_scale = Vector2(0.95, 0.95)
	)

button.button_up.connect(func() -> void:
	tween = get_tree().create_tween()
	# Tween the button's scale to its original value
	tween.tween_property(button, "offset_transform_scale", Vector2(1,1), 1)

The Game Title

Instead of using a simple label for the game title in the main menu, I decided to create a construct one from multiple ColorRect nodes. I was inspired by this image i found online. To implement this, we first have to describe the shape of each letter. I decided to do this with nested arrays like so, where 0 represents an empty cell and 1 represents the opposite.

# Example for the letter B
const B: Array[Array] = [
	[1, 1, 0],
	[1, 0, 1],
	[1, 1, 0],
	[1, 0, 1],
	[1, 1, 0]
]

We can then store each letter in another array.
The cells in the reference picture change colors each row, so we also have to define those colors in another array:

const letters: Array = [B,R,E,A,K,O,U,T]
const colors: Array[Color] = [Color.ORANGE, Color.BLUE, Color.GREEN, Color.YELLOW, Color.RED]

Finally, we just have to iterate through the letters array and instantiate a ColorRect when letter[row] [col] == 1:

for i: int in range(0, letters.size()):
	var letter: Array[Array] = letters[i]
	for row: int in range(0, letter.size()):
		for col: int in range(0, letter[row].size()):
			if letter[row][col] == 1:
				# Instantiate the colorRect and modify its position based on the selected cell size and the distance between each letter

The end result can be seen in the uploaded picture

Other New Features:

Here’s all the other noteworthy features I’ve added since the last devlog:
Added a proper way of switching levels when the player has destroyed all the blocksAdded a hit effect to the blocks when they’re hit by the ball
Until next Time!

Devlog #3: Transitions!

Hi again!
The game finally has a transition system to make scene-switching look nicer. This was done by creating a shader that’s applied to a ColorRect node. The first shader i made took in a progress variable ranging from 0 to 1, which tells it how far along the transition it’s supposed to be. For a very simple slide transition, we only have to make the ColorRect black if the pixel’s UV’s x component is smaller than progress:

void fragment() {
	if (UV.x < progress) {
		COLOR = vec4(0,0,0,1);
	}
}

However, since I didn’t want to create a separate shader to end the Transition, I decided to include two progress variables: startProgress and endProgress, which can then be used to apply the shader to a section of the ColorRect like so:

void fragment() {
	if (UV.x < startProgress && UV.x > endProgress) {
		COLOR = vec4(0,0,0,1);
	} else {
	        COLOR = vec4(0,0,0,0);
	}
}

The timing of the transition itself is handled using Godot’s tweens in a singleton. The result can be seen in the attached file.

Other new features

• The game now has a very simple main menu
• The player has the ability to restart the game when the they lose.

Until next time!

Devlog #2

Hello again!
Its’s almost been a week since my last devlog, and I’ve added a few new things since then

Custom Levels

I now have the ability to declare custom levels, which I hope will make prototyping levels later on much easier.
After launch, the game reads a levels.json file which contains the block layout in this format:

{
    "1": {
        "title": "level 1",
            "blockGrid": [
                ["1","1","1"]
                ["1","1","1"]
                ["1","1","1"]
                ]
        }
}

This example would produce a 3 × 3 grid of blocks.
The game just iterates through the arrays in the blockGrid array and instantiates a block when the value is 1 and does nothing when the value is 0.
This is definitely not the best way of defining custom levels, since it’s kind of hard to visualize and can be a pain to modify, so I’ll definitely have to revisit this later
Also, I can’t define more than one level at the moment 🥲

Other New Features

• Made the player able to dash by pressing shift while moving
• Added lives to the player
• Added a header that shows the remaining amount of blocks, the current score and the remaining lives
• Added a trail to the ball
  Like before, here’s a short video showcasing the game. I promise I’ll have a demo ready the next devlog.

Devlog #1

Welcome to my first devlog!
This is Breakout Clone, a project where I try and make a clone of breakout in Godot so that I can practice game development and familiarize myself with the engine

New Features

• For now, all I’ve made is a simple prototype with a movable paddle and a tool to instantiate a bunch of blocks
• In addition, I gave the player the ability to tilt the paddle, which I feel can be a fun way to control the ball
• The blocks turn redder as they take more damage

That’s pretty much it for now!
I know this is pretty short post so I’ll try to write more in-depth ones in the future.
I’ve included a short video showcasing everything that I’ve mentioned as well as things that I forgot to talk about.