Adding a UI background to help with legibility

world.gd

@@ -12,6 +12,8 @@ enum CellStates {
 }
 
 ## UI
+@onready var background_ui: Control = $UI/Background
+
 @onready var debug_ui: MarginContainer = $UI/Debug
 @onready var debug_generation_counter: Label = $UI/Debug/VBoxContainer/GenerationCounter
 @onready var debug_living_cells_counter: Label = $UI/Debug/VBoxContainer/LivingCellsCounter
@@ -43,13 +45,16 @@ var world: Array = []
 func _ready() -> void:
 	update_generation_ui()
 	debug_ui.visible = false
+	background_ui.visible = true
 	generation_ui.visible = true
 
 func _input(event: InputEvent) -> void:
 	if event.is_action_pressed("Pause"):
 		is_paused = !is_paused
+		background_ui.visible = is_paused
 	if event.is_action_pressed("Menu"):
 		is_paused = true
+		background_ui.visible = true
 		generation_ui.visible = true
 		update_generation_ui()
 
@@ -197,6 +202,7 @@ func _on_generation_submit_pressed() -> void:
 
 	debug_ui.visible = true
 	generation_ui.visible = false
+	background_ui.visible = false
 	seed(world_seed)
 	randomize()
 	start_conway()

world.tscn

@@ -19,6 +19,23 @@ one_shot = true
 
 [node name="UI" type="CanvasLayer" parent="."]
 
+[node name="Background" type="Control" parent="UI"]
+layout_mode = 3
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+
+[node name="ColorRect" type="ColorRect" parent="UI/Background"]
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+color = Color(0, 0, 0, 0.12549)
+
 [node name="Debug" type="MarginContainer" parent="UI"]
 visible = false
 offset_right = 106.0
@@ -49,10 +66,10 @@ anchor_left = 0.5
 anchor_top = 0.5
 anchor_right = 0.5
 anchor_bottom = 0.5
-offset_left = -46.0
-offset_top = -25.5
-offset_right = 46.0
-offset_bottom = 25.5
+offset_left = -173.0
+offset_top = -78.0
+offset_right = 173.0
+offset_bottom = 78.0
 grow_horizontal = 2
 grow_vertical = 2
 size_flags_horizontal = 4