← Forrige: Inventory-UI | Forside | 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.

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.

• 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 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.

1. Opret en ny scene med Node som rod. Omdøb den til Main. Gem som Scenes/Main.tscn.
2. Træk Scenes/Player.tscn fra FileSystem ind på Main. Spilleren bliver nu et barn af Main med navnet Player.
3. Højreklik på Main, vælg Add Child Node, og tilføj en CanvasLayer. Omdøb den til UI.
4. 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.
5. Tilføj en HBoxContainer som barn af CenterContainer. Sæt Theme Overrides → Constants → Separation til 40.
6. Træk Scenes/InventoryUI.tscn ind på HBoxContainer. Omdøb den til PlayerInventoryUI.
7. 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:

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

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

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);
    }
}

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

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");
    }
}

Forklaring:

• player.Inventory er den property, du lavede i 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.

1. Tryk på Build.
2. 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.)
3. Du skal se et 3×3 inventory midt på skærmen. De første slots viser dine start-items.
4. Hold musen over et item. Efter et øjeblik kommer en tooltip med itemets navn.

• Å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.

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

Næste: Genbrug i en kiste →