Pulsanti interattabili

Questo tutorial ti mostra come creare pulsanti sullo schermo per menu, azioni dell'interfaccia e altro ancora.

Tipi di pulsanti

Ci sono due tipi di oggetti pulsante che puoi utilizzare nei tuoi design UI:

TextButton	ButtonImage
Un TextButton è simile a un TextLabel except che i giocatori possono attivarlo con un clic/tap. It also shares many of the same visual properties — font, background color, stroke color, etc.	Un ImageButton è come un'interattiva versione dell'oggetto ImageLabel . Condivide anche la maggior parte delle stesse proprietà della sua non-button counterpart.

Creazione di un pulsante

I seguenti passaggi mostrano come aggiungere un ImageButton alla schermata e fletterlo tra tre appariizioni a seconda dell'interazione del Giocatore.

1. Nella finestra Explorer, passa il mouse sull'oggetto StarterGui , fai clic sul pulsante + e inserisci un ScreenGui .

   

2. Seleziona il nuovo oggetto ScreenGUI e, in modo simile, inserisci un ImageButton .

   

   Questo aggiungerà un pulsante di immagine vuoto all'angolo della vistadi gioco.

3. Per una migliore pratica, rinomina il nuovo pulsante in base al suo scopo, ad esempio pulsante mappa .

   

Dimensione

Per il pulsante che si adatta dinamicamente su diversi dispositivi e schermi, è meglio utilizzare le proprietà Scala .

1. Nella finestra Proprietà, individua la proprietà Dimensione e fai clic sulla freccia per espandere il suo albero.

   

2. Imposta le seguenti proprietà di dimensioni:

   

3. Limitare il pulsante a una scatola di dimensioni quadrata impostando SizeLimit a YY Relativo .

   

Scaling

La dimensione attuale dovrebbe funzionare bene su un telefono, ma la scala X/Y di 0.15 (15%) potrebbe sembrare troppo grande sullo schermo del computer. Per correggere questo, puoi aggiungere un UISizeConstraint .

1. Passa il mouse sull'oggetto ButtonMappa e inserisci un UISizeConstraint .

   

2. Seleziona il nuovo oggetto di restrizione di dimensioni e imposta la sua proprietà MaxSize su 90, 90 .

   

Posizione

I pulsanti dovrebbero essere generalmente spostati all'interno della portata di un Giocatoresu dispositivi mobili, ad esempio l'area inferiore destra dello schermo.

1. Cambia la proprietà Ancoraggio punto del pulsante in 0.5, 1 in modo che la posizione sia basata sul suo punto di centro inferiore.

   

2. Espandi l'albero della posizione del pulsante e imposta i seguenti valori di proprietà. Questo sposterà il pulsante vicino al pulsante di salto predefinito che appare su telefoni/tabelle.

   

Immagini

Questo pulsante ha bisogno di tre immagini personalizzate - la sua apparenza normale sullo schermo, un'aspettohover-over e una immagine finale per quando il giocatore lo premere.

Normale

Passa il mouse

Premuto

Impostare questi aspetti può essere fatto attraverso le proprietà Immagine , HoverImage e PressedImage .

1. Individua la proprietà Immagine del pulsante e pasta in rbxassetid://6025368017 , o usa la tua risorsa .

   

2. Per la Proprietà HoverImage , pasta in rbxassetid://6025452347 .

   

3. Per la Proprietà PressedImage , pasta in rbxassetid://6025454897 .

   

Stile

Per finalizzare l'aspetto del pulsante sullo schermo, apporta i seguenti aggiustamenti:

1. Imposta Trasparenza di sfondo su un valore di 1 per rendere il sfondo trasparente.

   

2. Ruota il pulsante leggermente impostando Rotazione a -5 .

   

Funzionalità pulsante

L'ultimo compito è quello di raccordare la funzionalità di base dei pulsanti.

1. Nella finestra Explorer, passa il mouse sull'oggetto MapButton e inserisci un Script locale .

   

2. Nell'script, copia e pasta in queste nuove righe:

   local button = script.Parent
   
   local function onButtonActivated()
   	print("Button activated!")
   	-- Esegui qui l'azione del pulsante richiesta
   end
   
   button.Activated:Connect(onButtonActivated)

Questo semplice script del pulsante funziona come segue:

• La prima linea imposta un pulsante variabile che dice al script quale oggetto specifico è legato. In questo caso è legato al ImageButton , il padre dello script.
• La funzione onButtonActivated gestisce l'attivazione del pulsante. All'interno, dovresti eseguire l'azione intenzionale come l'apertura del menu principale del Gioco.
• La linea finale connette il pulsante alla funzione onButtonActivated con l'evento Activated. Ciò causerà che la funzione venga eseguita ogni volta che un giocatore attiva il pulsante in Gioco.

Risolvere i problemi

Se il pulsante non funziona come previsto, controlla quanto Seguendo:

• Assicurati di aver utilizzato un lato client LocalScript , non un lato server Script .
• Assicurati che il LocalScript sia un figlio diretto del pulsante oggetto (non un figlio della Class.ScreenGui container).
• Assicurati che le proprietà Image , HoverImage e PressedImage del tuo pulsante siano impostate sulle risorse dell'immagine appropriate.