Implementare i design in Studio | Documentazione

Implementare i tuoi design è il processo di creazione dei tuoi wireframe in Studio utilizzando sia elementi UI integrati che personalizzati con script che attivano la tua UI in modo contestuale. Questo entusiasmante passo del tutorial è dove puoi vedere tutti i tuoi design e il tuo duro lavoro unirsi in un insieme coeso di flussi di lavoro che sono completi e pronti per l'interazione dei giocatori.

Utilizzando il gioco di laser tag di esempio file .rbxl come riferimento, questa sezione del curriculum di design dell'interfaccia utente ti mostra come dare vita alla tua pianificazione UI, inclusa la guida su:

Recuperare gli ID degli asset dalla libreria di asset UI in modo da poter ricreare i componenti UI del gioco di laser tag di esempio.
Emulare vari dispositivi direttamente in Studio per vedere come la tua UI si visualizza su diversi schermi e rapporti d'aspetto.
Creare oggetti ScreenGui, SurfaceGui e BillboardGui per visualizzare la tua UI sugli schermi dei giocatori, sulle superfici delle parti e all'interno dello spazio 3D, rispettivamente.

Dopo aver esaminato le tecniche in questa sezione, puoi applicarle ai tuoi progetti per creare componenti UI entusiasmanti che aiutano i giocatori a navigare in ciò che possono fare all'interno dei tuoi giochi.

Le istruzioni in questa sezione del tutorial ti mostrano come ricreare esattamente i componenti UI utilizzando la Libreria di Asset di Design UI. Questo processo richiede circa 90 minuti o meno dall'inizio alla fine. Se non vuoi utilizzare i valori forniti, puoi regolare ogni elemento UI per soddisfare le specifiche del tuo gioco, o utilizzare il campione stesso per il resto del tutorial.

Ottieni la libreria di asset

Le librerie di asset sono collezioni di asset che puoi aggiungere al tuo inventario per un facile accesso e riutilizzo. La libreria di asset che utilizzerai per il tuo progetto dal Creator Store include nove asset di elementi UI 2D individuali e le versioni finali degli obiettivi, del selettore di blaster e dei componenti delle informazioni sui giocatori che stai creando in questa sezione del tutorial.

**Icona MultiBlaster**
rbxassetid://14309094777

**Icona SingleBlaster**
rbxassetid://14309094641

**Icona Team Rosa**
rbxassetid://14309678581

**Trapezio Inverso**
rbxassetid://14304827304

**Icona Team Verde**
rbxassetid://14309678701

**Fade Multidirezionale**
rbxassetid://14304827147

**Icona Pulsante Blast - Predefinito**
rbxassetid://18308375067

**Icona Pulsante Blast - Premuto**
rbxassetid://18308372597

**Icona Crosshair**
rbxassetid://14400935532

Icona Hit Marker
rbxassetid://14401148777

**Icona Freccia di Selezione**
rbxassetid://14309187282

**Border Fade**
rbxassetid://14309518632

Per ottenere la libreria di asset dal tuo inventario nel tuo gioco:

Aggiungi la libreria di asset al tuo inventario.
1. Naviga alla pagina dei dettagli della libreria di asset nel Creator Store.
2. Nell'angolo in alto a destra, fai clic sul pulsante Ottieni Modello. La libreria di asset è ora nel tuo inventario e puoi riutilizzare questi asset in qualsiasi progetto sulla piattaforma.
In Studio, naviga alla scheda Home, quindi fai clic sul pulsante Toolbox. Si apre la finestra Toolbox.
Nella finestra Toolbox, fai clic sulla scheda Inventario. Viene visualizzato il filtro I Miei Modelli.
Fai clic sul menu a discesa, quindi seleziona il filtro I Miei Pacchetti.
Fai clic sulla piastrella Componenti UI Finali, quindi nella finestra Explorer, seleziona Componenti Completati, quindi trascinali nel servizio StarterGui. Ora puoi abilitare uno qualsiasi dei componenti finali per fare riferimento al loro design.

Emula dispositivi

L'Emulatore di Dispositivi di Studio ti consente di testare come i giocatori vedranno e interagiranno con la tua UI su vari dispositivi. Questo strumento è una parte vitale del processo di implementazione 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 UI sia sia leggibile che accessibile su ogni dispositivo.

Ad esempio, se non testi la tua UI 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é i tuoi elementi UI occupano troppo spazio sul display.

Per emulare la tua UI 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 UI sul dispositivo che stai emulando.
Nel menu a discesa dei dispositivi, seleziona almeno un dispositivo all'interno delle sezioni Telefono, Tablet, Desktop e Console.

Crea oggetti ScreenGui

Per visualizzare gli elementi UI su ogni schermo dei giocatori, puoi creare un oggetto ScreenGui nel servizio StarterGui. Gli oggetti ScreenGui sono i contenitori principali per la UI su schermo, e il servizio StarterGui copia i suoi contenuti nel contenitore PlayerGui di ciascun giocatore man mano che entrano in un gioco.

Puoi creare più oggetti ScreenGui per organizzare e visualizzare raggruppamenti di elementi UI contestualmente durante il gameplay. Ad esempio, il gioco di laser tag di esempio include cinque oggetti ScreenGui separati che sono inizialmente disabilitati fino a quando i giocatori non soddisfano diverse condizioni durante il principale flusso utente del gioco:

HUDGui - Visualizza informazioni chiave sul gameplay quando i giocatori sono attivi in un round, come l'obiettivo e i punti totali di ciascuna squadra.
PickABlasterGui - Visualizza tutte le scelte di blaster quando i giocatori iniziano o si riuniscono a un round.
ForceFieldGui - Visualizza una griglia esagonale quando i giocatori stanno selezionando un blaster e mentre sono temporaneamente invincibili.
OutStateGui - Visualizza un bordo scuro attorno allo schermo quando i giocatori vengono eliminati.
RoundResultsGui - Visualizza un'overlay scura sopra lo schermo con informazioni su quale squadra ha vinto il round.

Dopo aver creato un oggetto ScreenGui, puoi creare e personalizzare i suoi oggetti figlio GuiObjects in base allo scopo di ciascun contenitore. Per dimostrare, nelle sezioni immediate che seguono, imparerai come implementare elementi UI per le tre categorie di informazioni che i giocatori devono conoscere per avere successo nel gioco di laser tag di esempio. Puoi regolare qualsiasi parte del processo per soddisfare le specifiche del tuo gioco.

Per creare un oggetto ScreenGui:

Nella finestra Explorer, passa sopra il servizio StarterGui, quindi fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
Inserisci un ScreenGui.
Rinomina lo ScreenGui in base al contesto dei suoi elementi UI figlio.
Ripeti questo processo per ogni raggruppamento di elementi UI che devi visualizzare su ogni schermo dei giocatori.

UI Obiettivo

Seguendo le migliori pratiche della gerarchia visiva da Wireframe Your Layouts, questa sezione ti insegna come implementare tutti gli elementi UI su schermo relativi all'obiettivo del gioco. Questo raggruppamento di elementi UI è vicino alla parte superiore dello schermo perché l'obiettivo e i punti di ciascuna squadra hanno la massima importanza su come vincere il gioco.

Ad esempio, il campione fornisce un componente UI obiettivo che i giocatori fanno riferimento per sapere cosa devono fare per avere successo in un round. Man mano che i giocatori eliminano i membri della squadra nemica e guadagnano punti, questo componente tiene traccia del punteggio di ciascuna squadra rispetto all'obiettivo complessivo all'interno del prompt dell'intestazione. Per una revisione ad alto livello di tutti gli script client e server che lavorano insieme per tenere traccia dei punti, vedere Track points nel Curriculum di Scripting di Gioco.

Per ricreare esattamente l'UI obiettivo all'interno del campione Laser Tag:

Crea un contenitore per l'intero componente.
1. Inserisci un Frame nell'oggetto HUDGui ScreenGui.
  1. Nella finestra Explorer, naviga al servizio StarterGui.
  2. Passa sopra il suo oggetto figlio HUDGui, quindi fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
  3. Dal menu contestuale, inserisci un Frame.
2. Seleziona il nuovo Frame, quindi nella finestra Properties,
  1. 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 al basso del frame).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo del frame.
  3. Imposta Position su {0.5, 0},{0.03, 0} per posizionare il frame vicino alla parte superiore centrale dello schermo (50% da sinistra a destra dello schermo e 3% dall'alto al basso dello schermo in modo da avere un piccolo margine).
  4. Imposta Size su {0.5, 0},{0.13, 0} in modo che gli elementi del frame occupino una grande porzione della parte superiore dello schermo per attirare l'attenzione dei giocatori (50% orizzontalmente e 13% verticalmente).
  5. Imposta Name su Objective.
3. OPZIONALE
  Inserisci un UIAspectRatioConstraint in Objective per garantire che il rapporto d'aspetto dell'etichetta rimanga lo stesso indipendentemente dalla dimensione dello schermo del giocatore. Il campione imposta la proprietà UIAspectRatioConstraint.AspectRatio su 7.
Crea un contenitore per gli oggetti prompt dell'obiettivo.
1. Inserisci un Frame in Objective.
2. Seleziona il nuovo Frame, quindi nella finestra Properties,
  1. 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 al basso del frame).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo del frame.
  3. Imposta Position su {0.5, 0},{0, 0} per posizionare il frame al centro del contenitore (50% da sinistra a destra del frame padre e 0% dall'alto al basso del frame padre).
  4. Imposta Size su {1, 0},{0.67, 0} in modo che i componenti UI di selezione occupino più della metà del contenitore dall'alto verso il basso (100% orizzontalmente e 67% verticalmente del frame padre).
  5. Imposta Name su ObjectiveDisplay.
Crea gli elementi del titolo.
1. Inserisci un ImageLabel in ObjectiveDisplay.
2. Seleziona l'ImageLabel, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine dell'etichetta nella parte inferiore centrale di essa (50% da sinistra a destra dell'etichetta e 100% dall'alto al basso dell'etichetta).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  3. Imposta LayoutOrder su -1.
  4. Imposta Position su {0.5, 0},{0.34, 0} per posizionare l'etichetta vicino alla parte superiore centrale del frame (50% da sinistra a destra del frame padre e 34% dall'alto al basso del frame padre).
  5. Imposta Size su {0.46, 0},{0.34, 0} per allargare l'area del prompt a quasi metà del frame (46% orizzontalmente e 34% verticalmente del frame padre).
  6. Imposta Name su Header.
  7. Imposta Image su rbxassetid://14304828123 per visualizzare un trapezio.
  8. Imposta ImageTransparency su 0.15 per rendere l'intestazione semi-trasparente.
3. OPZIONALE
  Inserisci un UIAspectRatioConstraint nell'ImageLabel per garantire che il rapporto d'aspetto dell'etichetta rimanga lo stesso indipendentemente dalla dimensione dello schermo del giocatore. Il campione imposta la proprietà UIAspectRatioConstraint.AspectRatio su 13.781.
4. Inserisci un TextLabel in Header per visualizzare un titolo.
5. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della nuova etichetta al centro di essa (50% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  3. Imposta Position su {0.5, 0},{0.5, 0} per spostare l'etichetta al centro della sua etichetta padre (50% da sinistra a destra dell'etichetta padre e 50% dall'alto al basso dell'etichetta padre).
  4. Imposta Size su {0.62, 0},{0.55, 0} per allargare lo spazio del testo a più della metà dell'etichetta padre (62% orizzontalmente e 55% verticalmente dell'etichetta padre).
  5. Imposta Name su HeaderTextLabel.
  6. Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
  7. Imposta Weight su Medium per ispessire il font.
  8. Imposta Text su OBIETTIVO.
  9. Abilita TextScaled.
Crea gli elementi del prompt.
1. Inserisci un ImageLabel in ObjectiveDisplay.
2. Seleziona l'ImageLabel, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine dell'etichetta nella parte inferiore centrale di essa (50% da sinistra a destra dell'etichetta e 100% dall'alto al basso dell'etichetta).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  3. Imposta Position su {0.5, 0},{1, 0} per spostare l'etichetta al centro inferiore del suo frame padre (50% da sinistra a destra del frame padre e 100% dall'alto al basso del frame padre).
  4. Imposta Size su {0.89, 0},{0.66, 0} per allargare lo spazio del testo a quasi tutta la larghezza del frame padre (89% orizzontalmente e 66% verticalmente del frame padre).
  5. Imposta Name su Body.
  6. Imposta Image su rbxassetid://14304827265 per visualizzare un trapezio rovesciato.
  7. Imposta ImageColor3 su 0, 0, 0 per colorare l'immagine di nero.
  8. Imposta ImageTransparency su 0.3 per rendere l'intestazione semi-trasparente.
3. OPZIONALE
  Inserisci un UIAspectRatioConstraint nell'ImageLabel per garantire che il rapporto d'aspetto dell'etichetta rimanga lo stesso indipendentemente dalla dimensione dello schermo del giocatore. Il campione imposta la proprietà UIAspectRatioConstraint.AspectRatio su 13.781.
4. Inserisci un TextLabel in Body per visualizzare un prompt.
5. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della nuova etichetta al centro di essa (50% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  3. Imposta Position su {0.5, 0},{0.5, 0} per spostare l'etichetta al centro della sua etichetta padre (50% da sinistra a destra dell'etichetta padre e 50% dall'alto al basso dell'etichetta padre).
  4. Imposta Size su {0.85, 0},{0.39, 0} per allargare lo spazio del testo a più della metà dell'etichetta padre (85% orizzontalmente e 39% verticalmente dell'etichetta padre).
  5. Imposta Name su BodyTextLabel.
  6. Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
  7. Imposta Weight su Medium per ispessire il font.
  8. Imposta TextColor3 su 255, 255, 255 per rendere il testo bianco contro lo sfondo scuro.
  9. Imposta Text su Tagga i giocatori avversari per guadagnare punti! La prima squadra a %d punti vince..
  10. Abilita TextScaled.
Crea un contenitore per i contatori di squadra dell'obiettivo.
1. Inserisci un Frame in Objective.
2. Seleziona il nuovo Frame, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine dell'etichetta nella parte inferiore centrale di essa (50% da sinistra a destra del frame e 100% dall'alto al basso del frame).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo del frame.
  3. Imposta Position su {0.5, 0},{1, 0} per posizionare il frame al centro inferiore del contenitore (50% da sinistra a destra del frame padre e 100% dall'alto al basso del frame padre).
  4. Imposta Size su {0.44, 0},{0.27, 0} in modo che i componenti UI di selezione occupino circa meno della metà del contenitore da sinistra a destra (44% orizzontalmente e 27% verticalmente del frame padre).
  5. Imposta Name su TeamPointCounter.
Crea un padding per i contatori di squadra.
1. Inserisci un oggetto UIListLayout nel frame del passo 5.
2. Seleziona l'oggetto UIListLayout, quindi nella finestra Properties,
  1. Imposta Padding su 0.025, 0 per fornire spazio tra i futuri contatori di squadra.
  2. Imposta FillDirection su Orizzontale in modo che ogni contatore di squadra venga visualizzato uno accanto all'altro.
  3. Imposta HorizontalAlignment su Centro in modo che ogni contatore di squadra si allinei al centro l'uno con l'altro.
Crea gli elementi del contatore della squadra verde.
1. Inserisci un ImageLabel in TeamPointCounter.
2. Seleziona l'ImageLabel, quindi nella finestra Properties,
  1. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  2. Imposta Position su {0.5, 0},{1, 0} per spostare l'etichetta al centro inferiore del suo frame padre (50% da sinistra a destra del frame padre e 100% dall'alto al basso del frame padre).
  3. Imposta Size su {0.5, 0},{1, 0} per allargare l'etichetta a metà larghezza del frame padre (50% orizzontalmente e 100% verticalmente del frame padre).
  4. Imposta Name su TeamACounter.
  5. Imposta Image su rbxassetid://14304826831 per visualizzare un fade direzionale.
  6. Imposta ImageColor3 su 88, 218, 171 per colorare l'immagine di verde menta.
3. Configura un attributo personalizzato per tenere traccia che questa etichetta è per la squadra verde.
  1. Nella finestra Properties, naviga alla sezione Attributes, quindi fai clic sull'icona più. Viene visualizzato un dialogo pop-up.
  2. Nel campo Name, inserisci teamColor.
  3. Nel menu a discesa Type, seleziona BrickColor.
  4. Fai clic sul pulsante Salva.
  5. Imposta il nuovo attributo teamColor su Mint.
4. Inserisci un TextLabel in TeamACounter per visualizzare un prompt.
5. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 1, 0.5 per impostare il punto di origine della nuova etichetta nella parte destra centrale di essa (100% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  3. Imposta Position su {0.95, 0},{0.5, 0} per spostare l'etichetta a destra della sua etichetta padre (95% da sinistra a destra dell'etichetta padre e 50% dall'alto al basso dell'etichetta padre).
  4. Imposta Size su {0.85, 0},{0.39, 0} per allargare lo spazio del testo a più della metà dell'etichetta padre (85% orizzontalmente e 39% verticalmente dell'etichetta padre).
  5. Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
  6. Imposta Weight su Bold per ispessire il font.
  7. Imposta TextColor3 su 255, 255, 255 per rendere il testo bianco contro lo sfondo scuro.
  8. Imposta Text su -.
  9. Abilita TextScaled.
  10. Imposta TextXAlignment su Destra.
6. Inserisci un oggetto UIStroke nell'TextLabel, quindi nella finestra Properties, imposta Color su 8, 78, 52 per contornare il trattino con un tratto verde scuro.
Crea gli elementi del contatore della squadra rosa.
1. Duplica TeamAICounter e i suoi figli.
2. Seleziona il duplicato di TeamACounter, quindi nella finestra Properties,
  1. Imposta Name su TeamBCounter.
  2. Imposta Image su rbxassetid://14305849451 per visualizzare un fade direzionale nell'altra direzione.
  3. Imposta ImageColor3 su 255, 170, 255 per colorare l'immagine di rosa carnation.
  4. Imposta l'attributo teamColor su Carnation Pink.
3. Seleziona il duplicato di TextLabel figlio di TeamBCounter, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0, 0.5 per impostare il punto di origine della nuova etichetta nella parte sinistra centrale di essa (0% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
  2. Imposta Position su {0.05, 0},{0.5, 0} per spostare l'etichetta a sinistra della sua etichetta padre (5% da sinistra a destra dell'etichetta padre e 50% dall'alto al basso dell'etichetta padre).
  3. Imposta TextXAlignment su Sinistra.
4. Seleziona il duplicato di UIStroke figlio di TeamBCounter, quindi nella finestra Properties, imposta Color su 158, 18, 94 per contornare il trattino con un tratto rosa scuro.
Fai riferimento ai seguenti script di ReplicatedStorage all'interno del file di esempio Laser Tag che aggiornano programmaticamente il prompt dell'obiettivo e tracciano i punti delle squadre.

Il seguente script richiede un insieme di script di modulo che lavorano insieme per impostare il principale Heads Up Display (HUD), inclusi setObjective e startSyncingTeamPoints. Dopo che un giocatore si unisce a un round e seleziona il proprio blaster, questo script assicura che tutti gli elementi UI dell'HUD vengano visualizzati correttamente in base allo stato del giocatore, al dispositivo e allo stato della squadra.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Ora, dopo che un giocatore seleziona il proprio blaster, l'UI obiettivo viene visualizzata nella parte superiore dello schermo e tiene traccia dei punti di ciascuna squadra.

UI Blaster

Seguendo le migliori pratiche della gerarchia visiva da Wireframe Your Layouts, questa sezione ti insegna come implementare tutti gli elementi UI su schermo relativi al blaster del giocatore. Questo raggruppamento di elementi UI occupa la maggior parte dello spazio dello schermo vicino al centro dello schermo perché funge da punto focale per attirare l'attenzione dei giocatori sull'azione nello spazio 3D, e ha la massima importanza per giocare al gioco.

Crosshair

Un crosshair è un elemento UI che informa i giocatori dove andranno a colpire quando sparano con la loro arma. Questo elemento UI è un requisito di gameplay vitale per i giochi di tiro in prima persona perché i giocatori devono essere in grado di mirare con precisione il loro blaster e taggare i membri della squadra nemica.

Come la maggior parte degli altri giochi nel genere dei tiratori in prima persona, il gioco di laser tag di esempio posiziona il crosshair al centro dello schermo in modo che i giocatori abbiano qualcosa di statico su cui concentrarsi mentre il loro avatar si muove attraverso lo spazio 3D. Oltre a ridurre la cinetosi, questa posizione consente al crosshair di essere percepibile mentre si fonde anche con l'ambiente complessivo.

Per ricreare esattamente il crosshair all'interno del campione Laser Tag:

Inserisci un ImageLabel nell'oggetto HUDGui ScreenGui.
1. Nella finestra Explorer, naviga al servizio StarterGui.
2. Passa sopra il suo oggetto figlio HUDGui, quindi fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
3. Dal menu contestuale, inserisci un ImageLabel.
Seleziona il nuovo ImageLabel, quindi nella finestra Properties,
1. Imposta Image su rbxassetid://14400935446.
2. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro dell'etichetta (50% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
3. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
4. Imposta Name su Crosshair.
5. Imposta Position su {0.5,0},{0.5,0} per posizionare l'etichetta al centro dello schermo.
6. Imposta ScaleType su Fit in modo che l'immagine si adatti all'interno del suo contenitore e non si allunghi su varie dimensioni dello schermo.
OPZIONALE
Inserisci un UIAspectRatioConstraint in Crosshair per garantire che il rapporto d'aspetto dell'etichetta rimanga lo stesso indipendentemente dalla dimensione dello schermo del giocatore. Il campione imposta la proprietà UIAspectRatioConstraint.AspectRatio su 0.895.

Hit marker

Un hit marker è un elemento UI che viene visualizzato solo quando un colpo colpisce un altro giocatore della squadra nemica. Come il crosshair, questo elemento UI è un requisito di gameplay vitale per i giochi di tiro in prima persona perché fornisce un feedback visivo di quando i giocatori hanno successo nel taggare i loro avversari.

Per ricreare esattamente l'hit marker all'interno del campione Laser Tag:

Inserisci un ImageLabel nell'oggetto Crosshair ImageLabel.
1. Nella finestra Explorer, naviga al servizio StarterGui.
2. Passa sopra il suo oggetto figlio Crosshair, quindi fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
3. Dal menu contestuale, inserisci un ImageLabel.
Seleziona il nuovo ImageLabel, quindi nella finestra Properties,
1. Imposta Image su rbxassetid://14401148736 per visualizzare l'icona rettangolare dell'hit marker.
2. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro dell'etichetta.
3. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
4. Imposta Position su {0.5,0},{0.5,0} per posizionare l'etichetta al centro dello schermo.
5. Imposta Name su Hitmarker.
6. Imposta Size su {0.6, 0},{0.06, 0} per ridurre la dimensione dei rettangoli attorno al centro del crosshair.
7. Imposta ImageTransparency su 1 per rendere completamente trasparente l'hit marker. Gli script nel passo successivo riportano la trasparenza a 0 ogni volta che il colpo di un giocatore colpisce un altro giocatore della squadra nemica.
Fai riferimento ai seguenti script di ReplicatedStorage all'interno del file di esempio Laser Tag che visualizzano programmaticamente l'hit marker quando un colpo colpisce un giocatore della squadra nemica.

Il seguente script richiede un insieme di script di modulo che lavorano insieme per impostare il principale Heads Up Display (HUD), inclusi setupHitmarker. Dopo che un giocatore si unisce a un round e seleziona il proprio blaster, questo script assicura che tutti gli elementi UI dell'HUD vengano visualizzati correttamente in base allo stato del giocatore, al dispositivo e allo stato della squadra.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Ora, ogni volta che un giocatore spara con il proprio blaster e il colpo colpisce un altro giocatore, l'hit marker viene visualizzato momentaneamente.

Selettore di Blaster

Un selettore di blaster è un componente UI che i giocatori utilizzano per selezionare il tipo di blaster prima di unirsi o riunirsi a un round. Il gioco di laser tag di esempio fornisce due tipi di blaster: uno che produce diversi fasci con una diffusione orizzontale ampia e un altro che produce un singolo fascio. Il tipo di blaster che i giocatori selezionano influisce sulla loro strategia durante il round, rendendo questo componente UI un flusso di lavoro essenziale per l'intero gioco.

I seguenti passaggi dettagliano come creare diversi contenitori per i diversi raggruppamenti di elementi UI, un'intestazione con un prompt, i pulsanti di navigazione e selezione e un prefab del pulsante blaster. La logica di scripting per l'intero componente popola diverse caratteristiche visive nel prefab del pulsante blaster in base alle istanze di Configuration che rappresentano ciascun tipo di blaster.

Questa configurazione ti consente di creare ulteriori istanze di Configuration per più tipi di blaster che vengono visualizzati automaticamente correttamente all'interno del selettore di blaster senza dover creare pulsanti individuali all'interno di StarterGui.PickABlasterGui.

Per ricreare esattamente il selettore di blaster all'interno del campione Laser Tag:

Crea un contenitore per l'intero componente.
1. Inserisci un Frame nell'oggetto PickABlaster ScreenGui.
  1. Nella finestra Explorer, naviga al servizio StarterGui.
  2. Passa sopra il suo oggetto figlio PickABlaster, quindi fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
  3. Dal menu contestuale, inserisci un Frame.
2. Seleziona il nuovo frame, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine del frame nella parte inferiore centrale di esso (50% da sinistra a destra del frame e 100% dall'alto al basso del frame).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo del frame.
  3. Imposta Position su {0.5, 0},{0.9, 0} per posizionare il frame vicino alla parte inferiore centrale dello schermo (50% da sinistra a destra dello schermo e 92.4% dall'alto al basso dello schermo).
  4. Imposta Size su {0.8, 0},{0.25, 0} in modo che i componenti UI del selettore di blaster occupino una grande porzione dello schermo per attirare l'attenzione dei giocatori (80% orizzontalmente e 25% verticalmente).
  5. Imposta Name su Component.
3. OPZIONALE
  Inserisci un UIAspectRatioConstraint in Component per garantire che il frame e gli elementi UI figli mantengano lo stesso rapporto d'aspetto indipendentemente dalla dimensione dello schermo del giocatore. Il campione imposta la proprietà UIAspectRatioConstraint.AspectRatio su 5.
Crea un contenitore per tenere i raggruppamenti di elementi UI.
1. Inserisci un Frame nell'oggetto Component.
2. Seleziona il nuovo frame, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine del frame al centro di esso (50% da sinistra a destra del frame e 50% dall'alto al basso del frame).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo del frame.
  3. Imposta Position su {0.5, 0},{0.375, 0} per posizionare il frame vicino alla parte superiore centrale del contenitore (50% da sinistra a destra del frame padre e 37.5% dall'alto al basso del frame padre).
  4. Imposta Size su {1, 0},{0.75, 0} in modo che i componenti UI di selezione occupino 3/4 del contenitore (100% orizzontalmente e 75% verticalmente del frame padre).
  5. Imposta Name su SelectionFrame.
Crea un prompt per il selettore di blaster.
1. Inserisci un ImageLabel in SelectionFrame.
2. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine dell'etichetta nella parte inferiore centrale di essa (50% da sinistra a destra dell'etichetta e 100% dall'alto al basso dell'etichetta).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  3. Imposta LayoutOrder su -1.
  4. Imposta Position su {0.5, 0},{0.22, 0} per posizionare l'etichetta vicino alla parte superiore centrale del frame (50% da sinistra a destra del frame padre e 22% dall'alto al basso del frame padre).
  5. Imposta Size su {0.45, 0},{0.22, 0} per allargare l'area del prompt a quasi metà del frame (45% orizzontalmente e 22% verticalmente del frame padre).
  6. Imposta Name su Header.
  7. Imposta Image su rbxassetid://14304828123 per visualizzare un trapezio.
  8. Imposta ImageTransparency su 0.15 per rendere l'intestazione semi-trasparente.
3. OPZIONALE
  Inserisci un UIAspectRatioConstraint nell'etichetta per garantire che il rapporto d'aspetto dell'etichetta rimanga lo stesso indipendentemente dalla dimensione dello schermo del giocatore. Il campione imposta la proprietà UIAspectRatioConstraint.AspectRatio su 13.78.
4. Inserisci un TextLabel in Header per visualizzare un prompt.
5. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della nuova etichetta al centro di essa (50% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  3. Imposta Position su {0.5, 0},{0.5, 0} per spostare l'etichetta al centro della sua etichetta padre (50% da sinistra a destra dell'etichetta padre e 50% dall'alto al basso dell'etichetta padre).
  4. Imposta Size su {0.6, 0},{0.55, 0} per allargare lo spazio del testo a più della metà dell'etichetta padre (60% orizzontalmente e 55% verticalmente dell'etichetta padre).
  5. Imposta Name su HeaderTextLabel.
  6. Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
  7. Imposta Weight su Medium per ispessire il font.
  8. Imposta Text su SELEZIONA UN BLASTER.
  9. Abilita TextScaled.
Crea il contenitore per il tuo contenitore di pulsanti blaster e le frecce di selezione.
1. Inserisci un ImageLabel in SelectionFrame.
2. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Rimuovi il valore predefinito di Image.
  2. Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine dell'etichetta nella parte inferiore centrale di essa (50% da sinistra a destra dell'etichetta e 100% dall'alto al basso dell'etichetta).
  3. Imposta BackgroundColor su 0, 0, 0 per rendere l'etichetta nera.
  4. Imposta BackgroundTransparency su 0.3 per ridurre l'opacità dell'etichetta del 30% e abbinare tutti gli elementi UI neri nel gioco.
  5. Imposta Position su {0.5, 0},{1, 0} per posizionare l'etichetta al centro inferiore del frame (50% da sinistra a destra del frame padre e 100% dall'alto al basso del frame padre).
  6. Imposta Size su {1, 0},{0.77, 0} per allargare l'area dell'etichetta allo spazio sotto il prompt (100% orizzontalmente e 77% verticalmente del frame padre).
3. Arrotonda gli angoli del contenitore.
  1. Inserisci un oggetto UICorner nell'etichetta.
  2. Seleziona il nuovo oggetto angolo, quindi nella finestra Properties, imposta CornerRadius su 0.075, 0 per arrotondare gli angoli.
Crea il contenitore per i tuoi pulsanti blaster.
1. Inserisci un Frame nell'etichetta del passo 4.
2. Seleziona il nuovo frame, quindi nella finestra Properties,1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine del nuovo frame al centro di se stesso (50% da sinistra a destra del frame e 50% dall'alto in basso del frame).
Imposta BackgroundTransparency su 1 per rendere lo sfondo del frame completamente trasparente.
Imposta Position su {0.5, 0},{0.5, 0} per posizionare il frame al centro del suo frame genitore (50% da sinistra a destra del frame genitore e 50% dall'alto in basso del frame genitore).
Imposta Size su {0.85, 0},{0.77, 0} per allargare l'area del frame alla maggior parte dell'etichetta (85% in orizzontale e 77% in verticale dell'etichetta genitore).
Imposta Name su Container.

Crea un padding per tutti i futuri pulsanti blaster.
1. Inserisci un oggetto UIListLayout nel frame del passo 5.
2. Seleziona il nuovo oggetto layout, quindi nella finestra Properties,
  1. Imposta Padding su 0.035, 0 per fornire spazio tra tutti i futuri pulsanti.
  2. Imposta FillDirection su Horizontal in modo che ogni pulsante venga visualizzato uno accanto all'altro.
  3. Imposta sia HorizontalAlignment che VerticalAlignment su Center in modo che ogni pulsante si allinei al centro l'uno con l'altro.
Crea il pulsante di navigazione sinistro.
1. Inserisci un oggetto ImageButton nell'ImageLabel del passo 4.
2. Seleziona il nuovo pulsante, quindi nella finestra Properties,
  1. Rimuovi il valore predefinito di Image.
  2. Imposta AnchorPoint su 0, 0.5 per impostare il punto di origine del nuovo pulsante al centro-sinistro di se stesso (0% da sinistra a destra del pulsante e 50% dall'alto in basso del pulsante).
  3. Imposta BackgroundTransparency su 0.15 per fornire un feedback visivo al passaggio del mouse che il pulsante è selezionabile.
  4. Imposta Position su {0.02, 0},{0.5, 0} per fornire padding a sinistra del pulsante dal suo contenitore genitore (2% da sinistra a destra dell'etichetta genitore e 50% dall'alto in basso dell'etichetta genitore).
  5. Imposta Size su {0.04, 0},{0.33, 0} per rendere il pulsante di selezione molto più piccolo dei pulsanti blaster (4% in orizzontale e 33% in verticale del frame genitore).
  6. Imposta Name su NavigationButtonLeft.
3. Arrotonda gli angoli del pulsante.
  1. Inserisci un oggetto UICorner nel pulsante.
  2. Seleziona il nuovo oggetto angolo, quindi nella finestra Properties, imposta CornerRadius su 0.1, 0 per arrotondare gli angoli.
4. Inserisci un oggetto ImageLabel nel pulsante.
5. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della nuova etichetta al centro di se stessa (50% da sinistra a destra dell'etichetta e 50% dall'alto in basso dell'etichetta).
  2. Imposta Position su {0.45, 0},{0.5, 0} per posizionare l'etichetta vicino al centro del suo pulsante genitore (45% da sinistra a destra del pulsante genitore e 50% dall'alto in basso del pulsante genitore). Questo valore non è al centro perché una freccia non sembra visivamente essere al centro del pulsante a {0.5, 0},{0.5, 0}.
  3. Imposta Size su {0.8, 0},{0.8, 0} per allargare l'area dell'etichetta per lo spazio sotto il prompt (80% in orizzontale e 80% in verticale del frame genitore).
  4. Imposta BackgroundTransparency su 1 per rendere lo sfondo dell'immagine completamente trasparente.
  5. Imposta Image su rbxassetid://14309187238.
  6. Imposta ScaleType su Fit.
Crea il pulsante di navigazione destro.
1. Duplica NavigationButtonLeft.
2. Seleziona il pulsante duplicato, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 1, 0.5 per impostare il punto di origine del nuovo pulsante al centro-destro di se stesso (100% da sinistra a destra del pulsante e 50% dall'alto in basso del pulsante).
  2. Imposta Position su {0.98, 0},{0.5, 0} per fornire padding a destra del pulsante dal suo contenitore genitore (98% da sinistra a destra dell'etichetta genitore e 50% dall'alto in basso dell'etichetta genitore).
  3. Imposta Name su NavigationButtonRight.
3. Seleziona il suo oggetto figlio ImageLabel.
  1. Imposta Rotation su 180 per capovolgere l'immagine.
  2. Imposta Position su {0.55, 0},{0.5, 0} per posizionare l'etichetta vicino al centro del suo pulsante genitore (55% da sinistra a destra del pulsante genitore e 50% dall'alto in basso del pulsante genitore). Questo valore non è al centro perché una freccia non sembra visivamente essere al centro del pulsante a {0.5, 0},{0.5, 0}.
Crea il pulsante SELECT.
1. Inserisci un ImageButton in Component. Nota come questo processo mantiene il pulsante di selezione separato da SelectionFrame in modo da poter aggiungere padding tra la parte principale del componente e il pulsante di selezione.
2. Seleziona il nuovo pulsante, quindi nella finestra Properties,
  1. Rimuovi il valore predefinito di Image.
  2. Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine del nuovo pulsante al centro-basso di se stesso (50% da sinistra a destra del pulsante e 100% dall'alto in basso del pulsante).
  3. Imposta BackgroundTransparency su 0.15 per fornire un feedback visivo al passaggio del mouse che il pulsante è selezionabile.
  4. Imposta Position su {0.5, 0},{0.99, 0} per posizionare il pulsante vicino al centro in basso del suo contenitore (50% da sinistra a destra del frame genitore e 99% dall'alto in basso del frame genitore).
  5. Imposta Size su {0.17, 0},{0.18, 0} per allungare il pulsante sotto i pulsanti blaster (17% in orizzontale e 18% in verticale del frame genitore).
  6. Imposta Name su SelectButton.
3. Arrotonda gli angoli del pulsante.
  1. Inserisci un oggetto UICorner nel pulsante.
  2. Seleziona il nuovo oggetto angolo, quindi nella finestra Properties, imposta CornerRadius su 0.2, 0 per arrotondare gli angoli.
4. Inserisci un oggetto TextLabel nel pulsante in modo da poter visualizzare una chiamata all'azione.
5. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della nuova etichetta al centro di se stessa (50% da sinistra a destra dell'etichetta e 50% dall'alto in basso dell'etichetta).
  2. Imposta BackgroundTransparency su 1 per rendere lo sfondo dell'etichetta completamente trasparente.
  3. Imposta Position su {0.5, 0},{0.5, 0} per spostare l'etichetta al centro del pulsante (50% da sinistra a destra del pulsante genitore e 50% dall'alto in basso del pulsante genitore).
  4. Imposta Size su {0.9, 0},{0.55, 0} per allargare lo spazio del testo a quasi tutta la larghezza dell'etichetta genitore (90% in orizzontale e 55% in verticale dell'etichetta genitore).
  5. Imposta Name su SelectTextLabel.
  6. Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
  7. Imposta Weight su Medium per ispessire il font.
  8. Imposta Text su SELECT.
  9. Abilita TextScaled.
Crea un prefab di pulsante blaster.
1. Nel servizio ReplicatedStorage, crea una struttura di cartelle per organizzare i tuoi oggetti UI. Il campione utilizza una cartella Instances con una cartella figlia Guis.
2. Inserisci un oggetto ImageButton nella cartella Guis.
3. Seleziona il nuovo pulsante, quindi nella finestra Properties,
  1. Rimuovi il valore predefinito di Image.
  2. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine del nuovo pulsante al centro di se stesso (50% da sinistra a destra del pulsante e 50% dall'alto in basso del pulsante).
  3. Imposta BackgroundTransparency su 0.65 per fornire un feedback visivo che il pulsante non è a fuoco. Gli script nel passo 12 forniscono un feedback visivo programmatico quando il pulsante è a fuoco.
  4. Imposta LayoutOrder su 2.
  5. Imposta Name su BlasterButtonPrefab.
  6. Imposta Size su {0.8, 0},{0.8, 0}.
  7. Imposta ImageTransparency su 1 per rendere l'immagine completamente trasparente.
4. Inserisci un UIAspectRatioConstraint in BlasterButtonPrefab per garantire che il rapporto d'aspetto del pulsante rimanga lo stesso all'interno del componente indipendentemente dalla dimensione dello schermo del giocatore.
5. Arrotonda gli angoli del pulsante.
  1. Inserisci un oggetto UICorner in BlasterButtonPrefab.
  2. Seleziona il UICorner, quindi nella finestra Properties, imposta CornerRadius su 0.05, 0 per arrotondare gli angoli.
6. Inserisci un ImageLabel in BlasterButtonPrefab.
7. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Rimuovi il valore predefinito di Image.
  2. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della nuova etichetta al centro di se stessa (50% da sinistra a destra dell'etichetta e 50% dall'alto in basso dell'etichetta).
  3. Imposta BackgroundTransparency su 1 per rendere lo sfondo dell'etichetta completamente trasparente.
  4. Imposta Position su {0.52, 0},{0.497, 0} per posizionare l'etichetta vicino al centro del suo pulsante genitore (52% da sinistra a destra del pulsante genitore e 49.7% dall'alto in basso del pulsante genitore). Questo valore non è al centro perché il blaster non sembra visivamente essere al centro del pulsante a {0.5, 0},{0.5, 0}.
  5. Imposta Size su {1.20, 0},{0.9, 0} per allargare l'area dell'etichetta al di fuori del pulsante (120% in orizzontale e 90% in verticale del pulsante genitore).
  6. Imposta ScaleType su Fit.
Fai riferimento ai seguenti script ReplicatedStorage all'interno del file di esempio Laser Tag che visualizzano programmaticamente i pulsanti per ogni blaster, scalano i pulsanti quando un giocatore seleziona un pulsante che non è a fuoco e collegano la selezione del blaster di un giocatore al loro avatar.

Lo script seguente richiede un insieme di script che lavorano insieme per creare il selettore di blaster. Quando un giocatore entra nel gioco o rinasce in un round dopo che la sua salute raggiunge zero, questo script attiva tutti gli elementi UI del selettore di blaster fino a quando il giocatore non effettua la sua selezione.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local GuiAttribute = require(ReplicatedStorage.GuiAttribute)
local setupBlasterButtons = require(script.setupBlasterButtons)
local connectResetSelectionOnEnabled = require(script.connectResetSelectionOnEnabled)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("PickABlasterGui")

setupBlasterButtons(gui)
connectResetSelectionOnEnabled(gui)
gui:SetAttribute(GuiAttribute.selectedIndex, 1)

Ora, ogni volta che un giocatore entra nel gioco o rinasce in un round dopo che la sua salute raggiunge zero, l'interfaccia utente del selettore di blaster viene visualizzata, possono effettuare una selezione e ogni pulsante funziona come previsto.

Pulsante di esplosione

Un pulsante di esplosione è un componente UI che i giocatori usano per esplodere il loro blaster se accedono al gioco tramite un dispositivo mobile o tablet. Il campione di gioco di laser tag utilizza un pulsante di esplosione con un'icona che rappresenta sia un mirino che un'esplosione per comunicare la funzione del pulsante senza testo.

Per ricreare esattamente il pulsante di esplosione all'interno del campione Laser Tag:

Inserisci un ImageButton nell'oggetto HUDGui ScreenGui.
1. Nella finestra Explorer, naviga al servizio StarterGui.
2. Passa sopra il suo oggetto figlio HUDGui, quindi fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
3. Dal menu contestuale, inserisci un ImageButton.
Nella vista, sposta il pulsante dove il pollice di un giocatore si appoggia naturalmente in modo da poter avere un'idea visiva di come apparirà il pulsante sul dispositivo di un giocatore, quindi nella finestra Properties,
1. Imposta Image su rbxassetid://18308375035 per visualizzare l'icona del pulsante di esplosione.
2. Imposta PressedImage su rbxassetid://18308372558 per visualizzare una versione invertita dell'icona del pulsante di esplosione quando un giocatore preme il pulsante.
3. Imposta BackgroundTransparency su 1 per rendere lo sfondo dell'etichetta completamente trasparente.
4. Imposta Name su BlastButton.
5. Imposta ScaleType su Fit in modo che l'immagine si adatti all'interno del suo contenitore e non si allunghi su varie dimensioni dello schermo.
6. Imposta ImageTransparency su 0.3 per ridurre l'opacità dell'etichetta in modo che corrisponda a tutti gli elementi UI neri nel gioco.
Inserisci un UIAspectRatioConstraint in BlastButton per garantire che il rapporto d'aspetto del pulsante rimanga lo stesso indipendentemente dalla dimensione dello schermo del giocatore.
Fai riferimento ai seguenti script ReplicatedStorage all'interno del file di esempio Laser Tag che visualizzano programmaticamente il pulsante blaster quando un giocatore utilizza input touch su un dispositivo che accetta controlli touch.

Il seguente script richiede un insieme di script di modulo che lavorano insieme per impostare il principale Heads Up Display (HUD), inclusa setupTouchButtonAsync. Dopo che un giocatore entra in un round e seleziona il proprio blaster, questo script garantisce che tutti gli elementi UI dell'HUD vengano visualizzati correttamente in base allo stato del giocatore, al dispositivo e allo stato della squadra.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Ora, quando un giocatore entra nel gioco e utilizza input touch su un dispositivo che accetta controlli touch, il pulsante blaster viene visualizzato in alto a destra del pulsante di salto.

UI del Giocatore

Seguendo le migliori pratiche della gerarchia visiva da Wireframe Your Layouts, questa sezione ti insegna come implementare tutti gli elementi UI sullo schermo relativi allo stato del giocatore. Questo raggruppamento di elementi UI è vicino ai lati dello schermo perché i giocatori possono comprendere queste informazioni periferiche senza deviare la loro attenzione dal gameplay.

Indicatore del Giocatore

Un indicatore del giocatore è un componente UI a cui i giocatori fanno riferimento per decifrare rapidamente a quale squadra appartengono non appena spawnano nella zona di spawn della loro squadra. Il campione di gioco di laser tag fornisce due versioni dell'indicatore del giocatore a seconda che il giocatore sia nella squadra verde o rosa.

Seguendo le indicazioni di Seleziona un Tema di Colore, entrambe le versioni dell'indicatore del giocatore combinano il colore della squadra con un'icona unica e semplice con dettagli minimi in modo che rimangano leggibili su schermi piccoli. Fornire due forme di feedback visivo è importante perché aiuta a mantenere il design accessibile per i giocatori con daltonismo.

Per ricreare esattamente il componente indicatore del giocatore all'interno del campione Laser Tag:

Inserisci un Frame nell'oggetto HUDGui ScreenGui.
1. Nella finestra Explorer, naviga al servizio StarterGui.
2. Passa sopra il suo oggetto figlio HUDGui, quindi fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
3. Dal menu contestuale, inserisci un Frame.
Seleziona il nuovo Frame, quindi nella finestra Properties,
1. Imposta AnchorPoint su 0, 1 per impostare il punto di origine del frame al centro-basso di se stesso (0% da sinistra a destra del frame e 100% dall'alto in basso del frame).
2. Imposta BackgroundTransparency su 1 per rendere lo sfondo dell'etichetta completamente trasparente.
3. Imposta Name su PlayerDisplay.
4. Imposta Position su {0.02, 0},{0.97, 0} per posizionare il frame vicino all'angolo in basso a sinistra dello schermo.
5. Imposta Size su {0.23, 0},{0.08, 0} per accorciare e allargare il frame.
6. Abilita ClipsDescendants per ritagliare i GuiObjects figli che si estendono oltre il frame.
Crea la forma poligonale.
1. Inserisci un ImageLabel in PlayerDisplay.
2. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta Image su rbxassetid://14304828123 per visualizzare l'icona trapezoidale.
  2. Imposta AnchorPoint su 1, 1 per impostare il punto di origine dell'etichetta nell'angolo in basso a destra di se stessa (100% da sinistra a destra dell'etichetta e 100% dall'alto in basso dell'etichetta).
  3. Imposta BackgroundTransparency su 1 per rendere lo sfondo dell'etichetta completamente trasparente.
  4. Imposta Name su Block.
  5. Imposta Position su {1,0},{1,0} per posizionare l'etichetta sul lato destro del frame.
  6. Imposta Size su {1.858, 0},{0.581, 0} per allargare l'etichetta al di fuori del frame e accorciarla a poco più della metà della lunghezza del frame.
  7. Imposta ImageTransparency su 0.15 per rendere l'etichetta leggermente trasparente.
  8. Imposta ScaleType su Fit in modo che l'immagine si adatti all'interno del suo contenitore e non si allunghi su varie dimensioni dello schermo.
  1. Inserisci un UIAspectRatioConstraint in Block per garantire che l'etichetta e gli elementi UI figli mantengano lo stesso rapporto d'aspetto indipendentemente dalla dimensione dello schermo del giocatore.
  2. Seleziona il nuovo vincolo, quindi nella finestra Properties, imposta AspectRatio su 13.78.
Crea la casella per il ritratto del giocatore.
1. Inserisci un ImageLabel in PlayerDisplay.
2. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Rimuovi l'ID dell'asset segnaposto all'interno della proprietà Image. Gli script nel passo 7 inseriscono programmaticamente il ritratto del giocatore nell'etichetta immagine.
  2. Imposta AnchorPoint su 0, 1 per impostare il punto di origine dell'etichetta nell'angolo in basso a sinistra di se stessa (0% da sinistra a destra dell'etichetta e 100% dall'alto in basso dell'etichetta).
  3. Imposta BackgroundColor3 su 0, 0, 0 per impostare il colore di sfondo dell'etichetta su nero.
  4. Imposta BackgroundTransparency su 0.3 per ridurre l'opacità dell'etichetta del 30% e farla corrispondere a tutti gli elementi UI neri nel gioco.
  5. Imposta Name su PlayerPortrait.
  6. Imposta Position su {0.11, 0},{1, 0} per posizionare l'etichetta sul lato sinistro della forma poligonale.
  7. Imposta Size su {0.23, 0},{1, 0} per ridurre l'etichetta.
  8. Imposta ImageTransparency su 0.15 per rendere l'etichetta leggermente trasparente.
  9. Imposta ScaleType su Fit in modo che l'immagine si adatti all'interno del suo contenitore e non si allunghi su varie dimensioni dello schermo.
  1. Inserisci un UIAspectRatioConstraint in PlayerPortrait per garantire che l'etichetta e gli elementi UI figli mantengano lo stesso rapporto d'aspetto indipendentemente dalla dimensione dello schermo del giocatore.
  2. Inserisci un UICorner in PlayerPortrait, quindi nella finestra Properties, imposta CornerRadius su 0.05, 0 per arrotondare leggermente gli angoli.
Crea l'etichetta di testo per il nome del giocatore.
1. Inserisci un oggetto TextLabel in PlayerDisplay.
2. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0, 0.5 per impostare il punto di origine del nuovo pulsante al centro-sinistro di se stesso (0% da sinistra a destra del pulsante e 50% dall'alto in basso del pulsante).
  2. Imposta BackgroundTransparency su 1 per rendere lo sfondo dell'etichetta completamente trasparente.
  3. Imposta Name su PlayerNameTextLabel.
  4. Imposta Position su {0.35, 0},{0.72, 0} per posizionare l'etichetta sul lato destro del suo contenitore (35% da sinistra a destra dell'etichetta genitore e 72% dall'alto in basso dell'etichetta genitore).
  5. Imposta Size su {0.52, 0},{0.3, 0} in modo che il testo possa occupare la maggior parte dell'area della forma poligonale (52% in orizzontale e 30% in verticale del frame genitore).
  6. Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
  7. Imposta Weight su Bold per ispessire il font.
  8. Rimuovi il testo segnaposto all'interno della proprietà Text. Gli script nel passo 7 inseriscono programmaticamente il nome del giocatore nell'etichetta di testo.
  9. Abilita TextScaled.
  10. Imposta TextXAlignment su Left.
Crea le icone e i colori della squadra che vengono visualizzati a sinistra del ritratto del giocatore.
1. Inserisci una Folder in PlayerDisplay, quindi rinominala in TeamIcons.
2. Crea l'icona e il colore della squadra verde.
  1. Inserisci un ImageLabel in TeamIcons.
  2. Seleziona la nuova etichetta, quindi nella finestra Properties,
    
    Imposta AnchorPoint su 0, 1 per impostare il punto di origine dell'etichetta nell'angolo in basso a sinistra di se stessa (0% da sinistra a destra dell'etichetta e 100% dall'alto in basso dell'etichetta).
    
    Imposta BackgroundColor3 su 88, 218, 171 per impostare il colore di sfondo dell'etichetta su verde menta.
    
    Imposta Name su TeamAIcon.
    
    Imposta Position su {0, 0},{1, 0} per posizionare l'etichetta sul lato sinistro del frame.
    
    Imposta Size su {0.135, 0},{0.58, 0} per ridurre l'etichetta a sinistra del ritratto del giocatore.
    
    Imposta ImageTransparency su 1 per rendere l'etichetta trasparente.
  1. Configura un attributo personalizzato per tenere traccia che questa etichetta è per la squadra verde. Questo passaggio è molto importante per gli script nel passo 7.
    
    Nella finestra Properties, vai alla sezione Attributes, quindi fai clic sull'icona più. Viene visualizzato un dialogo pop-up.
    
    Nel campo Name, inserisci teamColor.
    
    Nel menu a discesa Type, seleziona BrickColor.
    
    Fai clic sul pulsante Save.
    
    Imposta il nuovo attributo teamColor su Mint.
  2. Inserisci un UIAspectRatioConstraint in TeamAIcon per garantire che l'etichetta e gli elementi UI figli mantengano lo stesso rapporto d'aspetto indipendentemente dalla dimensione dello schermo del giocatore.
  3. Crea l'icona.
    
    Inserisci un ImageLabel in TeamAIcon.
    
    Seleziona la nuova etichetta, quindi nella finestra Properties,
    
    Imposta Image su rbxassetid://14309678670 per visualizzare l'icona della squadra verde.
    
    Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro di se stessa (50% da sinistra a destra dell'etichetta e 50% dall'alto in basso dell'etichetta).
    
    Imposta BackgroundTransparency su 1 per rendere lo sfondo dell'etichetta completamente trasparente.
    
    Imposta Name su Icon.
    
    Imposta Position su {0.5, 0},{0.5, 0} per posizionare l'etichetta al centro della sua etichetta genitore.
    
    Imposta Size su {0.7, 0},{0.6, 0} per ridurre l'etichetta.
    
    Imposta ScaleType su Fit in modo che l'immagine si adatti all'interno del suo contenitore e non si allunghi su varie dimensioni dello schermo.
3. Crea l'icona e il colore della squadra rosa.
  1. Duplica TeamAIcon e i suoi figli.
  2. Seleziona il duplicato di TeamAIcon, quindi nella finestra Properties,
    
    Imposta BackgroundColor3 su 255, 170, 255 per impostare il colore di sfondo dell'etichetta su rosa carne.
    
    Imposta Name su TeamBIcon.
    
    Imposta l'attributo teamColor su Carnation Pink.
    
    Seleziona il duplicato dell'oggetto figlio Icon di TeamBIcon, quindi nella finestra Properties, imposta Image su rbxassetid://14309678549 per visualizzare l'icona della squadra rosa.
Fai riferimento ai seguenti script ReplicatedStorage all'interno del file di esempio Laser Tag che visualizzano programmaticamente l'indicatore del giocatore con il colore e l'icona della squadra appropriati mentre un giocatore è attivo in un round.

Il seguente script richiede un insieme di script di modulo che lavorano insieme per impostare il principale Heads Up Display (HUD), inclusi startSyncingTeamColor, setPlayerName e setPlayerPortrait. Dopo che un giocatore entra in un round e seleziona il proprio blaster, questo script garantisce che tutti gli elementi UI dell'HUD vengano visualizzati correttamente in base allo stato del giocatore, al dispositivo e allo stato della squadra.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Ora, ogni volta che un giocatore entra o rientra nel round dopo essere rinato, l'indicatore del giocatore viene visualizzato in basso a sinistra dello schermo.

Schermo del campo di forza

Uno schermo del campo di forza è un elemento UI che sovrappone il viewport per informare i giocatori che sono al sicuro dal fuoco della squadra nemica mentre si uniscono o rientrano in un round. Seguendo le linee guida estetiche per le icone da Scegli un Stile Artistico, il campione di gioco di laser tag utilizza un motivo esagonale semi-trasparente per simboleggiare un campo di forza. Questa decisione di design non solo rinforza lo stile artistico futuristico generale per tutta l'interfaccia utente del gioco, ma comunica anche lo stato del giocatore senza alcun testo o ulteriore guida.

Per ricreare esattamente lo schermo del campo di forza all'interno del campione Laser Tag:

Inserisci un ImageLabel nell'oggetto ForceFieldGui ScreenGui.
1. Nella finestra Explorer, naviga al servizio StarterGui.
2. Passa sopra il suo oggetto figlio ForceFieldGui, quindi fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
3. Dal menu contestuale, inserisci un ImageLabel.
Seleziona la nuova etichetta, quindi nella finestra Properties,
1. Imposta Image su rbxassetid://14462567888.
2. Imposta BackgroundTransparency su 0.8 per rendere il campo di forza translucido.
3. Imposta Size su {1, 0},{1, 0} per far riempire l'immagine dell'intero schermo (100% in orizzontale e 100% in verticale del parent ScreenGui).
4. Imposta ScaleType su Tile per far sì che l'esagono si ripeta su tutto lo schermo.
5. Imposta TileSize su {0, 104},{0, 180}.
Inserisci un oggetto UIGradient nell'etichetta.
Seleziona il nuovo oggetto gradiente, quindi nella finestra Properties,
1. Imposta Color su una sequenza di colori che inizia con blu, diventa bianca e poi torna blu.
  1. Imposta Color su 120, 192, 250 per applicare una tonalità di blu chiaro a tutti gli esagoni.
  2. Fai clic sulla proprietà Color, quindi fai clic sul pulsante ⋯. Viene visualizzato un pop-up della sequenza di colori.
    
    Ogni triangolo sull'asse inferiore della sequenza di colori è un punto chiave che determina il valore di colore della proprietà in quel punto dell'immagine da sinistra a destra.
  3. Fai clic e trascina sulla sequenza di colori fino a raggiungere un valore di Time di 0.05, quindi fai clic sul piccolo quadrato accanto a Color per aprire la finestra pop-up Colors.
  4. Seleziona un bianco brillante, quindi chiudi la finestra pop-up.
  5. Fai clic e trascina sulla sequenza di colori fino a raggiungere un valore di Time di 0.95, quindi riapri la finestra pop-up Colors e seleziona lo stesso colore bianco di prima.
2. Imposta Rotation su 225 per far sì che la parte blu della tua sequenza di colori venga visualizzata negli angoli in alto a sinistra e in basso a destra.
3. Imposta Transparency su una sequenza di numeri che fa sembrare il campo di forza come se stesse brillando.
  1. Fai clic sulla proprietà Transparency, quindi fai clic sul pulsante ⋯. Viene visualizzato un pop-up della sequenza di numeri. Ogni quadrato all'inizio e alla fine della sequenza di numeri è un punto chiave che determina il valore di trasparenza della proprietà in quel punto dell'immagine da sinistra a destra.
  2. Imposta le seguenti proprietà di tempo e valore in tutta la sequenza di numeri:
  - Time = 0, Value = 0.25
  - Time = .101, Value = 0.875
  - Time = .183, Value = 0
  - Time = .3, Value = 1
  - Time = .7, Value = 1
  - Time = 1, Value = 0.9
  1. Duplica il ImageLabel dal passo 2.
Seleziona l'oggetto UIGradient all'interno dell'etichetta duplicata, quindi nella finestra Properties,
1. Imposta Rotation su -45 per capovolgere l'immagine in modo che si specchi quasi lungo l'asse Y.
2. Modifica Transparency per rendere il luccichio più organico.
  1. Clicca sulla proprietà Transparency, quindi clicca sul pulsante ⋯. Viene visualizzato un pop-up con una sequenza di numeri.
  2. Seleziona il terzo keyframe, quindi clicca sul pulsante Delete.
Fai riferimento ai seguenti script ReplicatedStorage all'interno del file di esempio Laser Tag che visualizzano programmaticamente lo schermo del campo di forza mentre un giocatore si unisce o si riunisce a un turno.

Il seguente script client ReplicatedStorage.ForceFieldClientVisuals sostituisce la visualizzazione predefinita ForceField con StarterGui.ForceFieldGui. Quando i giocatori entrano in un gioco e si spawnano in un SpawnLocation con una proprietà Duration maggiore di 0, il comportamento predefinito in ogni gioco è fornire al loro avatar un orbe blu protettivo che momentaneamente impedisce loro di perdere salute.

Questo script inizia ascoltando quando il ForceField viene aggiunto a un personaggio, disabilita le visualizzazioni predefinite del campo di forza in prima persona, quindi abilita l'oggetto ForceFieldGui ScreenGui. Nota che questo non influisce sulle visualizzazioni in terza persona quando i giocatori guardano altri giocatori che si riavviano nel gioco.

Le visualizzazioni del campo di forza in prima persona includono una griglia esagonale futuristica sul perimetro dello schermo. — Visualizzazioni del campo di forza in prima persona

Le visualizzazioni del campo di forza in terza persona includono un orbe blu scintillante attorno al giocatore che si sta spawnando nel gioco. — Visualizzazioni del campo di forza in terza persona

local Players = game:GetService("Players")

local localPlayer = Players.LocalPlayer

local function onCharacterAddedAsync(character: Model)
	local forceField = character:WaitForChild("ForceField", 3)
	if not forceField then
		-- Se il giocatore si spawn in un punto di spawn con il ForceField disabilitato
		return
	end

	forceField.Visible = false
	localPlayer.PlayerGui:WaitForChild("ForceFieldGui").Enabled = true
	forceField.Destroying:Wait()
	localPlayer.PlayerGui.ForceFieldGui.Enabled = false
end

if localPlayer.Character then
	onCharacterAddedAsync(localPlayer.Character)
end

localPlayer.CharacterAdded:Connect(onCharacterAddedAsync)

Ora, ogni volta che un giocatore si unisce o si riunisce al turno dopo essersi riavviato, la nuova interfaccia utente del campo di forza viene visualizzata invece delle visualizzazioni predefinite del ForceField in prima persona.

Schermo di riavvio

Uno schermo di riavvio è un elemento UI che oscura il viewport per informare i giocatori che sono stati eliminati e che il server sta riavviandoli nella loro zona di spawn. Questo elemento UI è importante perché dà ai giocatori il tempo di elaborare che sono stati eliminati e di pianificare la loro prossima mossa prima di riunirsi al turno attivo.

Per ulteriori informazioni sul comportamento di riavvio personalizzato nel gioco di esempio laser tag, vedere Respawn Characters dal curriculum di Gameplay Scripting.

Per ricreare esattamente lo schermo di riavvio all'interno del gioco di esempio Laser Tag:

Crea il banner informativo centrale.
1. Inserisci un ImageLabel nell'oggetto OutStateGui ScreenGui.
  1. Nella finestra Explorer, naviga al servizio StarterGui.
  2. Passa sopra il suo oggetto figlio OutStateGui, quindi clicca sull'icona ⊕. Viene visualizzato un menu contestuale.
  3. Dal menu contestuale, inserisci un ImageLabel.
2. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine del nuovo pulsante al centro di se stesso (50% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  3. Imposta Position su {0.5, 0},{0.5, 0} per posizionare l'etichetta al centro del suo contenitore (50% da sinistra a destra dello ScreenGui genitore e 50% dall'alto al basso dello ScreenGui genitore).
  4. Imposta Size su {0.48, 0},{0.06, 0} per allargare l'etichetta (48% orizzontalmente e 6% verticalmente dello ScreenGui genitore).
  5. Imposta Name su Block.
  6. Imposta Image su rbxassetid://14304827265 per rendere l'immagine un trapezio.
  7. Imposta ImageColor su 0,0,0 per rendere il trapezio nero.
  8. Imposta ImageTransparency su 0.3 per ridurre l'opacità dell'etichetta del 30% e abbinare tutti gli elementi UI neri nel gioco.
3. Inserisci un UIAspectRatioConstraint in Block per garantire che il rapporto d'aspetto dell'etichetta e dei suoi elementi UI figli rimanga lo stesso indipendentemente dalla dimensione dello schermo del giocatore.
4. Seleziona il nuovo vincolo, quindi nella finestra Properties, imposta AspectRatio su 13.78.
5. Inserisci un TextLabel in Block per il testo informativo.
6. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro di se stessa (50% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  3. Imposta Position su {0.5, 0},{0.5, 0} per posizionare l'etichetta al centro della sua etichetta genitore (50% da sinistra a destra dell'etichetta genitore e 50% dall'alto al basso dell'etichetta genitore).
  4. Imposta Size su {.85, 0},{0.55, 0} in modo che il testo possa occupare la maggior parte dell'area trapezoidale (85% orizzontalmente e 55% verticalmente dell'etichetta genitore).
  5. Imposta Name su BodyTextLabel.
  6. Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
  7. Imposta Weight su Bold per ispessire il carattere.
  8. Imposta Text su Respawning….
  9. Imposta TextColor3 su 255, 255, 255 per rendere il testo bianco.
  10. Abilita TextScaled.
Crea l'intestazione.
1. Inserisci un ImageLabel in Block.
2. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine dell'etichetta nella parte inferiore centrale di se stessa (50% da sinistra a destra dell'etichetta e 100% dall'alto al basso dell'etichetta).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  3. Imposta Position su {0.5, 0},{0, 0} per posizionare l'etichetta nella parte superiore centrale della sua etichetta genitore (50% da sinistra a destra dell'etichetta genitore e 0% dall'alto al basso dell'etichetta genitore).
  4. Imposta Size su {0.46, 0},{0.56, 0} per allargare l'etichetta (46% orizzontalmente e 56% verticalmente dell'etichetta genitore).
  5. Imposta Name su Header.
  6. Imposta Image su rbxassetid://14304826985 per rendere l'immagine una dissolvenza multidirezionale.
  7. Imposta ImageColor su 245, 46, 46 per rendere la dissolvenza rossa per segnalare che il giocatore è temporaneamente inattivo mentre è stato eliminato dal turno.
3. Inserisci un TextLabel in Header per il testo informativo.
4. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro di se stessa (50% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  3. Imposta Position su {0.5, 0},{0.5, 0} per posizionare l'etichetta al centro della sua etichetta genitore (50% da sinistra a destra dell'etichetta genitore e 50% dall'alto al basso dell'etichetta genitore).
  4. Imposta Size su {.85, 0},{0.55, 0} in modo che il testo possa occupare la maggior parte dell'area della dissolvenza (85% orizzontalmente e 55% verticalmente dell'etichetta genitore).
  5. Imposta Name su HeaderTextLabel.
  6. Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
  7. Imposta Weight su Black per ispessire il carattere.
  8. Imposta Text su TAGGED - YOU'RE OUT!
  9. Imposta TextColor3 su 255, 255, 255 per rendere il testo bianco.
  10. Abilita TextScaled.
Crea la dissolvenza attorno ai bordi dello schermo.
1. Inserisci un ImageLabel in OutStateGui.
2. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro di se stessa (50% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
  2. Imposta BackgroundColor3 su 0,0,0 per impostare il colore di sfondo dell'etichetta su nero.
  3. Imposta BackgroundTransparency su 0.5 per rendere lo sfondo dell'etichetta a metà trasparente.
  4. Imposta Position su {0.5, 0},{0.5, 0} per posizionare l'etichetta al centro del suo contenitore (50% da sinistra a destra dello ScreenGui genitore e 50% dall'alto al basso dello ScreenGui genitore).
  5. Imposta Size su {1, 0},{1, 0} per allargare l'etichetta a tutto lo schermo (100% orizzontalmente e 100% verticalmente dello ScreenGui genitore).
  6. Imposta ZIndex su -1 per visualizzare la dissolvenza dietro gli altri elementi UI.
  7. Imposta Name su Header.
  8. Imposta Image su rbxassetid://14309518613 per rendere l'immagine una dissolvenza ai bordi.
  9. Imposta ImageTransparency su 0.1 per rendere la dissolvenza leggermente traslucida.
Per migliorare le prestazioni, puoi saltare l'asset dell'immagine e invece utilizzare un oggetto UIGradient con una sequenza di numeri di trasparenza personalizzata. Per saperne di più su questa tecnica di dissolvenza, vedere UI Appearance Modifiers - Gradient.
Fai riferimento ai seguenti script ReplicatedStorage all'interno del file di esempio Laser Tag che visualizzano programmaticamente lo schermo di riavvio quando la salute di un giocatore raggiunge zero e sono in procinto di riavviarsi nella zona di spawn del loro team.

Il seguente script client ReplicatedStorage.PlayerStateHandler contiene funzioni che attivano diversi tipi di comportamento in base all'attributo playerState. Tutte le risposte agli eventi sono logicamente raggruppate in questo script perché richiedono un comportamento simile di abilitazione o disabilitazione dei controlli del giocatore, del movimento della telecamera e di quale livello UI è visibile.

Quando la salute di un giocatore raggiunge zero, il loro playerState diventa TaggedOut, il che attiva la funzione onTaggedOut(). onTaggedOut() attiva immediatamente il seguente comportamento:

Il giocatore non può muoversi nell'arena.
Il giocatore non può muovere la propria telecamera.
Il giocatore non può usare il proprio blaster.
Il StarterGui.OutStateGui diventa esclusivamente abilitato.

Quando il giocatore si riavvia, il loro playerState diventa SelectingBlaster, il che attiva la funzione onSelectingBlaster(). onSelectingBlaster() abilita quindi esclusivamente il StarterGui.PickABlasterGui, che disabilita automaticamente lo schermo di riavvio. Per ulteriori informazioni su queste condizioni, vedere Handle Client State dal curriculum di Gameplay Scripting.

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")

local PlayerState = require(ReplicatedStorage.PlayerState)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local BlasterState = require(ReplicatedStorage.Blaster.BlasterState)
local togglePlayerMovement = require(script.togglePlayerMovement)
local togglePlayerCamera = require(script.togglePlayerCamera)
local scheduleDestroyForceField = require(ReplicatedStorage.scheduleDestroyForceField)

local localPlayer = Players.LocalPlayer

local playerGui = localPlayer.PlayerGui
local guiLayers = {
	playerGui:WaitForChild("HUDGui"),
	playerGui:WaitForChild("OutStateGui"),
	playerGui:WaitForChild("PickABlasterGui"),
}

-- Disabilita tutti i livelli UI tranne l'eccezione data
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
	-- guiLayers contiene un elenco delle gui che dovrebbero essere impostate esclusivamente.
	for _, screenGui in guiLayers do
		screenGui.Enabled = screenGui == enabledGui
	end
end

local function onSelectingBlaster()
	-- Abilita la telecamera in modo che i giocatori possano guardarsi intorno mentre selezionano un blaster
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- Disabilita il blaster mentre si seleziona un blaster
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlaying()
	-- Abilita il movimento del giocatore dopo aver scelto un blaster
	togglePlayerMovement(true)
	setGuiExclusivelyEnabled(playerGui.HUDGui)

	-- Abilita il blaster mentre si gioca
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)

	-- Pianifica la logica di distruzione del campo di forza quando il giocatore inizia a giocare
	scheduleDestroyForceField()
end

local function onTaggedOut()
	-- Disabilita i controlli mentre è taggato fuori
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

	-- Disabilita il blaster mentre è taggato fuori
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onInLobby()
	-- Abilita i controlli mentre si è in lobby
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- Nascondi tutto l'HUD mentre si è in lobby
	setGuiExclusivelyEnabled(nil)

	-- Disabilita il blaster mentre si è in lobby
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlayerStateChanged(newPlayerState: string)
	if newPlayerState == PlayerState.SelectingBlaster then
		onSelectingBlaster()
	elseif newPlayerState == PlayerState.Playing then
		onPlaying()
	elseif newPlayerState == PlayerState.TaggedOut then
		onTaggedOut()
	elseif newPlayerState == PlayerState.InLobby then
		onInLobby()
	else
		warn(`Stato giocatore non valido ({newPlayerState})`)
	end
end

-- Gestisci lo stato iniziale del giocatore se impostato
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)

local function updateFromPlayerState()
	onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end

-- Gestisci futuri aggiornamenti dello stato del giocatore
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)

-- Assicurati che le modifiche vengano ancora applicate dopo il riavvio
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

Ora, ogni volta che la salute di un giocatore raggiunge zero, lo schermo di riavvio viene visualizzato fino a quando il giocatore non si riavvia nella propria zona di spawn.

Ora che sei familiare con i comuni GuiObjects per l'interfaccia utente sullo schermo, prova a ricreare l'oggetto RoundResultsGui ScreenGui e tutti i suoi figli per la visualizzazione sullo schermo quando i giocatori vincono o perdono una partita. Puoi utilizzare il file di esempio del gioco laser tag (https://www.roblox.com/games/14817965191/Laser-Tag-1A) .rbxl come riferimento, o modificare i valori per soddisfare i requisiti di gioco del tuo gioco.

Crea oggetti SurfaceGui

Per visualizzare l'interfaccia utente sulla superficie di una parte nello spazio 3D che risponde alla logica di scripting per ogni singolo giocatore, puoi parentare un oggetto SurfaceGui alla parte in cui desideri visualizzare la tua interfaccia utente all'interno del servizio ReplicatedStorage. Questa tecnica garantisce che la tua interfaccia utente e la sua logica di scripting siano disponibili sia per il server che per il client di ogni giocatore.

Gli oggetti SurfaceGui contengono tutti i GuiObjects che vengono visualizzati sulla superficie di una parte nello spazio 3D. Il gioco di esempio laser tag include solo un'istanza di un oggetto SurfaceGui: il misuratore di cooldown che viene visualizzato sopra il blaster di ogni giocatore. Questo oggetto ha bisogno di logica di scripting per ogni giocatore perché risponde attivamente all'input di ciascun giocatore e fornisce un feedback visivo su quando possono sparare di nuovo.

Per creare un oggetto SurfaceGui:

Nella finestra Explorer, passa sopra il servizio ReplicatedStorage, quindi clicca sull'icona ⊕. Viene visualizzato un menu contestuale.
Dal menu contestuale, inserisci un oggetto Part.
Inserisci un oggetto ScreenGui nella parte.
Rinomina il SurfaceGui in base al contesto dei suoi elementi UI figli.
Ripeti questo processo per ogni elemento UI che devi visualizzare sulla superficie di una parte nello spazio 3D.

Misuratore di cooldown

Un misuratore di cooldown è un componente UI che informa i giocatori quanto tempo devono aspettare prima di poter sparare di nuovo con il loro blaster. Questa leggera pausa impedisce ai giocatori di sparare così rapidamente come possono cliccare o premere un pulsante, il che è irrealistico per il gameplay del laser tag.

Per ricreare esattamente il misuratore di cooldown all'interno del gioco di esempio Laser Tag:

Crea una parte per contenere il tuo oggetto SurfaceGui.
1. Nella finestra Explorer, passa sopra il Workspace, quindi clicca sull'icona ⊕. Viene visualizzato un menu contestuale.
2. Dal menu contestuale, inserisci una parte block. Questo è un luogo temporaneo per la parte in modo da poter visualizzare le modifiche in ogni fase del processo.
Posiziona e orienta la parte attorno alla posizione in cui il personaggio di un giocatore terrebbe il proprio blaster, quindi nella finestra Properties,
1. Imposta Transparency su 1 per rendere la parte completamente trasparente.
2. Imposta Name su CooldownBarPrefab.
3. Imposta Size su 0.169, 0.027, 2.537 per scalare la parte a una dimensione simile alla lunghezza del blaster.
4. Disabilita CanCollide e CanQuery.
Inserisci un SurfaceGui in CooldownBarPrefab.
Seleziona il nuovo SurfaceGui, quindi nella finestra Properties,
1. Imposta Face su Top in modo che l'interfaccia utente venga visualizzata rivolta verso l'alto.
2. Imposta LightInfluence e MaxDistance su 0.
3. Imposta PixelsPerStud su 200.
Crea la barra nera.
1. Inserisci un ImageLabel nel SurfaceGui.
2. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Rimuovi il valore predefinito di Image.
  2. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro di se stessa (50% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
  3. Imposta BackgroundColor3 su 0,0,0 per impostare il colore di sfondo dell'etichetta su nero.
  4. Imposta BackgroundTransparency su 0.4 per rendere lo sfondo dell'etichetta semi-trasparente.
  5. Imposta Position su {0.5, 0},{0.5, 0} per posizionare l'etichetta al centro del suo contenitore (50% da sinistra a destra del SurfaceGui genitore e 50% dall'alto al basso del SurfaceGui genitore).
  6. Imposta Size su {1, 0},{1, 0} per allargare l'etichetta a tutta la parte (100% orizzontalmente e 100% verticalmente del SurfaceGui genitore).
  7. Imposta Name su Container.
Arrotonda gli angoli del contenitore.
1. Inserisci un oggetto UICorner in Container.
2. Seleziona il UICorner, quindi nella finestra Properties, imposta CornerRadius su 0.15, 0 per arrotondare leggermente gli angoli.
Crea la barra rossa.
1. Inserisci un ImageLabel in Container.
2. Seleziona la nuova etichetta, quindi nella finestra Properties,
  1. Rimuovi il valore predefinito di Image.
  2. Imposta AnchorPoint su 1, 0.5 per impostare il punto di origine dell'etichetta nella parte destra centrale di se stessa (100% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
  3. Imposta BackgroundColor3 su 172, 13, 13 per impostare il colore di sfondo dell'etichetta su un rosso scuro.
  4. Imposta BackgroundTransparency su 0.2 per rendere lo sfondo dell'etichetta leggermente trasparente.
  5. Imposta Name su Bar.
  6. Imposta Position su {1, 0},{0.5, 0} per posizionare l'etichetta nella parte destra centrale del suo contenitore (100% da sinistra a destra dell'etichetta genitore e 50% dall'alto al basso dell'etichetta genitore).
  7. Imposta Size su {0, 0},{1, 0} per allungare l'etichetta fino alla parte superiore della sua etichetta genitore (0% orizzontalmente e 100% verticalmente dell'etichetta genitore). Questo passaggio è anche utile per il comportamento di tweening che si verifica negli script nel passo 8.
Arrotonda gli angoli dell'etichetta.
1. Inserisci un oggetto UICorner in Bar.
2. Seleziona il UICorner, quindi nella finestra Properties, imposta CornerRadius su 0.15, 0 per arrotondare leggermente gli angoli.
Sposta CooldownBarPrefab in ReplicatedStorage.
1. Crea una struttura di cartelle per organizzare i tuoi oggetti UI. Il campione utilizza una cartella Instances con una cartella figlia Guis.
2. Sposta CooldownBarPrefab in Guis.
Fai riferimento ai seguenti script ReplicatedStorage all'interno del file di esempio Laser Tag che collegano programmaticamente il misuratore di cooldown al blaster del giocatore, quindi animano la barra rossa dopo che un giocatore ha sparato con il proprio blaster.

Il seguente script client ReplicatedStorage.FirstPersonBlasterVisuals gestisce tutta la logica visiva per il blaster in prima persona del giocatore. Richiede un insieme di script modulo che lavorano insieme per impostare le visualizzazioni del blaster che sembrano più realistiche per il gameplay del laser tag, inclusi FirstPersonBlasterVisuals.addCooldownBar e FirstPersonBlasterVisuals.runCooldownBarEffect.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Workspace = game:GetService("Workspace")
local RunService = game:GetService("RunService")

local BlastData = require(ReplicatedStorage.Blaster.BlastData)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local PlayerState = require(ReplicatedStorage.PlayerState)
local getBlasterConfig = require(ReplicatedStorage.Blaster.getBlasterConfig)

local runBlastVisuals = require(script.runBlastVisuals)
local setupAnimations = require(script.setupAnimations)
local addCooldownBar = require(script.addCooldownBar)
local runCooldownBarEffect = require(script.runCooldownBarEffect)

local laserBlastedBindableEvent = ReplicatedStorage.Instances.LaserBlastedBindableEvent

local RIG_OFFSET_FROM_CAMERA = CFrame.new(2, -2, -3) * CFrame.Angles(math.rad(0.25), math.rad(95.25), 0)

local localPlayer = Players.LocalPlayer
local currentCamera = Workspace.CurrentCamera

local rigModel = nil
local cooldownBar = nil
local animations = {}

local function addFirstPersonVisuals()
	local blasterConfig = getBlasterConfig()

	-- Aggiungi il rig in prima persona
	rigModel = blasterConfig.RigModel:Clone()
	rigModel.Parent = Workspace

	-- Aggiungi il cooldownBar
	cooldownBar = addCooldownBar(rigModel.PrimaryPart.CooldownBarAttachment)

	animations = setupAnimations(blasterConfig, rigModel)
end

local function removeFirstPersonVisuals()
	for _, animation in animations do
		animation:Stop()
		animation:Destroy()
		animation = nil
	end
	if rigModel then
		-- Questo distrugge anche la barra di cooldown poiché è parentata al rig
		rigModel:Destroy()
		rigModel = nil
	end
end

-- Esegui effetti visivi in prima persona quando si verifica un colpo
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
	runCooldownBarEffect(cooldownBar)
end)

-- Collega il rig alla telecamera se esiste
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Aggiorna il CFrame del rig rispetto alla posizione della telecamera e a RIG_OFFSET_FROM_CAMERA
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- Gestisce il cambiamento delle visualizzazioni quando il blasterType cambia mentre si gioca
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
	local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	if playerState == PlayerState.Playing then
		removeFirstPersonVisuals()
		addFirstPersonVisuals()
	end
end)

-- Gestisce il cambiamento delle visualizzazioni quando cambia lo stato del giocatore
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Rimuovi le visualizzazioni quando il giocatore sta selezionando un blaster o è in lobby
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Aggiungi di nuovo le visualizzazioni quando il giocatore termina di selezionare il blaster.
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

Ora, ogni volta che un giocatore spara con il proprio blaster, la barra di cooldown si anima per comunicare quando il giocatore può sparare di nuovo.

Crea oggetti BillboardGui

Per visualizzare elementi UI all'interno dello spazio 3D che rispondono alla logica di scripting e affrontano sempre la telecamera di ogni giocatore indipendentemente dal loro angolo di visualizzazione, come nomi dei giocatori o marcatori della mappa, puoi creare un oggetto BillboardGui come figlio di un BasePart o Attachment che esiste nello spazio 3D.

Il gioco di esempio laser tag include due oggetti BillboardGui separati all'interno del servizio ReplicatedStorage:

OtherPlayerIndicatorGuiPrefab - Visualizza un cerchio rosa o verde sopra la testa di ogni giocatore quando sono attivi in un turno.
TaggedOutIndicatorGuiPrefab - Viene visualizzato sopra la testa di un giocatore quando è stato eliminato dal turno.

Dopo aver creato un oggetto BillboardGui, puoi creare e personalizzare i suoi GuiObjects figli in base allo scopo di ciascun contenitore. Per dimostrare, nelle sezioni immediate che seguono, imparerai come implementare elementi UI per entrambi i tipi di indicatori all'interno del gioco di esempio laser tag. Puoi modificare qualsiasi parte del processo per soddisfare le specifiche del tuo gioco.

Per creare un oggetto BillboardGui:

Nella finestra Explorer, passa sopra un BasePart o Attachment, quindi clicca sull'icona ⊕. Viene visualizzato un menu contestuale.
Dal menu contestuale, inserisci un oggetto BillboardGui.
Rinomina il BillboardGui in base al contesto dei suoi elementi UI figli.
Ripeti questo processo per ogni elemento UI che devi visualizzare contestualmente sopra le teste dei giocatori.

Indicatore di squadra

Un indicatore di squadra è un elemento UI che informa i giocatori a quale squadra appartengono gli altri giocatori nel turno in modo che possano facilmente differenziare tra i loro alleati e i membri del team nemico. Queste informazioni sono importanti perché il gameplay di un gioco di tiro in prima persona richiede ai giocatori di prendere decisioni strategiche rapide mentre si trovano in zone di combattimento in modo da non essere eliminati e perdere la partita.

Per ricreare esattamente l'indicatore di squadra all'interno del gioco di esempio Laser Tag:

Inserisci un oggetto BillboardGui in un rig temporaneo.
1. Dalla scheda Home o Avatar della barra degli strumenti, clicca su Character.
2. Seleziona tra le opzioni disponibili. Il campione utilizza un tipo di rig R15, una forma del corpo femminile e un avatar Rthro. Il rig viene visualizzato sia nel viewport 3D che nella finestra Explorer sotto il nome Rig.
3. Nella finestra Explorer, naviga al mesh Head del rig, quindi clicca sull'icona ⊕. Viene visualizzato un menu contestuale.
4. Dal menu contestuale, inserisci un BillboardGui.
Seleziona il nuovo BillboardGui, quindi nella finestra Properties,
1. Imposta LightInfluence su 0 per impedire alla luce ambientale di influenzare il colore dell'indicatore.
2. Imposta Name su OtherPlayerIndicatorPrefab.
3. Imposta Size su {0, 10},{0, 10} per rendere l'etichetta significativamente più piccola.
4. Imposta StudsOffsetWorldSpace su 0, 4, 0 per posizionarlo sopra la testa del rig.
Inserisci un oggetto Frame in OtherPlayerIndicatorPrefab.
Seleziona il nuovo frame, quindi nella finestra Properties,
1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine del frame al centro di se stesso (50% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
2. Imposta BackgroundColor3 su 255, 3, 0 per impostare il colore di sfondo del frame su rosso come colore segnaposto.
3. Imposta Position su {0.5, 0},{0.5, 0} per posizionare il frame al centro del suo contenitore (50% da sinistra a destra del BillboardGui genitore e 50% dall'alto al basso del BillboardGui genitore).
4. Imposta Size su {1, -2},{1, -2} per accorciare il frame all'area superficiale del BillboardGui.
Inserisci un oggetto UICorner in Frame per arrotondare completamente gli angoli.
Inserisci un oggetto UIStroke in Frame per delineare il cerchio dell'indicatore.
Sposta OtherPlayerIndicatorPrefab in ReplicatedStorage.
Fai riferimento al seguente script ReplicatedStorage all'interno del file di esempio Laser Tag 1A che visualizza programmaticamente l'indicatore di squadra per ogni giocatore in un turno attivo a meno che non siano nel team nemico e occlusi.

Il seguente script ReplicatedStorage.OtherPlayerIndicatorGuiSetup viene eseguito quando i giocatori si spawnano nell'arena per un turno attivo. Attacca l'indicatore di squadra chiamando la funzione addIndicatorToCharacter(), che localizza l'oggetto Head di ciascun personaggio giocatore che partecipa al turno. Se non hanno già un indicatore di squadra, lo script clona e aggiunge l'interfaccia utente otherPlayerIndicatorPrefab alla Head del personaggio e imposta il colore dell'indicatore di squadra sul colore della loro squadra.

Se altri giocatori sono nella stessa squadra, l'indicatore di squadra viene sempre visualizzato, anche se si nascondono dietro oggetti nello spazio 3D; se altri giocatori sono nel team nemico, l'indicatore di squadra viene visualizzato solo se non c'è un oggetto nello spazio 3D che li occlude.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local localPlayer = Players.LocalPlayer
local otherPlayerIndicatorPrefab = ReplicatedStorage.Instances.Guis.OtherPlayerIndicatorPrefab

local characterSpawnConnectionsByPlayer: { [Player]: RBXScriptConnection } = {}
local playerAddedConnection: RBXScriptConnection?

local function removeIndicatorFromPlayer(player: Player)
	if not player.Character then
		return
	end

	local head = player.Character:WaitForChild("Head", 3)
	if not head then
		return
	end

	local gui = head:FindFirstChild(otherPlayerIndicatorPrefab.Name)
	if gui then
		gui:Destroy()
	end
end

local function addIndicatorToCharacter(otherCharacter: Model?)
	local otherPlayer = Players:GetPlayerFromCharacter(otherCharacter)
	if not otherPlayer then
		return
	end

	task.spawn(function()
		local otherHead = otherCharacter:WaitForChild("Head", 3)
		if not otherHead then
			return
		end

		-- Aggiungi indicatori solo ai giocatori che partecipano al turno
		if not otherPlayer.Team then
			return
		end

		-- Evita di aggiungere indicatori duplicati, creando un nuovo solo se non esiste
		local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
		if not gui then
			gui = otherPlayerIndicatorPrefab:Clone()
			gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
			gui.Parent = otherHead
		end

		-- L'indicatore è sempre in cima solo se il giocatore è amico

		local isFriendly = otherPlayer.Team == localPlayer.Team
		gui.AlwaysOnTop = isFriendly
	end)
end

local function addIndicatorWhenCharacterSpawns(player: Player)
	if characterSpawnConnectionsByPlayer[player] then
		return
	end
	local connection = player.CharacterAdded:Connect(addIndicatorToCharacter)
	characterSpawnConnectionsByPlayer[player] = connection
end

local function stopSyncingIndicators()
	for _, connection in characterSpawnConnectionsByPlayer do
		connection:Disconnect()
	end
	table.clear(characterSpawnConnectionsByPlayer)

	if playerAddedConnection then
		playerAddedConnection:Disconnect()
		playerAddedConnection = nil
	end

	for _, player in Players:GetPlayers() do
		removeIndicatorFromPlayer(player)
	end
end

local function addIndicatorToPlayer(player: Player)
	if player == localPlayer then
		return
	end

	addIndicatorToCharacter(player.Character)
	addIndicatorWhenCharacterSpawns(player)
end

local function startSyncingIndicators()
	for _, player in Players:GetPlayers() do
		addIndicatorToPlayer(player)
	end

	if not playerAddedConnection then
		playerAddedConnection = Players.PlayerAdded:Connect(addIndicatorToPlayer)
	end
end

local function onLocalTeamChanged()
	local localTeam = localPlayer.Team
	if localTeam then
		startSyncingIndicators()
	else
		stopSyncingIndicators()
	end
end

localPlayer:GetPropertyChangedSignal("Team"):Connect(onLocalTeamChanged)
onLocalTeamChanged()

Ora, ogni volta che un giocatore è in un turno attivo, gli indicatori di squadra vengono visualizzati sopra le teste degli altri giocatori a meno che non siano nel team nemico e dietro un oggetto.

Indicatore di tag

Un indicatore di tag è un elemento UI che informa i giocatori quando altri giocatori non sono più attivi nel turno e sono in procinto di riavviarsi nella loro zona di spawn. Queste informazioni sono importanti perché il gameplay di un gioco di tiro in prima persona richiede ai giocatori di passare al loro prossimo obiettivo non appena taggano un giocatore in modo da non diventare vulnerabili nell'arena rimanendo a lungo nella stessa posizione.

Per ricreare esattamente l'indicatore di tag all'interno del gioco di esempio Laser Tag:

Inserisci un oggetto BillboardGui in un rig temporaneo in modo da poter visualizzare le modifiche in ogni fase del processo.
1. Dalla scheda Home o Avatar della barra degli strumenti, clicca su Character.
2. Seleziona tra le opzioni disponibili. Il campione utilizza un tipo di rig R15, una forma del corpo maschile e un avatar Rthro. Il rig viene visualizzato sia nel viewport 3D che nella finestra Explorer sotto il nome Rig.
3. Nella finestra Explorer, naviga al mesh Head del rig, quindi clicca sull'icona ⊕. Viene visualizzato un menu contestuale.
4. Dal menu contestuale, inserisci un BillboardGui.
Seleziona il nuovo BillboardGui, quindi nella finestra Properties,
1. Imposta LightInfluence su 0 per impedire alla luce ambientale di influenzare il colore dell'indicatore.
2. Imposta Name su TaggedOutIndicatorGuiPrefab.
3. Imposta Size su {3, 0},{0.5, 0} per allargare lo spazio per un'etichetta.
4. Imposta StudsOffset su 0, 3.25, 0 per posizionarlo sopra la testa di un giocatore.
Inserisci un oggetto ImageLabel in TaggedOutIndicatorGuiPrefab.
Seleziona la nuova etichetta, quindi nella finestra Properties,
1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro di se stessa (50% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
3. Imposta Name su Frame.
4. Imposta Position su {0.5, 0},{0.5, 0} per posizionare l'etichetta al centro del suo contenitore (50% da sinistra a destra del BillboardGui genitore e 50% dall'alto al basso del BillboardGui genitore).
5. Imposta Size su {1, 0},{1, 0} per allargare l'etichetta a tutto il BillboardGui (100% orizzontalmente e 100% verticalmente del BillboardGui genitore).
6. Imposta Image su rbxassetid://14304826985 per rendere l'immagine una dissolvenza multidirezionale.
7. Imposta ImageColor su 245, 46, 46 per tingere l'etichetta di rosso.
Per migliorare le prestazioni, puoi saltare l'asset dell'immagine e invece utilizzare un oggetto UIGradient con una sequenza di numeri di trasparenza personalizzata. Per saperne di più su questa tecnica di dissolvenza, vedere UI Appearance Modifiers - Gradient.
Inserisci un oggetto TextLabel in Frame.
Seleziona la nuova etichetta, quindi nella finestra Properties,
1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro di se stessa (50% da sinistra a destra dell'etichetta e 50% dall'alto al basso dell'etichetta).
2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
3. Imposta Name su BodyTextLabel.
4. Imposta Position su {0.5, 0},{0.5, 0} per posizionare l'etichetta al centro del suo contenitore (50% da sinistra a destra dell'etichetta genitore e 50% dall'alto al basso dell'etichetta genitore).
5. Imposta Size su {0.85, 0},{0.7, 0} in modo che il testo possa occupare la maggior parte dell'area della dissolvenza (85% orizzontalmente e 70% verticalmente dell'etichetta immagine genitore).
6. Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
7. Imposta Weight su Bold per ispessire il carattere.
8. Imposta Text su TAGGED.
9. Imposta TextColor3 su 255, 255, 255 per rendere il testo bianco.
10. Abilita TextScaled.
Sposta TaggedOutIndicatorGuiPrefab in ReplicatedStorage.
Fai riferimento ai seguenti script ServerScriptService all'interno del file di esempio Laser Tag 1A che visualizzano programmaticamente l'indicatore di tag mentre un giocatore si riavvia nella zona di spawn del proprio team.

Il seguente script server ServerScriptService.SetupHumanoid viene eseguito non appena un giocatore carica il gioco. Garantisce che ogni volta che un personaggio di un giocatore viene aggiunto al modello di dati, setupHumanoidAsync venga chiamato con il loro Humanoid.

local Players = game:GetService("Players")

local setupHumanoidAsync = require(script.setupHumanoidAsync)

local function onCharacterAdded(player: Player, character: Model)
	local humanoid = character:WaitForChild("Humanoid")
	setupHumanoidAsync(player, humanoid)
end

local function onPlayerAdded(player: Player)
	-- Chiama onCharacterAdded se il giocatore ha già un personaggio
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- Chiama onCharacterAdded per tutti i futuri spawn di personaggi per questo giocatore
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

-- Chiama onPlayerAdded per qualsiasi giocatore già nel gioco
for _, player in Players:GetPlayers() do
	onPlayerAdded(player)
end
-- Chiama onPlayerAdded per tutti i futuri giocatori
Players.PlayerAdded:Connect(onPlayerAdded)

Ora, ogni volta che la salute di un giocatore raggiunge zero, l'indicatore di eliminazione viene visualizzato sopra la loro testa fino a quando non respawnano.

Congratulazioni per aver completato il Curriculum di Design dell'Interfaccia Utente! Ora che hai esperienza nella creazione di uno stile artistico, nella progettazione dei tuoi layout e nell'implementazione dei tuoi design in Studio dall'inizio alla fine, puoi estendere il tuo progetto con nuove UI e funzionalità, o seguire ulteriori curricula di tutorial, come il Curriculum di Scripting del Gioco che ti insegna l'organizzazione generale e i dettagli chiave di implementazione del gioco di esempio del laser tag. Buona creazione!