Make GUI reponsive to other aspect ratios

4 files changed, 87 insertions, 47 deletions

diff --git a/scenes/interface.tscn b/scenes/interface.tscn
index 169d551..23aeb44 100644
--- a/scenes/interface.tscn
+++ b/scenes/interface.tscn
@@ -111,20 +111,26 @@ tracks/3/keys = {
 [node name="Interface" type="CanvasLayer"]
 script = ExtResource( 3 )
 
-[node name="Sprite" type="Sprite" parent="."]
-position = Vector2( 188, 111 )
-scale = Vector2( 0.8, 0.8 )
-texture = ExtResource( 2 )
-
 [node name="TimerLabel" type="Label" parent="."]
-margin_left = 192.0
-margin_top = 104.0
-margin_right = 216.0
-margin_bottom = 116.0
+anchor_left = 1.0
+anchor_top = 1.0
+anchor_right = 1.0
+anchor_bottom = 1.0
+margin_left = -22.0
+margin_top = -15.0
+margin_right = 2.00002
+margin_bottom = 1.00001
 rect_scale = Vector2( 0.8, 0.8 )
 theme = ExtResource( 4 )
 text = "000"
 align = 2
+__meta__ = {
+"_edit_use_anchors_": true
+}
+
+[node name="Sprite" type="Sprite" parent="TimerLabel"]
+position = Vector2( -4.99998, 8.75 )
+texture = ExtResource( 2 )
 
 [node name="ScoreLabel" type="Label" parent="."]
 margin_top = -2.0
@@ -138,18 +144,29 @@ text = "Score:"
 
 [node name="LoseLabel" type="Label" parent="."]
 visible = false
-margin_top = 40.0
-margin_right = 214.0
-margin_bottom = 80.0
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+margin_left = -107.0
+margin_top = -20.0
+margin_right = 107.0
+margin_bottom = 20.0
 theme = ExtResource( 4 )
 text = "YOU RAN OUT OF TIME!
 RESTART?"
 align = 1
 
 [node name="Difficulty" type="Control" parent="."]
-margin_top = 40.0
-margin_right = 40.0
-margin_bottom = 80.0
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+margin_left = -20.0
+margin_top = -20.0
+margin_right = 20.0
+margin_bottom = 20.0
+mouse_filter = 2
 
 [node name="AnimationPlayer" type="AnimationPlayer" parent="Difficulty"]
 root_node = NodePath("../MessageLabel")
@@ -158,24 +175,35 @@ anims/blinking = SubResource( 2 )
 
 [node name="MessageLabel" type="Label" parent="Difficulty"]
 visible = false
-margin_right = 214.0
+anchor_left = 0.5
+anchor_right = 0.5
+margin_left = -107.0
+margin_right = 107.0
+margin_bottom = 16.0
 theme = ExtResource( 4 )
 text = "DIFFICULT PHASE CHANGED:"
 align = 1
 
 [node name="ChangeLabel" type="Label" parent="Difficulty"]
 visible = false
-margin_top = 14.0
-margin_right = 214.0
-margin_bottom = 30.0
+anchor_left = 0.5
+anchor_top = 1.0
+anchor_right = 0.5
+anchor_bottom = 1.0
+margin_left = -107.0
+margin_top = -28.0
+margin_right = 107.0
+margin_bottom = -12.0
 custom_colors/font_color_shadow = Color( 0.788235, 0.0823529, 0.0823529, 1 )
 text = "TEST"
 align = 1
 
 [node name="PhaseLabel" type="Label" parent="."]
-margin_top = 112.0
+anchor_top = 1.0
+anchor_bottom = 1.0
+margin_top = -8.0
 margin_right = 88.0
-margin_bottom = 128.0
+margin_bottom = 8.0
 rect_scale = Vector2( 0.5, 0.5 )
 theme = ExtResource( 4 )
 text = "Next Phase: "
@@ -183,5 +211,9 @@ text = "Next Phase: "
 [node name="PauseMenu" parent="." instance=ExtResource( 1 )]
 pause_mode = 2
 visible = false
+anchor_right = 1.0
+anchor_bottom = 1.0
+margin_right = 0.0
+margin_bottom = 0.0
 
 [connection signal="timeout" from="Timer" to="." method="_on_Timer_timeout"]
diff --git a/scenes/mainmenu.tscn b/scenes/mainmenu.tscn
index 428593f..544f0c6 100644
--- a/scenes/mainmenu.tscn
+++ b/scenes/mainmenu.tscn
@@ -6,14 +6,14 @@
 [ext_resource path="res://theme_data/interface_theme.tres" type="Theme" id=4]
 
 [node name="Menu" type="Control"]
-margin_right = 214.0
-margin_bottom = 120.0
+anchor_right = 1.0
+anchor_bottom = 1.0
 theme = ExtResource( 4 )
 script = ExtResource( 1 )
 
 [node name="ColorRect" type="ColorRect" parent="."]
-margin_right = 214.0
-margin_bottom = 120.0
+anchor_right = 1.0
+anchor_bottom = 1.0
 color = Color( 0.0823529, 0.0745098, 0.117647, 1 )
 
 [node name="Label" type="Label" parent="."]
@@ -25,8 +25,14 @@ margin_bottom = 16.0
 text = "BasketBALLAZ"
 
 [node name="Control" type="Control" parent="."]
-margin_right = 428.0
-margin_bottom = 240.0
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+margin_left = -107.0
+margin_top = -60.0
+margin_right = 321.0
+margin_bottom = 180.0
 rect_scale = Vector2( 0.5, 0.5 )
 
 [node name="VBoxContainer" type="VBoxContainer" parent="Control"]
diff --git a/scenes/optionsmenu.tscn b/scenes/optionsmenu.tscn
index c3f7338..e58dd5a 100644
--- a/scenes/optionsmenu.tscn
+++ b/scenes/optionsmenu.tscn
@@ -4,17 +4,14 @@
 [ext_resource path="res://theme_data/interface_theme.tres" type="Theme" id=3]
 
 [node name="OptionsMenu" type="Control"]
-margin_right = 214.0
-margin_bottom = 120.0
+anchor_right = 1.0
+anchor_bottom = 1.0
 theme = ExtResource( 3 )
 script = ExtResource( 2 )
 
 [node name="Control" type="Control" parent="."]
 anchor_right = 1.0
 anchor_bottom = 1.0
-margin_right = 321.0
-margin_bottom = 180.0
-rect_scale = Vector2( 0.4, 0.4 )
 
 [node name="Panel" type="Panel" parent="Control"]
 anchor_right = 1.0
@@ -25,24 +22,26 @@ anchor_left = 0.5
 anchor_top = 0.5
 anchor_right = 0.5
 anchor_bottom = 0.5
-margin_left = -165.5
+margin_left = -154.0
 margin_top = -49.0
-margin_right = 165.5
+margin_right = 154.0
 margin_bottom = 49.0
+rect_scale = Vector2( 0.5, 0.5 )
+rect_pivot_offset = Vector2( 154, 49 )
 
 [node name="GridContainer" type="GridContainer" parent="Control/VBoxContainer"]
-margin_right = 331.0
+margin_right = 308.0
 margin_bottom = 76.0
 columns = 2
 
 [node name="FullscreenLabel" type="Label" parent="Control/VBoxContainer/GridContainer"]
-margin_right = 127.0
+margin_right = 104.0
 margin_bottom = 16.0
 text = "Fullscreen"
 
 [node name="FullscreenCheckButton" type="CheckButton" parent="Control/VBoxContainer/GridContainer"]
-margin_left = 299.0
-margin_right = 331.0
+margin_left = 276.0
+margin_right = 308.0
 margin_bottom = 16.0
 size_flags_horizontal = 10
 
@@ -54,9 +53,9 @@ size_flags_horizontal = 2
 text = "Master Volume"
 
 [node name="VolumeMasterContainer" type="HBoxContainer" parent="Control/VBoxContainer/GridContainer"]
-margin_left = 131.0
+margin_left = 108.0
 margin_top = 20.0
-margin_right = 331.0
+margin_right = 308.0
 margin_bottom = 36.0
 rect_min_size = Vector2( 200, 0 )
 
@@ -76,14 +75,14 @@ text = "50%"
 
 [node name="VolumeMusicLabel" type="Label" parent="Control/VBoxContainer/GridContainer"]
 margin_top = 40.0
-margin_right = 127.0
+margin_right = 104.0
 margin_bottom = 56.0
 text = "Music Volume"
 
 [node name="VolumeMusicContainer" type="HBoxContainer" parent="Control/VBoxContainer/GridContainer"]
-margin_left = 131.0
+margin_left = 108.0
 margin_top = 40.0
-margin_right = 331.0
+margin_right = 308.0
 margin_bottom = 56.0
 
 [node name="VolumeMusicSlider" type="HSlider" parent="Control/VBoxContainer/GridContainer/VolumeMusicContainer"]
@@ -102,14 +101,14 @@ text = "50%"
 
 [node name="VolumeSFXLabel" type="Label" parent="Control/VBoxContainer/GridContainer"]
 margin_top = 60.0
-margin_right = 127.0
+margin_right = 104.0
 margin_bottom = 76.0
 text = "SFX Volume"
 
 [node name="VolumeSFXContainer" type="HBoxContainer" parent="Control/VBoxContainer/GridContainer"]
-margin_left = 131.0
+margin_left = 108.0
 margin_top = 60.0
-margin_right = 331.0
+margin_right = 308.0
 margin_bottom = 76.0
 
 [node name="VolumeSFXSlider" type="HSlider" parent="Control/VBoxContainer/GridContainer/VolumeSFXContainer"]
@@ -128,7 +127,7 @@ text = "50%"
 
 [node name="ReturnButton" type="Button" parent="Control/VBoxContainer"]
 margin_top = 80.0
-margin_right = 331.0
+margin_right = 308.0
 margin_bottom = 98.0
 text = "Return"
 
diff --git a/scenes/pausemenu.tscn b/scenes/pausemenu.tscn
index 68be4e6..18a9d60 100644
--- a/scenes/pausemenu.tscn
+++ b/scenes/pausemenu.tscn
@@ -19,6 +19,9 @@ script = ExtResource( 1 )
 anchor_right = 1.0
 anchor_bottom = 1.0
 color = Color( 0, 0, 0, 0.54902 )
+__meta__ = {
+"_edit_use_anchors_": true
+}
 
 [node name="PauseLabel" type="Label" parent="."]
 anchor_left = 0.5