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!