====== Inventory UI ======


Grafik anvendt i denne tutorial kan hentes her:

  * https://makertech.itch.io/additional-art-for-godot-4-tutorial

====== Inventory-system i Godot 4 med C# ======

Denne tutorial lærer dig at bygge et simpelt, genbrugeligt inventory-system i Godot 4 med C#. Du bygger systemet trin for trin og kan køre og teste efter hvert trin.

===== Det bygger du =====

  * Et inventory med **3x3 slots**, vist i et grid oven på en baggrund, der skalerer pænt (''NinePatchRect'').
  * En **genbrugelig inventory-komponent**, der kun indeholder data og er adskilt fra visningen (UI).
  * **Samme komponent to steder:** hos en spiller og i en kiste.

Systemet er //non-stackable//: hver slot rummer højst ét item. Strukturen er forberedt, så stacking kan tilføjes senere, men det implementerer vi ikke her. Vi bruger heller ikke signals, delegates eller drag and drop.

===== Forudsætninger =====

Tutorialen antager, at du allerede har en ''Item''-klasse (en ''Resource'') med felterne ''Name'' og ''Icon'', eventuelle subtyper som ''WeaponItem'' og ''PotionItem'' og nogle item-filer (''.tres''). De gennemgås ikke her. Se [[..:trin1_opsaetning|trin 1]].

===== Indholdsfortegnelse =====

  - [[..:trin1_opsaetning|Trin 1: Opsætning af projekt og assets]]
  - [[..:trin2_inventory|Trin 2: Inventory som genbrugelig data-komponent]]
  - [[..:trin3_slot_ui|Trin 3: Grafik til én slot]]
  - [[..:trin4_inventory_ui|Trin 4: Inventory-UI med 9-patch baggrund og grid]]
  - [[..:trin5_spiller|Trin 5: Vis spillerens inventory]]
  - [[..:trin6_kiste|Trin 6: Genbrug i en kiste]]
  - [[..:trin7_opsamling|Trin 7: Opsamling og forslag til udvidelser]]

Hjælpesider:

  * [[..:ordliste|Ordliste]] med nye begreber samlet ét sted
  * [[..:fejlfinding|Fejlfinding]] med de mest almindelige fejl og løsninger

===== Sådan er systemet bygget =====

Systemet består af tre lag, som hver har ét ansvar:

^ Lag ^ Hvad det gør ^ Filer ^
| **Data** | Ved, hvilke items der ligger i hvilke slots | ''InventorySlot'', ''Inventory'' |
| **UI** | Tegner indholdet af et inventory på skærmen | ''SlotUI'', ''InventoryUI'' |
| **Ejere** | Har et inventory og bestemmer, hvad det bruges til | ''Player'', ''Chest'', ''Main'' |

Fordi data og UI er adskilt, kan den samme ''Inventory''-komponent bruges af en spiller, en kiste eller en fjende, og det samme UI kan vise dem alle. Det er den vigtigste idé i hele tutorialen.

===== Mappestruktur =====

Du opretter disse mapper i Godot i [[..:trin1_opsaetning|trin 1]]:

<code>
res://
├── Sprites/             billeder 
├── Resources/
│   └── Items/           dine item-filer (.tres)
├── Scenes/              alle .tscn-filer
└── Scripts/
    ├── Items/           dine Item-klasser (har du allerede)
    ├── Inventory/       InventorySlot.cs, Inventory.cs, SlotUI.cs, InventoryUI.cs
    └── Game/            Player.cs, Chest.cs, Main.cs
</code>

===== Sådan bruger du tutorialen =====

  * Gå igennem trinene i rækkefølge. Hvert trin bygger på det forrige.
  * Kopiér ikke koden blindt. Læs forklaringen, og find ud af, hvorfor koden ser ud, som den gør.
  * Filnavne, klassenavne og nodenavne skal stå præcis, som de er skrevet. Godot skelner mellem store og små bogstaver.
  * Efter hver ændring i C#-kode skal du trykke på **Build** (hammer-ikonet øverst til højre i Godot). Ellers opdager editoren ikke ændringerne.
  * Hvis noget går galt, så kig på siden [[..:fejlfinding|Fejlfinding]].

Du er klar til at starte: [[..:trin1_opsaetning|Gå til trin 1 →]]