Improved Inventory UI (more in the middle, adapt to viewport size, new selector image)

prefabs/UI/Inventory/Inventory.tscn

@@ -2,12 +2,12 @@
 
 [ext_resource type="Script" uid="uid://hg7jay2kt441" path="res://scripts/CSharp/Common/Inventory/InventoryUi.cs" id="1_6wusm"]
 [ext_resource type="Texture2D" uid="uid://3ln8aleyxgp1" path="res://art/ui/UI/UI_bag_export_01.png" id="3_vvo7l"]
-[ext_resource type="Texture2D" uid="uid://c7wqla0mbu3np" path="res://art/ui/babushka_ui_tmp_inventory_select.png" id="4_tiss4"]
 [ext_resource type="Texture2D" uid="uid://u0dku75l17re" path="res://art/ui/UI/UI_bag_export_highlight_01.png" id="5_df8i8"]
 [ext_resource type="PackedScene" uid="uid://c0kmdjeqkqrwv" path="res://prefabs/UI/Inventory/Slot.tscn" id="5_u7kje"]
 [ext_resource type="Script" uid="uid://cvkw4qd2hxksi" path="res://scripts/GdScript/dialogic_toggle.gd" id="6_n5apg"]
 [ext_resource type="Texture2D" uid="uid://bag1xalfh731d" path="res://art/ui/UI/UI_bag_export_highlight_02.png" id="6_u7kje"]
 [ext_resource type="Texture2D" uid="uid://cxptule8n38ph" path="res://art/ui/UI/UI_bag_export_highlight_03.png" id="7_l3npx"]
+[ext_resource type="Texture2D" uid="uid://qwia360i1ir1" path="res://art/ui/UI/inventory_active.png" id="8_df8i8"]
 
 [node name="CanvasLayer" type="CanvasLayer"]
 layer = 90
@@ -18,7 +18,7 @@ scale = Vector2(0.7, 0.7)
 script = ExtResource("6_n5apg")
 itemToToggle = NodePath("../Inventory")
 
-[node name="Inventory" type="Control" parent="."]
+[node name="Inventory" type="Control" parent="." node_paths=PackedStringArray("_slotsParent", "_slotsMover", "_headerSlots", "_slotSelect")]
 layout_mode = 3
 anchors_preset = 8
 anchor_left = 0.5
@@ -30,7 +30,10 @@ grow_vertical = 2
 scale = Vector2(0.7, 0.7)
 size_flags_vertical = 8
 script = ExtResource("1_6wusm")
-_inventoryOpenedOffset = -700.0
+_slotsParent = NodePath("SlotsContainer/SlotsMover/Slots")
+_slotsMover = NodePath("SlotsContainer/SlotsMover")
+_headerSlots = [NodePath("SlotsContainer/SlotsMover/Slots/Slot"), NodePath("SlotsContainer/SlotsMover/Slots/Slot2"), NodePath("SlotsContainer/SlotsMover/Slots/Slot3"), NodePath("SlotsContainer/SlotsMover/Slots/Slot4"), NodePath("SlotsContainer/SlotsMover/Slots/Slot5"), NodePath("SlotsContainer/SlotsMover/Slots/Slot6"), NodePath("SlotsContainer/SlotsMover/Slots/Slot7"), NodePath("SlotsContainer/SlotsMover/Slots/Slot8"), NodePath("SlotsContainer/SlotsMover/Slots/Slot9")]
+_slotSelect = NodePath("SlotsContainer/SlotsMover/SlotSelectContainer/Selector")
 
 [node name="SlotsContainer" type="Control" parent="Inventory"]
 custom_minimum_size = Vector2(500, 0)
@@ -45,32 +48,6 @@ offset_right = 250.0
 grow_horizontal = 2
 grow_vertical = 2
 
-[node name="SlotSelectContainer" type="Control" parent="Inventory/SlotsContainer"]
-custom_minimum_size = Vector2(900, 100)
-layout_mode = 1
-anchors_preset = 7
-anchor_left = 0.5
-anchor_top = 1.0
-anchor_right = 0.5
-anchor_bottom = 1.0
-offset_left = -450.0
-offset_top = -115.0
-offset_right = 450.0
-offset_bottom = -15.0
-grow_horizontal = 2
-grow_vertical = 0
-
-[node name="Selector" type="TextureRect" parent="Inventory/SlotsContainer/SlotSelectContainer"]
-z_index = 10
-custom_minimum_size = Vector2(100, 100)
-layout_mode = 0
-offset_left = -45.7143
-offset_top = -49.2857
-offset_right = 54.2857
-offset_bottom = 50.7143
-texture = ExtResource("4_tiss4")
-expand_mode = 1
-
 [node name="SlotsMover" type="Control" parent="Inventory/SlotsContainer"]
 custom_minimum_size = Vector2(900, 610)
 layout_mode = 1
@@ -99,8 +76,8 @@ layout_mode = 1
 anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
-offset_left = 350.0
+offset_left = 437.0
-offset_right = 254.0
+offset_right = 341.0
 offset_bottom = 30.0
 grow_horizontal = 2
 grow_vertical = 2
@@ -113,8 +90,8 @@ layout_mode = 1
 anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
-offset_left = -350.0
+offset_left = -357.0
-offset_right = -446.0
+offset_right = -453.0
 offset_bottom = 30.0
 grow_horizontal = 2
 grow_vertical = 2
@@ -448,3 +425,27 @@ offset_left = 703.0
 offset_top = 512.0
 offset_right = 803.0
 offset_bottom = 612.0
+
+[node name="SlotSelectContainer" type="Control" parent="Inventory/SlotsContainer/SlotsMover"]
+custom_minimum_size = Vector2(900, 100)
+layout_mode = 1
+anchors_preset = 7
+anchor_left = 0.5
+anchor_top = 1.0
+anchor_right = 0.5
+anchor_bottom = 1.0
+offset_left = -497.0
+offset_top = -164.0
+offset_right = 403.0
+offset_bottom = -64.0
+grow_horizontal = 2
+grow_vertical = 0
+
+[node name="Selector" type="TextureRect" parent="Inventory/SlotsContainer/SlotsMover/SlotSelectContainer"]
+z_index = 10
+custom_minimum_size = Vector2(100, 100)
+layout_mode = 0
+offset_right = 100.0
+offset_bottom = 100.0
+texture = ExtResource("8_df8i8")
+expand_mode = 1

scenes/Babushka_scene_farm_outside_2d.tscn

@@ -991,14 +991,23 @@ follow_viewport_enabled = false
 anchors_preset = 7
 anchor_top = 1.0
 anchor_bottom = 1.0
-offset_left = -126.0
+offset_left = -116.0
-offset_top = -48.0
+offset_top = -53.0
-offset_right = 221.82
+offset_right = 231.82
-offset_bottom = 146.4
+offset_bottom = 141.4
 grow_vertical = 0
 size_flags_horizontal = 6
 size_flags_vertical = 10
 
+[node name="SlotsMover" parent="CanvasLayer/Inventory/SlotsContainer" index="0"]
+anchors_preset = 7
+anchor_left = 0.5
+anchor_right = 0.5
+offset_left = -450.0
+offset_top = -610.0
+offset_right = 450.0
+offset_bottom = 0.0
+
 [node name="Audio" type="Node" parent="."]
 
 [node name="Background Music" type="AudioStreamPlayer2D" parent="Audio"]

scripts/CSharp/Common/Inventory/InventoryUi.cs

@@ -4,29 +4,22 @@ namespace Babushka.scripts.CSharp.Common.Inventory;
 
 public partial class InventoryUi : Control
 {
-    private Control _slots;
+    [Export] private Control _slotsParent;
-    private Control _slotsMover;
+    [Export] private Control _slotsMover;
-    private InventoryInstance _playerInventory;
+    [Export] private Control[] _headerSlots;
-    private Control _slotSelect;
+    [Export] private Control _slotSelect;
 
+    private InventoryInstance _playerInventory;
     private int? _slotOnMouse;
-
     private bool _inventoryExtended = false;
     private Tween? _inventoryExtensionTween;
-
-    [Export]
     private float _inventoryClosedOffset = 0f;
-
-    [Export]
     private float _inventoryOpenedOffset = 200f;
 
     public override void _Ready()
     {
         GD.Print("Ready inventory ui");
-        _slots = GetNode<Control>("SlotsContainer/SlotsMover/Slots");
-        _slotsMover = GetNode<Control>("SlotsContainer/SlotsMover");
         _playerInventory = InventoryManager.Instance.playerInventory;
-        _slotSelect = GetNode<Control>("SlotsContainer/SlotSelectContainer/Selector");
         //PopulateSlots();
         SubscribeSlots();
         SetSlotContent();
@@ -44,7 +37,7 @@ public partial class InventoryUi : Control
         for (var i = 0; i < _playerInventory.Slots.Count; i++)
         {
             var inventorySlot = _playerInventory.Slots[i];
-            var uiSlot = _slots.GetChild(i) as SlotUi;
+            var uiSlot = _slotsParent.GetChild(i) as SlotUi;
 
             if (inventorySlot.itemInstance != null)
             {
@@ -82,7 +75,7 @@ public partial class InventoryUi : Control
 
     private void SetSlotSelectPosition()
     {
-        _slotSelect.Position = new Vector2(InventoryManager.Instance.CurrentSelectedSlotIndex * 100, 0);
+        _slotSelect.GlobalPosition = _headerSlots[InventoryManager.Instance.CurrentSelectedSlotIndex].GlobalPosition;
     }
 
     private void PopulateSlots()
@@ -93,7 +86,7 @@ public partial class InventoryUi : Control
             var slotInstance = slotPackedScene.Instantiate<SlotUi>();
             slotInstance.index = index;
             slotInstance.Clicked += SlotClicked;
-            _slots.AddChild(slotInstance);
+            _slotsParent.AddChild(slotInstance);
         }
     }
 
@@ -101,7 +94,7 @@ public partial class InventoryUi : Control
     {
         for (var index = 0; index < _playerInventory.Slots.Count; index++)
         {
-            var slotInstance = _slots.GetChild<SlotUi>(index);
+            var slotInstance = _slotsParent.GetChild<SlotUi>(index);
             slotInstance.index = index;
             slotInstance.Clicked += SlotClicked;
         }
@@ -111,7 +104,7 @@ public partial class InventoryUi : Control
     {
         for (var index = 0; index < _playerInventory.Slots.Count; index++)
         {
-            var slotInstance = _slots.GetChild(index) as SlotUi;
+            var slotInstance = _slotsParent.GetChild(index) as SlotUi;
             slotInstance!.Clicked -= SlotClicked;
         }
     }
@@ -141,6 +134,8 @@ public partial class InventoryUi : Control
     {
         if (Input.IsActionJustPressed("ui_inventory_open_close"))
         {
+            // We adjust the offset value in accordance with the screen height to make sure that the inventory is always in the middle of the screen.
+            _inventoryOpenedOffset = (GetViewportRect().Size.Y / 2 + 400) * (-1);
             InputInventoryOpenClose();
         }