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ść.

_{Published using WordPress Blurt Publisher from https://godot.com.pl.}