Implementare i design nello Studio | Documentazione

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

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

Recuperare gli ID degli asset dalla libreria di asset UI in modo da poter ricreare i componenti UI dell'esperienza di laser tag campione.
Emulare vari dispositivi direttamente nello Studio per vedere come la tua UI appare 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 emozionanti che aiutano i giocatori a navigare in ciò che possono fare all'interno delle tue esperienze.

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 usare i valori forniti, puoi regolare ogni elemento UI per soddisfare le specifiche della tua esperienza 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 dallo Creator Store include nove asset UI individuali 2D e le versioni finali del componente obiettivo, selettore di blaster e 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 Invertito**
rbxassetid://14304827304

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

**Fade Multidirezionale**
rbxassetid://14304827147

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

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

**Icona Mirino**
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 nella tua esperienza:

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.
Nello Studio, naviga alla scheda Home, quindi fai clic sul pulsante Toolbox. Si apre la finestra Toolbox.
Nella finestra Toolbox, fai clic sulla scheda Inventario. La visualizzazione I Miei Modelli viene mostrata.
Fai clic sul menu a discesa, quindi seleziona la visualizzazione I Miei Pacchetti.
Fai clic sul riquadro 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.

Emulare dispositivi

Il Dispositivo Emulator dello 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 del tuo viewport nello Studio non riflette necessariamente il rapporto d'aspetto degli schermi utilizzati dai giocatori per accedere alla tua esperienza, 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 dello Studio, attiva Emulatore Dispositivo.
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 del dispositivo, seleziona almeno un dispositivo nelle 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 sullo schermo, e il servizio StarterGui copia il suo contenuto nel contenitore PlayerGui di ogni giocatore man mano che entrano in un'esperienza.

Puoi creare più oggetti ScreenGui per organizzare e visualizzare raggruppamenti di elementi UI contestualmente durante il gameplay. Ad esempio, l'esperienza campione di laser tag include cinque separati oggetti ScreenGui che sono inizialmente disabilitati finché i giocatori non soddisfano diverse condizioni durante il principale flusso utente dell'esperienza:

HUDGui - Visualizza informazioni chiave sul gameplay dell'esperienza quando i giocatori sono attivi in un round, come l'obiettivo e il punteggio totale di ciascuna squadra.
PickABlasterGui - Visualizza tutte le scelte di blaster quando i giocatori iniziano o rientrano in 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'oscuramento scuro sopra lo schermo con informazioni su quale squadra ha vinto il round.

Dopo aver creato un oggetto ScreenGui, puoi creare e personalizzare i suoi GuiObjects figli secondo il scopo di ciascun contenitore. Per dimostrare, nelle sezioni immediate seguenti, imparerai come implementare elementi UI per le tre categorie di informazioni che i giocatori devono conoscere per avere successo nell'esperienza campione di laser tag. Puoi regolare qualsiasi parte del processo per soddisfare le specifiche della tua esperienza.

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 figli.
Ripeti questo processo per ciascun raggruppamento di elementi UI che devi visualizzare su ogni schermo dei giocatori.

Obiettivo UI

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

Ad esempio, il campione fornisce un componente UI obiettivo a cui i giocatori si riferiscono per sapere cosa devono fare per avere successo in un round. Mentre i giocatori eliminano i membri del team nemico e guadagnano punti, questo componente tiene traccia del punteggio di ciascuna squadra rispetto all'obiettivo generale all'interno del prompt dell'intestazione. Per una revisione ad alto livello di tutti gli script client e server che lavorano insieme per tracciare i punti, vedere Track points nel Curriculum di Scripting di Gameplay.

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 ScreenGui HUDGui.
  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 verso il 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 verso il basso dello schermo in modo da avere un po' di 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 catturare 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 di 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 verso il 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 genitore e 0% dall'alto verso il basso del frame genitore).
  4. Imposta Size su {1, 0},{0.67, 0} in modo che i componenti UI di selezione occupino circa più della metà del contenitore dall'alto verso il basso (100% orizzontalmente e 67% verticalmente del frame genitore).
  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 verso il 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 genitore e 34% dall'alto verso il basso del frame genitore).
  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 genitore).
  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 di 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 nell'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 nel mezzo di essa (50% da sinistra a destra dell'etichetta e 50% dall'alto verso il 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 genitore (50% da sinistra a destra dell'etichetta genitore e 50% dall'alto verso il basso dell'etichetta genitore).
  4. Imposta Size su {0.62, 0},{0.55, 0} per allargare lo spazio di testo a più della metà dell'etichetta genitore (62% 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 Medium per ispessire il carattere.
  8. Imposta Text su OBIETTIVO.
  9. Abilita TextScaled.
Crea gli elementi 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 verso il 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 nella parte inferiore centrale del suo frame genitore (50% da sinistra a destra del frame genitore e 100% dall'alto verso il basso del frame genitore).
  4. Imposta Size su {0.89, 0},{0.66, 0} per allargare lo spazio di testo a quasi l'intera larghezza del frame genitore (89% orizzontalmente e 66% verticalmente del frame genitore).
  5. Imposta Name su Body.
  6. Imposta Image su rbxassetid://14304827265 per visualizzare un trapezio invertito.
  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 di 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 nel mezzo di essa (50% da sinistra a destra dell'etichetta e 50% dall'alto verso il 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 genitore (50% da sinistra a destra dell'etichetta genitore e 50% dall'alto verso il basso dell'etichetta genitore).
  4. Imposta Size su {0.85, 0},{0.39, 0} per allargare lo spazio di testo a più della metà dell'etichetta genitore (85% orizzontalmente e 39% verticalmente dell'etichetta genitore).
  5. Imposta Name su BodyTextLabel.
  6. Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
  7. Imposta Weight su Medium per ispessire il carattere.
  8. Imposta TextColor3 su 255, 255, 255 per rendere il testo bianco rispetto allo 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 esso (50% da sinistra a destra del frame e 100% dall'alto verso il 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 impostare il frame nella parte inferiore centrale del contenitore (50% da sinistra a destra del frame genitore e 100% dall'alto verso il basso del frame genitore).
  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 genitore).
  5. Imposta Name su TeamPointCounter.
Crea il padding per i contatori di squadra.
1. Inserisci un oggetto UIListLayout nel frame dal 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 dell'altro.
Crea gli elementi del contatore per il team 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 nella parte inferiore centrale del suo frame genitore (50% da sinistra a destra del frame genitore e 100% dall'alto verso il basso del frame genitore).
  3. Imposta Size su {0.5, 0},{1, 0} per allargare l'etichetta per occupare la metà della larghezza del frame genitore (50% orizzontalmente e 100% verticalmente del frame genitore).
  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 tracciare che questa etichetta è per il team verde.
  1. Nella finestra Properties, naviga alla sezione Attributes, quindi fai clic sull'icona plus. 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 verso il 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 genitore (95% da sinistra a destra dell'etichetta genitore e 50% dall'alto verso il basso dell'etichetta genitore).
  4. Imposta Size su {0.85, 0},{0.39, 0} per allargare lo spazio di testo a più della metà dell'etichetta genitore (85% orizzontalmente e 39% verticalmente dell'etichetta genitore).
  5. Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
  6. Imposta Weight su Bold per ispessire il carattere.
  7. Imposta TextColor3 su 255, 255, 255 per rendere il testo bianco rispetto allo sfondo scuro.
  8. Imposta Text su -.
  9. Abilita TextScaled.
  10. Imposta TextXAlignment su Right.
6. Inserisci un oggetto UIStroke nell'TextLabel, quindi nella finestra Properties, imposta Color su 8, 78, 52 per contornare il tratto con un contorno verde scuro.
Crea gli elementi del contatore per il team rosa.
1. Duplica TeamAICounter e i suoi figli.
2. Seleziona il duplicato 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 carne.
  4. Imposta l'attributo teamColor su Carnation Pink.
3. Seleziona il duplicato 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 verso il basso dell'etichetta).
  2. Imposta Position su {0.05, 0},{0.5, 0} per spostare l'etichetta a sinistra della sua etichetta genitore (5% da sinistra a destra dell'etichetta genitore e 50% dall'alto verso il basso dell'etichetta genitore).
  3. Imposta TextXAlignment su Left.
4. Seleziona il duplicato UIStroke figlio di TeamBCounter, quindi nella finestra Properties, imposta Color su 158, 18, 94 per contornare il tratto con un contorno rosa scuro.
Fai riferimento ai seguenti script di ReplicatedStorage all'interno del campione Laser Tag che aggiornano programmaticamente il prompt dell'obiettivo e tracciano i punti di squadra.

Il seguente script richiede un insieme di script di modulo che lavorano insieme per configurare 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 garantisce che tutti gli elementi UI dell'HUD vengano visualizzati correttamente in base allo stato, al dispositivo e allo stato della squadra del giocatore.


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 ha selezionato il proprio blaster, l'obiettivo UI viene visualizzato nella parte superiore dello schermo e traccia i punti di ciascuna squadra.

Blaster UI

Seguendo le migliori pratiche della gerarchia visiva da Wireframe Your Layouts, questa sezione ti insegna come implementare tutti gli elementi UI sullo 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 all'azione nello spazio 3D e ha la maggiore importanza per giocare al gioco.

Mirino

Un mirino è un elemento UI che informa i giocatori dove andranno a colpire quando sparano la loro arma. Questo elemento UI è un requisito fondamentale per il gameplay delle esperienze di sparatutto in prima persona perché i giocatori devono essere in grado di mirare con precisione il loro blaster ed eliminare i membri del team nemico.

Come la maggior parte delle altre esperienze nel genere degli sparatutto in prima persona, l'esperienza campione di laser tag posiziona il mirino 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, questo posizionamento consente al mirino di essere percepibile mentre si fonde anche con l'ambiente generale.

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

Inserisci un ImageLabel nell'oggetto ScreenGui HUDGui.
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 nel mezzo dell'etichetta (50% da sinistra a destra dell'etichetta e 50% dall'alto verso il 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 impostare 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 di 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 del team nemico. Come il mirino, questo elemento UI è un requisito fondamentale per il gameplay delle esperienze di sparatutto in prima persona perché fornisce un feedback visivo di quando i giocatori hanno successo nell'eliminare 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 nel mezzo 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 impostare l'etichetta al centro dello schermo.
5. Imposta Name su Hitmarker.
6. Imposta Size su {0.6, 0},{0.06, 0} per ridurre le dimensioni dei rettangoli attorno al centro del mirino.
7. Imposta ImageTransparency su 1 per rendere completamente trasparente l'hit marker. Gli script nel passo successivo riporteranno la trasparenza a 0 ogni volta che un colpo di un giocatore colpisce un altro giocatore del team nemico.
Fai riferimento ai seguenti script di ReplicatedStorage all'interno del campione Laser Tag che visualizzano programmaticamente l'hit marker quando un colpo colpisce un giocatore del team nemico.

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


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 il proprio blaster e il colpo colpisce un altro giocatore, l'hit marker viene mostrato momentaneamente.

Selettore di blaster

Un selettore di blaster è un componente UI che i giocatori usano per selezionare il tipo di blaster prima di unirsi o rientrare in un round. L'esperienza campione di laser tag 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 influenza la loro strategia durante il round, rendendo questo componente UI un flusso di lavoro essenziale per l'esperienza complessiva.

I seguenti passaggi dettagliano come creare diversi contenitori per i 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 all'interno del prefab del pulsante blaster secondo le istanze Configuration che rappresentano ciascun tipo di blaster.

Questa configurazione ti consente di creare ulteriori istanze Configuration per più tipi di blaster che verranno visualizzati automaticamente correttamente all'interno del selettore di blaster senza la necessità di 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 ScreenGui PickABlaster.
  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 verso il 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 verso il 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 catturare 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 dei suoi figli mantengano lo stesso rapporto di aspetto indipendentemente dalla dimensione dello schermo del giocatore. Il campione imposta la proprietà UIAspectRatioConstraint.AspectRatio su 5.
Crea un contenitore per mantenere i raggruppamenti di elementi UI.
1. Inserisci un Frame in Component.
2. Seleziona il nuovo frame, quindi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine dei frame nel mezzo di essi (50% da sinistra a destra del frame e 50% dall'alto verso il 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 genitore e 37.5% dall'alto verso il basso del frame genitore).
  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 genitore).
  5. Imposta Name su SelectionFrame.
Crea un prompt per il selettore di blaster.
1. Inserisci un ImageLabel in SelectionFrame.
2. Seleziona la nuova etichetta, poi 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 verso il 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 genitore e 22% dall'alto verso il basso del frame genitore).
  5. Imposta Size su {0.45, 0},{0.22, 0} per allargare l'area del prompt a quasi metà dell'etichetta (45% orizzontalmente e 22% verticalmente dell'etichetta genitore).
  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 di 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 nel mezzo di essa (50% da sinistra a destra dell'etichetta e 50% dall'alto verso il 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 genitore (50% da sinistra a destra dell'etichetta genitore e 50% dall'alto verso il basso dell'etichetta genitore).
  4. Imposta Size su {0.6, 0},{0.55, 0} per allargare lo spazio di testo a più della metà dell'etichetta genitore (60% 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 Medium per ispessire il carattere.
  8. Imposta Text su SELEZIONA UN BLASTER.
  9. Abilita TextScaled.
Crea il contenitore per i pulsanti del blaster e le frecce di selezione.
1. Inserisci un ImageLabel in SelectionFrame.
2. Seleziona la nuova etichetta, poi nella finestra Properties,
  1. Rimuovi il valore predefinito dell'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 verso il basso dell'etichetta).
  3. Imposta BackgroundColor su 0, 0, 0 per colorare l'etichetta di nero.
  4. Imposta BackgroundTransparency su 0.3 per ridurre l'opacità dell'etichetta del 30% e farla corrispondere a tutti gli elementi UI neri dell'esperienza.
  5. Imposta Position su {0.5, 0},{1, 0} per impostare l'etichetta al centro inferiore del frame (50% da sinistra a destra del frame genitore e 100% dall'alto verso il basso del frame genitore).
  6. Imposta Size su {1, 0},{0.77, 0} per allargare l'area dell'etichetta allo spazio sottostante il prompt (100% orizzontalmente e 77% verticalmente del frame genitore).
3. Arrotonda gli angoli del contenitore.
  1. Inserisci un oggetto UICorner nell'etichetta.
  2. Seleziona il nuovo oggetto angolare, poi nella finestra Properties, imposta CornerRadius su 0.075, 0 per arrotondare gli angoli.
Crea il contenitore per i pulsanti del blaster.
1. Inserisci un Frame nell'etichetta della fase 4.
2. Seleziona il nuovo frame, poi nella finestra Properties,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine del nuovo frame nel mezzo di esso (50% da sinistra a destra del frame e 50% dall'alto verso il basso del frame).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo del frame.1. Imposta Posizione su {0.5, 0},{0.5, 0} per posizionare il frame al centro della sua etichetta genitore (50% da sinistra a destra del frame genitore e 50% dall'alto in basso del frame genitore).
Imposta Dimensione 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 Nome su Contenitore.

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, poi nella finestra Proprietà,
  1. Imposta Padding su 0.035, 0 per fornire spazio tra tutti i futuri pulsanti.
  2. Imposta FillDirection su Orizzontale affinché ogni pulsante venga visualizzato uno accanto all'altro.
  3. Imposta sia AllineamentoOrizzontale che AllineamentoVerticale su Centro in modo che ogni pulsante si allinei al centro degli altri.
Crea il pulsante di navigazione sinistro.
1. Inserisci un oggetto ImageButton nell'ImageLabel del passo 4.
2. Seleziona il nuovo pulsante, poi nella finestra Proprietà,
  1. Rimuovi il valore predefinito di Immagine.
  2. Imposta AnchorPoint su 0, 0.5 per impostare il nuovo punto di origine del pulsante al centro a sinistra 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 Posizione 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 Dimensione 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 Nome su NavigationButtonLeft.
3. Arrotonda gli angoli del pulsante.
  1. Inserisci un oggetto UICorner nel pulsante.
  2. Seleziona il nuovo oggetto corner, poi nella finestra Proprietà, imposta CornerRadius su 0.1, 0 per arrotondare gli angoli.
4. Inserisci un oggetto ImageLabel nel pulsante.
5. Seleziona la nuova etichetta, poi nella finestra Proprietà,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il nuovo 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).
  2. Imposta Posizione su {0.45, 0},{0.5, 0} per posizionare l'etichetta vicino al centro del 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 appare visivamente al centro del pulsante a {0.5, 0},{0.5, 0}.
  3. Imposta Dimensione su {0.8, 0},{0.8, 0} per allargare l'area dell'etichetta per adattarsi al prompt sottostante (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 Immagine su rbxassetid://14309187238.
  6. Imposta ScaleType su Fit.
Crea il pulsante di navigazione destro.
1. Duplica NavigationButtonLeft.
2. Seleziona il pulsante duplicato, poi nella finestra Proprietà,
  1. Imposta AnchorPoint su 1, 0.5 per impostare il nuovo punto di origine del pulsante al centro a destra di se stesso (100% da sinistra a destra del pulsante e 50% dall'alto in basso del pulsante).
  2. Imposta Posizione 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 Nome su NavigationButtonRight.
3. Seleziona il suo oggetto figlio ImageLabel.
  1. Imposta Rotazione su 180 per capovolgere l'immagine.
  2. Imposta Posizione su {0.55, 0},{0.5, 0} per posizionare l'etichetta vicino al centro del 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 appare visivamente al centro del pulsante a {0.5, 0},{0.5, 0}.
Crea il pulsante SELEZIONA.
1. Inserisci un ImageButton in Componente. 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, poi nella finestra Proprietà,
  1. Rimuovi il valore predefinito di Immagine.
  2. Imposta AnchorPoint su 0.5, 1 per impostare il nuovo pulsante al centro in 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 Posizione 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 Dimensione 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 Nome su SelectButton.
3. Arrotonda gli angoli del pulsante.
  1. Inserisci un oggetto UICorner nel pulsante.
  2. Seleziona il nuovo oggetto corner, poi nella finestra Proprietà, imposta CornerRadius su 0.2, 0 per arrotondare gli angoli.
4. Inserisci un oggetto TextLabel nel pulsante per visualizzare una call to action.
5. Seleziona la nuova etichetta, poi nella finestra Proprietà,
  1. Imposta AnchorPoint su 0.5, 0.5 per impostare il nuovo 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).
  2. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  3. Imposta Posizione 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 Dimensione 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 Nome su SelectTextLabel.
  6. Imposta FontFace su Montserrat per adattarlo all'estetica futuristica.
  7. Imposta Weight su Medium per ispessire il font.
  8. Imposta Testo su SELEZIONA.
  9. Abilita TextScaled.
Crea un prefab per il pulsante blaster.
1. Nel servizio ReplicatedStorage, crea una struttura di cartelle per organizzare i tuoi oggetti UI. L'esempio utilizza una cartella Instances con una cartella figlia Guis.
2. Inserisci un oggetto ImageButton nella cartella Guis.
3. Seleziona il nuovo pulsante, poi nella finestra Proprietà,
  1. Rimuovi il valore predefinito di Immagine.
  2. Imposta AnchorPoint su 0.5, 0.5 per impostare il 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 Nome su BlasterButtonPrefab.
  6. Imposta Dimensione su {0.8, 0},{0.8, 0}.
  7. Imposta ImageTransparency su 1 per rendere completamente trasparente l'immagine.
4. Inserisci un UIAspectRatioConstraint in BlasterButtonPrefab per assicurarti che l'aspect ratio 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, poi nella finestra Proprietà, imposta CornerRadius su 0.05, 0 per arrotondare gli angoli.
6. Inserisci un oggetto ImageLabel in BlasterButtonPrefab.
7. Seleziona la nuova etichetta, poi nella finestra Proprietà,
  1. Rimuovi il valore predefinito di Immagine.
  2. Imposta AnchorPoint su 0.5, 0.5 per impostare il nuovo 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).
  3. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
  4. Imposta Posizione su {0.52, 0},{0.497, 0} per posizionare l'etichetta vicino al centro del 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 appare visivamente al centro del pulsante a {0.5, 0},{0.5, 0}.
  5. Imposta Dimensione 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.
Riferisci i seguenti script ReplicatedStorage all'interno del file del campione 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.

Il seguente script richiede un insieme di script che funzionano insieme per creare il selettore del blaster. Quando un giocatore entra nell'esperienza o rinasce in un round dopo che la sua salute scende a zero, questo script attiva tutti gli elementi UI del selettore del blaster finché 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 nell'esperienza o rinasce in un round dopo che la sua salute scende a zero, l'interfaccia utente del selettore blaster viene visualizzata, possono effettuare una selezione e ogni pulsante funziona come previsto.

Pulsante blaster

Un pulsante blaster è un componente UI che i giocatori usano per sparare con il loro blaster se accedono all'esperienza tramite un dispositivo mobile o tablet. L'esperienza laser tag di esempio utilizza un pulsante blaster con un'icona che rappresenta sia un mirino che un esplosione per comunicare la funzione del pulsante senza testo.

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

Inserisci un ImageButton nell'HUDGui oggetto ScreenGui.
1. Nella finestra Explorer, naviga al servizio StarterGui.
2. Passa il mouse sopra il suo oggetto figlio HUDGui, poi fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
3. Dal menu contestuale, inserisci un ImageButton.
Nella viewport, sposta il pulsante dove il pollice di un giocatore riposa naturalmente in modo da avere un'idea visiva di come apparirà il pulsante sul dispositivo di un giocatore, poi nella finestra Proprietà,
1. Imposta Immagine su rbxassetid://18308375035 per visualizzare l'icona del pulsante dell'esplosione.
2. Imposta PressedImage su rbxassetid://18308372558 per visualizzare una versione invertita dell'icona del pulsante dell'esplosione quando un giocatore preme il pulsante.
3. Imposta BackgroundTransparency su 1 per rendere completamente trasparente lo sfondo dell'etichetta.
4. Imposta Nome su BlastButton.
5. Imposta ScaleType su Fit in modo che l'immagine si adatti al suo contenitore e non venga allungata 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 nell'esperienza.
Inserisci un UIAspectRatioConstraint in BlastButton per garantire che l'aspect ratio del pulsante rimanga lo stesso indipendentemente dalla dimensione dello schermo del giocatore.
Riferisci i seguenti script ReplicatedStorage all'interno del file del campione 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 configurare il principale Heads Up Display (HUD), inclusa setupTouchButtonAsync. Dopo che un giocatore entra in un round e seleziona il proprio blaster, questo script assicura che tutti gli elementi UI dell'HUD vengano visualizzati correttamente per lo stato del giocatore, il dispositivo e lo 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 nell'esperienza 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 si riferiscono per decifrare rapidamente a quale squadra appartengono non appena atterrano nella zona di spawn della loro squadra. L'esperienza laser tag di esempio fornisce due versioni dell'indicatore del giocatore a seconda che il giocatore sia nella squadra verde o rosa.

Seguendo le indicazioni da 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 ai giocatori con daltonismo.

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

Inserisci un Frame nell'HUDGui oggetto ScreenGui.
1. Nella finestra Explorer, naviga al servizio StarterGui.
2. Passa il mouse sopra il suo oggetto figlio HUDGui, poi fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
3. Dal menu contestuale, inserisci un Frame.
Seleziona il nuovo Frame, poi nella finestra Proprietà,
1. Imposta AnchorPoint su 0, 1 per impostare il punto di origine del frame al centro in 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 completamente trasparente lo sfondo dell'etichetta.
3. Imposta Nome su PlayerDisplay.
4. Imposta Posizione su {0.02, 0},{0.97, 0} per posizionare il frame vicino alla parte inferiore sinistra dello schermo.
5. Imposta Dimensione su {0.23, 0},{0.08, 0} per accorciare e allargare il frame.
6. Abilita ClipsDescendants per ritagliare gli oggetti GuiObject figlio che si estendono oltre il frame.
Crea la forma poligonale.
1. Inserisci un ImageLabel in PlayerDisplay.
2. Seleziona la nuova etichetta, poi nella finestra Proprietà,
  1. Imposta Immagine su rbxassetid://14304828123 per visualizzare l'icona trapezoidale.
  2. Imposta AnchorPoint su 1, 1 per impostare il punto di origine dell'etichetta 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 completamente trasparente lo sfondo dell'etichetta.
  4. Imposta Nome su Block.
  5. Imposta Posizione su {1,0},{1,0} per posizionare l'etichetta sul lato destro del frame.
  6. Imposta Dimensione 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 al suo contenitore e non venga allungata su varie dimensioni dello schermo.
  1. Inserisci un UIAspectRatioConstraint in Block per garantire che l'etichetta e i suoi elementi UI figli mantengano lo stesso aspect ratio indipendentemente dalla dimensione dello schermo del giocatore.
  2. Seleziona il nuovo vincolo, poi nella finestra Proprietà, imposta AspectRatio su 13.78.
Crea la casella per il ritratto del giocatore.
1. Inserisci un ImageLabel in PlayerDisplay.
2. Seleziona la nuova etichetta, poi nella finestra Proprietà,
  1. Rimuovi il placeholder asset ID all'interno della proprietà Immagine. 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 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 far corrispondere tutti gli elementi UI neri nell'esperienza.
  5. Imposta Nome su PlayerPortrait.
  6. Imposta Posizione su {0.11, 0},{1, 0} per posizionare l'etichetta sul lato sinistro della forma poligonale.
  7. Imposta Dimensione 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 al suo contenitore e non venga allungata su varie dimensioni dello schermo.
  1. Inserisci un UIAspectRatioConstraint in PlayerPortrait per garantire che l'etichetta e i suoi elementi UI figli mantengano lo stesso aspect ratio indipendentemente dalla dimensione dello schermo del giocatore.
  2. Inserisci un UICorner in PlayerPortrait, poi nella finestra Proprietà, 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, poi nella finestra Proprietà,
  1. Imposta AnchorPoint su 0, 0.5 per impostare il punto di origine del nuovo pulsante al centro a sinistra 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 completamente trasparente lo sfondo dell'etichetta.
  3. Imposta Nome su PlayerNameTextLabel.
  4. Imposta Posizione 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 Dimensione 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 adattarlo all'estetica futuristica.
  7. Imposta Weight su Bold per ispessire il font.
  8. Rimuovi il testo segnaposto all'interno della proprietà Testo. Gli script nel passo 7 inseriscono programmaticamente il nome del giocatore nell'etichetta di testo.
  9. Abilita TextScaled.
  10. Imposta TextXAlignment su Sinistra.
Crea le icone e i colori della squadra che vengono visualizzati a sinistra del ritratto del giocatore.
1. Inserisci una Cartella in PlayerDisplay, poi rinominala in TeamIcons.
2. Crea l'icona e il colore della squadra verde.
  1. Inserisci un ImageLabel in TeamIcons.
  2. Seleziona la nuova etichetta, poi nella finestra Proprietà,
    
    Imposta AnchorPoint su 0, 1 per impostare il punto di origine dell'etichetta 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 Nome su TeamAIcon.
    
    Imposta Posizione su {0, 0},{1, 0} per posizionare l'etichetta sul lato sinistro del frame.
    
    Imposta Dimensione su {0.135, 0},{0.58, 0} per ridurre l'etichetta a sinistra del ritratto del giocatore.
    
    Imposta ImageTransparency su 1 per rendere trasparente l'etichetta.
  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 Proprietà, vai alla sezione Attributi, poi fai clic sull'icona più. Viene visualizzata una finestra di dialogo pop-up.
    
    Nella casella Nome, inserisci teamColor.
    
    Nel menu a discesa Tipo, seleziona BrickColor.
    
    Fai clic sul pulsante Salva.
    
    Imposta il nuovo attributo teamColor su Mint.
  2. Inserisci un UIAspectRatioConstraint in TeamAIcon per garantire che l'etichetta e i suoi elementi UI figli mantengano lo stesso aspect ratio indipendentemente dalla dimensione dello schermo del giocatore.
  3. Crea l'icona.
    
    Inserisci un ImageLabel in TeamAIcon.
    
    Seleziona la nuova etichetta, poi nella finestra Proprietà,
    
    Imposta Immagine 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 completamente trasparente lo sfondo dell'etichetta.
    
    Imposta Nome su Icon.
    
    Imposta Posizione su {0.5, 0},{0.5, 0} per posizionare l'etichetta al centro della sua etichetta genitore.
    
    Imposta Dimensione su {0.7, 0},{0.6, 0} per ridurre l'etichetta.
    
    Imposta ScaleType su Fit in modo che l'immagine si adatti al suo contenitore e non venga allungata 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, poi nella finestra Proprietà,
    
    Imposta BackgroundColor3 su 255, 170, 255 per impostare il colore di sfondo dell'etichetta su rosa carnation.
    
    Imposta Nome su TeamBIcon.
    
    Imposta l'attributo teamColor su Carnation Pink.
    
    Seleziona il duplicato Icon figlio di TeamBIcon, poi nella finestra Proprietà, imposta Immagine su rbxassetid://14309678549 per visualizzare l'icona della squadra rosa.
Riferisci i seguenti script ReplicatedStorage all'interno del file del campione Laser Tag che visualizzano programmaticamente l'indicatore del giocatore con il colore e l'icona della squadra appropriata mentre un giocatore è attivo in un round.

Il seguente script richiede un insieme di script di modulo che lavorano insieme per configurare 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 assicura che tutti gli elementi UI dell'HUD vengano visualizzati correttamente per lo stato del giocatore, il dispositivo e lo 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 si sovrappone al 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 Scegliere uno Stile Artistico, l'esperienza laser tag di esempio utilizza un modello esagonale semi-trasparente per simboleggiare un campo di forza. Questa decisione di design non solo rafforza lo stile artistico futuristico generale per tutta l'interfaccia utente nell'esperienza, ma comunica anche lo stato del giocatore senza alcun testo o guida aggiuntiva.

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

Inserisci un ImageLabel nell'ForceFieldGui oggetto ScreenGui.
1. Nella finestra Explorer, naviga al servizio StarterGui.
2. Passa il mouse sopra il suo oggetto figlio ForceFieldGui, poi fai clic sull'icona ⊕. Viene visualizzato un menu contestuale.
3. Dal menu contestuale, inserisci un ImageLabel.
Seleziona la nuova etichetta, poi nella finestra Proprietà,
1. Imposta Immagine su rbxassetid://14462567888.
2. Imposta BackgroundTransparency su 0.8 per rendere il campo di forza translucido.
3. Imposta Dimensione su {1, 0},{1, 0} per far sì che l'immagine riempia l'intero schermo (100% in orizzontale e 100% in verticale dell'oggetto ScreenGui genitore).
4. Imposta ScaleType su Tile per fare in modo che l'esagono venga tessuto su tutto lo schermo.
5. Imposta TileSize su {0, 104},{0, 180}.
Inserisci un oggetto UIGradient nell'etichetta.
Seleziona il nuovo oggetto gradient, poi nella finestra Proprietà,
1. Imposta Colore su una sequenza di colori che inizia blu, diventa bianca, poi torna blu.
  1. Imposta Colore su 120, 192, 250 per applicare una tonalità blu chiaro a tutti gli esagoni.
  2. Fai clic sulla proprietà Colore, poi fai clic sul pulsante ⋯. Viene visualizzata una finestra pop-up di 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. Clicca e trascina sulla sequenza di colori finché non raggiungi un valore Tempo di 0.05, poi clicca sul piccolo quadrato accanto a Colore per aprire la finestra pop-up Colori.
  4. Seleziona un bianco brillante, poi chiudi la finestra pop-up.
  5. Clicca e trascina sulla sequenza di colori finché non raggiungi un valore Tempo di 0.95, poi apri di nuovo la finestra pop-up Colori, e seleziona lo stesso bianco di prima.
2. Imposta Rotazione su 225 per far sì che la parte blu della tua sequenza di colori si visualizzi negli angoli in alto a sinistra e in basso a destra.
3. Imposta Trasparenza su una sequenza di numeri che fa sembrare il campo di forza scintillante.
  1. Fai clic sulla proprietà Trasparenza, poi fai clic sul pulsante ⋯. Viene visualizzata una finestra pop-up di 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 i seguenti valori di tempo e valore all'interno della sequenza di numeri:
  - Tempo = 0, Valore = 0.25
  - Tempo = .101, Valore = 0.875
  - Tempo = .183, Valore = 0
  - Tempo = .3, Valore = 1
  - Tempo = .7, Valore = 1
  - Tempo = 1, Valore = 0.9
Duplica l'ImageLabel dal passo 2.
Seleziona l'oggetto UIGradient all'interno dell'etichetta duplicata, poi nella finestra Proprietà,
1. Imposta Rotazione su -45 per capovolgere l'immagine in modo che si specchi quasi lungo l'asse Y.
Modifica la Trasparenza per rendere l'effetto luminoso più organico.
1. Fai clic sulla proprietà Trasparenza, quindi fai clic sul pulsante ⋯. Si apre un pop-up con una sequenza numerica.
2. Seleziona il terzo fotogramma chiave, quindi fai clic sul pulsante Elimina.
Riferisciti ai seguenti script ReplicatedStorage all'interno del file del luogo di esempio Laser Tag che mostrano programmaticamente lo schermo del campo di forza mentre un giocatore si unisce o rientra in un turno.

Lo script client ReplicatedStorage.ForceFieldClientVisuals sostituisce l'aspetto visivo predefinito di ForceField con StarterGui.ForceFieldGui. Quando i giocatori si caricano in un'esperienza e appaiono in un SpawnLocation con una proprietà Durata maggiore di 0, il comportamento predefinito in ogni esperienza è fornire al loro avatar un orbe protettivo blu che li protegge momentaneamente dalla perdita di salute.

Questo script inizia ascoltando quando il ForceField viene aggiunto a un personaggio, disabilita i visivi di campo di forza in prima persona predefiniti e quindi abilita l'oggetto ForceFieldGui ScreenGui. Nota che questo non influisce sui visivi in terza persona quando i giocatori guardano altri giocatori che stanno rientrando nell'esperienza.

I visivi del campo di forza in prima persona includono una griglia esagonale futuristica sul perimetro dello schermo. — Visivi del campo di forza in prima persona

I visivi del campo di forza in terza persona includono un orbe blu scintillante attorno al giocatore che rientra nell'esperienza. — Visivi 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 appare in un punto di respawn 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 rientra nel turno dopo il respawn, la nuova UI dello schermo del campo di forza viene visualizzata invece dei visivi predefiniti del ForceField in prima persona.

Schermo di respawn

Uno schermo di respawn è un elemento UI che oscura il viewport per informare i giocatori che sono stati eliminati, e che il server sta cercando di respawndarli nella loro zona di respawn. Questo elemento UI è importante perché dà ai giocatori il tempo di capire che sono stati eliminati e di pianificare la loro prossima mossa prima di rientrare nel turno attivo.

Per ulteriori informazioni sul comportamento di respawn personalizzato nell'esperienza di laser tag di esempio, consulta Respawn dei Personaggi dal curriculum di Gameplay Scripting.

Per ricreare esattamente lo schermo di respawn all'interno dell'esperienza 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 fai clic sull'icona ⊕. Si apre un menu contestuale.
  3. Dal menu contestuale, inserisci un ImageLabel.
2. Seleziona la nuova etichetta, quindi nella finestra Proprietà,
  1. Imposta AnchorPoint a 0.5, 0.5 per impostare il punto di origine del nuovo pulsante al centro di esso (50% da sinistra a destra dell'etichetta e 50% dall'alto verso il basso dell'etichetta).
  2. Imposta BackgroundTransparency a 1 per rendere il background dell'etichetta completamente trasparente.
  3. Imposta Position a {0.5, 0},{0.5, 0} per impostare l'etichetta al centro del suo contenitore (50% da sinistra a destra del parent ScreenGui e 50% dall'alto verso il basso del parent ScreenGui).
  4. Imposta Size a {0.48, 0},{0.06, 0} per allargare l'etichetta (48% in orizzontale e 6% in verticale del parent ScreenGui).
  5. Imposta Name a Block.
  6. Imposta Image a rbxassetid://14304827265 per rendere l'immagine un trapezio.
  7. Imposta ImageColor a 0,0,0 per rendere il trapezio nero.
  8. Imposta ImageTransparency a 0.3 per ridurre l'opacità dell'etichetta del 30% e abbinare tutti gli elementi UI neri nell'esperienza.
3. Inserisci un UIAspectRatioConstraint in Block per garantire che il rapporto d'aspetto dell'etichetta e dei suoi elementi UI bambini rimanga lo stesso indipendentemente dalla dimensione dello schermo del giocatore.
4. Seleziona la nuova restrizione, quindi nella finestra Proprietà, imposta AspectRatio a 13.78.
5. Inserisci un TextLabel in Block per il testo informativo.
6. Seleziona la nuova etichetta, quindi nella finestra Proprietà,
  1. Imposta AnchorPoint a 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro di essa (50% da sinistra a destra dell'etichetta e 50% dall'alto verso il basso dell'etichetta).
  2. Imposta BackgroundTransparency a 1 per rendere il background dell'etichetta completamente trasparente.
  3. Imposta Position a {0.5, 0},{0.5, 0} per impostare l'etichetta al centro della sua etichetta genitore (50% da sinistra a destra dell'etichetta parent e 50% dall'alto verso il basso dell'etichetta parent).
  4. Imposta Size a {.85, 0},{0.55, 0} in modo che il testo possa occupare la maggior parte dell'area trapezoidale (85% in orizzontale e 55% in verticale dell'etichetta parent).
  5. Imposta Name a BodyTextLabel.
  6. Imposta FontFace a Montserrat per adattarsi all'estetica futuristica.
  7. Imposta Weight a Bold per rendere il carattere più spesso.
  8. Imposta Text a Respawning….
  9. Imposta TextColor3 a 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 Proprietà,
  1. Imposta AnchorPoint a 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 verso il basso dell'etichetta).
  2. Imposta BackgroundTransparency a 1 per rendere il background dell'etichetta completamente trasparente.
  3. Imposta Position a {0.5, 0},{0, 0} per impostare l'etichetta nella parte superiore centrale della sua etichetta parent (50% da sinistra a destra dell'etichetta parent e 0% dall'alto verso il basso dell'etichetta parent).
  4. Imposta Size a {0.46, 0},{0.56, 0} per allargare l'etichetta (46% in orizzontale e 56% in verticale dell'etichetta parent).
  5. Imposta Name a Header.
  6. Imposta Image a rbxassetid://14304826985 per rendere l'immagine una dissolvenza multidimensionale.
  7. Imposta ImageColor a 245, 46, 46 per rendere la dissolvenza rossa per significare 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 Proprietà,
  1. Imposta AnchorPoint a 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro di essa (50% da sinistra a destra dell'etichetta e 50% dall'alto verso il basso dell'etichetta).
  2. Imposta BackgroundTransparency a 1 per rendere il background dell'etichetta completamente trasparente.
  3. Imposta Position a {0.5, 0},{0.5, 0} per impostare l'etichetta al centro della sua etichetta parent (50% da sinistra a destra dell'etichetta parent e 50% dall'alto verso il basso dell'etichetta parent).
  4. Imposta Size a {.85, 0},{0.55, 0} in modo che il testo possa occupare la maggior parte dell'area della dissolvenza (85% in orizzontale e 55% in verticale dell'etichetta parent).
  5. Imposta Name a HeaderTextLabel.
  6. Imposta FontFace a Montserrat per adattarsi all'estetica futuristica.
  7. Imposta Weight a Black per rendere il carattere più spesso.
  8. Imposta Text a TAGGED - SEI FUORI!
  9. Imposta TextColor3 a 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 Proprietà,
  1. Imposta AnchorPoint a 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro di essa (50% da sinistra a destra dell'etichetta e 50% dall'alto verso il basso dell'etichetta).
  2. Imposta BackgroundColor3 a 0,0,0 per impostare il colore di sfondo dell'etichetta a nero.
  3. Imposta BackgroundTransparency a 0.5 per rendere il background dell'etichetta a metà trasparente.
  4. Imposta Position a {0.5, 0},{0.5, 0} per impostare l'etichetta al centro del suo contenitore (50% da sinistra a destra del parent ScreenGui e 50% dall'alto verso il basso del parent ScreenGui).
  5. Imposta Size a {1, 0},{1, 0} per allargare l'etichetta all'intero schermo (100% in orizzontale e 100% in verticale del parent ScreenGui).
  6. Imposta ZIndex a -1 per visualizzare la dissolvenza dietro gli altri elementi UI.
  7. Imposta Name a Header.
  8. Imposta Image a rbxassetid://14309518613 per rendere l'immagine una dissolvenza ai bordi.
  9. Imposta ImageTransparency a 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 ulteriori informazioni su questa tecnica di dissolvenza, consulta Modificatori di Aspetto UI - Gradiente.
Riferisciti ai seguenti script ReplicatedStorage all'interno del file del luogo di esempio Laser Tag che mostrano programmaticamente lo schermo di respawn quando la salute di un giocatore raggiunge zero, e stanno per essere respawnati nella zona di respawn della loro squadra.

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 raggruppate logicamente insieme in questo script perché richiedono un comportamento simile di abilitazione o disabilitazione dei controlli del giocatore, del movimento della fotocamera e dello stato dell'interfaccia utente 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 fotocamera.
Il giocatore non può usare il proprio blaster.
Il StarterGui.OutStateGui diventa esclusivamente abilitato.

Quando il giocatore respawna, il loro playerState diventa SelectingBlaster, il che attiva la funzione onSelectingBlaster(). onSelectingBlaster() poi attiva esclusivamente il StarterGui.PickABlasterGui, che disabilita automaticamente lo schermo di respawn. Per ulteriori informazioni su queste condizioni, consulta Gestisci Lo Stato del Client 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 gli strati UI eccetto l'eccezione data
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
	-- guiLayers contiene un elenco delle gui che devono essere impostate esclusivamente.
	for _, screenGui in guiLayers do
		screenGui.Enabled = screenGui == enabledGui
	end
end

local function onSelectingBlaster()
	-- Abilita la fotocamera così i giocatori possono guardarsi intorno mentre selezionano un blaster
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- Disabilita il blaster mentre selezioni 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)

	-- Programma la logica per distruggere il 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 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 del 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 siano ancora applicate dopo il respawn
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

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

Ora che conosci i comuni oggetti 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 usare il file .rbxl dell'esperienza di laser tag di esempio come riferimento, o regolare i valori per soddisfare i requisiti di gioco della tua esperienza.

Crea oggetti SurfaceGui

Per visualizzare l'interfaccia utente sulla superficie di un componente nello spazio 3D che risponde alla logica di scripting per ogni singolo giocatore, puoi genitore un oggetto SurfaceGui al componente su cui desideri visualizzare la tua UI all'interno del servizio ReplicatedStorage. Questa tecnica assicura che la tua UI e la sua logica di scripting siano disponibili sia al server che al client di ciascun giocatore.

Gli oggetti SurfaceGui contengono tutti gli oggetti GuiObjects che si visualizzano sulla superficie di un componente nello spazio 3D. L'esperienza di laser tag di esempio include solo un'istanza di un oggetto SurfaceGui: il misuratore di cooldown che si visualizza sopra il blaster di ogni giocatore. Questo oggetto necessita 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 al servizio ReplicatedStorage, quindi fai clic sull'icona ⊕. Si apre un menu contestuale.
Dal menu contestuale, inserisci un oggetto Part.
Inserisci un oggetto ScreenGui nel componente.
Rinomina il SurfaceGui in base al contesto dei suoi elementi UI bambini.
Ripeti questo processo per ogni elemento UI che devi visualizzare sulla superficie di un componente nello spazio 3D.

Misuratore di cooldown

Un misuratore di cooldown è un componente UI che informa i giocatori quanto devono aspettare prima di poter sparare di nuovo con il proprio blaster. Questa breve pausa impedisce ai giocatori di poter sparare così velocemente 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 dell'esperienza di esempio Laser Tag:

Crea un componente per contenere il tuo oggetto SurfaceGui.
1. Nella finestra Explorer, passa sopra al Workspace, quindi fai clic sull'icona ⊕. Si apre un menu contestuale.
2. Dal menu contestuale, inserisci un componente block. Questo è un luogo temporaneo per il componente così puoi visualizzare le modifiche in ciascun passaggio del processo.
Posiziona e orienta il componente attorno alla posizione in cui un personaggio del giocatore terrebbe il proprio blaster, quindi nella finestra Proprietà,
1. Imposta Transparency a 1 per rendere completamente trasparente il componente.
2. Imposta Name a CooldownBarPrefab.
3. Imposta Size a 0.169, 0.027, 2.537 per scalare il componente a una lunghezza simile a quella del blaster.
4. Disabilita CanCollide e CanQuery.
Inserisci un SurfaceGui in CooldownBarPrefab.
Seleziona il nuovo SurfaceGui, quindi nella finestra Proprietà,
1. Imposta Face a Top così l'interfaccia utente si visualizza verso l'alto.
2. Imposta LightInfluence e MaxDistance a 0.
3. Imposta PixelsPerStud a 200.
Crea la barra nera.
1. Inserisci un ImageLabel nel SurfaceGui.
2. Seleziona la nuova etichetta, quindi nella finestra Proprietà,
  1. Rimuovi il valore predefinito di Image.
  2. Imposta AnchorPoint a 0.5, 0.5 per impostare il punto di origine della etichetta al centro di essa (50% da sinistra a destra dell'etichetta e 50% dall'alto verso il basso dell'etichetta).
  3. Imposta BackgroundColor3 a 0,0,0 per impostare il colore di sfondo dell'etichetta a nero.
  4. Imposta BackgroundTransparency a 0.4 per rendere il background dell'etichetta semi-trasparente.
  5. Imposta Position a {0.5, 0},{0.5, 0} per impostare l'etichetta al centro del suo contenitore (50% da sinistra a destra del parent SurfaceGui e 50% dall'alto verso il basso del parent SurfaceGui).
  6. Imposta Size a {1, 0},{1, 0} per allargare l'etichetta all'intero componente (100% in orizzontale e 100% in verticale del parent SurfaceGui).
  7. Imposta Name a Container.
Arrotonda gli angoli del contenitore.
1. Inserisci un oggetto UICorner in Container.
2. Seleziona il UICorner, quindi nella finestra Proprietà, imposta CornerRadius a 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 Proprietà,
  1. Rimuovi il valore predefinito di Image.
  2. Imposta AnchorPoint a 1, 0.5 per impostare il punto di origine dell'etichetta al centro-destra di essa (100% da sinistra a destra dell'etichetta e 50% dall'alto verso il basso dell'etichetta).
  3. Imposta BackgroundColor3 a 172, 13, 13 per impostare il colore di sfondo dell'etichetta a un rosso scuro.
  4. Imposta BackgroundTransparency a 0.2 per rendere il background dell'etichetta leggermente trasparente.
  5. Imposta Name a Bar.
  6. Imposta Position a {1, 0},{0.5, 0} per impostare l'etichetta al centro-destra del suo contenitore (100% da sinistra a destra dell'etichetta parent e 50% dall'alto verso il basso dell'etichetta parent).
  7. Imposta Size a {0, 0},{1, 0} per allungare l'etichetta fino alla parte superiore della sua etichetta parent (0% in orizzontale e 100% in verticale dell'etichetta parent). Questo passaggio è anche utile per il comportamento di tweening che avviene negli script nel passaggio 8.
Arrotonda gli angoli dell'etichetta.
1. Inserisci un oggetto UICorner in Bar.
2. Seleziona il UICorner, quindi nella finestra Proprietà, imposta CornerRadius a 0.15, 0 per arrotondare leggermente gli angoli.
Sposta CooldownBarPrefab in ReplicatedStorage.
1. Crea una struttura di cartelle per organizzare i tuoi oggetti UI. L'esempio utilizza una cartella Instances con una cartella figlia Guis.
2. Sposta CooldownBarPrefab in Guis.
Riferisciti ai seguenti script ReplicatedStorage all'interno del file del luogo di esempio Laser Tag che collegano programmaticamente il misuratore di cooldown al blaster del giocatore, quindi animano la barra rossa dopo che un giocatore spara 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 modulari che lavorano insieme per configurare le visuali 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 modello 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é è parentalizzata al rig
		rigModel:Destroy()
		rigModel = nil
	end
end

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

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

-- Gestisce il cambiamento delle visuali quando il tipo di blaster 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 visuali quando cambia lo stato del giocatore
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Rimuovi le visuali quando il giocatore sta selezionando un blaster o è in lobby
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Aggiungi di nuovo le visuali 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 si trovano sempre di fronte alla fotocamera di ciascun giocatore indipendentemente dal loro angolo di visione, come i nomi dei giocatori o i marker della mappa, puoi creare un oggetto BillboardGui come figlio di un BasePart o Attachment che esiste nello spazio 3D.

L'esperienza di laser tag di esempio include due oggetti BillboardGui distinti all'interno del servizio ReplicatedStorage:

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

Dopo aver creato un oggetto BillboardGui, puoi creare e personalizzare i suoi oggetti GuiObjects figli in base allo scopo di ciascun contenitore. Per dimostrare, nelle sezioni immediatamente successive, imparerai come implementare elementi UI per entrambi i tipi di indicatori all'interno dell'esperienza di laser tag di esempio. Puoi regolare qualsiasi parte del processo per soddisfare le specifiche della tua esperienza.

Per creare un oggetto BillboardGui:

Nella finestra Explorer, passa sopra a un BasePart o Attachment, quindi fai clic sull'icona ⊕. Si apre un menu contestuale.
Dal menu contestuale, inserisci un oggetto BillboardGui.
Rinomina il BillboardGui in base al contesto dei suoi elementi UI bambini.
Ripeti questo processo per ogni elemento UI che devi visualizzare 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 della squadra nemica. Queste informazioni sono importanti perché il gameplay di un'esperienza sparatutto in prima persona richiede che i giocatori prendano decisioni strategiche rapide mentre si trovano in zone di combattimento così che non vengano eliminati e perdano la partita.

Per ricreare esattamente l'indicatore di squadra all'interno dell'esperienza di esempio Laser Tag:

Inserisci un oggetto BillboardGui in un rig temporaneo.
1. Dalla scheda Home o Avatar della barra degli strumenti, fai clic su Character.
2. Seleziona tra le opzioni disponibili. L'esempio 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 fai clic sull'icona ⊕. Si apre un menu contestuale.
4. Dal menu contestuale, inserisci un BillboardGui.
Seleziona il nuovo BillboardGui, quindi nella finestra Proprietà,
1. Imposta LightInfluence a 0 per impedire che la luce ambientale influisca sul colore dell'indicatore.
2. Imposta Name a OtherPlayerIndicatorPrefab.
3. Imposta Size a {0, 10},{0, 10} per rendere l'etichetta significativamente più piccola.
4. Imposta StudsOffsetWorldSpace a 0, 4, 0 per posizionarla sopra la testa del rig.
Inserisci un oggetto Frame in OtherPlayerIndicatorPrefab.
Seleziona il nuovo frame, quindi nella finestra Proprietà,
1. Imposta AnchorPoint a 0.5, 0.5 per impostare il punto di origine del frame al centro di esso (50% da sinistra a destra dell'etichetta e 50% dall'alto verso il basso dell'etichetta).
2. Imposta BackgroundColor3 a 255, 3, 0 per impostare il colore di sfondo del frame a rosso come colore segnaposto.
3. Imposta Position a {0.5, 0},{0.5, 0} per impostare il frame al centro del suo contenitore (50% da sinistra a destra del parent BillboardGui e 50% dall'alto verso il basso del parent BillboardGui).
4. Imposta Size a {1, -2},{1, -2} per accorciare il frame all'area della superficie 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.
Riferisciti al seguente script ReplicatedStorage all'interno del file del luogo di esempio Laser Tag 1A che mostra programmaticamente l'indicatore di squadra per ogni giocatore in un turno attivo a meno che non siano della squadra nemica e occlusi.

Il seguente script ReplicatedStorage.OtherPlayerIndicatorGuiSetup viene eseguito quando i giocatori si uniscono all'arena per un turno attivo. Collega l'indicatore di squadra chiamando la funzione addIndicatorToCharacter(), che trova 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'UI otherPlayerIndicatorPrefab all'Head del personaggio, e imposta il colore dell'indicatore di squadra sul colore della loro squadra.

Se gli altri giocatori sono della stessa squadra, l'indicatore di squadra è sempre visualizzato, anche se si nascondono dietro oggetti nello spazio 3D; se gli altri giocatori sono della squadra nemica, l'indicatore di squadra si visualizza solo se non c'è un oggetto nello spazio 3D per occluderli.


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

		-- Solo aggiungi indicatori 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 si visualizzano sopra le teste degli altri giocatori a meno che non siano della squadra nemica e dietro un oggetto.

Indicatore di tag out

Un indicatore di tag out è un elemento UI che informa i giocatori quando altri giocatori non sono più attivi nel turno e stanno per respawnare nella loro zona di respawn. Queste informazioni sono importanti poiché il gameplay di un'esperienza di sparatutto in prima persona richiede che i giocatori si muovano verso il loro prossimo obiettivo non appena eliminano un giocatore, così da non diventare vulnerabili nell'arena giocando troppo a lungo nello stesso posto.

Per ricreare esattamente l'indicatore di tag out all'interno dell'esperienza di esempio Laser Tag:

Inserisci un oggetto BillboardGui in un rig temporaneo così puoi visualizzare le modifiche in ogni passaggio del processo.
1. Dalla scheda Home o Avatar della barra degli strumenti, fai clic su Character.
2. Seleziona tra le opzioni disponibili. L'esempio 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 fai clic sull'icona ⊕. Si apre un menu contestuale.
4. Dal menu contestuale, inserisci un BillboardGui.
Seleziona il nuovo BillboardGui, quindi nella finestra Proprietà,
1. Imposta LightInfluence a 0 per impedire che la luce ambientale influisca sul colore dell'indicatore.
2. Imposta Name a TaggedOutIndicatorGuiPrefab.
3. Imposta Size a {3, 0},{0.5, 0} per allargare lo spazio per un'etichetta.
4. Imposta StudsOffset a 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 Proprietà,
1. Imposta AnchorPoint a 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro di essa (50% da sinistra a destra dell'etichetta e 50% dall'alto verso il basso dell'etichetta).
2. Imposta BackgroundTransparency a 1 per rendere il background dell'etichetta completamente trasparente.
3. Imposta Name a Frame.
4. Imposta Position a {0.5, 0},{0.5, 0} per impostare l'etichetta al centro del suo contenitore (50% da sinistra a destra del parent BillboardGui e 50% dall'alto verso il basso del parent BillboardGui).
5. Imposta Size a {1, 0},{1, 0} per allargare l'etichetta all'intero BillboardGui (100% in orizzontale e 100% in verticale del parent BillboardGui).
6. Imposta Image a rbxassetid://14304826985 per rendere l'immagine una dissolvenza multidimensionale.
7. Imposta ImageColor a 245, 46, 46 per colorare l'etichetta di rosso.
Per migliorare le prestazioni, puoi saltare l'asset dell'immagine e invece usare un oggetto UIGradient con una sequenza di trasparenza personalizzata. Per ulteriori informazioni su questa tecnica di dissolvenza, consulta Modificatori di Aspetto UI - Gradiente.
Inserisci un oggetto TextLabel in Frame.
Seleziona la nuova etichetta, quindi nella finestra Proprietà,
1. Imposta AnchorPoint a 0.5, 0.5 per impostare il punto di origine dell'etichetta al centro di essa (50% da sinistra a destra dell'etichetta e 50% dall'alto verso il basso dell'etichetta).
2. Imposta BackgroundTransparency a 1 per rendere il background dell'etichetta completamente trasparente.
3. Imposta Name a BodyTextLabel.
4. Imposta Position a {0.5, 0},{0.5, 0} per impostare l'etichetta al centro del suo contenitore (50% da sinistra a destra dell'etichetta parent e 50% dall'alto verso il basso dell'etichetta parent).
5. Imposta Size a {0.85, 0},{0.7, 0} così il testo può occupare la maggior parte dell'area della dissolvenza (85% in orizzontale e 70% in verticale dell'etichetta immagine parent).
6. Imposta FontFace a Montserrat per adattarsi all'estetica futuristica.
7. Imposta Weight a Bold per rendere il carattere più spesso.
8. Imposta Text a TAGGED.
9. Imposta TextColor3 a 255, 255, 255 per rendere il testo bianco.
10. Abilita TextScaled.
Sposta TaggedOutIndicatorGuiPrefab in ReplicatedStorage.
Riferisciti ai seguenti script ServerScriptService all'interno del file del luogo di esempio Laser Tag 1A che mostrano programmaticamente l'indicatore di tag out mentre un giocatore sta respawnando nella zona di respawn della loro squadra.

Il seguente script server ServerScriptService.SetupHumanoid viene eseguito non appena un giocatore carica l'esperienza. 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à presente 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 tag out viene visualizzato sopra la loro testa fino a quando non respawnano.

Congratulazioni per aver completato il Curriculum di Progettazione dell'Interfaccia Utente! Ora che hai esperienza nella creazione di uno stile artistico, nella creazione di wireframe 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à, oppure seguire ulteriori curricula di tutorial, come il Curriculum di Scripting del Gameplay che ti insegna l'organizzazione generale e i dettagli chiave di implementazione dell'esperienza campione del laser tag. Buona creazione!