Trin 3: Grafik til én slot

← Forrige: Inventory | Forside | Næste: Inventory-UI →

I dette trin laver du en lille scene, der viser én slot: en ramme med et item-ikon i. Senere bliver den gentaget ni gange i gridet.

Et inventory med 9 slots er ni ens ting. I stedet for at bygge dem ni gange i hånden laver vi én slot-scene og opretter den ni gange med kode. Vil du ændre udseendet på slots, ændrer du det ét sted. Vil du have 12 slots, opretter koden bare 12.

• Control er den slags noder, der bruges til brugerflade (UI): knapper, tekst, paneler osv.
• En Container er en Control, der automatisk placerer og dimensionerer sine børn. Det er derfor, vi ikke skal regne positioner ud selv.
• PanelContainer er en container med en baggrund (et panel). Børnene fylder panelet ud. Vi bruger den som selve slot-rammen.
• TextureRect er en node, der viser et billede. Vi bruger den til item-ikonet.
• En tooltip er den lille tekstboks, der dukker op, når musen hviler på noget.

1. Vælg Scene → New Scene, og vælg Other Node. Søg efter PanelContainer, og vælg den som rod.
2. Omdøb roden til SlotUI.
3. Højreklik på SlotUI, vælg Add Child Node, og vælg TextureRect. Omdøb den til Icon.
4. Gem scenen som Scenes/SlotUI.tscn.

Træet skal se sådan ud:

SlotUI (PanelContainer)
└── Icon (TextureRect)

Markér SlotUI (roden):

Markér Icon:

Hvorfor de værdier?

• Custom Minimum Size 64×64 sikrer, at en tom slot stadig fylder lidt. Uden den ville en tom slot skrumpe til næsten ingenting.
• Expand Mode: Ignore Size gør, at ikonet tilpasser sig slottens størrelse. Som standard vil en TextureRect være lige så stor som sit billede, og så ville store billeder gøre slots forskellige i størrelse.
• Keep Aspect Centered bevarer billedets proportioner og placerer det midt i slotten. Ikonet bliver ikke strakt skævt.
• Mouse Filter bestemmer, om en node reagerer på musen. Stop betyder, at noden tager imod musehændelser, og Ignore betyder, at musen går „igennem“ til noden under. Slotten skal reagere på musen (til tooltip), og ikonet skal ikke stå i vejen for den.

Højreklik på SlotUI (roden), vælg Attach Script, vælg C#, og sæt stien til Scripts/Inventory/SlotUI.cs. Erstat indholdet med:

SlotUI.cs

using Godot;
 
// SlotUI viser én slot. Den er "dum": den ved ikke, hvilket inventory den tilhører,
// og får bare at vide, hvilket item den skal vise.
public partial class SlotUI : PanelContainer
{
    private TextureRect _icon;
 
    public override void _Ready()
    {
        // Find barnet "Icon" i scenen. Navnet skal stå helt præcist.
        _icon = GetNode<TextureRect>("Icon");
    }
 
    // Viser et item i slotten. Er item null, vises en tom slot.
    public void SetItem(Item item)
    {
        if (item == null)
        {
            _icon.Texture = null;
            TooltipText = "";
        }
        else
        {
            _icon.Texture = item.Icon;
            TooltipText = item.Name;
        }
    }
}

Forklaring:

• SlotUI : PanelContainer betyder, at scriptet udvider en PanelContainer. Scriptet skal altid arve fra den nodetype, det sidder på.
• GetNode<TextureRect>("Icon") finder barnet med navnet Icon. Vi gør det i _Ready(), fordi børnene først er klar der. Vi gemmer resultatet i _icon, så vi ikke skal lede efter noden hver gang.
• SetItem(Item item) er den eneste måde, andre får slotten til at vise noget. Slotten ved ikke, hvilket inventory den er en del af. Den får bare et item at vide og viser det. Det gør den nem at genbruge og nem at forstå.
• Er item lig med null, fjerner vi billedet og nulstiller tooltip. Ellers viser vi ikonet og sætter TooltipText til itemets navn. Slotten behøver ikke vide, om itemet er et våben eller en drik. Alle items har et navn og et ikon.

Tryk på Build.

1. Kør scenen med F6. Du ser en lille, mørk firkant i hjørnet af vinduet. Det er slotten.
2. For at se ikonet midlertidigt: Markér Icon, og træk et ikon ind i feltet Texture. Ikonet skal fylde slotten, uden at slotten ændrer størrelse.
3. Fjern billedet igen (klik på pilen ved feltet, vælg Clear), og gem. Koden sætter selv billedet senere.

• SlotUI.tscn findes og viser en 64×64 firkant.
• Du har fjernet test-billedet fra Icon.
• Build giver ingen fejl.

Næste: Inventory-UI →