Una barra di punteggio è un elemento dell'interfaccia utente che visualizza le informazioni del giocatore che sono importanti per il gameplay del tuo gioco, come le loro statistiche di livello, il conteggio della valuta o gli oggetti potenziatori nel loro inventario. Visualizzando le barre di punteggio direttamente sullo schermo del giocatore, puoi mantenere la loro attenzione su ciò di cui hanno bisogno per raggiungere vari obiettivi all'interno del tuo gioco.
Utilizzando il file .rbxl di Gold Rush come riferimento, questo tutorial ti mostra come creare una barra di punteggio che tiene traccia della quantità di oro che i giocatori raccolgono, inclusa la guida su:
- Creare un frame nella parte superiore centrale dello schermo.
- Aggiungere un'icona a forma di corona che comunica cosa sta tracciando la barra di punteggio senza alcuna guida testuale.
- Inserire un testo di punteggio che registra la quantità di oro raccolto dal giocatore.
- Testare il design della tua interfaccia utente su più dispositivi emulati per rivedere il suo aspetto su schermi e rapporti d'aspetto diversi.
Come per tutte le creazioni 2D, ci sono molti modi per raggiungere un obiettivo particolare. Puoi creare i tuoi asset 2D in strumenti UI di terze parti e seguire il tuo design.
Crea il frame
Per visualizzare gli elementi dell'interfaccia utente su ogni schermo dei giocatori, puoi creare un oggetto ScreenGui nel servizio StarterGui. Gli oggetti ScreenGui sono i contenitori principali per l'interfaccia utente sullo schermo, e il servizio StarterGui copia i suoi contenuti nel contenitore PlayerGui di ciascun giocatore man mano che entrano in un gioco.
Dopo aver creato un oggetto ScreenGui, puoi creare e personalizzare i suoi oggetti figlio GuiObjects in base allo scopo di ciascun contenitore. Per dimostrare questo concetto, questa sezione ti insegna come creare un oggetto ScreenGui con un oggetto figlio Frame che conterrà sia l'icona che il testo della barra di punteggio.
Oltre a personalizzare le proprietà del frame, questa sezione fornisce anche istruzioni su come aggiungere un oggetto figlio UISizeConstraint e UIListLayout al frame. Questa tecnica garantisce che gli GuiObjects si dispongano automaticamente in orizzontale man mano che li inserisci nel frame, e che siano sempre leggibili su schermi di dimensioni più piccole. Se non segui questa guida, ogni GuiObject che aggiungi al frame si disporrà al di fuori del perimetro del frame.
Per ricreare il contenitore del frame all'interno del file di esempio Gold Rush:
Crea un oggetto ScreenGui per contenere la tua interfaccia utente sullo schermo.
- Nella finestra Explorer, passa il mouse su StarterGui e fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
- Inserisci un ScreenGui.
Crea un contenitore per l'intero componente dell'interfaccia utente della barra di punteggio.
Inserisci un Frame nell'oggetto ScreenGui.
Seleziona il nuovo Frame, quindi nella finestra Properties,
- Imposta AnchorPoint su 0.5, 0 per impostare il punto di origine del frame nella parte superiore centrale di esso (50% da sinistra a destra del frame e 0% dall'alto verso il basso del frame).
- Imposta BackgroundColor su 0.6 per rendere lo sfondo del frame nero.
- Imposta BackgroundTransparency su 0.6 per rendere lo sfondo del frame semi-trasparente.
- Imposta Position su {0.5, 0},{0.01, 0} per posizionare il frame vicino alla parte superiore centrale dello schermo (50% da sinistra a destra dello schermo e 1% dall'alto verso il basso dello schermo).
- Imposta Size su {0.25, 0},{0.08, 0} in modo che il frame occupi una grande porzione del centro dello schermo per attirare l'attenzione del giocatore (25% in orizzontale e 8% in verticale).
- Imposta Name su ScoreBarFrame.
Aggiungi una restrizione al frame in modo che i suoi contenuti siano sempre leggibili su schermi di piccole dimensioni.
- Inserisci un oggetto UISizeConstraint in ScoreBarFrame.
- Seleziona la nuova restrizione, quindi nella finestra Properties, imposta MinSize su 0, 40 per garantire che il frame non si riduca mai a meno di 40 pixel in verticale.
Aggiungi un oggetto layout al frame in modo che i suoi contenuti si dispongano da sinistra a destra e siano centrati verticalmente all'interno del perimetro del frame.
- Inserisci un oggetto UIListLayout in ScoreBarFrame.
- Seleziona il nuovo oggetto layout, quindi nella finestra Properties,
- Imposta FillDirection su Horizontal.
- Imposta VerticalAlignment su Center.
Aggiungi un'icona
Un'icona è un simbolo che rappresenta un'azione, un oggetto o un concetto in un gioco. Utilizzare icone che sono semplici e intuitive consente ai giocatori di riconoscere facilmente ciò che stai comunicando con la tua interfaccia utente senza utilizzare testo, che può ingombrare lo schermo e distogliere l'attenzione dai contenuti che contano.
Ad esempio, il campione utilizza un'icona a forma di corona d'oro semplice per indicare quanto oro un giocatore ha raccolto. Questa icona è facilmente riconoscibile come il goal più importante all'interno del gioco e include dettagli minimi in modo che rimanga leggibile sugli schermi dei dispositivi mobili.
Per ricreare l'icona della corona d'oro all'interno del file di esempio Gold Rush:
Inserisci un oggetto ImageLabel in ScoreBarFrame.
Nella finestra Explorer, passa il mouse su ScoreBarFrame e fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
Inserisci un ImageLabel.
Seleziona la nuova etichetta, quindi nella finestra Properties,
Imposta Image su rbxassetid://5673786644 per rendere l'icona una corona.
Imposta BackgroundTransparency su 1 per rendere lo sfondo dell'etichetta completamente trasparente.
Imposta LayoutOrder su 1. Questo garantisce che l'icona rimanga il primo GuiObject nel frame da sinistra a destra quando inserisci il testo nella sezione successiva del tutorial.
Imposta Size su {1.25,0},{1,0} per allargare l'area dell'etichetta oltre la larghezza totale del frame.
Imposta SizeConstraint su RelativeYY per preservare il rapporto d'aspetto dell'icona scalando la dimensione dell'etichetta con l'altezza del frame genitore.
Inserisci il testo del punteggio
Il testo del punteggio registra il punteggio del giocatore all'interno di un gioco, come quanti punti guadagnano all'interno di una partita. È importante che tutto il testo dell'interfaccia utente sia chiaro e facile da leggere in modo che i giocatori possano comprendere rapidamente le informazioni di cui hanno bisogno per avere successo nel tuo gioco.
Ad esempio, il campione utilizza un testo grande su uno sfondo di colore contrastante in modo che non si confonda con il rumore dello sfondo. Questo è particolarmente significativo per l'accessibilità perché garantisce che il testo rimanga leggibile mentre il giocatore si muove nello spazio 3D, che può includere oggetti che sono dello stesso colore del testo.
Per ricreare il testo del punteggio all'interno del file di esempio Gold Rush:
Inserisci un oggetto TextLabel in ScoreBarFrame.
Nella finestra Explorer, passa il mouse su ScoreBarFrame e fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
Inserisci un TextLabel.
Seleziona la nuova etichetta, quindi nella finestra Properties,
Imposta BackgroundTransparency su 1 per rendere lo sfondo dell'etichetta completamente trasparente.
Imposta Size su {1,0},{1,0} per allargare l'etichetta all'intero frame (100% in orizzontale e 100% in verticale del frame genitore). L'etichetta si estende oltre i confini del frame perché è spostata dall'icona.
Imposta SizeConstraint su RelativeYY per garantire che la dimensione dell'etichetta si scaldi con l'altezza del frame genitore e preservi il rapporto d'aspetto dell'icona. Questo passaggio rende anche l'etichetta quadrata e la mantiene all'interno dei confini del frame.
Imposta Font su GothamSSm per abbinare l'estetica dell'ambiente.
Imposta Text su 0 per iniziare il punteggio da zero.
Imposta TextColor3 su 255, 200, 100 per colorare il testo d'oro.
Imposta TextSize su 30 per rendere il testo più grande sullo schermo.
Imposta TextXAlignment su Left per garantire che il testo del punteggio rimanga allineato a sinistra vicino all'icona della corona, indipendentemente dal fatto che il punteggio del giocatore sia 0, 1.000 o 1.000.000.
Testa il design
L'Emulatore di Dispositivi di Studio ti consente di testare come i giocatori vedranno e interagiranno con la tua interfaccia utente su vari dispositivi. Questo strumento è una parte vitale della progettazione dell'interfaccia utente perché il rapporto d'aspetto della tua vista in Studio non riflette necessariamente il rapporto d'aspetto degli schermi che i giocatori utilizzano per accedere al tuo gioco, ed è importante che la tua interfaccia utente sia sia leggibile che accessibile su ogni dispositivo.
Ad esempio, se non testi la tua interfaccia utente su una gamma di dimensioni dello schermo, i giocatori con schermi grandi potrebbero non essere in grado di leggere il tuo testo o decifrare le tue icone, e i giocatori con schermi piccoli potrebbero non essere in grado di vedere lo spazio 3D perché gli elementi della tua interfaccia utente occupano troppo spazio sul display.
Per emulare la tua interfaccia utente su varie dimensioni dello schermo:
Dal menu Test di Studio, attiva l'Emulatore di Dispositivi.
Nel menu a discesa della risoluzione, seleziona Risoluzione Reale. Questo ti consente di vedere la vera risoluzione dei tuoi elementi dell'interfaccia utente sul dispositivo che stai emulando.
Nel menu a discesa dei dispositivi, seleziona almeno un dispositivo all'interno delle sezioni Telefono, Tablet, Desktop e Console.
