====== Trin 3: Grafik til én slot ======

[[trin2_inventory|← Forrige: Inventory]] | [[start|Forside]] | [[trin4_inventory_ui|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.

===== Hvorfor en scene til én slot? =====

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.

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

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

===== Opret scenen =====

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

Træet skal se sådan ud:

<code>
SlotUI (PanelContainer)
└── Icon (TextureRect)
</code>

===== Indstillinger i Inspector =====

Markér ''SlotUI'' (roden):

^ Sted i Inspector ^ Indstilling ^ Værdi ^
| Layout → Custom Minimum Size | x og y | 64 og 64 |
| Layout → Mouse → Filter | Mouse Filter | Stop |

Markér ''Icon'':

^ Sted i Inspector ^ Indstilling ^ Værdi ^
| Expand Mode | Expand Mode | Ignore Size |
| Stretch Mode | Stretch Mode | Keep Aspect Centered |
| Layout → Mouse → Filter | Mouse Filter | Ignore |

**Hvorfor de værdier?**

  * **Custom Minimum Size 64x64** 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.

===== Script til slotten =====

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

<code csharp 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;
        }
    }
}
</code>

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

===== Test =====

  - Kør scenen med ''F6''. Du ser en lille, mørk firkant i hjørnet af vinduet. Det er slotten.
  - 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.
  - Fjern billedet igen (klik på pilen ved feltet, vælg **Clear**), og gem. Koden sætter selv billedet senere.

===== Tjekliste =====

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

[[trin4_inventory_ui|Næste: Inventory-UI →]]