Una barra di punteggio è un elemento dell'interfaccia utente che visualizza informazioni sui giocatori che sono importanti per il gameplay della tua esperienza, come le loro statistiche di livellamento, il conteggio della valuta o gli oggetti potenziati nel loro inventario. Mostrando 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 della tua esperienza.
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, comprese le indicazioni su:
- Creazione di un frame nella parte superiore centrale dello schermo.
- Aggiunta di un'icona a forma di corona che comunica ciò che la barra di punteggio sta monitorando senza alcuna guida testuale.
- Inserimento di un testo di punteggio che registra la quantità di oro raccolta dal giocatore.
- Testare il design della tua interfaccia utente su più dispositivi emulati per rivedere il suo aspetto su diversi schermi e rapporti di aspetto.
Come per tutte le creazioni 2D, ci sono molti modi per raggiungere un particolare obiettivo. Puoi creare i tuoi asset 2D in strumenti di interfaccia utente di terze parti e seguire il tuo design.
Crea il frame
Per visualizzare elementi dell'interfaccia utente sullo schermo di ogni giocatore, 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 ogni giocatore quando entrano in un'esperienza.
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 orizzontalmente quando li inserisci nel frame e che siano sempre leggibili su schermi di dimensioni ridotte. Se non segui queste indicazioni, 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 Gold Rush:
Crea un oggetto ScreenGui per contenere la tua interfaccia utente sullo schermo.
- Nella finestra Explorer, passa sopra 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 all'interno dell'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 parte del centro dello schermo per catturare l'attenzione del giocatore (25% orizzontalmente e 8% verticalmente).
- Imposta Name su ScoreBarFrame.
Aggiungi una restrizione al frame affinché i suoi contenuti siano sempre leggibili su schermi di piccole dimensioni.
- Inserisci un oggetto UISizeConstraint all'interno di 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 verticalmente.
Aggiungi un oggetto layout al frame affinché i suoi contenuti si dispongano da sinistra a destra e si centri verticalmente all'interno del perimetro del frame.
- Inserisci un oggetto UIListLayout all'interno di 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'esperienza. Utilizzare icone che siano 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 una semplice icona a forma di corona d'oro per indicare quanto oro un giocatore ha raccolto. Questa icona è facilmente riconoscibile come il goal più importante all'interno dell'esperienza e include dettagli minimi in modo che rimanga leggibile sugli schermi dei dispositivi mobili.
Per ricreare l'icona a forma di corona d'oro all'interno del file Gold Rush:
Inserisci un oggetto ImageLabel all'interno di ScoreBarFrame.
Nella finestra Explorer, passa sopra 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 l'intera larghezza del frame.
Imposta SizeConstraint su RelativeYY per preservare il rapporto di aspetto dell'icona ridimensionando la dimensione dell'etichetta con l'altezza del frame padre.
Inserisci il testo di punteggio
Il testo di punteggio registra il punteggio del giocatore all'interno di un'esperienza, come quanti punti guadagna in un match. È importante che tutto il testo dell'interfaccia utente sia chiaro e facile da leggere affinché i giocatori possano comprendere rapidamente le informazioni necessarie per avere successo all'interno della tua esperienza.
Ad esempio, il campione utilizza un testo grande su uno sfondo di colore contrastante in modo che non si mescoli con il rumore dello sfondo. Questo è particolarmente significativo per l'accessibilità poiché garantisce che il testo rimanga leggibile mentre il giocatore si muove nello spazio 3D, che potrebbe includere oggetti che sono dello stesso colore del testo.
Per ricreare il testo di punteggio all'interno del file Gold Rush:
Inserisci un oggetto TextLabel all'interno di ScoreBarFrame.
Nella finestra Explorer, passa sopra 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% orizzontalmente e 100% verticalmente del frame padre). L'etichetta si estende oltre i confini del frame perché viene spostata dall'icona.
Imposta SizeConstraint su RelativeYY per garantire che la dimensione dell'etichetta si scaldi con l'altezza del frame padre e preservi il rapporto di 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 di 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 Dispositivo 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 nella progettazione dell'interfaccia utente poiché il rapporto d'aspetto della tua vista nel Studio non riflette necessariamente il rapporto d'aspetto degli schermi che i giocatori usano per accedere alla tua esperienza, 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 un'ampia 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 occupano troppo spazio sul display.
Per emulare la tua interfaccia su varie dimensioni dello schermo:
Dal menu Test di Studio, attiva l'Emulatore di Dispositivo.
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 del dispositivo, seleziona almeno un dispositivo nelle sezioni Telefono, Tablet, Desktop e Console.
