La creazione dei tuoi design ti consente di creare i tuoi wireframe in Studio utilizzando sia gli elementi UI incorporati che personalizzati con gli script che attivano il tuo contesto UI. Questo passo eccitante del tutorial è dove vedi tutti i tuoi design e il duro lavoro che c'è dietro di essi con gli script che attivano il tuo contesto UI.
Usando il file .rbxl in questo modo come riferimento, questa sezione del corso di progettazione UI mostra come portare la tua pianificazione UI alla vita, tra cui le istruzioni su:
- Recupero degli ID delle risorse dalla libreria delle risorse UI in modo che tu possa ricreare i componenti dell'interfaccia utente della esperienza di laser di campionamento.
- Simulare varie dispositivi direttamente in Studio per vedere come la tua interfaccia utente viene visualizzata su diversi schermi e proporzioni di aspetto.
- Creazione di ScreenGui , SurfaceGui e BillboardGui oggetti per visualizzare la tua interfaccia utente negli schermi dei giocatori, sulle superfici delle parti e all'interno dello Spazio3D, rispettivamente.
Dopo aver esaminato le tecniche in questa sezione, puoi applicarle ai tuoi progetti per creare componenti UI eccitanti che aiutano i giocatori a navigare in ciò che possono fare nelle tue esperienze.
Le istruzioni in questa sezione del tutorial ti mostrano come ricreare esattamente i componenti UI utilizzando la libreria di progettazione UI. Questo processo richiede circa 90 minuti o meno dal start to finish. Se non vuoi usare i valori forniti, puoi regolare ogni elemento UI per soddisfare le specifiche della tua esperienza, o usare l'esempio stesso per il resto del Tutoriale.
Ottieni la libreria di risorse
Le librerie delle risorse sono raccolte di risorse che puoi aggiungere nel tuo inventario per un facile accesso e riutilizzo. La libreria delle risorse che userai per il tuo progetto dal Creator Store include nove risorse individuali UI, e le versioni finali degli obiettivi, del blaster selettore e dei componenti dell'utente 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 component. Una volta che le risorse sono all'interno del tuo Inventario, reportorio, puoi riutilizzarli in qualsiasi progetto sulla Piattaforma.
Per ottenere la libreria delle risorse dal tuo inventario nella tua esperienza:
In the menu bar, select the Visualizza tab.
Nella sezione Mostra , fai clic su Toolbox . La finestra Toolbox viene visualizzata.
Nella Toolbox finestra, fai clic sulla scheda Inventario . La Classifica dei miei modelli visualizzazione.
Fai clic sul menu a discesa, quindi seleziona la Ordinare I miei pacchetti .
Click the componenti dell'interfaccia utente finale Piastrella, then in the Explorer window, select Components completed , then drag them into the 1> StarterGui1> service. You can now enable any of the final components to reference their design.
Simulare dispositivi
Il Emulatore di dispositivo di Studio ti consente di testare in che modo i giocatori vedranno e interagiranno con la tua interfaccia utente su diversi dispositivi. Questo strumento è una parte vitale del processo di implementazione poiché la proporzione di aspetto della tua vistaport in Studio non riflette necessariamente la proporzione di aspetto dei dispositivi che i giocatori utilizzano per accedere alla tua esperienza e è importante che la tua UI sia sia leggibile che accessibile su ogni Dispositivo
Ad esempio, se non testi la tua interfaccia utente su una gamma di dimensioni di schermo, i giocatori con grandi schermi potrebbero non essere in grado di leggere il tuo testo o decifrare i tuoi icone, e i giocatori con piccole dimensioni potrebbero non essere in grado di visualizzare lo spazio 3D poiché i tuoi elementi UI occupano troppo spazio sullo schermo.
Per emulare la tua schermata con la più piccola dimensione dello schermo:
Nella barra dei menu, seleziona la scheda prova .
Nella sezione Emulazione , fai clic su Dispositivo . La vista cambia per riflettere il rapporto di aspetto di un laptop medio.
Nella casella di selezione della risoluzione, seleziona Risoluzione attuale . Questo ti consente di visualizzare la risoluzione reale dei tuoi elementi UI sull' dispositivo che stai emulando.
Nella schermata 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 supporti la tua esperienza, l'esperienza di tag laser di esempio si testa con un iPhone 4S per verificare il modo in cui l'interfaccia utente sembra con uno Spaziodi schermo limitato.
Crea oggetti ScreenGUI
Per visualizzare gli elementi UI sullo schermo di ogni Giocatore, puoi creare un oggetto ScreenGui in StarterGui . Gli oggetti ScreenGui sono i contenitori principali per l'UI sullo schermo e il servizio 2>Class.StarterGui2> copia i loro contenuti in ogni
Puoi creare più ScreenGui oggetti per organizzare e visualizzare le raccolte di UI elementi in modo organico durante il gameplay. Ad esempio, l'esperienza del laser tag di esempio include cinque singoli ScreenGui oggetti che sono inizialmente disabilitati fino a quando i giocatori non soddisfino diverse condizioni durante il flusso di gioco principale:
- HUDGui - Mostra informazioni chiave sulla giocabilità dell'esperienza quando i giocatori sono attivi in una partita, come l'obiettivo e i punti totali di ciascuna team.
- PickABlasterGui - Mostra tutte le scelte del blaster quando i giocatori iniziano o si uniscono a una partita.
- ForceFieldGui - Mostra una griglia hexagonale quando i giocatori selezionano un blaster e mentre sono temporaneamente invincibili.
- OutStateGui - Mostra un bordo oscuro intorno allo schermo quando i giocatori vengono etichettati fuori.
- RoundResultsGui - Mostra un'overlay dark sul top of the screen con informazioni su quale team ha vinto il round.
Dopo aver creato un oggetto ScreenGui , puoi creare e personalizzare il suo figlio GuiObjects in base allo scopo di ciascun container. Per dimostrare, nelle sezioni immediate che Seguire, imparerai a implementare gli elementi UI per i giocatori tre categorie di informazioni</
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 mostrare sullo schermo di ogni Giocatore.
Interfaccia utente obiettivo
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 dell'interfaccia utente è vicino alla parte superiore dello schermo poiché l'obiettivo e i punti di ciascuna teamhanno la maggior importanza su come vincere la Gioco.
Ad esempio, l'esempio fornisce un componente UI oggettivo che i giocatori fanno riferimento per sapere cosa hanno bisogno di fare per essere di successo in un round. Mentre i giocatori tag out team member e guadagnare punti, questo componente tiene traccia di ogni team's score contro il punteggio generale all'interno della richiesta di header. Per un'alta livello di revisione di tutti gli script del client e del server che lavorano insieme per tracciare i punt
Per ricreare esattamente l'interfaccia utente target all'interno dell'esperienza Laser Tag :
Crea un container per tutto il component.
Inserisci un Frame in the HUDGui oggetto.
- Nella finestra Explorer, fai clic sul 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 AnchorPoint su 0.5, 0 per impostare il punto di origine dellaFrame nella parte superiore del suo centro (50% dalla sinistra alla destra dellaFrame e 0% dalla parte superiore alla parte inferiore dellaFrame).
- Imposta Trasparenza di sfondo su 1 per rendere il background del frame completamente trasparente.
- Imposta Posizione su {0.5, 0},{0.03, 0} per impostare il frame vicino alla parte superiore del schermo (50% dalla sinistra alla destra del schermo, e 3% dalla parte superiore del schermo per consentire un po 'di buffer).
- Imposta Dimensione su {0.5, 0},{0.13, 0} in modo che gli elementi del frame occupino una grande parte della parte superiore dello schermo per catturare l'attenzione dei giocatori (50% orizzontalmente e 13% verticalmente).
- Imposta Nome su Obiettivo .
(Facoltativo) Inserisci un UIAspectRatioConstraint in Obiettivo per assicurarti che il rapporto aspetto della Etichettarimanga lo stesso indipendentemente dalla dimensione dello schermo del Giocatore. Gli esempi impostano la sua proprietà 0> Class.UIAspectRatioConstraint.AspectRatio 0> su 3> 7 3> .
Crea un container per gli oggetti richiesti per l'obiettivo.
Inserisci un Frame in Obiettivo .
Seleziona il nuovo Frame , quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 0 per impostare il punto di origine dellaFrame nella parte superiore del suo centro (50% dalla sinistra alla destra dellaFrame e 0% dalla parte superiore alla parte inferiore dellaFrame).
- Imposta Trasparenza di sfondo su 1 per rendere il background del frame completamente trasparente.
- Imposta Posizione su {0.5, 0},{0, 0} per impostare il frame nel centro del container (50% dalla sinistra alla destra del padre frame e 0% dalla parte superiore alla parte inferiore del padre frame).
- Imposta dimensione su {1, 0},{0.67, 0} in modo che i componenti dell'interfaccia utente di selezione occupino circa la metà del container da top a bottom (100% orizzontalmente e 67% verticalmente del parent frame).
- Imposta Nome su DisplayOggetto .
Crea gli elementi di titolo.
Inserisci un ImageLabel in ObjectiveDisplay .
Seleziona il ImageLabel , quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine della Etichettanella parte inferiore del suo centro (50% dalla sinistra alla destra della Etichettae 100% dalla parte superiore alla parte inferiore della sua Etichetta).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta LayoutOrder su -1 .
- Imposta Posizione su 0.5, 0,0.34, 0 #0.5, 0,0.34, 0 per impostare l'etichetta vicino alla parte superiore del telaio (50% dalla sinistra alla destra del telaio padre, e 34% dalla parte superiore al basso del telaio padre).
- Imposta Dimensione su 0.46, 0,0.34, 0 per allargare l'area di richiesta a quasi la metà del frame (46% orizzontalmente e 34% verticalmente del frame padre).
- Imposta Nome inヘッダー.
- Imposta immagine su rbxassetid://14304828123 per visualizzare un trapezio.
- Imposta ImageTransparency su 0.15 per rendere il taglio semi-trasparent.
(Facoltativo) Inserisci un UIAspectRatioLimit nel ImageLabel per assicurarti che il rapporto aspetto della Etichettarimanga lo stesso indipendentemente dalla dimensione dello schermo del Giocatore. Il campione imposta la sua proprietà 0> Class.UIAspectRatioLimit.AspectRatio 0> su 3> 13.781 3> .
Inserisci un TextLabel in Menu di testata per visualizzare un titolo.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della nuova Etichettaal centro di se stesso (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Posizione su 0.5, 0,0.5, 0 5> per spostare l'etichetta al centro della sua etichetta padre (50% dalla sinistra alla destra della sua Etichettapadre, e 50% dalla parte superiore alla parte inferiore della sua Etichettapadre).
- Imposta Dimensione su 0.62, 0,0.55, 0 per allargare lo spazio di testo oltre la metà della etichetta padre (62% horizontalmente e 55% verticalmente of the parent Etichetta).
- Imposta Nome su LeaderTextLabel .
- Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
- Imposta Peso su Media per rendere più spesso il carattere.
- Imposta Text su OBJECTIVE .
- Abilita TextScaled .
Crea gli elementi di richiesta.
Inserisci un ImageLabel in ObjectiveDisplay .
Seleziona il ImageLabel , quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine della Etichettanella parte inferiore del suo centro (50% dalla sinistra alla destra della Etichettae 100% dalla parte superiore alla parte inferiore della sua Etichetta).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Posizione su {0.5, 0},{1, 0} per spostare l'etichetta verso il basso del suo rame di padre (50% dalla sinistra alla destra del rame di padre e 100% dalla parte superiore alla parte inferiore del suo rame di padre).
- Imposta Dimensione su {0.89, 0},{0.66, 0} per ridimensionare lo spazio di testo quasi fino alla larghezza completa del quadro padre (89% orizzontalmente e 66% verticalmente del quadro padre).
- Imposta Nome su Corpo .
- Imposta immagine su rbxassetid://14304827265 per visualizzare un trapezoid invertito.
- Imposta ImageColor3 su 0, 0, 0 per schiarare l'immagine.
- Imposta ImageTransparency su 0.3 per rendere il taglio semi-trasparente.
(Facoltativo) Inserisci un UIAspectRatioLimit nel ImageLabel per assicurarti che il rapporto aspetto della Etichettarimanga lo stesso indipendentemente dalla dimensione dello schermo del Giocatore. Il campione imposta la sua proprietà 0> Class.UIAspectRatioLimit.AspectRatio0> su 3> 13.781 3> .
Inserisci un TextLabel in Body per visualizzare un prompt.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della nuova Etichettaal centro di se stesso (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Posizione su 0.5, 0,0.5, 0 5> per spostare l'etichetta al centro della sua etichetta padre (50% dalla sinistra alla destra della sua Etichettapadre, e 50% dalla parte superiore alla parte inferiore della sua Etichettapadre).
- Imposta Dimensione su 0.85, 0,0.39, 0 per allargare lo spazio di testo oltre la metà della etichetta padre (85% horizontalmente e 39% verticalmente of the parent Etichetta).
- Imposta Nome su BodyTextLabel .
- Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
- Imposta Peso su Media per rendere più spesso il carattere.
- Imposta TextColor3 su 255, 255, 255 per rendere il testo bianco contro il background oscuro.
- Imposta Text su Tag avversari per segnare punti! La prima squadra con %d punti vince. .
- Abilita TextScaled .
Crea un container per i contatori della squadra dell'obiettivo.
Inserisci un Frame in Obiettivo .
Seleziona il nuovo Frame , quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine della Etichettanella parte inferiore e centrale di se stesso (50% dalla sinistra alla destra del frame e 100% dalla parte superiore alla parte inferiore del frame).
- Imposta Trasparenza di sfondo su 1 per rendere il background del frame completamente trasparente.
- Imposta Posizione su 0.5, 0,1, 0 5> per impostare il frame nel centro inferiore del container (50% dalla sinistra alla destra del padre frame e 100% dalla parte superiore alla parte inferiore del padre frame).
- Imposta Dimensione su {0.44, 0},{0.27, 0} in modo che i componenti dell'interfaccia utente di selezione occupino circa la metà del container a sinistra da destra (44% orizzontalmente e 27% verticalmente del parent frame).
- Imposta Nome su TeamPointCounter .
Crea uno spazio per i contatori del team.
- Inserisci un oggetto UIListLayout nel frame a partire dal passo 5.
- Seleziona l'oggetto UIListLayout e poi nella finestra Property ,
- Imposta Imbottitura su 0.025, 0 per fornire spazio tra i contatori futuri della squadra.
- Imposta FillDirection su Horizontal in modo che ogni contatore di squadra sia accanto all'altro.
- Imposta Alignment Horizontal su Center in modo che ogni team contatore allineato al centro l'uno dell'altro.
Crea gli elementi del team verde.
Inserisci un ImageLabel in TeamPointCounter .
Seleziona il ImageLabel , quindi nella finestra Proprietà ,
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Posizione su {0.5, 0},{1, 0} per spostare l'etichetta verso il basso del suo rame di padre (50% dalla sinistra alla destra del rame di padre e 100% dalla parte superiore alla parte inferiore del suo rame di padre).
- Imposta Dimensione su {0.5, 0},{1, 0} per allargare l'etichetta a metà della larghezza del rame padre (50% horizontalmente e 100% verticalmente del rame padre).
- Imposta Nome su TeamACountorer .
- Imposta immagine su rbxassetid://14304826831 per visualizzare un'immagine direzionale.
- Imposta ImageColor3 su 88, 218, 171 per schiarare l'immagine verde menta.
Configura un attributo personalizzato per tracciare che questo titolo è per il team verde.
- Nella finestra Proprietà, fai Iconasulla sezione Attributi, quindi fai clic sul pulsante plus. Una finestra di dialogo pop-up viene visualizzata.
- Nel campo Nome , inserisci teamColor .
- Nel menu a discesa Tipo , seleziona Colore mattone .
- Click the Salva button.
- Imposta il nuovo teamColor attribute to Mint .
Inserisci un TextLabel in TeamACountorer per visualizzare un prompt.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 1, 0.5 per impostare il nuovo punto di origine della nuova Etichettanel punto centrale destro di sé (100% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Posizione su 0.95, 0,0.5, 0 5> per spostare l'etichetta a destra della sua etichetta madre (95% dalla sinistra alla destra della sua Etichettamadre, e 50% dalla parte superiore alla parte inferiore della sua Etichettamadre).
- Imposta Dimensione su 0.85, 0,0.39, 0 per allargare lo spazio di testo oltre la metà della etichetta padre (85% horizontalmente e 39% verticalmente of the parent Etichetta).
- Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
- Imposta Peso su Bold per rendere più spesso il carattere.
- Imposta TextColor3 su 255, 255, 255 per rendere il testo bianco contro il background oscuro.
- Imposta Text a - .
- Abilita TextScaled .
- Imposta TextXAlignment su Right .
Inserisci un oggetto UIStroke in the TextLabel , then in the Properties window, set 1> Color1> to 4> 8, 78, 524> to outline the dash with a dark green stroke.
Crea gli elementi del team rosa.
Duplica TeamAICounter e i suoi figli.
Seleziona il duplicato TeamACount , quindi nella finestra Property ,
- Imposta Nome su TeamBCounter .
- Imposta Image su rbxassetid://14305849451 per visualizzare un directional fade nella direzione opposta.
- Imposta ImageColor3 su 255, 170, 255 per schiarare il tono della pelle.
- Imposta l'attributo teamColor su Carnation Pink .
Seleziona il figlio TextLabel duplicato di TeamBCounter , quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0, 0.5 per impostare il punto di origine della nuova Etichettanel centro sinistro di se stesso (0% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Posizione su 0.05, 0,0.5, 0 5> per spostare l'etichetta a sinistra della sua etichetta madre (5% dalla sinistra alla destra della sua Etichettamadre, e 50% dalla parte superiore alla parte inferiore della sua Etichettamadre).
- Imposta TextXAlignment su Sinistra .
Seleziona il figlio UIStroke di TeamBCounter , quindi nella finestra Proprietà , imposta 1> Colore1> su 4> 158, 18, 944> per contornare il trattino con un tratto rosa scuro.
Fai riferimento agli script di ReplicatedStorage seguenti all'interno dell'esempio Laser Tag luogo file che aggiorna in modo programmatico il prompt di obiettivo e i punti di traccia del team.
Il seguente script richiede un insieme di script del modulo che lavorano insieme per configurare la principale schermata Head-Up Display (HUD), tra cui setObjective e startSyncingTeamPoints . Dopo che un giocatore si è unito a una partita e ha selezionato il loro blaster, questo script garantisce che tutti gli elementi dell'interfaccia utente HUD vengono visualizzati in modo appropriato per lo stato, il Dispositivoe lo Statodel team del Giocatore.
Ora, dopo che un giocatore ha selezionato il loro blaster, l'interfaccia utente target viene visualizzata nella parte superiore dello schermo e traccia i punti di ciascuna team.
Interfaccia utente 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 che si riferiscono al blaster del Gioco. Questo gruppoing di elementi dell'interfaccia utente occupa la maggior parte dello spazio sullo schermo vicino al centro dello schermo poiché agisce come punto focale per attirare l'attenzione dei giocatori sull'azione nello Spazio
Crosshair
Un crosshair è un elemento UI che informa i giocatori dove si troveranno a fare impatto quando fanno esplodere la loro arma. Questo elemento UI è un requisito di gioco vitale per le esperienze di sparatore in prima persona poiché i giocatori devono essere in grado di mirare con accuratezza la loro arma e contrassegnare i membri della squadra nemica.
Come la maggior parte delle altre esperienze in primo personaggio nel Genere, Sessoshooter in prima persona, l'esperienza di tag laser di campionamento posiziona il crosshair nel centro dello schermo in modo che i giocatori abbiano qualcosa di statico su cui concentrarsi mentre il loro avatar si muove attraverso lo Spazio3D. In aggiunta alla riduzione della malattia dei movimenti, questo posizionamento consente che il crosshair sia percepibile mentre si fonde anche nell'Ambientegenerale.
Per ricreare esattamente la crosshair all'interno dell'esperienza Laser Tag :
Inserisci un ImageLabel in the HUDGui ScreenGui oggetto.
Nella finestra Explorer, fai clic sul 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 ImageLabel .
Seleziona il nuovo ImageLabel , quindi nella finestra Proprietà ,
- Imposta immagine su rbxassetid://14400935446 .
- Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della Etichettanel mezzo della etichetta (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Nome su Crosshair .
- Imposta Posizione su {0.5,0},{0.5,0} per impostare l'etichetta al centro dello schermo.
- Imposta ScaleType su Fit in modo che l'immagine si adatti allo suo container e non si allunga su varie dimensioni di schermo.
(Facoltativo) Inserisci un UIAspectRatioLimit in Crosshair per assicurarti che il rapporto aspetto della Etichettarimanga lo stesso indipendentemente dalla dimensione dello schermo del Giocatore. Il campione imposta la sua proprietà 0> Class.UIAspectRatioLimit.AspectRatio 0> a 3> 0.895 3> .
Indicatore di colpo
Un segnapunti è un elemento UI che viene visualizzato solo quando un'esplosione fa impatto con un altro giocatore nella teamnemica. Come il crosshair, questo elemento UI è un requisito di gioco vitale per le esperienze di sparatore di prima persona perché fornisce feedback visivi quando i giocatori sono di successo nel contrassegnare i loro avversari.
Per ricreare esattamente il segnaposto di colpo all'interno dell'esperienza Laser Tag :
Inserisci un ImageLabel nell'oggetto Crosshair ImageLabel .
Nella finestra Explorer, fai clic sul 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 ImageLabel .
Seleziona il nuovo ImageLabel , quindi nella finestra Proprietà ,
- Imposta immagine su rbxassetid://14401148736 per visualizzare l'Iconadel segnaposto rettangolare.
- Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della Etichettanel mezzo dell'Etichetta.
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Posizione su {0.5,0},{0.5,0} per impostare l'etichetta al centro dello schermo.
- Imposta Nome su Hitmarker .
- Imposta Dimensione su {0.6, 0},{0.06, 0} per ridurre la dimensione dei rettangoli intorno al centro del crosshair.
- Imposta ImageTransparency su 1 per rendere il segnaposto del colpo completamente trasparente. Gli script nel passo successivo fanno tornare la trasparenza a 0 ogni volta che il colpo di un Giocatorefa impatto con un altro giocatore sulla teamnemica.
Fai riferimento agli script seguenti ReplicatedStorage all'interno del campione Laser Tag luogo file che programmaticamente visualizza il segnaposto quando un'esplosione fa impatto con un giocatore sulla teamnemica.
Il seguente script richiede un insieme di script del modulo che lavorano insieme per impostare la schermata principale Heads Up (HUD), tra cui setupHitmarker . Dopo che un giocatore si è unito a una partita e ha selezionato il loro blaster, questo script garantisce che tutti gli elementi dell'interfaccia utente HUD vengono visualizzati correttamente per lo stato, il Dispositivoe lo Statodel team del Giocatore.
Ora, ogni volta che un giocatore lancia il loro blaster e l'esplosione fa impatto con un altro Giocatore, il momento del colpo viene visualizzato temporaneamente.
Selettore Blaster
Un selettore di blaster è un componente UI che i giocatori utilizzano per selezionare il loro tipo di blaster prima di unirsi o ricongiungersi a un round. L'esperienza di tag laser di esempio fornisce due tipi di blaster: uno che produce più raggi con una larga distribuzione orizzontale e un altro che produce un singolo raggio. Il tipo di blaster che i giocatori selezionano influenza la loro strategia durante il round, rendendo questo componente UI un flusso di lavoro essenziale per l'esperien
I seguenti passaggi dettagliate come creare diversi container per i diversi elementi di interfaccia utente, un'頭頰 con un prompt, la navigazione e i pulsanti di selezione e un pulsante blaster prefab. La logica di scripting per il componente complentare totale popola diverse caratteristiche visive nel pulsante blaster prefab secondo il tipo di Configuration istanze che rappresentano ciascun inserisci / scrividi blaster.
Questa configurazione ti consente di creare ulteriori Configuration istanze per più tipi di blaster che si visualizzano correttamente all'interno del selettore del blaster senza la necessità di creare singoli pulsanti all'interno di StarterGui.PickABlasterGui .
Per ricreare esattamente il selettore del laser all'interno dell'esperienza Laser Tag :
Crea un container per tutto il component.
Inserisci un Frame in the PickABlaster oggetto.
- Nella finestra Explorer, fai clic sul 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 la nuova finestra, quindi nella Finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine dellaFrame nella parte inferiore del suo centro (50% dalla sinistra alla destra dellaFrame e 100% dalla parte superiore alla parte inferiore dellaFrame).
- Imposta Trasparenza di sfondo su 1 per rendere il background del frame completamente trasparente.
- Imposta Posizione su 0.5, 0,0.9, 0 20.4% dalla sinistra alla destra della schermata, e .4% dalla parte superiore alla parte inferiore della schermata) per impostare il frame vicino alla parte inferiore del centro della schermata (50% dalla sinistra alla destra della schermata, e 92.4% dalla parte superiore alla parte inferiore della schermata).
- Imposta Dimensione su {0.8, 0},{0.25, 0} in modo che i componenti dell'interfaccia utente del blaster selettore prendano una grande parte dello schermo per attirare l'attenzione dei giocatori (80% orizzontalmente e 25% verticalmente).
- Imposta Nome su Componente .
(Facoltativo) Inserisci un UIAspectRatioConstraint in Component per assicurarti che l'aspetto della finestra e dei suoi figli elementi UI rimangano gli stessi, indipendentemente dalla dimensione dello schermo del Giocatore. Il campione imposta la sua proprietà 0> Class.UIAspectRatioConstraint.AspectRatio 0> a 3> 5 3> .
Crea un container per contenere le raccolte di elementi UI.
Inserisci un Frame in Componente .
Seleziona la nuova finestra, quindi nella Finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine dei frame nel suo centro (50% dalla sinistra alla destra del frame, e 50% dalla parte superiore alla parte inferiore del frame).
- Imposta Trasparenza di sfondo su 1 per rendere il background del frame completamente trasparente.
- Imposta Posizione su {0.5, 0},{0.375, 0} per impostare il frame vicino alla parte superiore del container (50% dalla parte sinistra alla parte destra del container, e 37.5% dalla parte superiore alla parte inferiore del container).
- Imposta Dimensione su {1, 0},{0.75, 0} in modo che i componenti dell'interfaccia utente di selezione occupino il 3/4 del container (100% orizzontalmente e 75% verticalmente del parent frame).
- Imposta Nome su SelectionFrame .
Crea un prompt per il selettore del blaster.
Inserisci un ImageLabel in SelectionFrame .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine della Etichettanella parte inferiore del suo centro (50% dalla sinistra alla destra della Etichettae 100% dalla parte superiore alla parte inferiore della sua Etichetta).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta LayoutOrder su -1 .
- Imposta Posizione su 0.5, 0,0.22, 0 #0.5, 0> a sinistra di posizione della label (50% dalla sinistra alla destra del padreFrame e 22% dalla sinistra alla destra del padreFrame).
- Imposta Dimensione su 0.45, 0,0.22, 0 per allargare l'area di richiesta a quasi la metà del frame (45% orizzontalmente e 22% verticalmente del parent frame).
- Imposta Nome su Intestazione .
- Imposta immagine su rbxassetid://14304828123 per visualizzare un trapezio.
- Imposta ImageTransparency su 0.15 per rendere il taglio semi-trasparent.
(Facoltativo) Inserisci un UIAspectRatioConstraint nella etichetta per assicurarti che il rapporto aspetto della Etichettarimanga lo stesso indipendentemente dalla dimensione dello schermo del Giocatore. Il campion imposta la sua proprietà UIAspectRatioConstraint.AspectRatio su 0> 13.780> .
Inserisci un TextLabel in Menu di testata per visualizzare un prompt.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della nuova Etichettaal centro di se stesso (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Posizione su 0.5, 0,0.5, 0 5> per spostare l'etichetta al centro della sua etichetta padre (50% dalla sinistra alla destra della sua Etichettapadre, e 50% dalla parte superiore alla parte inferiore della sua Etichettapadre).
- Imposta Dimensione su 0.6, 0,0.55, 0 per allargare lo spazio di testo oltre la metà della etichetta di livello (60% horizontalmente e 55% verticalmente of the parent Etichetta).
- Imposta Nome su LeaderTextLabel .
- Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
- Imposta Peso su Media per rendere più spesso il carattere.
- Imposta Text su PICK A BLASTER .
- Abilita TextScaled .
Crea il container per il tuo contenitore di pulsanti blaster e frecce di selezione.
Inserisci un ImageLabel in SelectionFrame .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Rimuovi il valore predefinito Image .
- Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine della Etichettanella parte inferiore del suo centro (50% dalla sinistra alla destra della Etichettae 100% dalla parte superiore alla parte inferiore della sua Etichetta).
- Imposta Colore di sfondo su 0, 0, 0 per rendere l'etichetta nera.
- Imposta Trasparenza di sfondo su 0.3 per ridurre l'opacità dell'etichetta del 30% e corrispondere a tutti gli elementi dell'interfaccia utente neri nell'esperienza.
- Imposta Posizione su {0.5, 0},{1, 0} per impostare l'etichetta nella parte inferiore del telaio (50% dalla sinistra alla destra del telaio padre e 100% dalla parte superiore alla parte inferiore del telaio padre).
- Imposta Dimensione su 1, 0,0.77, 0 5> per allargare l'area della etichetta allo spazio sotto la finestra di dialogo (100% orizzontalmente e 77% verticalmente del parent frame).
Ritorna intorno alle parti di un container.
- Inserisci un oggetto UICorner nell'Etichetta.
- Seleziona il nuovo oggetto d'angolo, quindi nella finestra Proprietà , imposta CornerRadius a 0.075, 0 per arrotondare gli angoli.
Crea il container per i pulsanti del tuo blaster.
Inserisci un Frame nella label dal passo 4.
Seleziona la nuova finestra, quindi nella Finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 0.5 per impostare il nuovo punto di origine della nuova finestra nel suo centro (50% dalla sinistra alla destra della finestra, e 50% dalla parte superiore alla parte inferiore della finestra).
- Imposta Trasparenza di sfondo su 1 per rendere il background del frame completamente trasparente.
- Imposta Posizione su 0.5, 0,0.5, 0 #框| per impostare il frame nel centro della sua etichetta di padre (50% dalla sinistra alla destra del padre frame, e 50% dalla parte superiore alla parte inferiore del padre frame).
- Imposta Dimensione su 0.85, 0,0.77, 0 per ridimensionare l'area della finestra per la maggior parte dell'etichetta (85% orizzontalmente e 77% verticalmente del genitore della Etichetta).
- Imposta Nome su Container .
Crea uno spazio per tutti i futuri pulsanti del blaster.
- Inserisci un oggetto UIListLayout nel frame a partire dal passo 5.
- Seleziona il nuovo oggetto di layout, quindi nella Finestra Proprietà ,
- Imposta Imbottitura su 0.035, 0 per fornire spazio tra tutti i pulsanti futuri.
- Imposta FillDirection su Horizontal in modo che ogni pulsante sia accanto a ciascun altro.
- Imposta allineamento orizzontale e allineamento verticale su centro in modo che ogni pulsante allinei al centro l'uno dell'altro.
Crea il pulsante di navigazione a sinistra.
Inserisci un oggetto ImageButton nell' ImageLabel dal passo 4.
Seleziona il nuovo pulsante, quindi nella Finestra Proprietà ,
- Rimuovi il valore predefinito Image .
- Imposta AnchorPoint su 0, 0.5 per impostare il nuovo punto di origine del pulsante nel lato medio sinistro di se stesso (0% dal lato sinistro del pulsante e 50% dal lato superiore del pulsante).
- Imposta Trasparenza di sfondo su 0.15 per fornire feedback visivi sull'interattazione che il pulsante è selezionabile.
- Imposta Posizione su 0.02, 0,0.5, 0 per fornire uno spazio di pixelizzazione a sinistra del pulsante dal suo container di origine (2% dal lato sinistro al lato destro del Etichettapadre e 50% dal lato superiore al lato inferiore del Etichettapadre).
- Imposta Dimensione su 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 parent frame).
- Imposta Nome su NavigationButtonLeft .
Ritorna intorno alle parti del pulsante.
- Inserisci un oggetto UICorner nel pulsante.
- Seleziona il nuovo oggetto di angolo, quindi nella finestra Proprietà, imposta CornerRadius su 0.1, 0 per arrotondare gli angoli.
Inserisci un oggetto ImageLabel nel pulsante.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della nuova Etichettaal centro di se stesso (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Posizione su 0.45, 0,0.5, 0 per impostare l'etichetta vicino al centro del suo pulsante di destinazione (45% dalla sinistra alla destra del pulsante di destinazione, e 50% dalla parte superiore alla parte inferiore del pulsante di destinazione). Questo val
- Imposta Dimensione su {0.8, 0},{0.8, 0} per espandere l'area della etichetta a spazio sotto l'invito (80% orizzontalmente e 80% verticalmente del parent frame).
- Imposta Trasparenza di sfondo su 1 per rendere il background dell'immagine completamente trasparente.
- Imposta immagine su rbxassetid://14309187238 .
- Imposta ScaleType su Fit .
Crea il giusto pulsante di navigazione.
Duplicate NavigationButtonLeft .
Seleziona il pulsante duplicato, quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 1, 0.5 per impostare il nuovo punto di origine del pulsante nel centro destro di se stesso (100% dalla sinistra alla destra del pulsante e 50% dalla parte superiore alla parte inferiore del pulsante).
- Imposta Posizione su 0.98, 0,0.5, 0 per fornire uno spazio di pixelizzazione a destra del pulsante dal suo container di origine (98% dalla sinistra alla destra del Etichettapadre e 50% dalla parte superiore alla parte inferiore del Etichettapadre).
- Imposta Nome su NavigationButtonRight .
Seleziona il suo oggetto figlio ImageLabel .
- Imposta Rotazione su 180 per schiacciare l'immagine.
- Imposta Posizione su 0.55, 0,0.5, 0 per impostare l'etichetta vicino al centro del suo pulsante di destinazione (55% dalla sinistra alla destra del pulsante di destinazione, e 50% dalla parte superiore alla parte inferiore del pulsante di destinazione). Questo val
Crea il pulsante SELECT .
Inserisci un ImageButton in Componente . Nota come questo processo mantenga il pulsante di selezione separato da SelectionFrame in modo che tu possa aggiungere uno spazio di riempimento tra la parte principale del componentente dalla selezione del pulsante.
Seleziona il nuovo pulsante, quindi nella Finestra Proprietà ,
- Rimuovi il valore predefinito Image .
- Imposta AnchorPoint su 0.5, 1 per impostare il nuovo punto di origine del pulsante nella parte inferiore del se stesso (50% dalla sinistra alla destra del pulsante e 100% dalla parte superiore alla parte inferiore del pulsante).
- Imposta Trasparenza di sfondo su 0.15 per fornire feedback visivi sull'interattazione che il pulsante è selezionabile.
- Imposta Posizione su 0.5, 0,0.99, 0 20% dalla sinistra alla destra del contenitore (50% dalla sinistra alla destra del contenitore) e % dalla parte superiore alla parte inferiore del contenitore (99% dalla sinistra alla destra del contenitore).
- Imposta Dimensione su 0.17, 0,0.18, 0 17% orizzontalmente e 18% verticalmente del parent frame) per la lunghezza del pulsante sotto i pulsanti del blaster (17% orizzontalmente e 18% verticalmente del parent frame).
- Imposta Nome su Seleziona pulsante .
Ritorna intorno alle parti del pulsante.
- Inserisci un oggetto UICorner nel pulsante.
- Seleziona il nuovo oggetto di angolo, quindi nella finestra Proprietà, imposta CornerRadius su 0.2, 0 per arrotondare gli angoli.
Inserisci un oggetto TextLabel nel pulsante in modo da poter visualizzare un invito all'azione.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della nuova Etichettaal centro di se stesso (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Posizione su 0.5, 0,0.5, 0 5> per spostare l'etichetta al centro del pulsante (50% dalla sinistra alla destra del pulsante padre e 50% dalla parte superiore alla parte inferiore del pulsante padre).
- Imposta Dimensione su {0.9, 0},{0.55, 0} per ridimensionare lo spazio di testo a quasi tutta la larghezza della parentesi di livello (90% orizzontalmente e 55% verticalmente della parentesi di Etichetta).
- Imposta Nome su Seleziona etichetta di testo .
- Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
- Imposta Peso su Media per rendere più spesso il carattere.
- Imposta Text su SELECT .
- Abilita TextScaled .
Crea un blaster button prefab.
- Nel servizio ReplicatedStorage , crea una struttura cartella per organizzare i tuoi oggetti UI. L'esempio usa un cartelle di esemmpio cartella con un figlio Guis cartella.
- Inserisci un oggetto ImageButton nel cartello Guis .
- Seleziona il nuovo pulsante, quindi nella Finestra Proprietà ,
- Rimuovi il valore predefinito Image .
- Imposta AnchorPoint su 0.5, 0.5 per impostare il nuovo punto di origine del pulsante nel suo centro (50% dalla sinistra alla destra del pulsante, e 50% dalla parte superiore alla parte inferiore del pulsante).
- Imposta Trasparenza di sfondo su 0.65 per fornire feedback visivi che il pulsante non è in focus. Gli script nel passo 12 forniscono feedback visivi programmatici quando il pulsante è in focus.
- Imposta LayoutOrder su 2 .
- Imposta Nome su BlasterButtonPrefab .
- Imposta Dimensione su {0.8, 0},{0.8, 0} .
- Imposta ImageTransparency su 1 per rendere l'immagine completamente trasparente.
- Inserisci un UIAspectRatioConstraint in BlasterButtonPrefab per assicurarti che il rapporto aspetto del pulsante rimanga lo stesso all'interno del component no matter the Giocatore's screen size.
- Ritorna intorno alle parti del pulsante.
- Inserisci un oggetto UICorner in BlasterButtonPrefab .
- Seleziona il UICorner , quindi nella finestra Proprietà , imposta CornerRadius a 1> 0.05, 01> per arrotondare gli angoli.
- Inserisci un ImageLabel in BlasterButtonPrefab .
- Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Rimuovi il valore predefinito Image .
- Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della nuova Etichettaal centro di se stesso (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Posizione su 0.52, 0,0.497, 0 per impostare l'etichetta vicino al centro del suo pulsante padre (52% dalla sinistra alla destra del suo pulsante padre e 49.7% dalla parte superiore alla parte inferiore del suo pulsante padre
- Imposta Dimensione su 1.20, 0,0.9, 0 120% orizzontalmente e 90% verticalmente del pulsante padre).
- Imposta ScaleType su Fit .
Fai riferimento agli script seguenti ReplicatedStorage all'interno del file di esempio Laser Tag che mostra i pulsanti per ciascun laser, scala i pulsanti quando un giocatore seleziona un pulsante che non è in focus e aggiungi la selezione del Giocatoreal loro Avatar.
Il seguente script richiede un insieme di script che lavorano insieme per creare il blasterSelector. Quando un giocatore si unisce all'esperienza o respawna nel round dopo che la loro salute raggiunge zero, questo script attiva tutti gli elementi dell'interfaccia utente del blasterSelector fino a quando il giocatore non fa la sua selezione.
Ora, ogni volta che un giocatore si unisce all'esperienza o respawna nel round dopo che la loro salute raggiunge zero, l'interfaccia utente del blaster selettore viene visualizzata, possono fare una selezione e ogni pulsante funziona come previsto.
Bottone Esplosione
Un pulsante di esplosione è un componente UI che i giocatori utilizzano per esplodere il loro blaster se stanno accedendo all'esperienza attraverso un Dispositivomobile o tablet. L'esperienza del laser tag di esempio usa un pulsante di esplosione con un'icona che rappresenta sia una crosshair che un'esplosione per comunicare il funzionamento del pulsante senza testo.
Per ricreare esattamente il pulsante esplosione all'interno dell'esperienza Laser Tag :
Inserisci un ImageButton in the HUDGui Class.ScreenGui oggetto.
Nella finestra Explorer, fai clic sul 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 ImageButton .
Nella vista, sposta il pulsante in cui il pollice di un Giocatoresi appoggia naturalmente, in modo da poter ottenere un senso visivo di ciò che il pulsante avrà sull' Dispositivodi un Giocatore, quindi nella finestra Proprietà ,
- Imposta immagine su rbxassetid://18308375035 per visualizzare l'Iconadel pulsante esplosione.
- Imposta PressedImage su rbxassetid://18308372558 per visualizzare una versione invertita dell'icona del pulsante quando un giocatore premere il pulsante.
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Nome su BlastButton .
- Imposta ScaleType su Fit in modo che l'immagine si adatti allo suo container e non si allunga su varie dimensioni di schermo.
- Imposta Trasparenza immagine su 0.3 per ridurre l'opacità della etichetta in modo che corrisponda a tutti gli elementi dell'interfaccia utente nera nell'esperienza.
Inserisci un UIAspectRatioConstraint in BlastButton per assicurarti che il rapporto aspetto del pulsante rimanga lo stesso, indipendentemente dalla dimensione dello schermo del Giocatore.
Fai riferimento agli script seguenti ReplicatedStorage all'interno del campione Laser Tag luogo file che programmaticamente visualizza il pulsante blaster quando un giocatore sta usando l'input touch su un dispositivo che accetta i Controllitouch.
Il seguente script richiede un insieme di script del modulo che lavorano insieme per impostare la schermata principale Heads Up (HUD), tra cui setupTouchButtonAsync . Dopo che un giocatore si è unito a una partita e ha selezionato il loro blaster, questo script garantisce che tutti gli elementi dell'interfaccia utente HUD vengono visualizzati in modo appropriato per lo stato, il Dispositivoe lo Statodel team del Giocatore.
Ora, quando un giocatore si unisce all'esperienza e usa 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 giocatore
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 gruppoing di elementi dell'interfaccia utente è vicino alle parti dello schermo poiché i giocatori possono comprendere questa informazione periferale senza distrarre la loro attenzione dal Partita.
Indicatore giocatore
Un indicatore di giocatore è un componente UI che i giocatori fanno riferimento per decifrare rapidamente quale squadra appartiene a loro non appena spawna nella loro zona di spawn. L'esperienza di tag laser di esempio fornisce due versioni dell'indicatore del giocatore a seconda se il giocatore è sulla verde o rosa team.
Dopo la guida da Seleziona un Tema di Colore, entrambe le versioni del giocatore indicatore combinano il colore del team con un'icona unica, semplice con dettagli minimi in modo che rimangano leggibili su piccoli schermi. Fornire due forme di feedback visivo è importante poiché aiuta a mantenere il design accessibile per i giocatori con cecità visiva.
Per ricreare esattamente il componente dell'indicatore del giocatore all'interno dell'esperienza Laser Tag :
Inserisci un Frame in the HUDGui oggetto.
- Nella finestra Explorer, fai clic sul 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 AnchorPoint su 0, 1 per impostare il punto di origine dellaFrame nella parte inferiore del suo centro (0% dalla sinistra alla destra dellaFrame e 100% dalla parte superiore alla parte inferiore dellaFrame).
Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
Imposta Nome su PlayerDisplay .
Imposta Posizione su 0.02, 0,0.97, 0 per impostare il frame vicino alla parte inferiore sinistra dello schermo.
Imposta Dimensione su {0.23, 0},{0.08, 0} per ridurre e allargare il frame.
Abilita ClipsDescendants per tagliare i GuiObjects figli che si estendono oltre il frame.
Crea la forma poligonale.
Inserisci un ImageLabel in PlayerDisplay .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta immagine su rbxassetid://14304828123 per visualizzare l'Iconadel trapezio.
- Imposta AnchorPoint su 1, 1 per impostare il punto di origine della Etichettanella parte inferiore destra di se stesso (100% dalla sinistra alla destra della Etichetta, e 100% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Nome su Blocca .
- Imposta Posizione su {1,0},{1,0} per impostare l'etichetta sul lato destro del frame.
- Imposta Dimensione su 1.858, 0,0.581, 0 per allargare l'etichetta all'esterno del frame e ridurlo di poco più della metà della lunghezza del frame.
- Imposta Trasparenza immagine su 0.15 per rendere il titolo leggermente trasparente.
- Imposta ScaleType su Fit in modo che l'immagine si adatti allo suo container e non si allunga su varie dimensioni di schermo.
- Inserisci un UIAspectRatioConstraint in Block per assicurarti che il labello e i suoi figli elementi UI mantengano lo stesso aspetto della dimensione di schermo.
- Seleziona la nuova Vincolo, quindi nella finestra Proprietà , imposta AspectRatio su 13.78 .
Crea la scatola per il portraitdel Giocatore.
Inserisci un ImageLabel in PlayerDisplay .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Rimuovi il placeholder aspettoID all'interno della Proprietà Immagine . Gli script in step 7 inseriscono in modo programmatico il ritratto del Giocatorenella Etichettadell'immagine.
- Imposta AnchorPoint su 0, 1 per impostare il punto di origine della Etichettanell'angolo in basso a sinistra di se stesso (0% dalla sinistra alla destra della Etichetta, e 100% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Colore di sfondo3 su 0, 0, 0 per impostare il colore di sfondo della Etichettain nero.
- Imposta Trasparenza di sfondo su 0.3 per ridurre l'opacità dell'etichetta del 30% e corrispondere a tutti gli elementi dell'interfaccia utente neri nell'esperienza.
- Imposta Nome su PlayerPortrait .
- Imposta Posizione su 0.11, 0,1, 0 per impostare l'etichetta sul lato sinistro della forma poligonale.
- Imposta Dimensione su {0.23, 0},{1, 0} per ridimensionare l'Etichetta.
- Imposta Trasparenza immagine su 0.15 per rendere il titolo leggermente trasparente.
- Imposta ScaleType su Fit in modo che l'immagine si adatti allo suo container e non si allunga su varie dimensioni di schermo.
- Inserisci un UIAspectRatioConstraint in PlayerPortrait per assicurarti che il rapporto aspetto-孩子 UI elementi rimangono gli stessi, indipendentemente dalla dimensione dello schermo del Giocatore.
- Inserisci un UICorner in PlayerPortrait , quindi nella finestra Proprietà , imposta 1> CornerRadius1> su 4> 0.05, 04> per arrotondare leggermente le angolazioni.
Crea l'etichetta di testo per il nome del Giocatore.
Inserisci un oggetto TextLabel in PlayerDisplay .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0, 0.5 per impostare il nuovo punto di origine del pulsante nel lato medio sinistro di se stesso (0% dal lato sinistro del pulsante e 50% dal lato superiore del pulsante).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Nome su PlayerNameTextLabel .
- Imposta Posizione su {0.35, 0},{0.72, 0} per impostare l'etichetta sul lato destro del suo container (35% dalla sinistra al lato destro della Etichettadi padre, e 72% dalla parte superiore alla parte inferiore della Etichettadi padre).
- Imposta Dimensione su {0.52, 0},{0.3, 0} in modo che il testo possa occupare la maggior parte dell'area di forma poligonale (52% orizzontalmente e 30% verticalmente del padreFrame).
- Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
- Imposta Peso su Bold per rendere più spesso il carattere.
- Rimuovi il testo segnaposto all'interno della Proprietà Testo . Gli script in step 7 programmano in modo automatico il nome del Giocatorenella Etichettadel testo.
- Abilita TextScaled .
- Imposta TextXAlignment su Sinistra .
Crea gli icon e colori del team che vengono visualizzati a sinistra del portraitdel Giocatore.
Inserisci un cartella in PlayerDisplay , quindi rinominalo in TeamIcons .
Crea il icona del team verde e il colore.
- Inserisci un ImageLabel in TeamIcons .
- Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0, 1 per impostare il punto di origine della Etichettanell'angolo in basso a sinistra di se stesso (0% dalla sinistra alla destra della Etichetta, e 100% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta BackgroundColor3 su 88, 218, 171 per impostare il colore di sfondo della Etichettasu mint green.
- Imposta Nome su TeamAIcon .
- Imposta Posizione su {0, 0},{1, 0} per impostare l'etichetta sul lato sinistro del frame.
- Imposta Dimensione a 0.135, 0,0.58, 0 per ridimensionare l'etichetta a sinistra del portraitdel giocatore.
- Imposta ImageTransparency su 1 per rendere il titolo trasparente.
- Configura un attributo personalizzato per tracciare che questo titolo è per il team verde. Questo passo è molto importante per gli script in passo 7.
- Nella finestra Proprietà, fai Iconasulla sezione Attributi, quindi fai clic sul pulsante plus. Una finestra di dialogo pop-up viene visualizzata.
- Nel campo Nome , inserisci teamColor .
- Nel menu a discesa Tipo , seleziona Colore mattone .
- Click the Salva button.
- Imposta il nuovo teamColor attribute to Mint .
- Inserisci un UIAspectRatioConstraint in TeamAIcon per assicurarti che il labello e i suoi figli elementi UI mantengano lo stesso aspetto della dimensione di schermo.
- Crea l'Icona.
- Inserisci un ImageLabel in TeamAIcon .
- Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta immagine su rbxassetid://14309678670 per visualizzare l'Iconadel team verde.
- Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della Etichettanel suo centro (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Nome su Icona .
- Imposta Posizione su {0.5, 0},{0.5, 0} per impostare la etichetta al centro della sua Etichettapadre.
- Imposta Dimensione a {0.7, 0},{0.6, 0} per ridimensionare l'Etichetta.
- Imposta ScaleType su Fit in modo che l'immagine si adatti allo suo container e non si allunga su varie dimensioni di schermo.
Crea l'icona e il colore del team rosa .
- Duplica TeamAIcon e i suoi figli.
- Seleziona il doppio TeamAIcon , quindi nella finestra Property ,
- Imposta Color di sfondo3 su 255, 170, 255 per impostare il colore di sfondo della Etichettasu carnation pink.
- Imposta Nome su TeamBIcon .
- Imposta l'attributo teamColor su Carnation Pink .
- Seleziona il figlio Icona di TeamBIcon , quindi nella finestra Proprietà imposta 1> Immagine1> su 4> rbxassetid://14309678549 4> per visualizzare l'icona del team rosa.
Fai riferimento agli script seguenti ReplicatedStorage all'interno del campione Laser Tag luogo file che programmaticamente visualizza il giocatore indicatore con il colore e l'icona appropriati team mentre un giocatore è attivo in una round.
Il seguente script richiede un insieme di script del modulo che lavorano insieme per impostare il principale Heads Up Display (HUD), tra cui startSyncingTeamColor , setPlayerName e setPlayerPortrait . Dopo che un giocatore si è unito a una partita e ha selezionato il loro blaster, questo script garantisce che tutti gli elementi dell'Dispositivoutente HUD vengono visualizzati
Ora, ogni volta che un giocatore si unisce o si riconnette alla partita dopo la rigenerazione, l'indicatore del giocatore viene visualizzato nella parte inferiore sinistra della loro schermata.
Schermo del campo di forza
Un'interfaccia utente a schermo di campo di forza è un elemento UI che sovrappone la visuale per informare i giocatori che sono al sicuro dal team nemico mentre si unisce o si ricongiunge a una partita. Seguendo le linee guida estetiche per gli icon per Scegli uno stile di artiglio estetico, l'esperienza di laser tag di campagna utilizza un modello di pixelizz
Per ricreare esattamente lo schermo del campo di forza all'interno dell'esperienza Laser Tag :
Inserisci un ImageLabel in the ForceFieldGui ScreenGui oggetto.
Nella finestra Explorer, fai clic sul 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 ImageLabel .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
Imposta immagine su rbxassetid://14462567888 .
Imposta Trasparenza di sfondo su 0.8 per rendere il campo di forza trasparente.
Imposta Dimensione su {1, 0},{1, 0} per riempire l'immagine l'intera schermata (100% orizzontalmente e 100% verticalmente del padre ScreenGUI).
Imposta ScaleType su Tile per fare in modo che la tua azulejo sei su tutta la schermata.
Imposta TileSize su {0, 104},{0, 180} .
Inserisci un oggetto UIGradient nell'Etichetta.
Seleziona il nuovo oggetto di gradiente, quindi nella Finestra Proprietà ,
Imposta Colore su una sequenza di colori che inizia blu, si trasforma bianco e poi si trasforma blu di nuovo.
Imposta Colore su 120, 192, 250 per applicare un tono blu chiaro a tutti gli esagoni.
Click the Colore Proprietà, then click the ⋯ button. A color sequence pop-up displays.
Ogni triangolo sulla direzione diagonale dell'asse del colore è un punto chiave che determina il valore del colore della proprietà a quel punto dell'immagine da sinistra a destra.
Fai clic e trascina la sequenza di colori fino a quando non raggiungi un valore di Tempo di 0.05, quindi fai clic sul piccolo quadrato accanto a Colore per aprire la finestra pop-up 2>Colori2>.
Seleziona un bianco brillante, quindi chiudi la finestra pop-up.
Fai clic e trascina la sequenza dei colori fino a quando non raggiungi un valore di Tempo di 0.95 , quindi apri la finestra pop-up Colori e seleziona lo stesso colore bianco come prima.
Imposta Rotazione su 225 per visualizzare la parte blu della tua sequenza di colori negli angoli in alto a sinistra e in basso a destra.
Imposta Trasparenza su una sequenza di numeri che fa sembrare il campo di forza come se fosse scintillante.
Fai clic sulla Proprietà Trasparenza , quindi fai clic sul pulsante ⋯ . Viene visualizzata una finestra di dialogo sulla sequenza di numeri. Ogni quadrato all'inizio e alla fine della sequenza di numeri è un punto di avvio che determina il valore di trasparenza della proprietà all'inizio e alla fine dell'immagine da sinistra a destra.
Imposta le seguenti proprietà di tempo e valore durante la sequenza di numeri:
- Tempo = 0 , Valore = 0> 0.250>
- Tempo = .101 , Valore = 0> 0.8750>
- Tempo = .183 , Valore = 0> 00>
- Tempo = .3 , Valore = 0> 10>
- Tempo = .7 , Valore = 0> 10>
- Tempo = 1 , Valore = 0> 0.90>
Duplica il ImageLabel dal passo 2.
Seleziona l'oggetto UIGradient all'interno della doppia Etichetta, quindi nella finestra Proprietà ,
Imposta Rotazione su -45 per schiacciare l'immagine in modo che quasi specchi l'un l'altro lungo l'asse Y.
Modifica Trasparenza per rendere il shimmer più organico.
- Click the Trasparenza Proprietà, then click the ⋯ button. A number sequence pop-up displays.
- Seleziona il terzo Fotogramma chiave, quindi fai clic sul pulsante Elimina .
Fai riferimento agli script seguenti ReplicatedStorage all'interno del campione Laser Tag luogo file che programmaticamente visualizza lo schermo del campo di forza mentre un giocatore si unisce o si unisce a un round.
Il seguente ReplicatedStorage.ForceFieldClientVisuals script del client sostituisce il visuale predefinito ForceField con StarterGui.ForceFieldGui . Quando i giocatori caricano in un'esperienza e si generano su un Class.SpawnLocation con una proprietà 2>Duration</
Questo script inizia ascoltando quando il ForceField viene aggiunto a un personaggio, disabilita le visualizzazioni della forza del primo personaggio e quindi abilita l'oggetto Class.ForceFieldGui . Nota che questo non ScreenGui sui visual del terzo personaggio quando i giocatori guardano ad altri giocatori respawning back into l'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 in 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 riconnette alla partita dopo il respawn, l'interfaccia utente della nuova interfaccia forcefield viene visualizzata invece dei primi-personaggi ForceField visualizzati per impostazione predefinita.
Rigenera schermo
Un elemento respawn screen è un elemento UI che ingialla la vista per informare i giocatori che sono stati taggati fuori, e che il server è in corso di respawning loro back to their spawn zone. Questo elemento respawn screen è importante perché dà ai giocatori il tempo di elaborare che sono stati taggati fuori, e strategize their next move prima di loro rejoin the active round.
For more information on custom respawning behavior in the sample laser tag esperienza, see Respawn Characters from the Gameplay Scripting curriculum.
Per ricreare esattamente la schermata di respawn all'interno dell'esperienza Laser Tag :
Crea il banner informativo centrale.
Inserisci un ImageLabel nell'oggetto OutStateGui ScreenGui .
Nella finestra Explorer, fai clic sul 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 ImageLabel .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
Imposta AnchorPoint su 0.5, 0.5 per impostare il nuovo punto di origine del pulsante nel mezzo di sé (50% dalla sinistra alla destra dell'Etichetta, e 50% dalla parte superiore alla parte inferiore dell'Etichetta).
Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
Imposta Posizione su 0.5, 0,0.5, 0 #parentScreenGui per impostare l'etichetta al centro del suo container (50% dalla sinistra alla destra dello screen parent, e 50% dalla parte superiore alla parte inferiore dello screen parent).
Imposta Dimensione su {0.48, 0},{0.06, 0} per allargare l'etichetta (48% orizzontalmente e 6% verticalmente di ScreenGUI).
Imposta Nome su Blocca .
Imposta immagine su rbxassetid://14304827265 per rendere l'immagine un trapezoid.
Imposta Colore immagine su 0,0,0 per rendere il trapezio nero.
Imposta ImageTransparency a 0.3 per ridurre l'opacità dell'etichetta del 30% e corrispondere a tutti gli elementi dell'interfaccia utente nera nell'esperienza.
Inserisci un UIAspectRatioConstraint in Block per assicurarti che il labello e i suoi figli elementi UI mantengano lo stesso aspetto della dimensione di schermo.
Seleziona la nuova Vincolo, quindi nella finestra Proprietà , imposta AspectRatio su 13.78 .
Inserisci un TextLabel in Block for the informational text.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della Etichettanel suo centro (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
Imposta Posizione su {0.5, 0},{0.5, 0} per impostare l'etichetta al centro della sua etichetta di padre (50% dalla sinistra alla destra della sua Etichettadi padre e 50% dalla parte superiore alla parte inferiore della sua Etichettadi padre).
Imposta Dimensione su {.85, 0},{0.55, 0} in modo che il testo possa occupare la maggior parte dell'area del trapezio (85% orizzontalmente e 55% verticalmente della Etichettapadre).
Imposta Nome su BodyTextLabel .
Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
Imposta Peso su Bold per rendere più spesso il carattere.
Imposta Text su Respawning... .
Imposta TextColor3 su 255, 255, 255 per rendere il testo bianco.
Abilita TextScaled .
Crea l'header.
Inserisci un ImageLabel in Block .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
Imposta AnchorPoint su 0.5, 1 per impostare il punto di origine della Etichettanella parte inferiore del suo centro (50% dalla sinistra alla destra della Etichettae 100% dalla parte superiore alla parte inferiore della sua Etichetta).
Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
Imposta Posizione su {0.5, 0},{0, 0} per impostare l'etichetta nella parte superiore del suo rótolo padre (50% dalla sinistra alla destra del rótolo Etichettae 0% dalla parte superiore alla parte inferiore del suo rótolo Etichetta).
Imposta Dimensione su 0.46, 0,0.56, 0 per ridimensionare l'etichetta (46% orizzontalmente e 56% verticalmente dell'Etichettapadre).
Imposta Nome su Intestazione .
Imposta Image su rbxassetid://14304826985 per rendere l'immagine un'immagine a più direzioni.
Imposta ImageColor su 245, 46, 46 per rendere il rosso sbiadito per segnalare che il giocatore è temporaneamente inattivo mentre sono etichettati fuori dal round.
Inserisci un TextLabel in Headings for the informational text.
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della Etichettanel suo centro (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
Imposta Posizione su {0.5, 0},{0.5, 0} per impostare l'etichetta al centro della sua etichetta di padre (50% dalla sinistra alla destra della sua Etichettadi padre e 50% dalla parte superiore alla parte inferiore della sua Etichettadi padre).
Imposta Dimensione su {.85, 0},{0.55, 0} in modo che il testo possa occupare la maggior parte dell'area di svanimento (85% orizzontalmente e 55% verticalmente della parentela di Etichetta).
Imposta Nome su LeaderTextLabel .
Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
Imposta Weight su Nero per spessare il carattere.
Imposta Text su TAGGED - YOU'RE OUT! 9. Imposta TextColor3 su 255, 255, 255 per rendere il testo bianco.
Abilita TextScaled .
Crea il flusso di lavoro intorno ai confini dello schermo.
- Inserisci un ImageLabel in OutStateGui .
- Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della Etichettanel suo centro (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Colore di sfondo3 su 0,0,0 per impostare il colore di sfondo della Etichettasu nero.
- Imposta Trasparenza di sfondo su 0.5 per rendere il background della Etichettatrasparente metà.
- Imposta Posizione su 0.5, 0,0.5, 0 #> etichetta al centro del suo container (50% dalla sinistra alla destra del padre ScreenGUI e 50% dalla parte superiore alla parte inferiore del padre ScreenGUI).
- Imposta Dimensione su {1, 0},{1, 0} per allargare l'etichetta sullo schermo intero (100% orizzontalmente e 100% verticalmente della parent ScreenGUI).
- Imposta ZIndex su -1 per visualizzare il fade dietro gli altri elementi UI.
- Imposta Nome su Intestazione .
- Imposta Image su rbxassetid://14309518613 per rendere l'immagine un'immagine a sfondo di confine.
- Imposta Trasparenza immagine su 0.1 per rendere il flusso leggermente trasparente.
Per migliorare le Prestazione, puoi saltare la risorsa dell'immagine e invece utilizzare un oggetto UIGradient con una sequenza di numero di trasparenza personalizzata. Per saperne di più su questa tecnica di svanimento, vedi Apparizione UI - Gradient.
Fai riferimento allo script seguente ReplicatedStorage all'interno del campione Laser Tag luogo file che programmaticamente mostra la schermata di respawn quando la salute di un Giocatoreraggiunge zero e sono in corso di respawning back to their team's spawn zone.
Il seguente ReplicatedStorage.PlayerStateHandler script client contiene funzioni che attivano diversi tipi di comportamento in base all'attributo playerState . Tutte le risposte degli eventi sono logiche gruppate insieme in questo script poiché richiedono comportamenti diversi di abilitare o disabilitare i Controllidel giocatore, la movimentazione della fotocamera e quale livello UI è visibile.
Quando la salute di un Giocatoreraggiunge zero, il loro playerState diventa TaggedOut, che attiva la funzione onTaggedOut(). 1> onTaggedOut1> attiva immediatamente il seguente comportamento:
- Il giocatore non può muoversi nell'arena.
- Il giocatore non può muovere la loro Telecamera.
- Il giocatore non può usare il suo blaster.
- Il StarterGui.OutStateGui diventa esclusivamente abilitato.
Quando il giocatore respawna, il loro playerState diventa SelectingBlaster, che attiva la funzione onSelectingBlaster(). 1> onSelectingBlaster1> quindi abilita esclusivamente la funzione 4> StarterGui.PickABlaster
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 tutte le UI Layers ad eccezione della eccezione fornita
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
-- guiLayers contiene una lista dei guis che dovrebbero essere impostati esclusivamente.
for _, screenGui in guiLayers do
screenGui.Enabled = screenGui == enabledGui
end
end
local function onSelectingBlaster()
-- Abilita la telecamera in modo che i giocatori possano guardare intorno mentre selezionano un blaster
togglePlayerCamera(true)
togglePlayerMovement(false)
setGuiExclusivelyEnabled(playerGui.PickABlasterGui)
-- Disabilita il laser mentre selezioni un laser
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 di distruzione quando il giocatore inizia a giocare
scheduleDestroyForceField()
end
local function onTaggedOut()
-- Disabilita i controlli mentre sei disattivato
togglePlayerMovement(false)
togglePlayerCamera(false)
setGuiExclusivelyEnabled(playerGui.OutStateGui)
-- Disabilita il laser 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 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
-- Handling the initial player state if Impostare
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)
local function updateFromPlayerState()
onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end
-- Handling future state update del giocatore
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)
-- Assicurati che le modifiche siano ancora applicate dopo la rigenerazione
localPlayer.CharacterAdded:Connect(updateFromPlayerState)
Ora, ogni volta che la salute di un Giocatoreraggiunge zero, la schermata di respawn si mostra fino a quando il giocatore respawna nel loro spawn zone.
Ora che sei familiare con il comune GuiObjects per l'interfaccia utente sullo schermo, prova a ricreare l'oggetto RoundResultsGui ScreenGui e tutti i suoi figli per l'interfaccia utente sullo schermo quando i giocatori vincono o perdono
Crea oggetti GUI
Per visualizzare l'interfaccia utente sulla superficie di una parte nello spazio 3D che risponde alla logica di scripting per ogni singolo giocatore , puoi associare un oggetto SurfaceGui alla parte che vuoi mostrare la tua interfaccia utente all'interno del servizio ReplicatedStorage. Questa tecnica garantisce che la tua interfaccia utente e la
SurfaceGui oggetti contengono tutti GuiObjects che vengono visualizzati sulla superficie di una parte nell'Spazio3D. L'esperienza di tag laser di esempio include solo una istanza di un oggetto SurfaceGui : il cooldown meteorizzatore che viene visualizzato sopra
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 mostrare sulla superficie di una parte nell'Spazio3D.
Metro in tempo di recupero
Un metro di cooldown è un componente UI che informa i giocatori quanto tempo devono aspettare prima di poter esplodere il loro laser nuovamente. Questa breve pausa impedisce ai giocatori di poter esplodere così velocemente come possono fare clic o premere un pulsante, il che è irrealistico per il Partitalaser tag.
Per ricreare esattamente il metro di cooldown all'interno dell'esperienza Laser Tag :
Crea una parte per contenere il tuo oggetto SurfaceGui .
- Nella finestra Explorer, passa il mouse sull'area di lavoro , quindi fai clic sull'Icona⊕. Viene visualizzato un menu contestuale.
- Dal menu contestuale, inserisci una parte blocco . Questa è una posizione temporanea per la parte in modo che tu possa visualizzare i cambiamenti in ogni fase del processo.
Posiziona e orienta il blocco attorno alla posizione in cui un personaggio di un Giocatoreavrebbe dovuto posizionare il loro blaster, quindi nella finestra Proprietà ,
Imposta Trasparenza su 1 per rendere la parte completamente trasparente.
Imposta Nome su CooldownBarPrefab .
Imposta Dimensione su 0.169, 0.027, 2.537 per ridimensionare la parte in base alla lunghezza del blaster.
Disabilita CanCollide e CanQuery .
Inserisci un SurfaceGui in CooldownBarPrefab .
Seleziona il nuovo Surfici Gui , quindi nella finestra Proprietà ,
Imposta faccia su top in modo che l'interfaccia utente sia rivolta verso l'alto.
Imposta LightInfluence e MaxDistance su 0 .
Imposta PixelPerStud su 200 .
Crea la barra nera.
Inserisci un ImageLabel nel SurfaceGui .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Rimuovi il valore predefinito Image .
- Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della Etichettanel suo centro (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Colore di sfondo3 su 0,0,0 per impostare il colore di sfondo della Etichettasu nero.
- Imposta Trasparenza di sfondo su 0.4 per rendere il background della Etichettasemi-trasparente.
- Imposta Posizione su 0.5, 0,0.5, 0 #> etichetta al centro del suo container (50% dalla sinistra alla destra della guida di superficie padre, e 50% dalla parte superiore alla parte inferiore della guida di superficie padre).
- Imposta Dimensione su {1, 0},{1, 0} per allargare l'etichetta a tutta la parte (100% orizzontalmente e 100% verticalmente della parent SurfaceGui).
- Imposta Nome su Container .
Ritorna intorno alle parti di un container.
Inserisci un oggetto UICorner in Container .
Seleziona il UICorner , quindi nella finestra Proprietà , imposta CornerRadius a 1> 0.15, 01> per appena arrotondare le angolazioni.
Crea la barra rossa.
- Inserisci un ImageLabel in Container .
- Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Rimuovi il valore predefinito Image .
- Imposta AnchorPoint su 1, 0.5 per impostare il punto di origine della Etichettanel punto centrale destro di se stesso (100% dalla sinistra alla destra della Etichettae 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Colore di sfondo3 su 172, 13, 13 per impostare il colore di sfondo della Etichettasu un rosso scuro.
- Imposta Trasparenza di sfondo su 0.2 per rendere il background della Etichettaleggermente trasparente.
- Imposta Nome su Barra .
- Imposta Posizione su 1, 0,0.5, 0 5> per impostare l'etichetta al centro destro del suo container (100% dalla sinistra alla destra della Etichettapadre e 50% dalla parte superiore alla parte inferiore della Etichettapadre).
- Imposta Dimensione su {0, 0},{1, 0} per allungare l'etichetta in alto della sua etichetta di base (0% orizzontalmente e 100% verticalmente della sua Etichettadi base). Questo passo è anche vantaggioso per il comportamento di tweening che avviene negli script in passo 8.
Incontra gli angoli dell'Etichetta.
- Inserisci un oggetto UICorner in Barra .
- Seleziona il UICorner , quindi nella finestra Proprietà , imposta CornerRadius a 1> 0.15, 01> per appena arrotondare le angolazioni.
Sposta CooldownBarPrefab in ReplicatedStorage .
Crea una struttura cartella per organizzare i tuoi oggetti UI. L'esempio usa un cartelle istanze cartella con un figlio Guis cartella.
Sposta CooldownBarPrefab in Guis .
Fai riferimento agli script seguenti ReplicatedStorage all'interno del campione Laser Tag luogo file che programmaticamente attacca il metro di cooldown al Giocatore, quindi animare la barra rossa dopo che il giocatore esploda il loro blaster.
Il seguente ReplicatedStorage.FirstPersonBlasterVisuals script client gestisce tutta la logica visiva per il primo-person blaster del Giocatore. Richiede un insieme di script di modulo che lavorano insieme per impostare le visuali del blaster che si sentono più realistici per il Partitalaser tag, tra cui FirstPersonBlasterVisuals.addCooldownBar e FirstPersonBlasterVisuals
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 la prima persona Piattaforma di test
rigModel = blasterConfig.RigModel:Clone()
rigModel.Parent = Workspace
-- Aggiungi la cooldownBar
cooldownBar = addCooldownBar(rigModel.PrimaryPart.CooldownBarAttachment)
animations = setupAnimations(blasterConfig, rigModel)
end
local function removeFirstPersonVisuals()
for _, animation in animations do
animation:Stop()
animation:Destroy()
animation = nil
end
if rigModel then
-- Questo distrugge anche la barra di cooldown poiché è parented alla Piattaforma di test
rigModel:Destroy()
rigModel = nil
end
end
-- Esegui prima person first person effetti visivi quando accade un'esplosione
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
runCooldownBarEffect(cooldownBar)
end)
-- Individua il rig sulla fotocamera se esiste
RunService.RenderStepped:Connect(function()
if rigModel then
-- Aggiorna il CFrame della Piattaforma di testrispetto alla posizione della Telecamerae RIG_OFFSET_FROM_CAMERA
rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
end
end)
-- Maniglia che cambia visual quando il blasterType cambia mentre giochi
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
if playerState == PlayerState.Playing then
removeFirstPersonVisuals()
addFirstPersonVisuals()
end
end)
-- Maniglia che cambia quando il playerState cambia
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
-- Rimuovi i visivi quando il giocatore seleziona un blaster o è nella lobby
if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
removeFirstPersonVisuals()
-- Aggiungi i visual quando il giocatore finisce di selezionare il blaster.
elseif newPlayerState == PlayerState.Playing then
addFirstPersonVisuals()
end
end)
Ora, ogni volta che un giocatore fa esplodere il loro laser, la barra di recupero animata comunica quando il giocatore può esplodere di nuovo.
Crea oggetti BillboardGui
Per visualizzare gli elementi UI all'interno dello Spazio3D che rispondono alla logica di scripting e si svolgono sempre nella telecamera di ciascun Giocatore, indipendentemente dal loro angolo di visuale, come i nomi dei giocatori o i segnaposto della mappa, puoi creare un oggetto BillboardGui come figlio di un BasePart o Attachment che esiste nello
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 sono attivi in una partita.
- TaggedOutIndicatorGuiPrefab - Mostra sopra la testa di un Giocatorequando è stato tagliato fuori dal round.
Dopo aver creato un oggetto BillboardGui , puoi creare e personalizzare il suo figlio GuiObjects in base allo scopo di ciascun container. Per dimostrare, nelle sezioni immediate che Seguire, imparerai a implementare gli elementi UI per entrambi i tipi di indicatore all'interno dell'esperienza laser di campionamento. Puoi regolare
Per creare un oggetto BillboardGui :
- Nella finestra Explorer, passa il mouse su un BasePart o Attachment, quindi fai clic sull'Icona2> ⊕2>. Viene visualizzato un menu contestuale.
- Dal menu contestuale, inserisci un oggetto BillboardGui .
- Rinomina il BillboardGui in base al contesto dei suoi elementi UI figli.
- Ripeti questo processo per ogni elemento UI che devi mostrare contestualmente alle teste dei giocatori.
Indicatore di squadra
Un indicatore di squadra è un elemento UI che informa i giocatori su quale squadra appartengono gli altri giocatori in round in modo che possano facilmente distinguere tra i loro alleati e i membri del team nemico. Questa informazione è importante poiché il gameplay di un'esperienza di sparatore in prima persona richiede ai giocatori di prendere rapidamente decisioni strategiche mentre sono in aree di combattimento in modo da non essere etichettati e perdere la Corrisponde.
Per ricreare esattamente l'indicatore del team all'interno dell'esperienza Laser Tag :
Inserisci un oggetto BillboardGui in un Piattaforma di testtemporaneo.
Nella barra dei menu, fai clic sulla scheda Avatar , quindi fai clic su Rig Builder.
Seleziona tra le opzioni disponibili. Il campione utilizza un R15 inserisci / scrividi attrezzatura, una forma del corpo femminile e un Rthro Avatar. Il rig viene visualizzato sia nella vista 3D che nella finestra 2> Explorer2> sotto il nome 5> Rig5>.
Nella finestra Explorer , fai clic sulla Head Mesh, magliadel figlio della Piattaforma di test, quindi fai clic sul pulsante ⊕ . Viene visualizzato un menu contestuale.
Dal menu contestuale, inserisci un BillboardGui .
Seleziona il nuovo BillboardGui , quindi nella finestra Proprietà ,
Imposta LightInfluence su 0 per prevenire l'influenza ambientale sulla colorazione dell'indicatore.
Imposta Nome su OtherPlayerIndicatorPrefab .
Imposta Dimensione su {0, 10},{0, 10} per rendere il titolo significativamente più piccolo.
Imposta StudsOffsetWorldSpace su 0, 4, 0 per posizionarlo sopra la testa del Piattaforma di test.
Inserisci un oggetto Frame in OtherPlayerIndicatorPrefab .
Seleziona la nuova finestra, quindi nella Finestra Proprietà ,
Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della frase nel suo centro (50% dalla sinistra alla destra dell'Etichetta, e 50% dalla parte superiore alla parte inferiore dell'Etichetta).
Imposta BackgroundColor3 su 255, 3, 0 per impostare il colore di sfondo del frame come colore di riferimento.
Imposta Posizione su 0.5, 0,0.5, 0 #0.5, 0,0.5, 0 per impostare il frame al centro del suo container (50% dalla sinistra alla destra del padre BillboardGui e 50% dalla parte superiore alla parte inferiore del padre BillboardGui).
Imposta Dimensione a {1, -2},{1, -2} per ridimensionare il frame sulla superficie dell'area pubblicitaria del BillboardGui.
Inserisci un oggetto UICorner in Frame per completamente arrotondare gli angoli.
Inserisci un oggetto UIStroke in Frame per contornare il cerchio dell'indicatore.
Sposta OtherPlayerIndicatorPrefab in ReplicatedStorage .
Fai riferimento allo script di esempio seguente ReplicatedStorage all'interno del campione Laser Tag 1A luogo file che programmaticamente mostra l'indicatore del team per ogni giocatore in un round attivo a meno che non siano sul team nemico e non siano offuscati.
Lo script seguente ReplicatedStorage.OtherPlayerIndicatorGuiSetup viene eseguito quando i giocatori vengono generati nell'arena per un round attivo. Aggiunge il team indicator chiamando la funzione addIndicatorToCharacter() , che localizza l'oggetto Head
Se altri giocatori sono nella stessa team, l'indicatore della squadra viene sempre visualizzato, anche se si trovano dietro gli oggetti nello Spazio3D; se altri giocatori sono nella teamnemica, l'indicatore della squadra viene visualizzato solo se non c'è un oggetto nello spazio 3D per schiararli.
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, creando 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 alto 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, i segnaposto di squadra vengono visualizzati sopra le teste di altri giocatori a meno che non siano nel team nemico e dietro un oggetto.
Indicatore a forma di tag
Un indicatore non contrassegnato è un elemento UI che informa i giocatori quando altri giocatori non sono più attivi nella partita e sono in corso di respawning back to their spawn zone. Questa informazione è importante poiché il gameplay di un'esperienza di sparatore in prima persona richiede ai giocatori di passare al loro prossimo obiettivo non appena tag out un giocatore in modo che non diventino vulnerabili nell'arena giocando nello stesso luogo per troppo tempo.
Per ricreare esattamente l'indicatore a taglio all'interno dell'esperienza Laser Tag :
Inserisci un oggetto BillboardGui in un rig temporaneo in modo da poter visualizzare le modifiche in ogni fase del processo.
Nella barra dei menu, fai clic sulla scheda Avatar , quindi fai clic su Rig Builder.
Seleziona tra le opzioni disponibili. Il campione utilizza un R15 inserisci / scrividi attrezzatura, una forma di corpo maschile e un Rthro Avatar. Il rig viene visualizzato sia nella vista 3D che nella finestra 2> Explorer2> sotto il nome 5> Rig5>.
Nella finestra Explorer , fai clic sulla Head Mesh, magliadel figlio della Piattaforma di test, quindi fai clic sul pulsante ⊕ . Viene visualizzato un menu contestuale.
Dal menu contestuale, inserisci un BillboardGui .
Seleziona il nuovo BillboardGui , quindi nella finestra Proprietà ,
Imposta LightInfluence su 0 per prevenire l'influenza ambientale sulla colorazione dell'indicatore.
Imposta Nome su TaggedOutIndicatorGuiPrefab .
Imposta Dimensione su 3, 0,0.5, 0 5> per allargare lo spazio per un'Etichetta.
Imposta StudsOffset su 0, 3.25, 0 per posizionarlo sopra la testa di un Giocatore.
Inserisci un oggetto ImageLabel in TaggedOutIndicatorGuiPrefab .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
- Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della Etichettanel suo centro (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
- Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
- Imposta Nome su Frame .
- Imposta Posizione su 0.5, 0,0.5, 0 #> per impostare l'etichetta al centro del suo container (50% dalla sinistra alla destra del padre BillboardGui e 50% dalla parte superiore alla parte inferiore del padre BillboardGui).
- Imposta Dimensione su {1, 0},{1, 0} per allargare l'etichetta a tutto il BillboardGui (100% orizzontalmente e 100% verticalmente del padre BillboardGui).
- Imposta Image su rbxassetid://14304826985 per rendere l'immagine un'immagine a più direzioni.
- Imposta ColorImage su 245, 46, 46 per schiarare il titolo rosso.
Per migliorare le Prestazione, puoi saltare la risorsa dell'immagine e invece utilizzare un oggetto UIGradient con una sequenza di numero di trasparenza personalizzata. Per saperne di più su questa tecnica di svanimento, vedi Apparizione UI - Gradient.
Inserisci un oggetto TextLabel in Frame .
Seleziona la nuova Etichetta, quindi nella finestra Proprietà ,
Imposta AnchorPoint su 0.5, 0.5 per impostare il punto di origine della Etichettanel suo centro (50% dalla sinistra alla destra della Etichetta, e 50% dalla parte superiore alla parte inferiore della Etichetta).
Imposta Trasparenza di sfondo su 1 per rendere il background del Etichettacompletamente trasparente.
Imposta Nome su BodyTextLabel .
Imposta Posizione su 0.5, 0,0.5, 0 5> per impostare l'etichetta al centro del suo container (50% dalla sinistra alla destra della Etichettapadre, e 50% dalla parte superiore alla parte inferiore della Etichettapadre).
Imposta Dimensione su {0.85, 0},{0.7, 0} in modo che il testo possa occupare la maggior parte dell'area di svanimento (85% orizzontalmente e 70% verticalmente della Etichettadell'immagine padre).
Imposta FontFace su Montserrat per adattarsi all'estetica futuristica.
Imposta Peso su Bold per rendere più spesso il carattere.
Imposta Text su TAGGED .
Imposta TextColor3 su 255, 255, 255 per rendere il testo bianco.
Abilita TextScaled .
Sposta TaggedOutIndicatorGuiPrefab a ReplicatedStorage .
Fai riferimento agli script seguenti ServerScriptService gli script all'interno del campione Laser Tag 1A luogo file che programmaticamente visualizza il segnaposto uscito mentre un giocatore respawning back to their team's spawn zone.
Il seguente ServerScriptService.SetupHumanoid script del server viene eseguito non appena un giocatore carica l'esperienza. Garanzie che ogni volta che un Giocatoreil loro personaggio viene 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 i futuri spawn di personaggi per questo Giocatore
player.CharacterAdded:Connect(function(character: Model)
onCharacterAdded(player, character)
end)
end
-- Chiama onPlayerAdded per qualsiasi giocatore già in Gioco
for _, player in Players:GetPlayers() do
onPlayerAdded(player)
end
-- Chiamata suPlayerAdded per tutti i futuri giocatori
Players.PlayerAdded:Connect(onPlayerAdded)
Ora, ogni volta che la salute di un Giocatoreraggiunge zero, l'indicatore a forma di taglia viene visualizzato sopra la loro testa fino a quando non respawna.
Congratulazioni per aver completato il corso di progettazione dell'interfaccia utente! Ora che hai esperienza nella creazione di uno stile di arte, nella wireframing dei tuoi layout e nell'implementazione dei tuoi design in Studio dall'inizio alla fine, puoi estendere il tuo progetto con nuovi UI e funzionalità, o seguire i curricoli di tutorial aggiuntivi, come il Gameplay Scripting Curriculum che ti insegna le generali informazioni sull'organ