Il modello City Starter illustra il processo e le tecniche che puoi utilizzare per progettare l'aspetto di una città all'interno di Unreal Editor per Fortnite (UEFN).
Quest'isola contiene una piccola sezione di New York, illuminata e stilizzata per far sentire le Tartarughe Ninja (TMNT) come a casa loro! Gioca nel modello per sperimentare un punto di osservazione della città dal basso e dall'alto.
Questa guida esamina i passaggi compiuti dal team per concettualizzare e costruire l'aspetto del modello. Copre le seguenti aree:
Progettazione di grafiche a partire dal concept
Approcci al layout degli asset
Tecniche di post-elaborazione
Tecniche di stile aggiuntive: skybox, illuminazione e finestre personalizzati
Idee per espandere l'esperienza
Scopri la post-elaborazione, lo skybox e l'illuminazione personalizzati e impara a creare fantastiche grafiche stilizzate.
Questo non è un tutorial di gameplay. La mappa non include barriere nel livello. Puoi aggiungerle man mano che costruisci tua esperienza, utilizzando asset come il dispositivo Barriera. Per imparare a costruire una modalità di gioco arcade, che include una telecamera a scorrimento laterale e un'interfaccia utente (UI) personalizzata, consulta il Modello Arcade TMNT.
Per accedere al modello, segui questa procedura:
Apri UEFN.
Vai a Modelli a marchio > City Starter.
Crea un nuovo progetto.
Se non vedi il progetto nei Modelli a marchio, assicurati di aver eseguito l'iscrizione nel modo corretto. Per maggiori informazioni, vedi Regole del marchio TMNT.
Stile visivo
Il modello City Starter presenta due stili estetici di rilievo: cartone e fumetto. Questi stili grafici sono stati progettati per adattarsi al gameplay e ai temi di TMNT. I due stili sono disponibili nel modello UEFN attraverso i volumi di post-elaborazione e in isole creative con il dispositivo Post-elaborazione. Questi stili non sono esclusivi degli strumenti dello sviluppatore di TMNT. Utilizza le tecniche contenute nel modello per personalizzare ulteriormente le tue isole o per costruire sulla base di questo modello.
 |  |
Filtro cartone | Filtro stile fumetto |
Questi stili sono stati curati esaminando le esperienze TMNT a partire dai cartoni animati allo stile animato in 3D. Il team ha collaborato con la Paramount per stabilire gli elementi iconici che riprendono il mondo TMNT. Dai concept art e da altre opere di riferimento, il team ha notato elementi come il cel-shading, le scene sui tetti con la luna che si affaccia e gli schemi di colore.
Riferimenti concettuali
L'estetica è un elemento del design di gioco che si adatta alle meccaniche e alla narrazione dell'esperienza. L'estetica spazia dai colori, ai fulmini, agli asset e al layout della scena. Contribuisce a creare l'atmosfera dell'esperienza per i giocatori.
Cambiare gli stili
Dall'editor, puoi passare da uno stile all'altro utilizzando l'Outliner. Nell'Outliner, cerca "postproccess" per visualizzare entrambi i volumi PostProcessVolume_Cartoon e PostProcessVolume_Comic.
Commutatore di stile nel covo delle fogne.
Lo stile cartone è attivo per impostazione predefinita. Per abilitare lo stile fumetto, segui questa procedura:
Nell'Outliner, disattiva l'icona occhio per PostProcessVolume_Cartoon.
Seleziona PostProcessVolume_Comic e, nel pannello Dettagli, cerca "blendweight".
Imposta il valore Peso di fusione su 1.
Prima di eseguire il modello, assicurati di ripristinare le modifiche di cui sopra.
Nel modello di gameplay, puoi scegliere la modalità grafica nel covo delle fogne dai dispositivi Interruttore sulla parete. Scegli gli stili, poi esplora il livello strada e tetti per vedere gli asset TMNT che creano la città. Usa il modello come base per costruire la tua esperienza TMNT o per inserire le tecniche grafiche in un altro progetto.
Per sapere come regolare ulteriormente questi stili, consulta la sezione Tecniche di post-elaborazione di questa pagina.
Progettazione dei livelli
I filtri Cartone e Fumetto sono entrambi stili grafici di grande impatto, ma è la città che riunisce tutti gli aspetti del modello. Gli artisti hanno realizzato gli asset in modo da creare una città autentica per TMNT. L'uso degli asset di TMNT e Fortnite aggiunge livelli alla città. La disposizione degli asset per definire uno spazio e un percorso che i giocatori possono percorrere è chiamata design dei livelli.
La città di TMNT, con una sagoma dello skyline sullo sfondo per aggiungere profondità e avvolgere il giocatore.
Centra della città
Il modello è stato progettato a partire da scelte che definiscono la città. Anche se il modello non è un esempio di gioco completo, per aiutare a progettare il layout, il modello è dotato di un tema platform. Questo genere di gioco aiuta a definire lo spazio giocabile. All'interno dello spazio giocabile, gli artisti hanno inserito asset unici e dettagliati, soprattutto asset TMNT. L'idea è che i giocatori possano entrare negli asset ed esplorarli.
Questi asset servono a sostenere il tema. Quando pensi allo stile, devi tenere bene a mente gli asset. Possono migliorare o rovinare l'aspetto grafico dell'esperienza. Anche la disposizione di questi asset nel livello e il modo in cui il giocatore naviga nella scena sono due aspetti che rivestono un ruolo importante. Il modello utilizza asset aggiuntivi come poster, insegne al neon, graffiti, oggetti scenografici, tutto per caratterizzare questo mondo e definire ulteriormente il tema. Per l'elenco completo degli asset, vedi Lavorare con le isole TMNT.
Asset di Channel 6 in modalità stile fumetto.
Con lo spazio giocabile definito, il team ha un'idea di come costruire il resto della mappa per riempire lo spazio.
La mappa è composta da un primo piano, da una zona centrale e da uno sfondo. Gli edifici e le finestre si semplificano, man mano che si allontanano dal centro. Lo skyline crea lo sfondo della mappa, avvolgendo il giocatore all'interno della città. Per il covo delle fogne sono stati inseriti asset molto dettagliati, perché l'intenzione del giocatore è quella di esplorare ogni parte dell'area.
 |  |
Layout asset a livello città | Layout asset del covo delle fogne |
Infine, per catturare la sensazione della vita notturna della città, vengono utilizzati elementi d'atmosfera come la luna, le finestre, l'illuminazione e un filtro grafico.
Tecniche di post-elaborazione
Ciò che enfatizza l'atmosfera cittadina sono le varie tecniche utilizzate per creare gli stili grafici. I volumi di post-elaborazione sono la caratteristica principale utilizzata per creare gli stili.
La post-elaborazione è una sovrapposizione grafica che influisce sull'estetica dell'isola nel suo complesso o su parti selezionate. Ciascun filtro è dotato di impostazioni standard di post-elaborazione e di materiali personalizzati che ne determinano l'aspetto. Per saperne di più sulla post-elaborazione e sulle relative impostazioni standard, consulta Introduzione alla post-elaborazione.
Filtro post-elaborazione effetto cartone
Nebbia di profondità
Nei vari materiali, il modello utilizza un effetto atmosferico nebbia personalizzato. La nebbia aggiunge colore e aiuta a dare profondità alla città. Puoi utilizzare le impostazioni dei materiali per controllare artisticamente le sagome degli edifici e il colore della scena.
Per saperne di più sui controlli per effettuare le regolazioni, consulta la sezione Materiale personalizzato nebbia della pagina.
 |  |
Skyline della città in primo piano | Skyline della città in secondo piano |
Cel-shader
Il materiale cel-shader appiattisce l'illuminazione e introduce alcune soglie e posterizzazioni della luce. Ciò aiuta la scena ad avere un aspetto più da cartone animato.
Nel modello, l'effetto è mascherato in primo piano per evitare che la distanza appaia eccessiva. Dato che i cartoni animati e gli anime di riferimento hanno spesso sfondi dipinti con colori più morbidi, la mascheratura ne mantiene l'aspetto.
 |  |
Valore cel-shader 0 | Valore cel-shader 1 |
Contorni
I contorni aiutano a stilizzare ulteriormente la scena per creare un'atmosfera da cartone animato. Il materiale include opzioni per controllare lo spessore, il colore e l'opacità attraverso la profondità. Con queste impostazioni, gli artisti hanno rafforzato le linee in primo piano e creato contorni complementari per gli edifici che si allontanano in lontananza.
Filtro post-elaborazione effetto fumetti
Il filtro Fumetto (noir) utilizza alcune impostazioni di post-elaborazione standard e materiali cel-shader e di contorno simili a quelli del filtro Cartone. Il materiale di contorno è stato regolato per adattarsi alla gamma tonale della scala di grigi. Gli esclusivi materiali personalizzati del filtro includono la posterizzazione, i toni da fumetto e un frame. Il risultato è uno stile altamente grafico che ricorda un fumetto o una graphic novel.
Tonalità e frame da fumetto
Il materiale per la tonalità da fumetto desatura e applica soglie di luminanza per conferire alla scena una gamma tonale da stampa. Il materiale del frame viene poi applicato per completare il look.
 |  |
Tonalità da fumetto e valore del frame 0 | Tonalità da fumetto e valore del frame 1 |
Posterizzazione
Per rendere l'effetto fumetto ancora più convincente, l'immagine viene posterizzata con strisce solide di grigio, convertite in punti di varie dimensioni. Più scuro è la tonalità, più grande è il punto, fino a quando i due non si fondono per formare il nero puro. I punti vengono poi uniti nell'immagine in scala di grigi nella quantità desiderata. Il materiale viene utilizzato al 25% del suo valore per ridurre l'affaticamento degli occhi durante il gameplay.
 |  |
Valore di posterizzazione 0 | Valore di posterizzazione 1 |
Modifica dei materiali di post-elaborazione
I materiali determinano l'effetto di post-elaborazione che vedi in entrambe le modalità stilizzate. Puoi esplorare la build di ogni materiale e apportarvi modifiche per adattarlo al tuo progetto. Puoi anche scambiare i materiali nei volumi di post-elaborazione per modificare rapidamente lo stile.
Per visualizzare i materiali personalizzati per ogni volume post-elaborato:
Nell'Outliner, fai clic sul volume di post-elaborazione.
Vai al Pannello Dettagli > Funzionalità di rendering > Materiali di post-elaborazione > Array.
 |  |
Materiali di post-elaborazione effetto cartone | Materiali di post-elaborazione effetto fumetto |
Puoi regolare ogni valore dell'array tra 0 e 1 per esaminare l'effetto di ogni materiale. Per aprire la posizione di ciascun materiale, fai clic sull'icona della cartella. Quindi, fai clic sul materiale che vuoi esaminare per aprire l'Editor materiali. L'Editor materiali offre alcune impostazioni da artista nel pannello Dettagli, mentre altre dispongono di parametri nel Grafico materiale. Le impostazioni adatte agli artisti sono parametri del Grafico materiale, esposti come variabili pubbliche. Per saperne di più sui materiali, incluso l'editor, le funzioni e le espressioni, consulta Nodi e impostazioni dei materiali.
Materiale personalizzato nebbia
Un esempio di impostazioni da artista in un materiale sono i parametri configurati per il materiale della nebbia di profondità. I valori di colore della nebbia sono impostati da rampe di curve, che forniscono un modo flessibile per regolare con precisione i valori della nebbia sulla profondità della scena. Questo metodo offre un maggior controllo per creare un aspetto stilizzato, rispetto al sistema di nebbia atmosferica integrato nell'editor.
Controlli per il materiale della nebbia di profondità.
Il materiale è composto dai seguenti parametri fondamentali, progettati per consentire agli artisti di effettuare rapidamente le regolazioni. Puoi accedere a questi valori nel pannello Dettagli del materiale o entrare nel Grafico materiale e regolare i valori predefiniti.
| Parametro nebbia | Descrizione |
|---|---|
Curva Punto lontano e Punto vicino | Imposta la distanza vicina e lontana a cui è mappata la rampa dell'asset curva. I colori della rampa a sinistra corrispondono al Punto vicino e il lato destro della rampa invece al Punto lontano. |
Input curva | Fornisce una curva di colore per regolare i colori sfumati della nebbia. Per aprire la curva, fai doppio clic sull'icona. Per saperne di più, consulta la documentazione di Unreal Engine Atlanti curva nei materiali. |
Quantità globale | Imposta la percentuale di visibilità della rampa di nebbia. |
Cutoff intervallo | Imposta la soglia della profondità della scena. Puoi utilizzare i valori dell'intervallo per controllare se la nebbia viene applicata allo skybox. |
Il materiale nebbia è un esempio di come puoi aprire ogni materiale per effettuare le regolazioni. Gli altri materiali seguono gli stessi principi. Per esercitarti a creare un nuovo materiale di post-elaborazione e conoscere il grafico dei materiali, consulta Utilizzo di un materiale di post-elaborazione.
Tecniche grafiche aggiuntive
Questa sezione tratta alcune tecniche utilizzate con l'illuminazione e le finestre per migliorare ulteriormente l'atmosfera e la stilizzazione.
Regolazione dello skybox procedurale
Un'altra tecnica basata sui materiali è lo skybox, che è separato dal volume post-elaborato. Entrambi i filtri utilizzano lo skybox procedurale personalizzato per creare un'atmosfera stilizzata. Il materiale è collegato a una sfera di mesh statica che comprende la mappa. I parametri adatti agli artisti sono esposti nel pannello Dettagli del materiale per una rapida regolazione.
Puoi accedere allo strumento Skybox da uno dei seguenti punti:
Outliner > SkySphere > MI_ProceduralSkybox
Cassetto dei contenuti > Nome del progetto > Materiali > MI_ProceduralSkybox
Fai doppio clic sul materiale per aprire l'Editor materiali. La categoria Gruppi di parametri contiene le impostazioni per regolare la stilizzazione del cielo, descritte nella tabella seguente. La categoria include un Interruttore statico globale valori dei parametri per regolare la nitidezza dell'orizzonte e della luna.
Controlli per il materiale skybox.
| Parametro skybox | Descrizione | Esempio |
|---|---|---|
Valori dei parametri scalari globali | Regola gli attributi della luna e dell'atmosfera. I controlli forniscono agli artisti gli strumenti per stilizzare la luna come elemento centrale. La tecnica realizza l'idea delle tartarughe TMNT che corrono sulle cime degli edifici con le loro sagome illuminate dalla luna. |  |
Valori dei parametri vettoriali globali | Regola il colore degli attributi del cielo. Lo skybox personalizzato offre un maggior controllo sui colori del gradiente del cielo e sulle bias di fusione. Questo controllo del colore è essenziale per migliorare i valori dello skyline rispetto ai grattacieli. I controlli aggiuntivi del colore sono stati pensati per modificare accuratamente il cielo al di là dei valori realistici, in modo da adattarlo maggiormente alla tavolozza dei colori stilizzati. |  |
Stelle | Regola la trasformazione, il colore, la disposizione e la luminosità delle stelle. |  |
Nuvole | Regola la mappa texture delle nuvole, la copertura nuvole, la morbidezza dei bordi, i colori chiari e scuri, la luce di contorno, l'opacità e la direzione del movimento delle nuvole. In questo modo, l'artista può comporre un cielo più dinamico e di maggiore interesse visivo. |
Con l'impostazione personalizzata del cielo e dell'illuminazione, il Gestione ora del giorno del mondo è disattivato nelle Impostazioni mondo.
Puoi esaminare ulteriormente il materiale dal Grafico materiale. Per aprire il Grafico materiale, nella barra degli strumenti dell'Editor materiali, fai clic su Gerarchia > M_ProceduralSkybox. Il grafico si apre con gruppi di nodi classificati in caselle di commento per mostrare quali parametri influenzano. Puoi regolare i nodi per ridefinire i parametri.
Grafico materiale per lo skybox procedurale.
Illuminazione personalizzata
L'illuminazione del modello è integrata con i volumi di post-elaborazione per garantire un'estetica adeguata. L'illuminazione aiuta a creare l'atmosfera e a fornire indicazioni ai giocatori. Inoltre, consente di definire gli attributi dei filtri di post-elaborazione. Sono state posizionate luci generali per illuminare la città, poi sono state aggiunte luci specifiche per evidenziare edifici e oggetti scenografici.
Illuminazione d'atmosfera
L'illuminazione d'atmosfera è il processo di posizionamento preciso di luci che hanno lo scopo di creare una particolare sensazione per l'esperienza.
Durante la fase di concettualizzazione, gli artisti esaminano il materiale di riferimento (spesso chiamato mood board) per definire l'emozione e la direzione dell'illuminazione. Questo processo viene utilizzato in altre forme di racconto come i film d'azione, le animazioni e il teatro dal vivo.
La maggior parte dell'illuminazione d'atmosfera della scena è creata da uno dei seguenti elementi:
Luce atmosferica: determina il colore ambientale della scena e controlla l'illuminazione più scura nelle ombre.
Luce direzionale: controlla la posizione della luna e la sua illuminazione.
Punti luce: posizionati per aggiungere un tocco di colore in aree che altrimenti potrebbero risultare meno interessanti. (Lo speculare è disattivato per rimuovere i punti luminosi creati da queste luci).
Componenti di luce collegati a un attore.
Materiali emissivi.
Le luci d'atmosfera aiutano anche a mantenere la qualità visiva quando si ottimizza il progetto. La stilizzazione delle luci e delle risorse mantiene l'interesse visivo sui dispositivi di fascia bassa.
 |  |  |
Stile Fornite BR classico | Stile cartone | Stile fumetto |
Per sapere di più sulle pratiche artistiche della luce, consulta Illuminazione e colore.
Windows
Più ti allontani dal centro della città, più le finestre nella scena si semplificano. Come si nota nella progettazione dei livelli, la semplificazione aggiunge profondità e aiuta a ottimizzare la scena. Le finestre fanno anche uso di materiali per emettere luce e sostenere ulteriormente l'aspetto stilizzato. La tabella seguente descrive le varie tecniche utilizzate per le finestre.
Viene utilizzato un dispositivo Sequenza giorno per controllare che le luci di sfondo dell'edificio basate sui materiali siano spente.
In questo esempio, il colore e lo stile di queste luci materiali non si adattavano all'estetica della città, quindi si è deciso di spegnerle e di creare luci personalizzate per le finestre.
| Tecnica | Descrizione | Esempio |
|---|---|---|
Cubemap interno | Un metodo di materiale per dare l'aspetto di uno spazio 3D. Il metodo è usato per riempire gli edifici in cui i giocatori non devono entrare, ma che possono vedere di sfuggita. Puoi accedere al materiale da Cassetto dei contenuti > Nome del progetto > Materiali > M_Windows_Interior. |  |
Maschera della finestra | Materiale che randomizza le posizioni delle finestre per dare varietà agli edifici dello sfondo. Puoi accedere al materiale da Cassetto dei contenuti > Nome del progetto > Materiali > M_WindowMask. |  |
Valore casuale dalla posizione del mondo | L'aspetto di una stanza, illuminata o meno, è determinato dalla posizione della finestra nel mondo. Ogni materiale finestra ha un offset di posizione nel mondo applicato al colore del materiale. L'offset crea un fattore di luminosità casuale per aggiungere vita alla città. Questo metodo riduce l'uso di materiali unici e di memoria. | |
Materiale lucentezza cartone animato | Linee diagonali applicate alle finestre per simulare un effetto di lucentezza stilizzato. Cassetto dei contenuti > Nome del progetto > Materiali > M_Windows_Channel6. |  |
Espandere l'esperienza
Dopo aver appreso gli approcci e le tecniche utilizzate per creare l'estetica chiave del modello, puoi iniziare a trasformare la mappa nella tua esperienza TMNT!
Esegui il modello e passa da uno stile all'altro per immaginare quali elementi di gioco e narrativi si adattano al filtro e alla città.
Ecco alcune idee per iniziare:
Costruisci sulla base del platformer e aggiungi incontri con i nemici in tutto il percorso. Per scoprire come aggiungere gli incontri, vedi Incontri con i nemici e ostacoli TMNT.
Utilizza gli asset di redazione come scene tagliate narrative con lo stile del fumetto. Per saperne di più, consulta Creazione sequenze cinematografiche e cutscene.
Migliora l'effetto con materiali starburst comici come finestre di dialogo che appaiono usando il Sequencer. Per saperne di più, visualizza la sezione Eventi di gameplay nel Sequencer.
Creare uno stile soleggiato
Quando costruisci su questo modello o estrai gli asset in altri progetti, parti da una base concettuale di quale narrazione e gameplay si adattano alla scena della città e agli asset TMNT. Pensa all'atmosfera che vuoi creare e all'illuminazione. Considera le parti della mappa che intendi far esplorare al giocatore.
Concetto di riferimento per una mappa in stile soleggiato con incontro di PNG sul tetto.
Con i volumi di post-elaborazione e le tecniche visive aggiuntive puoi prendere questo concetto di città in stile soleggiato e dargli vita.
Regolazioni di skybox
Per prima cosa, illumina l'atmosfera con lo skybox procedurale. Per creare un cielo blu, segui i seguenti passaggi:
Nel Cassetto dei contenuti, cerca MI_ProceduralSkybox e fai doppio clic per aprire l'Editor materiali.
Nel pannello Dettagli, regola i seguenti valori:
Nuvola scura e chiara: RGB 1,0, 1,0, 1,0
Colore orizzonte: RGB 0,0619, 0,970, 1,0
Colore superiore: RGB 0,038, 0,119, 0,838
Luminosità delle stelle: 0 (per disattivare le stelle)
Luminosità della luna: 9,5 (per imitare il sole)
In alternativa, invece di regolare la luminosità della luna, puoi scambiare la texture della luna nel grafico materiali con una tua immagine del sole.
Regolazioni della luce
Con il cielo blu, il sole e la sua direzione di luce devono corrispondere meglio. Per regolare la posizione del sole e la direzione della luce, procedi come segue:
Nell'Outliner, cerca e seleziona DirectionalLight_Index1.
Ruota la luce verso sinistra per impostare una posizione più alta.
Nel pannello Dettagli, aumenta l'intensità della luce a 6.
Per spegnere le luci delle finestre in primo e secondo piano, procedi come segue:
Fai clic su una finestra in primo piano.
Nella barra del menu, fai clic su Seleziona > Seleziona tutto con lo stesso materiale.
Elimina il set di finestre.
Ripeti i passaggi per le finestre in primo piano.
La rimozione delle finestre quando non sono necessarie aiuta a ottimizzare la scena.
Regolazioni della nebbia
Per la modalità soleggiata, utilizza PostProcessVolume_Cartoon come base. Per regolare la profondità e il colore della nebbia, procedi come segue:
Nel Cassetto dei contenuti, cerca PP_DepthFog_Inst e fai doppio clic sul materiale per aprire l'Editor materiali.
Nel pannello Dettagli, fai doppio clic sulla curva di colore Input della curva.
Regola i valori della chiave colore superiore:
Chiave colore all'estrema destra: RGB 0,022, 0,979, 0,629
Chiave colore centrale: RGB 0,0, 0,140, 0,307
Chiave colore all'estrema sinistra: RGB 0,208, 0,059, 0,117
Nel pannello Dettagli di PP_DepthFog_Inst, regola la profondità della rampa colore con i seguenti valori:
Curva punto lontano: 93511
Curva punto vicino: 14887
Regolazioni della posterizzazione
Infine, aggiungi la posterizzazione per creare un effetto punteggiato simile a quello della modalità Fumetto Noir.
Nel pannello Dettagli, sotto i Materiali di post-elaborazione, aggiungi un elemento dell'array di materiali facendo clic sull'icona più.
Dal menu a discesa del nuovo array, scegli Riferimento asset, quindi cerca e seleziona PP_Posterize.
Per regolare la quantità, vai fino al materiale e fai doppio clic per aprire l'Editor materiali.
Nel pannello Parametri, imposta Posterizza quantità su 0,05.
Con alcuni aggiustamenti ai materiali e alle luci hai risvegliato la città con un cielo azzurro! Ora porta le tartarughe nella loro tana in fretta.
