Implementare i tuoi progetti è il processo di creazione dei tuoi wireframe in Studio utilizzando sia elementi di interfaccia utente integrati che personalizzati con script che attivano il tuo contesto UI contestualmente.Questo entusiasmante passo del tutorial è dove vedi tutti i tuoi disegni e il duro lavoro riunito in un set di flussi di lavoro coesi che sono completi e pronti per l'interazione del giocatore.
Usando il file di esempio esperienza di tag laser di prova.rbxl come riferimento, questa sezione del programma di progettazione dell'interfaccia utente ti mostra come portare la tua pianificazione UI alla vita, incluse le linee guida su:
- Recuperare gli ID delle risorse dalla libreria di risorse UI in modo da poter ricreare le componenti dell'interfaccia utente dell'esperienza di tag laser di esempio.
- Emulare diversi dispositivi direttamente in Studio per vedere come la tua interfaccia utente viene visualizzata su diversi schermi e rapporti aspetti.
- Creazione di ScreenGui , SurfaceGui e BillboardGui oggetti per visualizzare la tua interfaccia utente su schermi dei giocatori, superfici delle parti e all'interno dello Spazio3D, rispettivamente.
Dopo aver rivisto le tecniche in questa sezione, puoi applicarle ai tuoi progetti per creare componenti di interfaccia utente eccitanti che aiutino i giocatori a navigare in quello che possono fare all'interno delle tue esperienze.
Le istruzioni di questa sezione del tutorial ti mostrano come ricreare esattamente i componenti dell'interfaccia utilizzando la libreria di risorse di progettazione dell'interfaccia.Questo processo richiede circa 90 minuti o meno dall'inizio alla fine.Se non vuoi utilizzare i valori forniti, puoi regolare ogni elemento UI per soddisfare le specifiche della tua esperienza o utilizzare il campione stesso per il resto del Tutoriale.
Ottieni la biblioteca di risorse
Le biblioteche di risorse sono raccolte di risorse che puoi aggiungere al tuo inventario per un facile accesso e riutilizzo.La libreria di risorse che utilizzerai per il tuo progetto dal Creator Store include nove risorse individuali di interfaccia utente 2D e le versioni finali degli obiettivi, del selettore blaster e delle informazioni sul giocatore che stai creando in questa sezione del Tutoriale.
Puoi aggiungere la maggior parte della libreria al tuo inventario all'interno di Studio facendo clic sul link Aggiungi all'inventario nella seguente componente.Una volta che le risorse sono all'interno del tuo Inventario, reportorio, puoi riutilizzarle in qualsiasi progetto sulla Piattaforma.
Per ottenere la libreria di risorse dal tuo inventario nella tua esperienza:
Nella barra degli strumenti, seleziona la scheda Visualizza .
Fai clic su Toolbox . La finestra Toolbox viene visualizzata.
Nella finestra Toolbox , fai clic sulla scheda Inventario . Le visualizzazioni di Modelli miei sono ordinate.
Fai clic sul menu a discesa, quindi seleziona la casella I miei pacchetti .
Fai clic sul riquadro componenti dell'interfaccia Piastrellafinale , quindi nella finestra Explorer , seleziona componenti completati , quindi trascinali nel servizio StarterGui .Ora puoi abilitare qualsiasi componente finale a fare riferimento al suo design.
Emula dispositivi
Studio's Emulatore di dispositivi ti consente di testare come i giocatori vedranno e interagiranno con la tua interfaccia utente su vari dispositivi.Questo strumento è una parte vitale del processo di implementazione perché la proporzione aspetto del tuo viewport in Studio non riflette necessariamente la proporzione aspetto degli schermi che i giocatori usano per accedere alla tua esperienza e è importante che la tua interfaccia utente sia leggibile e accessibile su ogni Dispositivo.
Ad esempio, se non testi la tua interfaccia utente su una gamma di dimensioni dello schermo, i giocatori con schermi grandi potrebbero non essere in grado di leggere il tuo testo o decifrare le tue icone e i giocatori con schermi piccoli potrebbero non essere in grado di vedere lo spazio 3D perché gli elementi dell'interfaccia utente occupano troppo spazio sullo schermo.
Per emulare la tua schermata alla dimensione dello schermo più piccola:
Nella barra degli strumenti, seleziona la scheda Test .
Fai clic su Dispositivo . La finestra cambia per riflettere la proporzione dell'aspetto di un laptop medio.
Nella casella a discesa della risoluzione, seleziona Risoluzione attuale .Questo ti consente di vedere la risoluzione reale dei tuoi elementi UI sull' dispositivo che stai emulando.
Nella casella a discesa del dispositivo, seleziona il dispositivo con la dimensione dello schermo più piccola che i giocatori possono utilizzare per accedere alla tua esperienza.Mentre l'opzione migliore varia a seconda dei dispositivi che la tua esperienza supporta, i test di prova del tag laser di esempio con un iPhone 4S verificano come l'interfaccia appare con uno Spaziodi schermo limitato.
Crea oggetti ScreenGui
Per visualizzare gli elementi dell'interfaccia utente sullo schermo di ogni Giocatore, puoi creare un oggetto ScreenGui nel servizio StarterGui. gli oggetti sono i contenitori primari per l'interfaccia utente sullo schermo e il servizio copia i suoi contenuti nel container di ciascun Giocatorequando entra in un'esperienza.
Puoi creare più oggetti ScreenGui per organizzare e visualizzare gruppi di elementi UI contestualmente durante il Partita.Ad esempio, l'esperienza di tag laser di esempio include cinque oggetti separati che sono inizialmente disabilitati fino a quando i giocatori non incontrano diverse condizioni durante il flusso utente principale dell'esperienza:
- HUDGui - Mostra le informazioni chiave sull'esperienza del gameplay quando i giocatori sono attivi in una partita, come l'obiettivo e i punti totali di ogni team.
- PickABlasterGui - Mostra tutte le scelte di blaster quando i giocatori iniziano o si uniscono a una partita.
- ForceFieldGui - Mostra una griglia esagonale quando i giocatori selezionano un blaster e mentre sono temporaneamente invincibili.
- OutStateGui - Mostra un bordo scuro intorno allo schermo quando i giocatori vengono etichettati fuori.
- RoundResultsGui - Mostra una sovrapposizione scura sopra lo schermo con le informazioni su quale squadra abbia vinto il round.
Dopo aver creato un oggetto ScreenGui , puoi creare e personalizzare il suo figlio GuiObjects in base allo scopo di ciascun contenitore.Per dimostrare, nelle sezioni immediate che Seguire, imparerai a implementare elementi di interfaccia utente per le tre categorie di informazioni che i giocatori devono conoscere per avere successo nell'esperienza di tag laser di campione. Puoi regolare qualsiasi parte del processo per soddisfare le specifiche della tua esperienza .
Per creare un oggetto ScreenGui :
Nella finestra Explorer , passa il mouse sul servizio StarterGui , quindi fai clic sull'Icona ⊕ . Viene visualizzato un menu contestuale.
Inserisci un ScreenGui .
Rinomina il ScreenGui in base al contesto dei suoi elementi UI figli.
Ripeti questo processo per ogni gruppo di elementi UI che devi visualizzare sullo schermo di ogni Giocatore.
Interfaccia utente obiettiva
Dopo le migliori pratiche della gerarchia visiva da Wireframe Your Layouts, questa sezione ti insegna come implementare tutti gli elementi dell'interfaccia utente sullo schermo relativi all'obiettivo dell'esperienza.Questo gruppo di elementi UI è vicino alla parte superiore dello schermo perché l'obiettivo e i punti di ogni teamhanno la maggiore importanza su come vincere la Gioco.
Ad esempio, il campione fornisce un componente di interfaccia utente obiettivo al quale i giocatori si riferiscono per sapere cosa devono fare per avere successo in una partita.Mentre i giocatori etichettano i membri del team nemico e guadagnano punti, questo componente tiene traccia del punteggio di ogni squadra contro l'obiettivo generale all'interno della richiesta dell'intestazione.Per una revisione di alto livello di tutti gli script del client e del server che lavorano insieme per tracciare i punti, vedi Traccia i punti nel Curriculum di script di gioco.
Per ricreare esattamente l'interfaccia utente obiettivo all'interno dell'esperienza di prova Laser Tag:
Crea un container per l'intera componente.
Inserisci un Frame nel oggetto HUDGui ScreenGui.
- Nella finestra Explorer , naviga al servizio StarterGui .
- Passa il mouse sul suo oggetto figlio HUDGui , quindi fai clic sull'Icona⊕. Viene visualizzato un menu contestuale.
- Dal menu contestuale, inserisci un Frame .
Seleziona il nuovo Frame , quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 0 per impostare il punto di origine del frame nella parte superiore del mezzo (50% dalla sinistra alla destra del frame e 0% dall'alto verso il basso del frame).
- Imposta Trasparenza di fondo a 1 per rendere il background del frame completamente trasparente.
- Imposta Posizione a {0.5, 0},{0.03, 0} per impostare il frame vicino all'alto-centro dello schermo (50% dalla sinistra alla destra dello schermo e 3% dall'alto verso il basso dello schermo in modo che ci sia un piccolo buffer).
- Imposta Dimensione a così gli elementi del frame occupano una grande porzione della parte superiore dello schermo per attirare l'attenzione dei giocatori (50% orizzontalmente e 13% verticalmente).
- Imposta Nome a Obiettivo .
(Opzionale) Inserisci un vincolo di rapporto UIAspectRatio nel Obiettivo per garantire che la proporzione dell'Etichettarimanga la stessa indipendentemente dalla dimensione dello schermo del Giocatore.Il campione imposta la sua proprietà UIAspectRatioConstraint.AspectRatio a 7 .
Crea un container per gli oggetti prompt dell'obiettivo.
Inserisci un Frame in Obiettivo .
Seleziona il nuovo Frame , quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 0 per impostare il punto di origine del frame nella parte superiore del mezzo (50% dalla sinistra alla destra del frame e 0% dall'alto verso il basso del frame).
- Imposta Trasparenza di fondo a 1 per rendere il background del frame completamente trasparente.
- Imposta Posizione a {0.5, 0},{0, 0} per impostare il frame nel mezzo del contenitore (50% dalla sinistra alla destra del contenitore padre e 0% dall'alto verso il basso del contenitore padre).
- Imposta Dimensione a così le componenti dell'interfaccia di selezione occupano circa più della metà del contenitore da top a bottom (100% orizzontalmente e 67% verticalmente del quadro padre).
- Imposta Nome a ObiettivoDisplay .
Crea gli elementi del titolo.
Inserisci un ImmagineLabel in ObiettivoDisplay .
Seleziona il ImageLabel , quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 1 per impostare il punto di origine della Etichettanella parte inferiore del suo centro (50% dalla sinistra alla destra dell'Etichettae 100% dall'alto verso il basso dell'Etichetta).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Ordine di Layout a -1.
- Imposta Posizione a {0.5, 0},{0.34, 0} per impostare l'etichetta vicino all'alto superiore del frame (50% dalla sinistra alla destra del frame padre e 34% dall'alto alla parte inferiore del frame padre).
- Imposta Dimensione a {0.46, 0},{0.34, 0} per allargare l'area della richiesta a quasi metà del frame (46% orizzontalmente e 34% verticalmente del frame padre).
- Imposta Nome a Header.
- Imposta Immagine a rbxassetid://14304828123 per visualizzare un trapezio.
- Imposta Trasparenza dell'immagine a 0.15 per rendere l'intestazione semi-trasparente.
(Opzionale) Inserisci una restrizione di rapporto UIAspectRatio nel ImageLabel per garantire che la proporzione dell'Etichettarimanga la stessa indipendentemente dalla dimensione dello schermo del Giocatore.Il campione imposta la sua proprietà UIAspectRatioConstraint.AspectRatio a 13.781 .
Inserisci un TextLabel in Header per visualizzare un titolo.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della nuova Etichettanel mezzo di se stesso (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Posizione a {0.5, 0},{0.5, 0} per spostare l'etichetta al centro della sua etichetta padre (50% dalla sinistra alla destra dell'Etichettapadre e 50% dall'alto verso il basso dell'Etichettapadre).
- Imposta Dimensione a {0.62, 0},{0.55, 0} per allargare lo spazio del testo a più della metà della etichetta padre (62% orizzontalmente e 55% verticalmente dell'Etichettapadre).
- Imposta Nome a HeaderTextLabel .
- Imposta FontFace a Montserrat per adattarsi all'estetica futuristica.
- Imposta Peso a Medio per ingrossare il carattere.
- Imposta Testo a OBIETTIVO .
- Abilita TextScaled .
Crea gli elementi di richiesta.
Inserisci un ImmagineLabel in ObiettivoDisplay .
Seleziona il ImageLabel , quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 1 per impostare il punto di origine della Etichettanella parte inferiore del suo centro (50% dalla sinistra alla destra dell'Etichettae 100% dall'alto verso il basso dell'Etichetta).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Posizione a {0.5, 0},{1, 0} per spostare l'etichetta verso il basso-centro del suo quadro padre (50% dalla sinistra alla destra del quadro padre e 100% dall'alto verso il basso del quadro padre).
- Imposta Dimensione a {0.89, 0},{0.66, 0} per allargare lo spazio del testo fino quasi all'intera larghezza del quadro padre (89% orizzontalmente e 66% verticalmente del quadro padre).
- Imposta Nome a Corpo .
- Imposta Immagine a rbxassetid://14304827265 per visualizzare un trapezio capovolto.
- Imposta ImageColor3 a 0, 0, 0 per tingere l'immagine nera.
- Imposta Trasparenza dell'immagine a 0.3 per rendere l'intestazione semi-trasparente.
(Opzionale) Inserisci una restrizione di rapporto UIAspectRatio nel ImageLabel per garantire che la proporzione dell'Etichettarimanga la stessa indipendentemente dalla dimensione dello schermo del Giocatore.Il campione imposta la sua proprietà UIAspectRatioConstraint.AspectRatio a 13.781 .
Inserisci un TextLabel nel Corpo per visualizzare una richiesta.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della nuova Etichettanel mezzo di se stesso (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Posizione a {0.5, 0},{0.5, 0} per spostare l'etichetta al centro della sua etichetta padre (50% dalla sinistra alla destra dell'Etichettapadre e 50% dall'alto verso il basso dell'Etichettapadre).
- Imposta Dimensione a {0.85, 0},{0.39, 0} per allargare lo spazio del testo a più della metà della etichetta padre (85% orizzontalmente e 39% verticalmente dell'Etichettapadre).
- Imposta Nome a BodyTextLabel .
- Imposta FontFace a Montserrat per adattarsi all'estetica futuristica.
- Imposta Peso a Medio per ingrossare il carattere.
- Imposta TextColor3 a 255, 255, 255 per rendere il testo bianco contro lo sfondo scuro.
- Imposta Testo a Contrassegnare i giocatori avversari per segnare punti! La prima squadra a %d punti vince. .
- Abilita TextScaled .
Crea un container per i contatori del team dell'obiettivo.
Inserisci un Frame in Obiettivo .
Seleziona il nuovo Frame , quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 1 per impostare il punto di origine della Etichettanella parte inferiore del mezzo (50% dalla sinistra alla destra del frame e 100% dall'alto alla parte inferiore del frame).
- Imposta Trasparenza di fondo a 1 per rendere il background del frame completamente trasparente.
- Imposta Posizione a {0.5, 0},{1, 0} per impostare il frame nella parte inferiore del contenitore (50% dalla sinistra alla destra del frame padre e 100% dalla parte superiore al basso del frame padre).
- Imposta Dimensione a così le componenti dell'interfaccia di selezione occupano circa meno della metà del contenitore da sinistra a destra (44% orizzontalmente e 27% verticalmente del quadro padre).
- Imposta Nome a TeamPointCounter .
Crea un margine per i contatori di squadra.
- Inserisci un oggetto UIListLayout nella finestra dal passo 5.
- Seleziona l'oggetto UIListLayout , quindi nella finestra Proprietà ,
- Imposta Spazio di riempimento a 0.025, 0 per fornire spazio tra i futuri contatori di squadra.
- Imposta Direzione di riempimento a Orizzontale in modo che ogni contapassi di squadra venga visualizzato accanto all'altro.
- Imposta Allineamento orizzontale a Centro in modo che ogni contapassi di squadra si allinei al centro l'uno dell'altro.
Crea gli elementi del contapassi della squadra verde.
Inserisci un ImmagineLabel in TeamPointCounter .
Seleziona il ImageLabel , quindi nella finestra Proprietà ,
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Posizione a {0.5, 0},{1, 0} per spostare l'etichetta verso il basso-centro del suo quadro padre (50% dalla sinistra alla destra del quadro padre e 100% dall'alto verso il basso del quadro padre).
- Imposta Dimensione a {0.5, 0},{1, 0} per allargare l'etichetta fino alla metà della larghezza del quadro padre (50% orizzontalmente e 100% verticalmente del quadro padre).
- Imposta Nome a TeamACounter .
- Imposta Immagine a rbxassetid://14304826831 per visualizzare un sfocatura direzionale.
- Imposta ImageColor3 a 88, 218, 171 per tingere l'immagine di menta verde.
Configura un attributo personalizzato per tracciare che questa etichetta è per la teamverde.
- Nella finestra Proprietà , naviga alla sezione Attributi , quindi fai clic sull'Iconaplus. Viene visualizzata una finestra pop-up.
- Nel campo Nome , inserisci teamColor .
- Nel menu a discesa Tipo , seleziona BrickColor .
- Fai clic sul pulsante Salva .
- Imposta l'attributo nuovo teamColor a Menta .
Inserisci un TextLabel in TeamACounter per visualizzare una richiesta.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 1, 0.5 per impostare il punto di origine della nuova Etichettanel centro destro di se stesso (100% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Posizione a {0.95, 0},{0.5, 0} per spostare l'etichetta a destra della sua etichetta padre (95% dalla sinistra alla destra della Etichettapadre e 50% dall'alto verso il basso della Etichettapadre).
- Imposta Dimensione a {0.85, 0},{0.39, 0} per allargare lo spazio del testo a più della metà della etichetta padre (85% orizzontalmente e 39% verticalmente dell'Etichettapadre).
- Imposta FontFace a Montserrat per adattarsi all'estetica futuristica.
- Imposta Peso a Bold per ingrossare il carattere.
- Imposta TextColor3 a 255, 255, 255 per rendere il testo bianco contro lo sfondo scuro.
- Imposta Testo a - .
- Abilita TextScaled .
- Imposta TextXAlignment a Destra .
Inserisci un oggetto UIStroke nell'area TextLabel , quindi nella finestra Proprietà , imposta Colore a 8, 78, 52 per delineare il trattino con uno stroke verde scuro.
Crea gli elementi del contapassi della squadra rosa.
Duplica TeamAICounter e i suoi figli.
Seleziona il duplicato TeamACounter , quindi nella finestra Proprietà ,
- Imposta Nome su TeamBCounter .
- Imposta Immagine a rbxassetid://14305849451 per visualizzare un sfocatura direzionale nella direzione opposta.
- Imposta ImageColor3 a 255, 170, 255 per tingere il carnet di immagine rosa.
- Imposta l'attributo teamColor a Carnation Pink .
Seleziona il duplicato TextLabel figlio di TeamBCounter , quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0, 0.5 per impostare il punto di origine della nuova Etichettanel centro sinistro di se stesso (0% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta Posizione a {0.05, 0},{0.5, 0} per spostare l'etichetta a sinistra della sua etichetta padre (5% da sinistra a destra della Etichettapadre e 50% dall'alto verso il basso della Etichettapadre).
- Imposta TextXAlignment a Sinistra .
Seleziona il figlio duplicato UIStroke di TeamBCounter , quindi nella finestra Proprietà , imposta Colore a 158, 18, 94 per delineare il trattino con uno stroke rosa scuro.
Fai riferimento ai seguenti ReplicatedStorage all'interno del file di posizione di esempio Laser Tag che aggiorna in modo programmatico il prompt di destinazione e traccia i punti del team.
Lo script seguente 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 suo blaster, questo script garantisce che tutti gli elementi dell'interfaccia utente HUD vengano visualizzati correttamente per lo stato, il Dispositivoe lo Statodella squadra del Giocatore.
Ora, dopo che un giocatore ha selezionato il suo blaster, l'interfaccia utente obiettivo viene visualizzata nella parte superiore dello schermo e traccia i punti di ogni team.
Interfaccia Blaster
Dopo le migliori pratiche della gerarchia visiva da Wireframe Your Layouts, questa sezione ti insegna come implementare tutti gli elementi dell'interfaccia utente sullo schermo relativi al blaster del Giocatore.Questo gruppo di elementi UI occupa la maggior parte dello spazio sullo schermo vicino al centro dello schermo perché funge da punto focale per attirare l'attenzione dei giocatori all'azione nello Spazio3D e ha la maggiore importanza per giocare al Gioco.
Traccia incrociata
Un cursore è un elemento UI che informa i giocatori su dove faranno impatto quando esploderanno la loro arma.Questo elemento UI è un requisito fondamentale per le esperienze di gioco in prima persona perché i giocatori devono essere in grado di mirare con precisione al loro blaster e contrassegnare i membri del team nemico.
Come la maggior parte delle altre esperienze nel Genere, Sessodi shooter in prima persona, la posizione del tag laser di esempio posiziona il cursore nel centro dello schermo in modo che i giocatori abbiano qualcosa di statico su cui concentrarsi mentre il loro avatar si muove nello Spazio3D.Oltre a ridurre la malattia da movimento, questo posizionamento consente al cursore di essere percepibile mentre si integra anche nell'Ambientegenerale.
Per ricreare esattamente il cursore all'interno dell'esperienza di prova Laser Tag:
Inserisci un ImageLabel nel oggetto HUDGui ScreenGui
Nella finestra Explorer , naviga al servizio StarterGui .
Passa il mouse sul suo oggetto figlio HUDGui , quindi fai clic sull'Icona ⊕ . Viene visualizzato un menu contestuale.
Dal menu contestuale, inserisci un ImmagineLabel .
Seleziona il nuovo ImageLabel , quindi nella finestra Proprietà ,
- Imposta Immagine a rbxassetid://14400935446.
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della Etichettanel mezzo dell'etichetta (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Nome a Crosshair .
- Imposta Posizione a {0.5,0},{0.5,0} per impostare l'etichetta nel mezzo dello schermo.
- Imposta ScaleType a Fit in modo che l'immagine si adatti al suo contenitore e non si estenda su varie dimensioni dello schermo.
(Opzionale) Inserisci un Contrasto di UIAspectRatio in Crosshair per garantire che la proporzione dell'Etichettarimanga la stessa indipendentemente dalla dimensione dello schermo del Giocatore.Il campione imposta la sua proprietà UIAspectRatioConstraint.AspectRatio a 0.895 .
Segna colpo
Un segnaposto di colpo è un elemento UI che viene visualizzato solo quando un'esplosione fa impatto con un altro giocatore della teamnemica.Come la crosshair, questo elemento dell'interfaccia utente è un requisito fondamentale per il gameplay per le esperienze di primo persona di sparatori perché fornisce un feedback visivo quando i giocatori sono riusciti a contrassegnare i loro avversari.
Per ricreare esattamente il segnaposto colpo all'interno dell'esperienza di Laser Tag di campionamento:
Inserisci un ImageLabel nel oggetto Crosshair ImageLabel .
Nella finestra Explorer , naviga al servizio StarterGui .
Passa il mouse sul suo oggetto figlio Crosshair , quindi fai clic sull'Icona ⊕ . Viene visualizzato un menu contestuale.
Dal menu contestuale, inserisci un ImmagineLabel .
Seleziona il nuovo ImageLabel , quindi nella finestra Proprietà ,
- Imposta Immagine a rbxassetid://14401148736 per visualizzare l'Iconadel segnaposto rettangolare hit.
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della Etichettanel mezzo dell'Etichetta.
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Posizione a {0.5,0},{0.5,0} per impostare l'etichetta nel mezzo dello schermo.
- Imposta Nome a Hitmarker .
- Imposta Dimensione a {0.6, 0},{0.06, 0} per ridurre le dimensioni dei rettangoli intorno al centro della crosshair.
- Imposta Trasparenza dell'immagine a 1 per rendere il segnaposto di colpo completamente trasparente.Gli script nel passo successivo ripristinano la trasparenza a 0 ogni volta che l'esplosione di un Giocatorefa impatto con un altro giocatore sulla teamnemica.
Fai riferimento agli script seguenti ReplicatedStorage all'interno del file di posizione di esempio Laser Tag che mostra in modo programmatico il segnaposto colpo quando un'esplosione fa impatto con un giocatore della teamnemica.
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 suo blaster, questo script garantisce che tutti gli elementi dell'interfaccia utente HUD vengano visualizzati correttamente per lo stato, il Dispositivoe lo Statodella squadra del Giocatore.
Ora, ogni volta che un giocatore lancia il suo blaster e l'esplosione ha impatto con un altro Giocatore, il segnaposto colpo viene visualizzato momentaneamente.
Selettore blaster
Un selettore di blaster è un componente dell'interfaccia utente che i giocatori utilizzano per selezionare il loro tipo di blaster prima di unirsi o di ricongiungersi a una partita.L'esperienza di tag laser di esempio fornisce due tipi di blaster: uno che produce diversi raggi con una diffusione orizzontale ampia e un altro che produce un singolo raggio.Il tipo di blaster che i giocatori selezionano influisce sulla loro strategia durante il round, rendendo questo componente dell'interfaccia utente essenziale per l'esperienza complessiva.
I seguenti passaggi dettagliano come creare diversi container per i diversi gruppi di elementi dell'interfaccia utente, un titolo con un prompt, la navigazione e i pulsanti di selezione e un pulsante prefab per il blaster.La logica di scripting per la componente generale popola diverse caratteristiche visive nel pulsante prefabbricato del blaster secondo Configuration che rappresentano ogni inserisci / scrividi blaster.
Questa configurazione ti consente di creare ulteriori Configuration istanze per più tipi di blaster che vengono visualizzati correttamente all'interno del selettore blaster senza bisogno di creare pulsanti individuali all'interno di StarterGui.PickABlasterGui .
Per ricreare esattamente il selettore del blaster all'interno dell'esperienza di prova Laser Tag:
Crea un container per l'intera componente.
Inserisci un Frame nel oggetto PickABlaster ScreenGui.
- Nella finestra Explorer , naviga al servizio StarterGui .
- Passa il mouse sul suo oggetto figlio PickABlaster , quindi fai clic sull'Icona ⊕ . Viene visualizzato un menu contestuale.
- Dal menu contestuale, inserisci un Frame .
Seleziona il nuovo frame, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 1 per impostare il punto di origine del frame nella parte inferiore del mezzo (50% dalla sinistra alla destra del frame e 100% dalla parte superiore alla parte inferiore del frame).
- Imposta Trasparenza di fondo a 1 per rendere il background del frame completamente trasparente.
- Imposta Posizione a {0.5, 0},{0.9, 0} per impostare il frame vicino alla parte inferiore del display (50% dalla sinistra alla destra dello schermo e 92,4% dall'alto alla parte inferiore dello schermo).
- Imposta Dimensione a così le componenti dell'interfaccia utente del selettore del blaster occupano una grande porzione dello schermo per catturare l'attenzione dei giocatori (80% in orizzontale e 25% in verticale).
- Imposta Nome a Componente .
(Opzionale) Inserisci un Contrasto di UIAspectRatio in Componente per garantire che la proporzione dell'aspetto dei frame e dei loro elementi UI rimanga la stessa indipendentemente dalla dimensione dello schermo del Giocatore.Il campione imposta la sua proprietà UIAspectRatioConstraint.AspectRatio a 5 .
Crea un container per contenere i gruppi di elementi UI.
Inserisci un Frame in Componente .
Seleziona il nuovo frame, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine dei frame nel mezzo di se stesso (50% dalla sinistra alla destra del frame e 50% dall'alto verso il basso del frame).
- Imposta Trasparenza di fondo a 1 per rendere il background del frame completamente trasparente.
- Imposta Posizione a {0.5, 0},{0.375, 0} per impostare il frame vicino all'alto-metà del contenitore (50% dalla sinistra alla destra del contenitore padre e 37.5% dall'alto alla parte inferiore del contenitore padre).
- Imposta Dimensione a così le componenti dell'interfaccia di selezione occupano 3/4 del contenitore (100% orizzontalmente e 75% verticalmente del quadro padre).
- Imposta Nome a SelectionFrame .
Crea una richiesta per il selettore del blaster.
Inserisci un ImmagineLabel in SelectionFrame .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 1 per impostare il punto di origine della Etichettanella parte inferiore del suo centro (50% dalla sinistra alla destra dell'Etichettae 100% dall'alto verso il basso dell'Etichetta).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Ordine di Layout a -1.
- Imposta Posizione a {0.5, 0},{0.22, 0} per impostare l'etichetta vicino all'alto superiore del frame (50% dalla sinistra alla destra del frame padre e 22% dall'alto alla parte inferiore del frame padre).
- Imposta Dimensione a {0.45, 0},{0.22, 0} per allargare l'area della richiesta a quasi metà del frame (45% orizzontalmente e 22% verticalmente del frame padre).
- Imposta Nome a Header .
- Imposta Immagine a rbxassetid://14304828123 per visualizzare un trapezio.
- Imposta Trasparenza dell'immagine a 0.15 per rendere l'intestazione semi-trasparente.
(Opzionale) Inserisci un Contrasto di UIAspectRatio nella etichetta per garantire che la proporzione dell'Etichettarimanga la stessa indipendentemente dalla dimensione dello schermo del Giocatore.Il campione imposta la sua proprietà UIAspectRatioConstraint.AspectRatio a 13.78.
Inserisci un TextLabel in Header per visualizzare una richiesta.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della nuova Etichettanel mezzo di se stesso (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Posizione a {0.5, 0},{0.5, 0} per spostare l'etichetta al centro della sua etichetta padre (50% dalla sinistra alla destra dell'Etichettapadre e 50% dall'alto verso il basso dell'Etichettapadre).
- Imposta Dimensione a {0.6, 0},{0.55, 0} per allargare lo spazio del testo a più della metà della etichetta padre (60% orizzontalmente e 55% verticalmente dell'Etichettapadre).
- Imposta Nome a HeaderTextLabel .
- Imposta FontFace a Montserrat per adattarsi all'estetica futuristica.
- Imposta Peso a Medio per ingrossare il carattere.
- Imposta Testo a SCEGLI UN BLASTER .
- Abilita TextScaled .
Crea il container per il tuo contenitore per il pulsante blaster e le frecce di selezione.
Inserisci un ImmagineLabel in SelectionFrame .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Rimuovi il valore predefinito Immagine .
- Imposta Punto di ancoraggio a 0.5, 1 per impostare il punto di origine della Etichettanella parte inferiore del suo centro (50% dalla sinistra alla destra dell'Etichettae 100% dall'alto verso il basso dell'Etichetta).
- Imposta BackgroundColor a 0, 0, 0 per rendere il riquadro nero.
- Imposta Trasparenza di sfondo a 0.3 per ridurre l'opacità dell'etichetta del 30%, e abbinare tutti gli elementi dell'interfaccia utente neri nell'esperienza.
- Imposta Posizione a {0.5, 0},{1, 0} per impostare l'etichetta nella parte inferiore del frame (50% dalla sinistra alla destra del frame padre e 100% dall'alto alla parte inferiore del frame padre).
- Imposta Dimensione a {1, 0},{0.77, 0} per allargare l'area della etichetta allo spazio sotto il prompt (100% orizzontalmente e 77% verticalmente del quadro padre).
Arrotonda gli angoli del contenitore.
- Inserisci un oggetto UICorner nella Etichetta.
- Seleziona l'oggetto angolare nuovo, quindi nella finestra Proprietà , imposta CornerRadius a 0.075, 0 per arrotondare gli angoli.
Crea il container per i tuoi pulsanti blaster.
Inserisci un quadro nella label dal passo 4.
Seleziona il nuovo frame, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine del nuovo frame nel mezzo di se stesso (50% dalla sinistra alla destra del frame e 50% dall'alto verso il basso del frame).
- Imposta Trasparenza di fondo a 1 per rendere il background del frame completamente trasparente.
- Imposta Posizione a {0.5, 0},{0.5, 0} per impostare il frame nel mezzo della sua etichetta genitrice (50% dalla sinistra alla destra della etichetta genitrice e 50% dall'alto verso il basso della etichetta genitrice).
- Imposta Dimensione a {0.85, 0},{0.77, 0} per allargare l'area del frame alla maggior parte dell'etichetta (85% orizzontalmente e 77% verticalmente dell'Etichettapadre).
- Imposta Nome a Container .
Crea un margine per tutti i futuri pulsanti blaster.
- Inserisci un oggetto UIListLayout nella finestra dal passo 5.
- Seleziona l'oggetto layout nuovo, quindi nella finestra Proprietà ,
- Imposta Spaziatura a 0.035, 0 per fornire spazio tra tutti i futuri pulsanti.
- Imposta Riempi la direzione a Orizzontale in modo che ogni pulsante venga visualizzato accanto ad ogni altro.
- Imposta sia Allineamento orizzontale che Allineamento verticale a Centro in modo che ogni pulsante si allinei al centro l'uno dell'altro.
Crea il pulsante di navigazione a sinistra.
Inserisci un oggetto ImmagineButton nell' ImmagineLabel dal passo 4.
Seleziona il nuovo pulsante, quindi nella finestra Proprietà ,
- Rimuovi il valore predefinito Immagine .
- Imposta Punto di ancoraggio a 0, 0.5 per impostare il punto di origine del nuovo pulsante nel centro sinistro di se stesso (0% dalla sinistra alla destra del pulsante e 50% dall'alto verso il basso del pulsante).
- Imposta Trasparenza di sfondo a 0.15 per fornire un feedback visivo durante il passaggio del mouse sul pulsante selezionabile.
- Imposta Posizione a {0.02, 0},{0.5, 0} per fornire un margine a sinistra del pulsante dal suo contenitore padre (2% a sinistra del contenitore padre e 50% dal top al bottom del contenitore Etichetta).
- Imposta Dimensione a {0.04, 0},{0.33, 0} per rendere il pulsante di selezione molto più piccolo dei pulsanti del blaster (4% orizzontalmente e 33% verticalmente del quadro padre).
- Imposta Nome a NavigationButtonLeft .
Arrotonda gli angoli del pulsante.
- Inserisci un oggetto UICorner nel pulsante.
- Seleziona l'oggetto angolare nuovo, quindi nella finestra Proprietà , imposta CornerRadius a 0.1, 0 per arrotondare gli angoli.
Inserisci un oggetto ImageLabel nel pulsante.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della nuova Etichettanel mezzo di se stesso (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta Posizione a {0.45, 0},{0.5, 0} per impostare l'etichetta vicino al centro del suo pulsante padre (45% dalla sinistra alla destra del pulsante padre e 50% dall'alto verso il basso del pulsante padre).Questo valore non è nel mezzo perché una freccia non ha visivamente l'aspetto di essere nel mezzo del pulsante a {0.5, 0},{0.5, 0} .
- Imposta Dimensione a {0.8, 0},{0.8, 0} per allargare l'area di etichetta allo spazio sotto il prompt (80% orizzontalmente e 80% verticalmente del quadro padre).
- Imposta Trasparenza di fondo a 1 per rendere il background dell'immagine completamente trasparente.
- Imposta Immagine a rbxassetid://14309187238.
- Imposta ScaleType a Fit .
Crea il pulsante di navigazione giusto.
Duplica NavigazioneButtonLeft .
Seleziona il pulsante duplicato, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 1, 0.5 per impostare il punto di origine del nuovo pulsante nel centro destro di se stesso (100% dalla sinistra alla destra del pulsante e 50% dall'alto verso il basso del pulsante).
- Imposta Posizione a {0.98, 0},{0.5, 0} per fornire un margine alla destra del pulsante dal suo contenitore padre (98% dalla sinistra alla destra del contenitore padre e 50% dal top al bottom del contenitore Etichetta).
- Imposta Nome a NavigationButtonRight .
Seleziona il suo oggetto figlio ImageLabel .
- Imposta Rotazione a 180 per ribaltare l'immagine.
- Imposta Posizione a {0.55, 0},{0.5, 0} per impostare l'etichetta vicino al centro del suo pulsante padre (55% dalla sinistra alla destra del pulsante padre e 50% dall'alto verso il basso del pulsante padre).Questo valore non è nel mezzo perché una freccia non ha visivamente l'aspetto di essere nel mezzo del pulsante a {0.5, 0},{0.5, 0} .
Crea il pulsante SELEZIONA .
Inserisci un ImageButton in Componente .Nota come questo processo mantenga il pulsante di selezione separato da SelectionFrame in modo che tu possa aggiungere spazio tra la parte principale del componente dal pulsante di selezione.
Seleziona il nuovo pulsante, quindi nella finestra Proprietà ,
- Rimuovi il valore predefinito Immagine .
- Imposta Punto di ancoraggio a 0.5, 1 per impostare il punto di origine del nuovo pulsante nella parte inferiore del mezzo (50% dalla sinistra alla destra del pulsante e 100% dalla parte superiore alla parte inferiore del pulsante).
- Imposta Trasparenza di sfondo a 0.15 per fornire un feedback visivo durante il passaggio del mouse sul pulsante selezionabile.
- Imposta Posizione a {0.5, 0},{0.99, 0} per impostare il pulsante vicino al centro inferiore del suo contenitore (50% dalla sinistra alla destra del quadro padre e 99% dal top al bottom del quadro padre).
- Imposta Dimensione a {0.17, 0},{0.18, 0} per allungare il pulsante sotto i pulsanti blaster (17% orizzontale e 18% verticale del quadro padre).
- Imposta Nome a Seleziona pulsante .
Arrotonda gli angoli del pulsante.
- Inserisci un oggetto UICorner nel pulsante.
- Seleziona l'oggetto angolare nuovo, quindi nella finestra Proprietà , imposta CornerRadius a 0.2, 0 per arrotondare gli angoli.
Inserisci un oggetto TextLabel nel pulsante in modo da poter visualizzare una chiamata all'azione.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della nuova Etichettanel mezzo di se stesso (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Posizione a {0.5, 0},{0.5, 0} per spostare l'etichetta al centro del pulsante (50% dalla sinistra alla destra del pulsante padre e 50% dall'alto verso il basso del pulsante padre).
- Imposta Dimensione a {0.9, 0},{0.55, 0} per allargare lo spazio del testo a quasi tutta la larghezza della etichetta padre (90% orizzontalmente e 55% verticalmente dell'Etichettapadre).
- Imposta Nome a SelezionaLabelText .
- Imposta FontFace a Montserrat per adattarsi all'estetica futuristica.
- Imposta Peso a Medio per ingrossare il carattere.
- Imposta Testo a SELEZIONE .
- Abilita TextScaled .
Crea un prefab di pulsante blaster.
- Nel servizio ReplicatedStorage , crea una struttura di cartella per organizzare gli oggetti UI.L'esempio utilizza una cartella Instanze con una cartella figlia Guis .
- Inserisci un oggetto ImageButton nella cartella Guis .
- Seleziona il nuovo pulsante, quindi nella finestra Proprietà ,
- Rimuovi il valore predefinito Immagine .
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine del nuovo pulsante nel mezzo di se stesso (50% dalla sinistra alla destra del pulsante e 50% dall'alto verso il basso del pulsante).
- Imposta Trasparenza di sfondo a 0.65 per fornire un feedback visivo che il pulsante non è in primo piano.Gli script nel passo 12 forniscono un feedback visivo programmatico quando il pulsante è in primo piano.
- Imposta Ordine di Layout a 2.
- Imposta Nome a BlasterButtonPrefab .
- Imposta Dimensione a {0.8, 0},{0.8, 0}.
- Imposta Trasparenza dell'immagine a 1 per rendere l'immagine completamente trasparente.
- Inserisci una restrizione UIAspectRatio in BlasterButtonPrefab per garantire che la proporzione dell'aspetto del pulsante rimanga la stessa all'interno del componente indipendentemente dalla dimensione dello schermo del Giocatore.
- Arrotonda gli angoli del pulsante.
- Inserisci un oggetto UICorner in BlasterButtonPrefab .
- Seleziona il UICorner , quindi nella finestra Proprietà , imposta CornerRadius a 0.05, 0 per arrotondare gli angoli.
- Inserisci un ImageLabel in BlasterButtonPrefab .
- Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Rimuovi il valore predefinito Immagine .
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della nuova Etichettanel mezzo di se stesso (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Posizione a {0.52, 0},{0.497, 0} per impostare l'etichetta vicino al centro del suo pulsante padre (52% dalla sinistra alla destra del pulsante padre e 49,7% dall'alto verso il basso del pulsante padre).Questo valore non è nel mezzo perché il blaster non sembra visivamente essere nel mezzo del pulsante a {0.5, 0},{0.5, 0} .
- Imposta Dimensione a {1.20, 0},{0.9, 0} per allargare l'area della etichetta al di fuori del pulsante (120% orizzontalmente e 90% verticalmente del pulsante padre).
- Imposta ScaleType a Fit .
Fai riferimento ai seguenti ReplicatedStorage all'interno del file di posizione di esempio Laser Tag che mostra in modo programmatico i pulsanti per ogni blaster, ridimensiona i pulsanti quando un giocatore seleziona un pulsante che non è in primo piano e attacca la selezione del blaster di un Giocatoreal suo Avatar.
Il seguente script richiede un insieme di script che lavorano insieme per creare il selettore blaster.Quando un giocatore si unisce all'esperienza o respawna in una partita dopo che la sua salute raggiunge lo zero, questo script attiva tutti gli elementi dell'interfaccia utente del selettore blaster fino a quando il giocatore non fa la sua selezione.
Ora, ogni volta che un giocatore si unisce all'esperienza o respawna in una partita dopo che la sua salute raggiunge lo zero, viene visualizzata l'interfaccia utente selezionatrice del blaster, possono fare una selezione e ogni pulsante funziona come previsto.
Pulsante Esplodi
Un pulsante di esplosione è un componente dell'interfaccia utente che i giocatori utilizzano per esplodere il loro blaster se stanno accedendo all'esperienza attraverso un Dispositivomobile o tablet.L'esperienza di tag laser di esempio utilizza un pulsante blaster con un'icona che rappresenta sia un cursore che una esplosione per comunicare la funzione del pulsante senza testo.
Per ricreare esattamente il pulsante di esplosione all'interno dell'esperienza di prova Laser Tag:
Inserisci un ImageButton nel oggetto HUDGui ScreenGui
Nella finestra Explorer , naviga al servizio StarterGui .
Passa il mouse sul suo oggetto figlio HUDGui , quindi fai clic sull'Icona ⊕ . Viene visualizzato un menu contestuale.
Dal menu contestuale, inserisci un ImmagineButton .
Nella vista, sposta il pulsante dove si trova naturalmente il pollice di un Giocatorein modo da poter ottenere una sensazione visiva di ciò che il pulsante apparirà sul Dispositivodi un Giocatore, quindi nella finestra Proprietà ,
- Imposta Immagine a rbxassetid://18308375035 per visualizzare l'Iconadel pulsante di esplosione.
- Imposta Immagine premuta a rbxassetid://18308372558 per visualizzare una versione invertita dell'icona del pulsante di esplosione quando un giocatore premere il pulsante.
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Nome a BlastButton .
- Imposta ScaleType a Fit in modo che l'immagine si adatti al suo contenitore e non si estenda su varie dimensioni dello schermo.
- Imposta Trasparenza immagine a 0.3 per ridurre l'opacità dell'etichetta in modo che corrisponda a tutti gli elementi UI neri nell'esperienza.
Inserisci una restrizione UIAspectRatio in BlastButton per garantire che la proporzione dell'aspetto del pulsante rimanga la stessa indipendentemente dalla dimensione dello schermo del Giocatore.
Fai riferimento ai seguenti ReplicatedStorage all'interno del file di posizione di esempio Laser Tag che mostra in modo programmatico il pulsante blaster quando un giocatore utilizza l'input touch su un dispositivo che accetta i Controllitouch.
Il seguente script richiede un insieme di script di modulo che lavorano insieme per configurare il principale Heads Up Display (HUD), incluso setupTouchButtonAsync.Dopo che un giocatore si unisce a un round e seleziona il suo blaster, questo script garantisce che tutti gli elementi dell'interfaccia utente HUD vengano visualizzati correttamente per lo stato, il Dispositivoe lo Statodella squadra del Giocatore.
Ora, quando un giocatore si unisce all'esperienza e utilizza l'input touch su un dispositivo che accetta i Controllitouch, il pulsante blaster viene visualizzato nella parte superiore destra del pulsante di salto.
Interfaccia utente del player
Dopo le migliori pratiche della gerarchia visiva da Wireframe Your Layouts, questa sezione ti insegna come implementare tutti gli elementi dell'interfaccia utente sullo schermo relativi allo stato del Giocatore.Questo gruppo di elementi UI è vicino ai lati dello schermo perché i giocatori possono comprendere queste informazioni periferiche senza distrarre la loro attenzione dal Partita.
Indicatore del giocatore
Un indicatore del giocatore è un componente dell'interfaccia utente a cui i giocatori si riferiscono per decifrare rapidamente a quale squadra appartengono non appena si generano nella zona di spawn della loro team.L'esperienza di tag laser di esempio fornisce due versioni dell'indicatore del giocatore a seconda se il giocatore è nella team verde o rosa .
Dopo le indicazioni da Seleziona un tema di colore, entrambe le versioni dell'indicatore del giocatore combinano il colore del team con un'icona unica e semplice con dettagli minimi in modo che rimangano leggibili su piccoli schermi.Fornire due forme di feedback visivo è importante perché aiuta a mantenere il design accessibile per i giocatori con colorblindness.
Per ricreare esattamente la componente indicatore del giocatore all'interno dell'esperienza di prova Laser Tag:
Inserisci un Frame nel oggetto HUDGui ScreenGui.
- Nella finestra Explorer , naviga al servizio StarterGui .
- Passa il mouse sul suo oggetto figlio HUDGui , quindi fai clic sull'Icona⊕. Viene visualizzato un menu contestuale.
- Dal menu contestuale, inserisci un Frame .
Seleziona il nuovo Frame , quindi nella finestra Proprietà ,
Imposta Punto di ancoraggio a 0, 1 per impostare il punto di origine del frame nella parte inferiore del mezzo (0% dalla sinistra alla destra del frame e 100% dall'alto verso il basso del frame).
Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
Imposta Nome a Display del giocatore .
Imposta Posizione a {0.02, 0},{0.97, 0} per impostare il frame vicino alla parte inferiore sinistra dello schermo.
Imposta Dimensione a {0.23, 0},{0.08, 0} per accorciare e allargare il frame.
Abilita ClipsDescendants per tagliare i GuiObjects figli che si estendono oltre il frame.
Crea la forma poligonale.
Inserisci un ImmagineLabel in PlayerDisplay .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta Immagine a rbxassetid://14304828123 per visualizzare l'Iconatrapezoidale.
- Imposta Punto di ancoraggio a 1, 1 per impostare il punto di origine della Etichettanella parte inferiore destra di se stessa (100% dalla sinistra alla destra dell'Etichettae 100% dall'alto verso il basso dell'Etichetta).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Nome a Blocco .
- Imposta Posizione a {1,0},{1,0} per impostare l'etichetta sul lato destro del frame.
- Imposta Dimensione a {1.858, 0},{0.581, 0} per allargare l'etichetta al di fuori del frame e abbreviarla a poco più della metà della lunghezza del frame.
- Imposta Trasparenza dell'immagine a 0.15 per rendere l'etichetta leggermente trasparente.
- Imposta ScaleType a Fit in modo che l'immagine si adatti al suo contenitore e non si estenda su varie dimensioni dello schermo.
- Inserisci un vincolo di rapporto UIAspectRatio nel blocco per garantire che la dimensione dell'aspetto della etichetta e dei suoi elementi figli UI rimanga la stessa indipendentemente dalla dimensione dello schermo del Giocatore.
- Seleziona la nuova Vincolo, quindi nella finestra Proprietà , imposta AspectRatio su 13.78.
Crea la scatola per il portraitdel Giocatore.
Inserisci un ImmagineLabel in PlayerDisplay .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Rimuovi l'ID riservato placeholder all'interno della Proprietà Immagine .Gli script nel passo 7 inseriscono programmaticamente il ritratto del Giocatorenell'Etichettadell'immagine.
- Imposta Punto di ancoraggio a 0, 1 per impostare il punto di origine della Etichettanella parte inferiore sinistra di se stessa (0% dalla sinistra alla destra dell'Etichettae 100% dall'alto verso il basso dell'Etichetta).
- Imposta BackgroundColor3 a 0, 0, 0 per impostare il colore di sfondo dell'Etichettaa nero.
- Imposta Trasparenza di sfondo a 0.3 per ridurre l'opacità dell'etichetta del 30%, e abbinare tutti gli elementi dell'interfaccia utente neri nell'esperienza.
- Imposta Nome a PlayerPortrait .
- Imposta Posizione a {0.11, 0},{1, 0} per impostare l'etichetta sul lato sinistro della forma poligonale.
- Imposta Dimensione a {0.23, 0},{1, 0} per restringere l'Etichetta.
- Imposta Trasparenza dell'immagine a 0.15 per rendere l'etichetta leggermente trasparente.
- Imposta ScaleType a Fit in modo che l'immagine si adatti al suo contenitore e non si estenda su varie dimensioni dello schermo.
- Inserisci un vincolo di rapporto UIAspectRatio in PlayerPortrait per garantire che la label e gli elementi dell'interfaccia utente dei suoi figli rimangano con lo stesso rapporto di aspetto, indipendentemente dalla dimensione dello schermo del Giocatore.
- Inserisci un UICorner in PlayerPortrait , quindi nella finestra Proprietà , imposta CornerRadius a 0.05, 0 per arrotondare leggermente gli angoli.
Crea l'etichetta del testo per il nome del Giocatore.
Inserisci un oggetto TextLabel in PlayerDisplay .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0, 0.5 per impostare il punto di origine del nuovo pulsante nel centro sinistro di se stesso (0% dalla sinistra alla destra del pulsante e 50% dall'alto verso il basso del pulsante).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Nome su PlayerNameTextLabel .
- Imposta Posizione a {0.35, 0},{0.72, 0} per impostare l'etichetta sul lato destro del suo contenitore (35% dalla sinistra alla destra dell'Etichettapadre e 72% dall'alto verso il basso dell'Etichettapadre).
- Imposta Dimensione a {0.52, 0},{0.3, 0} in modo che il testo occupi la maggior parte dell'area della forma poligonale (52% orizzontale e 30% verticale del quadro padre).
- Imposta FontFace a Montserrat per adattarsi all'estetica futuristica.
- Imposta Peso a Bold per ingrossare il carattere.
- Rimuovi il testo del segnaposto all'interno della Proprietà Testo . Gli script nel passaggio 7 inseriscono programmaticamente il nome del Giocatorenel Etichettadel testo.
- Abilita TextScaled .
- Imposta TextXAlignment a Sinistra .
Crea le icone e i colori del team che vengono visualizzati a sinistra del portraitdel Giocatore.
Inserisci un Cartella in PlayerDisplay , quindi rinominalo TeamIcons .
Crea l'icona e il colore del team verde e crea.
- Inserisci un ImmagineLabel in TeamIcons .
- Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0, 1 per impostare il punto di origine della Etichettanella parte inferiore sinistra di se stessa (0% dalla sinistra alla destra dell'Etichettae 100% dall'alto verso il basso dell'Etichetta).
- Imposta BackgroundColor3 a 88, 218, 171 per impostare il colore di sfondo della Etichettaa verde menta.
- Imposta Nome a TeamAIcon .
- Imposta Posizione a {0, 0},{1, 0} per impostare l'etichetta sul lato sinistro del frame.
- Imposta Dimensione a {0.135, 0},{0.58, 0} per ridurre l'etichetta a sinistra del portraitdel giocatore.
- Imposta Trasparenza dell'immagine a 1 per rendere la etichetta trasparente.
- Configura un attributo personalizzato per tracciare che questa etichetta è per la teamverde. Questo passaggio è molto importante per gli script nel passo 7.
- Nella finestra Proprietà , naviga alla sezione Attributi , quindi fai clic sull'Iconaplus. Viene visualizzata una finestra pop-up.
- Nel campo Nome , inserisci teamColor .
- Nel menu a discesa Tipo , seleziona BrickColor .
- Fai clic sul pulsante Salva .
- Imposta l'attributo nuovo teamColor a Menta .
- Inserisci un vincolo di rapporto UIAspectRatio in TeamAIcon per garantire che la dimensione dell'aspetto della etichetta e dei suoi elementi figli UI rimanga la stessa indipendentemente dalla dimensione dello schermo del Giocatore.
- Crea l'Icona.
- Inserisci un ImmagineLabel in TeamAIcon .
- Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta Immagine a rbxassetid://14309678670 per visualizzare l'Iconadel team verde.
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della Etichettanel mezzo di se stessa (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Nome a Icona .
- Imposta Posizione a {0.5, 0},{0.5, 0} per impostare l'etichetta al centro della sua Etichettapadre.
- Imposta Dimensione a {0.7, 0},{0.6, 0} per restringere l'Etichetta.
- Imposta ScaleType a Fit in modo che l'immagine si adatti al suo contenitore e non si estenda su varie dimensioni dello schermo.
Crea l'icona e il colore del team rosa e crea.
- Duplica TeamAIcon e i suoi figli.
- Seleziona il duplicato TeamAIcon , quindi nella finestra Proprietà ,
- Imposta BackgroundColor3 a 255, 170, 255 per impostare il colore di sfondo della Etichettaa carnation pink.
- Imposta Nome a TeamBIcon .
- Imposta l'attributo teamColor a Carnation Pink .
- Seleziona il duplicato Icone figlio di TeamBIcon , quindi nella finestra Proprietà , imposta Immagine a rbxassetid://14309678549 per visualizzare l'Iconadel team rosa.
Fai riferimento ai seguenti ReplicatedStorage all'interno del file di posizione di esempio Laser Tag che mostra in modo programmatico l'indicatore del giocatore con il colore e l'icona del team appropriati mentre un giocatore è attivo in una partita.
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 si unisce a un round e seleziona il suo blaster, questo script garantisce che tutti gli elementi dell'interfaccia utente HUD vengano visualizzati correttamente per lo stato, il Dispositivoe lo Statodella squadra del Giocatore.
Ora, ogni volta che un giocatore si unisce o si ricongiunge alla partita dopo la rigenerazione, l'indicatore del giocatore viene visualizzato nella parte inferiore sinistra dello schermo.
Schermo del campo di forza
Una schermata del campo di forza è un elemento UI che sovrappone la vista per informare i giocatori che sono al sicuro dal fuoco del team nemico durante l'adesione o il reingresso in una partita.Dopo le linee guida estetiche per le icone da Scegli uno stile artistico, l'esperienza di tag laser di esempio utilizza un modello semitrasparente esagonale per simboleggiare un campo di forza.Questa decisione di progettazione non solo rafforza lo stile artistico futuristico generale per tutta l'interfaccia utente nell'esperienza, ma comunica anche lo stato del Giocatoresenza alcun testo o guida aggiuntiva.
Per ricreare esattamente lo schermo del campo di forza all'interno dell'esperienza di prova Laser Tag:
Inserisci un ImageLabel nel oggetto ForceFieldGui ScreenGui
Nella finestra Explorer , naviga al servizio StarterGui .
Passa il mouse sul suo oggetto figlio ForceFieldGui , quindi fai clic sull'Icona ⊕ . Viene visualizzato un menu contestuale.
Dal menu contestuale, inserisci un ImmagineLabel .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
Imposta Immagine a rbxassetid://14462567888.
Imposta Trasparenza di sfondo a 0.8 per rendere il campo di forza trasparente.
Imposta Dimensione a {1, 0},{1, 0} per riempire l'immagine l'intero schermo (100% orizzontale e 100% verticale dello schermo padre ScreenGui).
Imposta ScaleType a Tile per rendere la piastrelle esagono su tutta la schermata.
Imposta TileSize a {0, 104},{0, 180}.
Inserisci un oggetto UIGradient nella Etichetta.
Seleziona l'oggetto gradiente nuovo, quindi nella finestra Proprietà ,
Imposta Colore a una sequenza di colori che inizia con il blu, diventa bianco, quindi diventa di nuovo blu.
Imposta Colore a 120, 192, 250 per applicare un tono azzurro chiaro a tutti gli esagoni.
Fai clic sulla Proprietà Colore , quindi fai clic sul pulsante ⋯ . Viene visualizzata una sequenza di colori pop-up.
Ogni triangolo sull'asse inferiore della sequenza di colori è un punto chiave che determina il valore del colore della proprietà a quel punto dell'immagine da sinistra a destra.
Fai clic e trascina sulla sequenza di colori fino a raggiungere un valore di Tempo di 0.05 , quindi fai clic sul piccolo quadrato accanto a Colore per aprire la finestra pop-up Colori .
Seleziona un bianco brillante, quindi chiudi la finestra pop-up.
Fai clic e trascina sulla sequenza di colori fino a raggiungere un valore di Tempo di 0.95 , quindi riapri la finestra pop-up Colori e seleziona lo stesso colore bianco di prima.
Imposta Rotazione a 225 per far apparire la parte blu della sequenza di colori nella parte superiore sinistra e inferiore destra.
Imposta Trasparenza a una sequenza di numeri che fa sembrare il campo di forza scintillante.
Fai clic sulla Proprietà Trasparenza , quindi fai clic sul pulsante ⋯ .Un pop-up di sequenza di numeri.Ogni quadrato all'inizio e alla fine della sequenza numerica è un punto chiave che determina il valore di trasparenza della proprietà a quel punto dell'immagine da sinistra a destra.
Imposta le seguenti proprietà di tempo e valore in tutta la 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 il ImageLabel da passo 2.
Seleziona l'oggetto UIGradient all'interno dell'Etichettaduplicata, quindi nella finestra Proprietà ,
Imposta Rotazione a -45 per girare l'immagine in modo che quasi si specchi l'una sull'altra lungo l'asse Y.
Modifica Trasparenza per rendere lo scintillio più organico.
- Fai clic sulla Proprietà Trasparenza , quindi fai clic sul pulsante ⋯ . Viene visualizzata una sequenza di numeri pop-up.
- Seleziona il terzo Fotogramma chiave, quindi fai clic sul pulsante Elimina .
Fai riferimento ai seguenti ReplicatedStorage all'interno del file di posizione di esempio Laser Tag che mostra in modo programmatico lo schermo del campo di forza mentre un giocatore si unisce o si ricongiunge a una partita.
Lo script cliente seguente ReplicatedStorage.ForceFieldClientVisuals sostituisce il visuale predefinito ForceField con StarterGui.ForceFieldGui .Quando i giocatori caricano in un'esperienza e si generano su un SpawnLocation con una proprietà Duration superiore a 0, il comportamento predefinito in ogni esperienza è quello di fornire al loro avatar un'orbita blu protettiva che momentaneamente gli impedisce di perdere salute.
Questo script inizia ascoltando quando il ForceField viene aggiunto a un personaggio, disabilita le visuali del campo di forza predefinite in prima persona, quindi abilita l'oggetto ForceFieldGui ScreenGuiNota che questo non impatta le visuali in terza persona quando i giocatori guardano altri giocatori respawning nella esperienza.
local Players = game:GetService("Players")
local localPlayer = Players.LocalPlayer
local function onCharacterAddedAsync(character: Model)
local forceField = character:WaitForChild("ForceField", 3)
if not forceField then
-- Se il giocatore si genera a un punto di spawn con ForceField disabilitato
return
end
forceField.Visible = false
localPlayer.PlayerGui:WaitForChild("ForceFieldGui").Enabled = true
forceField.Destroying:Wait()
localPlayer.PlayerGui.ForceFieldGui.Enabled = false
end
if localPlayer.Character then
onCharacterAddedAsync(localPlayer.Character)
end
localPlayer.CharacterAdded:Connect(onCharacterAddedAsync)
Ora, ogni volta che un giocatore si unisce o si ricongiunge alla partita dopo la rigenerazione, l'interfaccia utente del nuovo campo di forza visualizza invece dei visuali predefiniti in prima persona ForceField .
Schermo di riproduzione
Una schermata di respawn è un elemento UI che oscura il viewport per informare i giocatori che sono stati etichettati e che il server è in procinto di respawnarli nella loro zona di spawn.Questo elemento UI è importante perché dà ai giocatori il tempo di elaborare che sono stati etichettati fuori, e strategizzare la loro prossima mossa prima di ricongiungersi al round attivo.
Per ulteriori informazioni sul comportamento di respawn personalizzato nell'esperienza di tag laser di esempio, vedi Respawn Characters dal curriculum di scripting di gioco.
Per ricreare esattamente lo schermo di respawn all'interno dell'esperienza di prova Laser Tag:
Crea il banner delle informazioni del centro.
Inserisci un ImageLabel nel oggetto OutStateGui ScreenGui
Nella finestra Explorer , naviga al servizio StarterGui .
Passa il mouse sul suo oggetto figlio OutStateGui , quindi fai clic sull'Icona ⊕ . Viene visualizzato un menu contestuale.
Dal menu contestuale, inserisci un ImmagineLabel .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine del nuovo pulsante nel mezzo di se stesso (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
Imposta Posizione a {0.5, 0},{0.5, 0} per impostare l'etichetta nel mezzo del suo contenitore (50% dalla sinistra alla destra dello ScreenGui padre, e 50% dall'alto verso il basso dello ScreenGui padre).
Imposta Dimensione a {0.48, 0},{0.06, 0} per allargare l'etichetta (48% orizzontalmente e 6% verticalmente dello schermo padre ScreenGui).
Imposta Nome a Blocco .
Imposta Immagine a rbxassetid://14304827265 per rendere l'immagine un trapezio.
Imposta ImageColor a 0,0,0 per rendere il trapezio nero.
Imposta Trasparenza dell'immagine a 0.3 per ridurre l'opacità dell'etichetta del 30%, e abbinare tutti gli elementi UI neri nell'esperienza.
Inserisci un vincolo di rapporto UIAspectRatio nel blocco per garantire che la dimensione dell'aspetto della etichetta e dei suoi elementi figli UI rimanga la stessa indipendentemente dalla dimensione dello schermo del Giocatore.
Seleziona la nuova Vincolo, quindi nella finestra Proprietà , imposta AspectRatio su 13.78.
Inserisci un TextLabel in Blocco per il testo informativo.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della Etichettanel mezzo di se stessa (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
Imposta Posizione a {0.5, 0},{0.5, 0} per impostare l'etichetta nel mezzo della sua etichetta padre (50% dalla sinistra alla destra dell'Etichettapadre e 50% dall'alto verso il basso dell'Etichettapadre).
Imposta Dimensione a così il testo può occupare la maggior parte dell'area trapezoidale (85% orizzontale e 55% verticale della Etichettapadre).
Imposta Nome a BodyTextLabel .
Imposta FontFace a Montserrat per adattarsi all'estetica futuristica.
Imposta Peso a Bold per ingrossare il carattere.
Imposta Testo a Respawning… .
Imposta TextColor3 a 255, 255, 255 per rendere il testo bianco.
Abilita TextScaled .
Crea l'intestazione.
Inserisci un ImageLabel in Blocco .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
Imposta Punto di ancoraggio a 0.5, 1 per impostare il punto di origine della Etichettanella parte inferiore del suo centro (50% dalla sinistra alla destra dell'Etichettae 100% dall'alto verso il basso dell'Etichetta).
Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
Imposta Posizione a {0.5, 0},{0, 0} per impostare l'etichetta nella parte superiore-centrale della sua etichetta padre (50% dalla sinistra alla destra dell'Etichettapadre e 0% dall'alto verso il basso dell'Etichettapadre).
Imposta Dimensione a {0.46, 0},{0.56, 0} per allargare l'etichetta (46% orizzontalmente e 56% verticalmente dell'Etichettapadre).
Imposta Nome a Header .
Imposta Immagine a rbxassetid://14304826985 per rendere l'immagine una sfocatura multidirezionale.
Imposta ImageColor a 245, 46, 46 per rendere il rosso sbiadito per segnalare che il giocatore è temporaneamente inattivo mentre viene etichettato fuori dal round.
Inserisci un TextLabel in Header per il testo informativo.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della Etichettanel mezzo di se stessa (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
Imposta Posizione a {0.5, 0},{0.5, 0} per impostare l'etichetta nel mezzo della sua etichetta padre (50% dalla sinistra alla destra dell'Etichettapadre e 50% dall'alto verso il basso dell'Etichettapadre).
Imposta Dimensione a così il testo può occupare la maggior parte dell'area di dissolvenza (85% orizzontalmente e 55% verticalmente della Etichettapadre).
Imposta Nome a HeaderTextLabel .
Imposta FontFace a Montserrat per adattarsi all'estetica futuristica.
Imposta Peso a Nero per ingrossare il carattere.
Imposta Testo a TARGATO - SEI FUORI! 9. Imposta TextColor3 a 255, 255, 255 per rendere il testo bianco.
Abilita TextScaled .
Crea la sfocatura intorno ai bordi dello schermo.
- Inserisci un ImageLabel in OutStateGui .
- Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della Etichettanel mezzo di se stessa (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta BackgroundColor3 a 0,0,0 per impostare il colore di sfondo dell'Etichettaa nero.
- Imposta Trasparenza di sfondo a 0.5 per rendere il background della Etichettaa metà trasparente.
- Imposta Posizione a {0.5, 0},{0.5, 0} per impostare l'etichetta al centro del suo contenitore (50% dalla sinistra alla destra dello ScreenGui padre, e 50% dall'alto verso il basso dello ScreenGui padre).
- Imposta Dimensione a {1, 0},{1, 0} per allargare l'etichetta sull'intero schermo (100% orizzontale e 100% verticale dello schermo padre ScreenGui).
- Imposta ZIndex a -1 per visualizzare lo sfocatura dietro agli altri elementi dell'interfaccia utente.
- Imposta Nome a Header .
- Imposta Immagine a rbxassetid://14309518613 per rendere l'immagine una sfumatura di confine.
- Imposta Trasparenza dell'immagine a 0.1 per rendere il fade leggermente trasparente.
Per migliorare le Prestazione, puoi saltare la risorsa immagine e invece usare un oggetto UIGradient con una sequenza di numeri di trasparenza personalizzata.Per saperne di più su questa tecnica di dissolvenza, vedi Modificatori dell'aspetto dell'interfaccia utente - Grado.
Fai riferimento al seguente ReplicatedStorage all'interno del file di posizione di esempio Laser Tag che mostra in modo programmatico lo schermo di respawn quando la salute di un Giocatoreraggiunge lo zero, e sono in procinto di respawnare nella zona di spawn della loro team.
Lo script cliente seguente ReplicatedStorage.PlayerStateHandler contiene funzioni che attivano diversi tipi di comportamento in base all'attributo playerState.Tutte le risposte agli eventi sono logicamente raggruppate insieme in questo script perché richiedono un comportamento simile di attivazione o disattivazione dei Controllidel giocatore, del movimento della fotocamera e quale strato dell'interfaccia utente è visibile.
Quando la salute di un Giocatoreraggiunge lo zero, il suo playerState diventa TaggedOut, il che attiva la funzione onTaggedOut().onTaggedOut() immediatamente attiva il seguente comportamento:
- Il giocatore non può muoversi nell'arena.
- Il giocatore non può muovere la sua Telecamera.
- Il giocatore non può usare il suo blaster.
- Il StarterGui.OutStateGui diventa esclusivamente abilitato.
Quando il giocatore respawna, il loro playerState diventa SelectingBlaster, il che attiva la funzione onSelectingBlaster().onSelectingBlaster() poi consente esclusivamente il StarterGui.PickABlasterGui, che disabilita automaticamente lo schermo di riapparizione.Per ulteriori informazioni su queste condizioni, vedi Gestisci stato cliente dal curriculum di scripting di gioco.
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 dell'interfaccia utente tranne l'eccezione data
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
-- guiLayers contiene una lista delle gui che devono essere impostate esclusivamente.
for _, screenGui in guiLayers do
screenGui.Enabled = screenGui == enabledGui
end
end
local function onSelectingBlaster()
-- Abilita la fotocamera in modo che i giocatori possano 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 giochi
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)
-- Programma la logica del campo di forza distruttivo quando il giocatore inizia a giocare
scheduleDestroyForceField()
end
local function onTaggedOut()
-- Disabilita i controlli mentre sei etichettato fuori
togglePlayerMovement(false)
togglePlayerCamera(false)
setGuiExclusivelyEnabled(playerGui.OutStateGui)
-- Disabilita il blaster mentre sei etichettato fuori
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onInLobby()
-- Abilita i controlli mentre sei nella lobby
togglePlayerMovement(true)
togglePlayerCamera(true)
-- Nascondi tutto l'HUD mentre sei nella lobby
setGuiExclusivelyEnabled(nil)
-- Disabilita il blaster mentre sei nella 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(`Invalid player state ({newPlayerState})`)
end
end
-- Gestisci lo stato iniziale del giocatore se Impostare
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)
local function updateFromPlayerState()
onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end
-- Gestire gli aggiornamenti dello stato del giocatore futuro
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)
-- Assicurati che le modifiche vengano ancora applicate dopo la rigenerazione
localPlayer.CharacterAdded:Connect(updateFromPlayerState)
Ora, ogni volta che la salute di un Giocatoreraggiunge lo zero, viene visualizzata la schermata di respawn fino a quando il giocatore non respawna nella loro zona di spawn.
Ora che sei familiarito con il comune GuiObjects per l'interfaccia utente sullo schermo, prova a ricreare l'oggetto RoundResultsGui ScreenGui e tutti i suoi figli per l'esibizione sullo schermo quando i giocatori vincono o perdono una Corrisponde.Puoi utilizzare il file di esempio laser tag experience.rbxl.
Crea oggetti SurfaceGui
Per visualizzare l'interfaccia utente sulla superficie di una parte nello spazio 3D che risponde alla logica di scripting per ogni singolo giocatore , puoi genitori un oggetto all'interno del servizio in cui vuoi visualizzare la tua interfaccia utente.Questa tecnica garantisce che la tua interfaccia utente e la sua logica di scripting siano disponibili sia per il server che per il client di ciascun Giocatore.
SurfaceGui oggetti contengono tutto GuiObjects che viene visualizzato sulla superficie di una parte nello Spazio3D.L'esperienza di tag laser di esempio include solo una singola istanza di un oggetto SurfaceGui : il contapassi di ricarica che viene visualizzato sopra il blaster di ciascun Giocatore.Questo oggetto ha bisogno di una logica di scripting per ogni giocatore perché risponde attivamente all'input di ogni Giocatoreindividuale e fornisce un feedback visivo di quando possono esplodere di nuovo il loro blaster.
Per creare un oggetto SurfaceGui :
Nella finestra Explorer , passa il mouse sul servizio ReplicatedStorage , quindi fai clic sull'Icona ⊕ . Viene visualizzato un menu contestuale.
Dal menu contestuale, inserisci un oggetto Parte .
Inserisci un oggetto ScreenGui nella parte.
Rinomina il SurfaceGui in base al contesto dei suoi elementi UI figli.
Ripeti questo processo per ogni elemento UI che devi visualizzare sulla superficie di una parte nello Spazio3D.
Misuratore di tempo di recupero
Un misuratore di tempo di recupero è una componente dell'interfaccia utente che informa i giocatori quanto tempo devono aspettare prima di essere in grado di esplodere di nuovo il loro blaster.Questa lieve pausa impedisce ai giocatori di essere in grado di esplodere così rapidamente quanto possono fare clic o premere un pulsante, il che è irrealistico per il Partitadi tag laser.
Per ricreare esattamente il contapassi di ricarica all'interno dell'esperienza di prova Laser Tag:
Crea una parte per contenere il tuo oggetto SurfaceGui .
- Nella finestra Explorer , passa il mouse sul Spazio di lavoro , quindi fai clic sull'Icona⊕. Viene visualizzato un menu contextual.
- Dal menu contestuale, inserisci una parte del blocco block .Questa è una posizione temporanea per la parte in modo da poter visualizzare i cambiamenti in ogni passo del processo.
Posiziona e orienta la parte intorno alla posizione in cui il personaggio di un Giocatoreavrebbe il suo blaster, quindi nella finestra Proprietà ,
Imposta Trasparenza a 1 per rendere la parte completamente trasparente.
Imposta Nome a CooldownBarPrefab .
Imposta Dimensione a 0.169, 0.027, 2.537 per ridimensionare la parte a una lunghezza simile alla lunghezza del blaster.
Disabilita CanCollide e CanQuery .
Inserisci un SurfaceGui in CooldownBarPrefab .
Seleziona il nuovo SurfaceGui , quindi nella finestra Proprietà ,
Imposta Faccia a Top in modo che l'interfaccia utente venga visualizzata verso l'alto.
Imposta Influenza della luce e Distanza massima a 0.
Imposta PixelsPerStud a 200.
Crea la barra nera.
Inserisci un ImageLabel nel SurfaceGui .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Rimuovi il valore predefinito Immagine .
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della Etichettanel mezzo di se stessa (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta BackgroundColor3 a 0,0,0 per impostare il colore di sfondo dell'Etichettaa nero.
- Imposta Trasparenza di sfondo a 0.4 per rendere lo sfondo della Etichettasemi-trasparente.
- Imposta Posizione a {0.5, 0},{0.5, 0} per impostare l'etichetta al centro del suo contenitore (50% dalla sinistra alla destra della superficie genitrice, e 50% dall'alto verso il basso della superficie genitrice).
- Imposta Dimensione a {1, 0},{1, 0} per allargare l'etichetta a tutta la parte (100% orizzontalmente e 100% verticalmente della superficie genitrice SurfaceGui).
- Imposta Nome a Container .
Arrotonda gli angoli del contenitore.
Inserisci un oggetto UICorner nel Container .
Seleziona il UICorner , quindi nella finestra Proprietà , imposta CornerRadius a 0.15, 0 per arrotondare leggermente gli angoli.
Crea la barra rossa.
- Inserisci un ImmagineLabel in Container .
- Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Rimuovi il valore predefinito Immagine .
- Imposta Punto di ancoraggio a 1, 0.5 per impostare il punto di origine della Etichettanel centro destro di se stesso (100% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta BackgroundColor3 a 172, 13, 13 per impostare il colore di sfondo dell'Etichettaa un rosso scuro.
- Imposta Trasparenza di sfondo a 0.2 per rendere l'背景 della Etichettaleggermente trasparente.
- Imposta Nome a Bar .
- Imposta Posizione a {1, 0},{0.5, 0} per impostare l'etichetta al centro destro del suo contenitore (100% dalla sinistra alla destra dell'Etichettapadre e 50% dall'alto verso il basso dell'Etichettapadre).
- Imposta Dimensione a {0, 0},{1, 0} per allungare l'etichetta fino alla parte superiore della sua etichetta padre (0% orizzontalmente e 100% verticalmente dell'Etichettapadre).Questo passo è anche benefico per il comportamento di transizione che si verifica negli script nel passo 8.
Arrotonda gli angoli dell'Etichetta.
- Inserisci un oggetto UICorner in Bar .
- Seleziona il UICorner , quindi nella finestra Proprietà , imposta CornerRadius a 0.15, 0 per arrotondare leggermente gli angoli.
Sposta CooldownBarPrefab a ReplicatedStorage .
Crea una struttura di cartella per organizzare gli oggetti UI. L'esempio utilizza una cartella Istanzie con una cartella figlia Guis .
Sposta CooldownBarPrefab in Guis .
Fai riferimento ai seguenti ReplicatedStorage script all'interno del file di posizione del campione Laser Tag che programmaticamente attribuisce il misuratore di recupero al blaster del Giocatore, quindi anima la barra rossa dopo che un giocatore lancia il suo blaster.
Lo script cliente seguente ReplicatedStorage.FirstPersonBlasterVisuals gestisce tutta la logica visiva per il blaster in prima persona del Giocatore.Richiede un insieme di script di modulo che lavorano insieme per impostare visuali blaster più realistiche per il Partitadi tag laser, 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 primo Piattaforma di testdella 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 ricarica poiché è parented alla Piattaforma di test
rigModel:Destroy()
rigModel = nil
end
end
-- Esegui gli effetti visivi della prima persona quando si verifica un'esplosione
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
runCooldownBarEffect(cooldownBar)
end)
-- Lega il rig alla fotocamera se esiste
RunService.RenderStepped:Connect(function()
if rigModel then
-- Aggiorna il CFrame del Piattaforma di testrelativo alla posizione della Telecamerae RIG_OFFSET_FROM_CAMERA
rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
end
end)
-- Maniglia che cambia le visuali quando il tipo di blaster cambia durante il gioco
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
if playerState == PlayerState.Playing then
removeFirstPersonVisuals()
addFirstPersonVisuals()
end
end)
-- Maniglia le modifiche visive quando il playerState cambia
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
-- Rimuovi le visuali quando il giocatore sta selezionando un blaster o è nella lobby
if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
removeFirstPersonVisuals()
-- Aggiungi le visuali quando il giocatore finisce di selezionare il blaster.
elseif newPlayerState == PlayerState.Playing then
addFirstPersonVisuals()
end
end)
Ora, ogni volta che un giocatore lancia il suo blaster, la barra di ricarica si anima per comunicare quando il giocatore può lanciare di nuovo.
Crea oggetti BillboardGui
Per visualizzare gli elementi dell'interfaccia utente all'interno dello spazio 3D che rispondono alla logica di scripting e sempre affrontare la fotocamera di ogni Giocatoreindipendentemente dall'angolo di visione, come i nomi dei giocatori o i segnalatori di mappa, puoi creare un oggetto BillboardGui come figlio di un BasePart o Attachment che esiste nello Spazio3D.
L'esperienza di tag laser di esempio include due oggetti separati BillboardGui all'interno del servizio ReplicatedStorage :
- OtherPlayerIndicatorGuiPrefab - Mostra un cerchio rosa o verde sopra la testa di ogni Giocatorequando è attivo in una partita.
- TaggedOutIndicatorGuiPrefab - Visualizza sopra la testa di un Giocatorequando vengono etichettati fuori dal round.
Dopo aver creato un oggetto BillboardGui , puoi creare e personalizzare il suo figlio GuiObjects in base allo scopo di ciascun contenitore.Per dimostrare, nelle sezioni immediate che Seguire, imparerai a implementare elementi di interfaccia utente per entrambi i tipi di indicatore all'interno dell'esperienza di tag laser di campione. Puoi regolare qualsiasi parte del processo per soddisfare le specifiche della tua esperienza .
Per creare un oggetto BillboardGui :
- Nella finestra Explorer , passa il mouse su un BasePart o Attachment, quindi fai clic sull'Icona ⊕ . Un menu contestuale viene visualizzato.
- Dal menu contestuale, inserisci un oggetto BillboardGui .
- Rinomina il BillboardGui in base al contesto dei suoi elementi UI figli.
- Ripeti questo processo per ogni elemento UI di cui hai bisogno per visualizzare contestualmente le teste dei giocatori.
Indicatore della squadra
Un indicatore di squadra è un elemento UI che informa i giocatori a quale squadra appartengono gli altri giocatori nella partita in modo che possano facilmente distinguere tra i loro alleati e i membri del team nemico.Questa informazione è importante perché l'esperienza di gioco di un first-person shooter richiede ai giocatori di prendere decisioni strategiche rapide mentre sono nelle zone di combattimento in modo che non vengano etichettati e perdano la Corrisponde.
Per ricreare esattamente l'indicatore del team all'interno dell'esperienza di prova Laser Tag:
Inserisci un oggetto BillboardGui in una Piattaforma di testtemporanea.
Dalla scheda Avatar della barra degli strumenti, fai clic su Rig Builder .
Seleziona dalle opzioni disponibili.L'esempio utilizza un inserisci / scrividi rig R15 , una forma di corpo femminile e un Avatar Rthro .Il rig viene visualizzato sia nella vista 3D che nella finestra Explorer sotto il nome Rig .
Nella finestra Explorer , naviga alla Mesh, magliadel figlio del Piattaforma di test Head , quindi fai clic sull'Icona ⊕ . Viene visualizzato un menu contestuale.
Dal menu contestuale, inserisci un BillboardGui .
Seleziona il nuovo BillboardGui , quindi nella finestra Proprietà ,
Imposta LightInfluence a 0 per prevenire che la luce ambientale influenzi il colore dell'indicatore.
Imposta Nome a OtherPlayerIndicatorPrefab .
Imposta Dimensione a {0, 10},{0, 10} per rendere l'etichetta significativamente più piccola.
Imposta StudsOffsetWorldSpace a 0, 4, 0 per posizionarlo sopra la testa del Piattaforma di test.
Inserisci un oggetto Frame in OtherPlayerIndicatorPrefab .
Seleziona il nuovo frame, quindi nella finestra Proprietà ,
Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine del frame nel mezzo di se stesso (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
Imposta BackgroundColor3 a 255, 3, 0 per impostare il colore di sfondo del frame a rosso come colore di riempimento.
Imposta Posizione a {0.5, 0},{0.5, 0} per impostare il frame al centro del suo contenitore (50% dalla sinistra alla destra del BillboardGui padre, e 50% dall'alto verso il basso del BillboardGui padre).
Imposta Dimensione a {1, -2},{1, -2} per abbreviare il frame all'area della superficie del BillboardGui.
Inserisci un oggetto UICorner nel Frame per completare i bordi.
Inserisci un oggetto UIStroke nel Frame per delineare il cerchio dell'indicatore.
Sposta OtherPlayerIndicatorPrefab a ReplicatedStorage .
Fai riferimento al seguente ReplicatedStorage all'interno del file di posizione di esempio Laser Tag 1A che visualizza in modo programmatico l'indicatore di squadra per ogni giocatore in una partita attiva a meno che non sia nella squadra nemica e oscurata.
Lo script seguente ReplicatedStorage.OtherPlayerIndicatorGuiSetup viene eseguito quando i giocatori spawnano nell'arena per un round attivo.Aggiunge l'indicatore della squadra chiamando la funzione addIndicatorToCharacter(), che localizza l'oggetto Head di ogni personaggio giocatore che partecipa alla partita.Se non hanno già un indicatore di squadra, lo script poi clona e aggiunge l'interfaccia utente otherPlayerIndicatorPrefab all'interfaccia utente del personaggio Head e imposta il colore dell'indicatore di squadra al colore del loro team.
Se gli altri giocatori sono nella stessa team, l'indicatore della squadra viene sempre visualizzato, anche se si nascondono dietro oggetti nello Spazio3D; se gli altri giocatori sono nella teamnemica, l'indicatore della squadra viene visualizzato 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
-- Aggiungi solo indicatori ai giocatori che partecipano alla partita
if not otherPlayer.Team then
return
end
-- Evita di aggiungere indicatori duplicati, creane uno 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 è amichevole
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 una partita attiva, gli indicatori di squadra vengono visualizzati sopra le teste degli altri giocatori a meno che non siano nella squadra nemica e dietro un oggetto.
Indicatore contrassegnato fuori
Un indicatore contrassegnato è un elemento dell'interfaccia utente che informa i giocatori quando gli altri giocatori non sono più attivi nella partita e sono in procinto di respawnare nella loro zona di spawn.Questa informazione è importante perché l'esperienza di gioco di un first-person shooter richiede che i giocatori si spostino sul loro prossimo obiettivo non appena contrassegnino un giocatore in modo che non diventino vulnerabili nell'arena giocando nello stesso luogo per troppo tempo.
Per ricreare esattamente l'indicatore contrassegnato all'interno dell'esperienza di prova Laser Tag:
Inserisci un oggetto BillboardGui in una rig temporanea in modo da poter visualizzare le modifiche in ogni passo del processo.
Dalla scheda Avatar della barra degli strumenti, fai clic su Rig Builder .
Seleziona dalle opzioni disponibili.L'esempio utilizza un inserisci / scrividi rig R15 , una forma di corpo maschile , e un Avatar Rthro .Il rig viene visualizzato sia nella vista 3D che nella finestra Explorer sotto il nome Rig .
Nella finestra Explorer , naviga alla Mesh, magliadel figlio del Piattaforma di test Head , quindi fai clic sull'Icona ⊕ . Viene visualizzato un menu contestuale.
Dal menu contestuale, inserisci un BillboardGui .
Seleziona il nuovo BillboardGui , quindi nella finestra Proprietà ,
Imposta LightInfluence a 0 per prevenire che la luce ambientale influenzi il colore dell'indicatore.
Imposta Nome a TaggedOutIndicatorGuiPrefab .
Imposta Dimensione a {3, 0},{0.5, 0} per allargare lo spazio per un'Etichetta.
Imposta StudsOffset a 0, 3.25, 0 per posizionarlo sopra la testa di un Giocatore.
Inserisci un oggetto ImmagineLabel in TaggedOutIndicatorGuiPrefab .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della Etichettanel mezzo di se stessa (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
- Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
- Imposta Nome a Frame .
- Imposta Posizione a {0.5, 0},{0.5, 0} per impostare l'etichetta al centro del suo contenitore (50% dalla sinistra alla destra del BillboardGui padre, e 50% dall'alto verso il basso del BillboardGui padre).
- Imposta Dimensione a {1, 0},{1, 0} per allargare l'etichetta a tutto il BillboardGui (100% orizzontale e 100% verticale del BillboardGui padre).
- Imposta Immagine a rbxassetid://14304826985 per rendere l'immagine una sfocatura multidirezionale.
- Imposta ImageColor a 245, 46, 46 per tingere l'etichetta rossa.
Per migliorare le Prestazione, puoi saltare la risorsa immagine e invece usare un oggetto UIGradient con una sequenza di numeri di trasparenza personalizzata.Per saperne di più su questa tecnica di dissolvenza, vedi Modificatori dell'aspetto dell'interfaccia utente - Grado.
Inserisci un oggetto TextLabel nel Frame .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
Imposta Punto di ancoraggio a 0.5, 0.5 per impostare il punto di origine della Etichettanel mezzo di se stessa (50% dalla sinistra alla destra dell'Etichettae 50% dall'alto verso il basso dell'Etichetta).
Imposta Trasparenza di fondo a 1 per rendere il background della Etichettacompletamente trasparente.
Imposta Nome a BodyTextLabel .
Imposta Posizione a {0.5, 0},{0.5, 0} per impostare l'etichetta al centro del suo contenitore (50% dalla sinistra alla destra dell'Etichettapadre e 50% dall'alto verso il basso dell'Etichettapadre).
Imposta Dimensione a così il testo può occupare la maggior parte dell'area di sfocatura (85% orizzontalmente e 70% verticalmente dell'Etichettadell'immagine padre).
Imposta FontFace a Montserrat per adattarsi all'estetica futuristica.
Imposta Peso a Bold per ingrossare il carattere.
Imposta Testo a TAGGATO .
Imposta TextColor3 a 255, 255, 255 per rendere il testo bianco.
Abilita TextScaled .
Sposta TaggedOutIndicatorGuiPrefab a ReplicatedStorage .
Fai riferimento agli script seguenti ServerScriptService all'interno del file di posizione di esempio Laser Tag 1A che mostra in modo programmatico l'indicatore contrassegnato mentre un giocatore viene rigenerato nella zona di spawn della sua team.
Lo script del server seguente ServerScriptService.SetupHumanoid viene eseguito non appena un giocatore carica l'esperienza.Garantisce che ogni volta che il personaggio di un Giocatoreviene aggiunto al modello di dati, setupHumanoidAsync viene 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 gli spawn di personaggi futuri per questo Giocatore
player.CharacterAdded:Connect(function(character: Model)
onCharacterAdded(player, character)
end)
end
-- Chiama onPlayerAdded per qualsiasi giocatore già nel Gioco
for _, player in Players:GetPlayers() do
onPlayerAdded(player)
end
-- Chiama onPlayerAdded per tutti i giocatori futuri
Players.PlayerAdded:Connect(onPlayerAdded)
Ora, ogni volta che la salute di un Giocatoreraggiunge lo zero, l'indicatore contrassegnato viene visualizzato sopra la loro testa fino a quando non respawn.
Congratulazioni per aver completato il Curriculum di progettazione dell'interfaccia utente! Ora che hai esperienza nella creazione di uno stile artistico, nella progettazione dei layout e nell'implementazione dei tuoi design in Studio dall'inizio alla fine, puoi estendere il tuo progetto con nuove interfacce e funzionalità o seguire ulteriori tutorial curricula, come il Gameplay Scripting Curriculum che ti insegna sugli aspetti generali e i dettagli di implementazione della esperienza di tag laser di esempio.Felice creazione!