====== Trin 5: Vis spillerens inventory ======

[[trin4_inventory_ui|← Forrige: Inventory-UI]] | [[start|Forside]] | [[trin6_kiste|Næste: Genbrug i en kiste →]]

Nu samler du delene. Du laver hovedscenen ''Main'', sætter spilleren og UI'et ind i den og forbinder dem med få linjer kode. Bagefter kan du køre hele spillet og se dit første inventory.

===== Hvorfor en Main-scene? =====

''Player'' ved ikke noget om UI, og ''InventoryUI'' ved ikke noget om spilleren. Det er med vilje. Nogen skal dog forbinde dem, og det er ''Main'' sit eget ansvar. Når alle forbindelser ligger ét sted, er det nemt at se, hvem der bruger hvad, og at ændre det senere.

===== Nye begreber =====

  * ''CanvasLayer'' er et lag, der tegnes oven på spillet og ikke flytter sig med kameraet. Det er det rigtige sted til UI.
  * ''CenterContainer'' placerer sit barn midt i sig selv.
  * ''HBoxContainer'' placerer sine børn ved siden af hinanden (vandret). Vi bruger den i [[trin6_kiste|trin 6]] til at have to inventories side om side.
  * **Access as Unique Name** er en indstilling, der giver en node et navn, man kan finde via ''%'' uanset placering i træet. Så slipper vi for lange stier som ''UI/CenterContainer/HBoxContainer/PlayerInventoryUI''.

===== Opret Main-scenen =====

  - Opret en ny scene med **Node** som rod. Omdøb den til ''Main''. Gem som ''Scenes/Main.tscn''.
  - Træk ''Scenes/Player.tscn'' fra FileSystem ind på ''Main''. Spilleren bliver nu et barn af ''Main'' med navnet ''Player''.
  - Højreklik på ''Main'', vælg **Add Child Node**, og tilføj en **CanvasLayer**. Omdøb den til ''UI''.
  - Tilføj en **CenterContainer** som barn af ''UI''. Vælg den, og klik på **Layout** i værktøjslinjen over 2D-vinduet (eller find //Layout → Anchors Preset// i Inspector). Vælg **Full Rect**, så den fylder hele skærmen.
  - Tilføj en **HBoxContainer** som barn af ''CenterContainer''. Sæt //Theme Overrides → Constants → Separation// til 40.
  - Træk ''Scenes/InventoryUI.tscn'' ind på ''HBoxContainer''. Omdøb den til ''PlayerInventoryUI''.
  - Højreklik på ''PlayerInventoryUI'', og vælg **Access as Unique Name**. Der kommer et ''%'' ved siden af navnet.

Træet skal se sådan ud:

<code>
Main (Node)
├── Player (Player.tscn)
└── UI (CanvasLayer)
    └── CenterContainer
        └── HBoxContainer
            └── %PlayerInventoryUI (InventoryUI.tscn)
</code>

===== Scriptet til Main =====

Højreklik på ''Main'', vælg **Attach Script**, vælg **C#**, og sæt stien til ''Scripts/Game/Main.cs''. Erstat indholdet med:

<code csharp Main.cs>
using Godot;

// Main samler det hele: den fortæller UI'et, hvilket inventory det skal vise.
public partial class Main : Node
{
    public override void _Ready()
    {
        Player player = GetNode<Player>("Player");

        // "%" finder en node med "Access as Unique Name", uanset hvor den ligger i scenen.
        InventoryUI playerUi = GetNode<InventoryUI>("%PlayerInventoryUI");

        // Fortæl UI'et, hvilket inventory det skal vise.
        playerUi.SetInventory(player.Inventory);
    }
}
</code>

Fjern også test-linjen fra ''Player.cs''. Den skal nu se sådan ud:

<code csharp Player.cs>
using Godot;

// Spilleren er en "ejer" af et inventory.
// Inventory-komponenten ligger som barn i Player-scenen.
public partial class Player : Node
{
    public Inventory Inventory { get; private set; }

    public override void _Ready()
    {
        Inventory = GetNode<Inventory>("Inventory");
    }
}
</code>

**Forklaring:**

  * ''player.Inventory'' er den property, du lavede i [[trin2_inventory|trin 2]]. ''Main'' kan få fat i spillerens inventory uden at kende scenens indre opbygning.
  * ''playerUi.SetInventory(player.Inventory)'' er hele forbindelsen mellem data og visning. UI'et opretter slots og viser items.
  * Rækkefølgen i ''_Ready'' er vigtig. Børn bliver klar før deres forældre, så når ''Main._Ready()'' kører, er ''Player'' og ''PlayerInventoryUI'' begge klar. ''Player.Inventory'' er sat, og UI'et har fundet sit ''Grid''.

===== Kør spillet =====

  - Tryk på **Build**.
  - Tryk på **Run Project** (''F5''). Godot spørger, hvilken scene der er hovedscene. Vælg ''Scenes/Main.tscn''. (Du kan også ændre den under //Project → Project Settings → Application → Run → Main Scene//.)
  - Du skal se et 3x3 inventory midt på skærmen. De første slots viser dine start-items.
  - Hold musen over et item. Efter et øjeblik kommer en tooltip med itemets navn.

===== Eksperimenter =====

  * Åbn ''Player.tscn'', markér ''Inventory'', og sæt **Slot Count** til 12. Kør igen. Gridet får fire rækker, og baggrunden vokser med. Du har ikke ændret en linje kode. Sæt tallet tilbage til 9.
  * Tilføj flere start-items til spillerens inventory, og se, at de lægger sig i de næste slots.

===== Tjekliste =====

  * Hovedscenen er ''Main.tscn'', og spillet viser et 3x3 inventory.
  * Items har ikoner og tooltips.
  * Der er ingen røde fejl i Output.

[[trin6_kiste|Næste: Genbrug i en kiste →]]