[Zettamax]

Ciao a tutti,
Con questo tutorial passo-passo vi spiegherò come realizzare la base per un menù principale su Godot 4.2
Il risultato finale sarà questo:


Asset utilizzati:
- Pixel Art Book(https://foxeldev.itch.io/pixelbooks) licenza: CC0

Passi preliminari
Prima di iniziare, aprite godot e create un nuovo progetto.
Questo tutorial l'ho realizzato col render compatibilità, ma dovrebbe funzionare anche con le altre modalità.
Create le cartelle "scene", "script" e "asset" all'interno del progetto, non è obbligatorio ma meglio essere ordinati sin dall'inizio.

Passo 1: Configurazione Libro
Create una nuova scena 2d.
Trascinate dall'esplora risorse alla cartella asset del progetto il png del pixel art book, potete scegliere uno qualsiasi dei quattro file, nel mio caso ho scelto "RADL_Book".
Aggiungiamo nella cartella asset uno "SpriteFrames" facendo tasto destro sul area del progetto, "crea nuovo"-> "risorsa...", potete dargli qualsiasi nome.
Dalla barra centrale, selezioniamo "SpriteFrames", eliminiamo l'animazione di default cliccando sull'icona del cestino, quindi aggiungiamo 2 animazioni, "open" e "next_page".
Per la prima animazione clicchiamo l'icona che sembra un quadratino per aggiungere fotogrammi, selezioniamo il nostro png del libro, impostiamo 7 divisioni orizzontali ed 1 verticale, quindi clicchiamo i primi 4 frame(da 0 a 3), infine facciamo "aggiungi 4 frame".
Per l'animazione "next_page" procediamo come prima, l'unica cosa di diverso saranno i frames da selezionare, in questo caso selezioniamo gli ultimi 3 e successivamente il quart'ultimo, così da avere l'animazione proprio in quest'ordine.

Allego qui sotto l'immagine dei frames dell'ultima animazione con anche evidenziato il tastino che abbiamo premuto prima per aggiungere i fotogrammi.


Passo 2: Configurazione scena
Aggiungiamo un nuovo animatedSprite2D node nella scena e aggiungiamoli, come proprietà "SpriteFrames" il file delle animazioni che abbiamo creato alla fine del passo 1(ha estensione *.tres)
Riposizioniamo il node e modifichiamo le dimensioni.
Aggiungiamo un button node, posizioniamolo sopra al libro, ma leggermente spostato in alto, dentro la casella text scriviamo "play"; per modificare le dimensioni del testo dobbiamo andare su "theme ovverides"-> "Font Size" ed impostiamo un valore che vi soddisfa.
Infine clicchiamo sull'icona del button dell'occhio per renderlo non visibile.

Passo 3: Codice
Selezioniamo il node del libro e aggiungiamoli uno script(tasto destro -> attach script).
Con lo stesso node selezionato, clicchiamo su "Nodo" in alto a dx per aprire il menù dei segnali, queste sono funzioni specifiche di quel tipo di nodo che possiamo andare ad intercettare.
Facciamo tasto destro su "animation_finised()" e poi scegliamo "connetti...", e selezioniamo il nodo del libro.
Aggiungiamo un segnale "pressed()" dal nodo del pulsante play e connettiamo come prima.
Apriamo lo script ed aggiungiamo questo codice:

Codice:

extends AnimatedSprite2D


# Called when the node enters the scene tree for the first time.
func _ready():
    # eseguiamo l'animazione che apre il libro
    play("open")


# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
    pass


# segnale che viene eseguito al termine di qualsiasi animazione
func _on_animation_finished():
    # è terminata l'animazione di apertura del libro?
    if(animation == "open"):
        # rendi visibile il pulsante play
        $"../Btn_Play".visible = true

# è stato premuto il tasto play?
func _on_btn_play_pressed():
    # carica una nuova scena
    get_tree().change_scene_to_file("res://scene/level_1.tscn")

Ho spiegato cosa fa ogni funzione nei commenti


Se ora eseguiamo la scena(nel caso ci venisse chiesto, impostiamola come scena primaria), vedremo il libro aprirsi e poi rendere disponibile il tastino play come nella gif ad inizio post.

In questo tutorial non abbiamo usato l'animazione che sfoglia le pagine del libro, se volte usarla(ad esempio per aprire il menù impostazioni) vi basterà chiamare la funzione "play(...)" e mostrare nascondere gli elementi che vi interessa come abbiamo fatto qui per il tasto play.

Spero che sia utile!