Jak stworzyć interfejs handlu (GUI) w Godot 4?

Interfejs handlu to kluczowy element w grach RPG, survivalowych czy strategicznych. W tym przewodniku omówimy krok po kroku, jak stworzyć interfejs handlu w Godot 4, umożliwiający graczowi przeglądanie, kupowanie i sprzedawanie przedmiotów.

---

1. Projektowanie podstaw interfejsu

Struktura sceny interfejsu handlu

TradeUI Control ├── Background Panel ├── PlayerItems GridContainer ├── VendorItems GridContainer ├── TradeActions VBoxContainer │ ├── BuyButton Button │ ├── SellButton Button ├── SelectedItemDetails VBoxContainer │ ├── ItemIcon TextureRect │ ├── ItemName Label │ ├── ItemPrice Label

Opis komponentów:

- Background : Panel wyświetlający tło interfejsu. - PlayerItems : Lista przedmiotów gracza np. GridContainer z przyciskami reprezentującymi przedmioty . - VendorItems : Lista przedmiotów sprzedawcy analogiczna do PlayerItems . - TradeActions : Kontener dla przycisków akcji kupowanie, sprzedawanie . - SelectedItemDetails : Sekcja wyświetlająca szczegóły zaznaczonego przedmiotu.

---

2. Tworzenie GUI w edytorze

a Tło interfejsu

1. Dodaj węzeł Control i nazwij go TradeUI . 2. Dodaj dziecko Panel i nazwij je Background . - W Inspector ustaw rozmiar panelu, aby obejmował cały interfejs.

b Siatka na przedmioty PlayerItems i VendorItems

1. Dodaj dwa węzły GridContainer : PlayerItems i VendorItems . - W Inspector ustaw liczbę kolumn w siatce np. Columns = 4 . 2. Dodaj kilka przycisków Button do każdego GridContainer , które będą reprezentować przedmioty. - Tekst na przyciskach może zawierać nazwę i cenę przedmiotu.

c Przycisk akcji

1. Dodaj węzeł VBoxContainer jako dziecko TradeActions . 2. Dodaj dwa przyciski Button do VBoxContainer : - BuyButton : Tekst „Kup”. - SellButton : Tekst „Sprzedaj”.

d Szczegóły zaznaczonego przedmiotu

1. Dodaj VBoxContainer o nazwie SelectedItemDetails . 2. Dodaj węzły: - TextureRect ItemIcon dla ikony przedmiotu. - Label ItemName dla nazwy przedmiotu. - Label ItemPrice dla ceny przedmiotu.

---

3. Skrypt interfejsu handlu

a Obsługa wyświetlania przedmiotów

Stwórz skrypt TradeUI.gd i przypisz go do węzła TradeUI :

extends Control

@export var player inventory: Node @export var vendor inventory: Node @onready var player items grid = $PlayerItems @onready var vendor items grid = $VendorItems

Aktualizuj listę przedmiotów func update items : update grid player items grid, player inventory.items update grid vendor items grid, vendor inventory.items

func update grid grid, items : grid.clear children for item in items: var button = Button.new button.text = "%s\n%d zł".format item.name, item.price button.icon = item.icon button.connect "pressed", self, " on item selected", item grid.add child button

Obsługa zaznaczenia przedmiotu func on item selected item : show item details item

func show item details item : $SelectedItemDetails/ItemIcon.texture = item.icon $SelectedItemDetails/ItemName.text = item.name $SelectedItemDetails/ItemPrice.text = "Cena: %d zł".format item.price

b Obsługa przycisków akcji

Dodaj logikę dla przycisków „Kup” i „Sprzedaj”:

func on BuyButton pressed : var selected item = get selected item if selected item: trade system.buy item selected item update items

func on SellButton pressed : var selected item = get selected item if selected item: trade system.sell item selected item update items

func get selected item : Funkcja zwracająca zaznaczony przedmiot możesz dostosować logikę return $SelectedItemDetails/ItemName.text Przykład

---

4. Funkcjonalności dodatkowe

a Wskaźnik złota

Dodaj etykiety wyświetlające ilość złota gracza i sprzedawcy:

@onready var player gold label = $PlayerGold @onready var vendor gold label = $VendorGold

func update gold : player gold label.text = "Złoto: %d".format player inventory.gold vendor gold label.text = "Złoto sprzedawcy: %d".format vendor inventory.gold

b Filtrowanie przedmiotów

Dodaj pole wyszukiwania do filtrowania przedmiotów:

@onready var search box = $SearchBox

func on SearchBox text changed new text : filter items new text

func filter items keyword : for child in $PlayerItems.get children : child.visible = keyword in child.text for child in $VendorItems.get children : child.visible = keyword in child.text

c Animacje otwierania/zamykania

Dodaj AnimationPlayer dla płynnego otwierania i zamykania interfejsu:

func open trade : $AnimationPlayer.play "open"

func close trade : $AnimationPlayer.play "close"

---

5. Testowanie interfejsu

1. Debugowanie : - Użyj print do sprawdzania poprawności transakcji. - Włącz widoczność kształtów kolizji GUI opcja w Debug . 2. Ustawienia początkowe : - Dodaj przykładowe przedmioty do ekwipunku gracza i sprzedawcy. - Upewnij się, że interfejs reaguje na dodawanie/usuwanie przedmiotów.

---

Podsumowanie

Stworzenie interfejsu handlu w Godot 4 wymaga integracji elementów GUI z logiką gry i mechaniką ekwipunku. Dzięki narzędziom takim jak GridContainer i skryptowaniu możesz stworzyć dynamiczny i interaktywny system handlu. Rozbudowa systemu o dodatkowe funkcjonalności, takie jak filtrowanie przedmiotów czy animacje, zwiększy jego atrakcyjność i użyteczność.<center <sub Published using <a href=' Blurt Publisher</a from <a href='