Styles visuels du modèle Ville de démarrage

Le modèle Ville de démarrage présente le processus et les techniques que vous pouvez utiliser pour concevoir l'aspect d'une ville dans l'Unreal Editor pour Fortnite (UEFN).

Cette île représente une petite partie de la ville de New York, éclairée et stylisée de manière à ce que les Tortues Ninja (TMNT) s'y sentent chez elles ! Testez le modèle pour découvrir les rues et galeries souterraines de la ville.

Ce guide passe en revue les étapes que l'équipe a suivies pour conceptualiser et créer l'aspect du modèle. Il couvre les étapes suivantes :

• Développement d'éléments visuels à partir d'un concept

• Approches de disposition des ressources

• Techniques de post-traitement

• Techniques de style supplémentaires : skybox, éclairage et fenêtre personnalisés

• Idées de prolongement de l'expérience

Consultez les paramètres de post-traitement, de skybox et d'éclairage personnalisé, et apprenez à créer des éléments visuels stylisés de grande qualité.

Procédez comme suit pour accéder au modèle :

1. Ouvrez l'UEFN.

2. Accédez à Modèles de marque > Ville de démarrage.

3. Créez un nouveau projet.

Styles visuels

Le modèle Ville de démarrage propose deux grands styles esthétiques : Cartoon (dessin animé) et Comic (bande dessinée). Ces styles visuels ont été conçus pour correspondre au gameplay et aux thèmes des Tortues Ninja. Ils sont disponibles dans le modèle de l'UEFN via les volumes de post-traitement et dans les îles du mode Créatif via l'appareil de post-traitement. Ces styles ne sont pas propres aux outils de développement Tortues Ninja. Utilisez les techniques du modèle pour personnaliser davantage vos îles ou pour ajouter des éléments à ce modèle.

Filtre de style Cartoon	Filtre de style Comic

Ces styles ont été créés à partir des expériences Tortues Ninja existantes, tous formats confondus. L'équipe a collaboré avec Paramount pour établir des éléments emblématiques que les fans des Tortues Ninja reconnaîtront aisément. À partir d'illustrations d'origine et d'autres références, l'équipe s'est efforcée de conserver des éléments comme l'ombrage de celluloïd, les scènes au clair de lune sur les toits de la ville et les schémas de couleur.

Références de concept

Les éléments esthétiques cadrent parfaitement avec la mécanique et la narration de l'expérience. Ils regroupent entre autres la couleur, l'éclairage, les ressources et la disposition de la scène et permettent de créer une ambiance de qualité pour les joueurs.

Changer de style

À partir de l'éditeur, vous pouvez passer d'un style à l'autre à l'aide de l'organiseur. Dans l'organiseur, recherchez « postproccess » (post-traitement) pour accéder aux volumes PostProcessVolume_Cartoon et PostProcessVolume_Comic.

Changement de style dans le repaire des égouts.

Le style Cartoon (dessin animé) est actif par défaut. Procédez comme suit pour activer le style Comic (bande dessinée) :

1. Dans l'organiseur, désactivez l'icône d'œil de PostProcessVolume_Cartoon.

2. 1. Sélectionnez PostProcessVolume_Comic et, dans le panneau Détails, recherchez « blendweight ».

3. 1. Définissez la valeur Pondération de fusion sur 1.

Dans le gameplay du modèle, vous pouvez choisir le mode visuel à l'aide des interrupteurs muraux du repaire des égouts. Passez d'un style à l'autre, puis explorez les rues et les toits pour voir les ressources Tortues Ninja qui constituent la ville. Servez-vous du modèle pour créer votre expérience Tortues Ninja ou utiliser les techniques visuelles dans un autre projet.

Pour apprendre à affiner encore davantage les styles, consultez la rubrique Techniques de post-traitement sur cette page.

conception de niveau

Les filtres Cartoon et Comic ont certes leurs atouts, mais c'est la ville qui donne son âme au modèle. Les graphistes ont disposé les ressources de manière à créer un décor authentique pour les Tortues Ninja. Le recours aux ressources Tortues Ninja et Fortnite apporte de la complexité à la ville. L'organisation des ressources en vue de définir l'espace et le chemin que les joueurs emprunteront s'appelle jouer; conception de niveau.

La ville des Tortues Ninja, théâtre des aventures du joueur, à laquelle la ligne de toits en arrière-plan confère de la profondeur.

Centrer la ville

Ce modèle a été conçu à partir de choix qui définissent la ville. Bien que le modèle ne soit pas représentatif du jeu complet, il est axé sur le thème du jeu de plateformes, ce qui a contribué à sa conception. S'inscrire dans un genre permet de mieux définir l'espace de jeu. Ici, les graphistes ont placé des ressources détaillées, uniques en leur genre, essentiellement issues de l'univers des Tortues Ninja. L'idée est que les joueurs puissent accéder à ses ressources et les étudier.

Ces ressources participent au thème. En matière de style, elles ont un rôle essentiel à jouer. Elles peuvent contribuer à l'aspect visuel de l'expérience ou au contraire le détériorer. La disposition de ces ressources dans le niveau et le mode d'évolution du joueur dans la scène sont également des éléments prépondérants. Le modèle utilise des ressources supplémentaires comme des affiches, des enseignes en néon, des graffitis et des accessoires pour donner du caractère à l'environnement et renforcer encore le thème. Pour obtenir la liste complète des ressources, consultez la rubrique Utiliser les îles TMNT.

Ressources Channel 6 en style bande dessinée.

La définition de l'espace de jeu donne à l'équipe une idée de la manière de remplir l'espace pour créer le reste de la carte.

La carte est constituée d'un premier plan, d'un plan intermédiaire et d'un arrière-plan. Plus ils sont éloignés du centre, plus les bâtiments et fenêtres sont simplifiés. La ligne de toits sert d'arrière-plan et permet de cadrer le joueur dans l'environnement de la ville. Pour le repaire des égouts, des ressources très détaillées ont été utilisées pour inciter le joueur à explorer cet endroit dans ses moindres recoins.

Disposition des ressources du niveau de la ville	Disposition des ressources du repaire des égouts

Enfin, des éléments comme la lune, les fenêtres, l'éclairage et un filtre visuel sont utilisés pour saisir l'ambiance nocturne de la ville et l'accentuer.

Techniques de post-traitement

Les diverses techniques utilisées pour créer les styles visuels viennent souligner l'identité visuelle de la ville. Les volumes de post-traitement sont précisément la fonctionnalité principale de création des styles.

Le post-traitement est une superposition visuelle qui agit sur l'esthétique de parties choisies de votre île ou sur son ensemble. Chaque filtre voit ses paramètres de post-traitement, ainsi que les matériaux personnalisés responsables de l'aspect, ajustés. Pour en savoir plus sur le post-traitement et ses paramètres standard, consultez la rubrique Introduction au post-traitement.

Filtre de post-traitement Cartoon

Brouillard de profondeur

Le modèle utilise un effet de brouillard atmosphérique personnalisé via ses matériaux. Le brouillard donne de la couleur et de la profondeur à la ville. Vous pouvez vous servir des paramètres de matériau pour contrôler artistiquement les silhouettes des bâtiments et la couleur de la scène.

Pour en savoir plus sur les contrôles et effectuer des ajustements, consultez la rubrique Matériau de brouillard personnalisé sur cette page.

Ligne de toits au premier plan	Ligne de toits repoussée

Ombrage de celluloïd

Le matériau à ombrage de celluloïd aplatit l'éclairage et met en place une postérisation et des seuils d'éclairage. C'est ce qui donne un air de dessin animé à la scène.

Dans le modèle, cet effet est masqué au premier plan pour empêcher toute impression désagréable de distance. Ce masquage permet d'être fidèle aux arrière-plans des dessins animés et films d'animation de référence, d'apparence plus tamisée.

Valeur de shader de celluloïd 0	Valeur de shader de celluloïd 1

Contours

Les contours permettent de styliser encore davantage la scène pour lui conférer cette impression de dessin animé. Le matériau comprend des options de contrôle de l'épaisseur, de la couleur et de l'opacité via la profondeur. Ces paramètres permettent aux graphistes de renforcer les lignes au premier plan et de créer des contours complémentaires pour les bâtiments à mesure qu'ils s'estompent avec la distance.

Valeur de contour 0

Valeur de contour 1

Filtre de post-traitement Comic

Le filtre Comic (Noir) utilise des paramètres de post-traitement standard, le même ombrage de celluloïd et les mêmes matériaux de contour que le filtre Cartoon. Le matériau de contour a été ajusté pour compléter la gamme tonale de niveaux de gris. Les matériaux personnalisés du filtre comportent une postérisation, un ton de style Comic et un cadre. Le résultat en est un style très visuel qui rappelle une bande dessinée ou un roman graphique.

Ton de style BD et cadre

Le matériau de style Comic désature et applique des seuils de luminance pour conférer à la scène un ton de couleur imprimée. Le matériau de cadre est ensuite appliqué pour compléter l'aspect.

Valeur de ton de style BD et cadre 0	Valeur de ton de style BD et cadre 1

Postérisation

Pour rendre l'effet bande dessinée encore plus convaincant, l'image est postérisée à l'aide de bandes grises unies converties en diverses tailles de points. Plus le ton est sombre, plus le point est gros, jusqu'à ce qu'ils fusionnent pour former du noir. Les points sont alors fusionnés dans l'image en niveaux de gris, au niveau souhaité. Le matériau est utilisé à 25% de sa valeur pour diminuer la fatigue oculaire pendant le jeu.

Valeur de postérisation 0	Valeur de postérisation 1

Modifier les matériaux de post-traitement

Les matériaux sont à l'origine de l'effet de post-traitement utilisé dans les deux modes stylisés. Vous pouvez étudier la constitution de chaque matériau et y apporter des ajustements selon les besoins de votre projet. Vous pouvez également échanger les matériaux dans les volumes de post-traitement pour rapidement en retoucher le style.

Pour voir les matériaux personnalisés de chaque volume de post-traitement :

1. Cliquez sur le volume de post-traitement dans l'organiseur.

2. Accédez à panneau Détails > Fonctionnalités de rendu > Matériaux de post-traitement > Matrice.

Matériaux de post-traitement Cartoon	Matériaux de post-traitement Comic

Vous pouvez régler chaque valeur de matrice entre 0 et 1 afin d'examiner son effet sur les matériaux. Pour ouvrir l'emplacement de chaque matériau, cliquez sur l'icône de dossier. Ensuite, cliquez sur le matériau à examiner pour ouvrir l'éditeur de matériau. L'éditeur de matériau propose des réglages destinés aux graphistes dans le panneau Détails, tandis que d'autres ont des paramètres dans le graphique de matériau. Les paramètres destinés aux graphistes sont ceux du graphique de matériau affichés en tant que variables publiques. Pour en savoir plus sur les matériaux et sur l'éditeur, les fonctions et les expressions, consultez la rubrique Nœuds et paramètres de matériau.

Matériau de brouillard personnalisé

Parmi les paramètres de matériau destinés aux graphistes figurent ceux du matériau de brouillard de profondeur. Les valeurs de couleur du brouillard sont définies par des rampes de courbe qui permettent de régler avec précision les valeurs de brouillard sur la profondeur de scène. Cette méthode fournit un contrôle optimal pour créer un aspect stylisé du système de brouillard atmosphérique intégré de l'éditeur.

Contrôles du matériau de brouillard de profondeur.

Le matériau est constitué des paramètres centraux suivants, conçus pour permettre aux graphistes d'effectuer rapidement des ajustements. Vous pouvez accéder à ces valeurs dans le panneau Détails du matériau ou via le graphique de matériau.

Le matériau de brouillard est un exemple de la manière d'ouvrir chaque matériau pour effectuer des modifications. Les autres matériaux obéissent aux mêmes principes. Pour vous entraîner à créer un nouveau matériau de post-traitement et en savoir plus sur le graphique de matériau, consultez la page Utiliser un matériau de post-traitement.

Autres techniques visuelles

Cette rubrique couvre des techniques avancées d'ambiance et de stylisation de l'éclairage et des fenêtres.

Ajuster la skybox procédurale

Une autre technique basée sur les matériaux est la skybox, qui est distincte du volume de post-traitement. Les deux filtres recourent à la personnalisation de la skybox procédurale pour créer une atmosphère stylisée. Le matériau est relié à une sphère de maillage statique qui englobe la carte. Les paramètres permettant aux graphistes d'effectuer rapidement des ajustements se trouvent dans le panneau Détails du matériau.

Les chemins ci-dessous vous donnent accès à l'outil Skybox :

• Organiseur > SkySphere > MI_ProceduralSkybox

• Tiroir à contenu > Nom de projet > Matériaux > MI_ProceduralSkybox

Double-cliquez sur le matériau pour ouvrir l'éditeur de matériau. La catégorie Groupes de paramètres abrite les paramètres de réglage, décrits dans le tableau ci-dessous, de la stylisation du ciel. Elle comprend une section Valeurs de paramètres de commutation statique globale pour basculer la netteté de l'horizon et de la lune.

Contrôles du matériau de skybox.

Paramètre de skybox	Description	Exemple
Valeurs du paramètre scalaire global	Ajuste les attributs de lune et d'atmosphère. Les contrôles permettent aux graphistes de styliser la lune et de lui donner de l'importance. Cette technique permet de concrétiser le concept bien connu des silhouettes des Tortues Ninja courant sur les toits au clair de lune.
Valeurs du paramètre de vecteur global	Ajuste la couleur des attributs du ciel. La skybox personnalisée procure davantage de contrôle sur le dégradé de couleurs du ciel et sur les biais de fusion. Le contrôle des couleurs est essentiel pour augmenter les valeurs de la ligne de toits par rapport aux gratte-ciel. Les autres commandes de couleur sont conçues pour apporter des petites touches au ciel au-delà de valeurs réalistes, pour mieux correspondre à la palette de couleurs stylisées.
Étoiles	Ajuste la transformation, la couleur, le quadrillage et la luminosité des étoiles.
Nuages	Ajuste la texture des nuages, la couverture nuageuse, l'atténuation des arêtes, les couleurs claires et sombres, la lumière des bords, l'opacité et la direction du mouvement des nuages. Cela permet au graphiste de composer un ciel plus dynamique et plus intéressant visuellement.

Vous pouvez poursuivre votre examen du matériau dans le graphique de matériau. Pour ouvrir le graphique de matériau, cliquez sur Hiérarchie > M_ProceduralSkybox dans la barre d'outils de l'éditeur de matériau. Le graphique s'ouvre avec des groupes de nœuds catégorisés en boîtes de commentaires, pour montrer quels paramètres ils concernent. Vous pouvez ajuster les nœuds pour redéfinir les paramètres.

Graphique de matériau pour la skybox procédurale.

Éclairage personnalisé

L'éclairage du modèle est intégré avec les volumes de post-traitement pour assurer une esthétique adéquate. L'éclairage contribue à l'ambiance et aide les joueurs à trouver leur chemin. Il permet aussi de définir les attributs des filtres de post-traitement. Des lumières d'ordre général ont été placées pour illuminer la ville, puis des lumières spécifiques pour mettre en évidence les bâtiments et les accessoires.

Éclairage d'ambiance

L'éclairage d'ambiance est l'art de placer précisément les lumières pour conférer un ton particulier à l'expérience.

Pendant la phase de conceptualisation, les graphistes examinent le matériel de référence (généralement appelé "mood boards") pour définir l'émotion communiquée et la direction de l'éclairage. Ce procédé est utilisé dans d'autres formes de narration, comme les films d'action, les animations et le théâtre.

C'est l'un des éléments suivants qui détermine la plus grande partie de l'éclairage d'ambiance de la scène :

• Lumière naturelle : commande la couleur ambiante de la scène et contrôle l'illumination la plus sombre pour les ombres.

• Éclairage directionnel : contrôle la position de la lune et la lumière provenant de la lune.

• Points lumineux : placés pour ajouter des touches de couleur de style dessin animé dans des zones qui seraient autrement moins intéressantes (le spéculaire est désactivé pour supprimer les taches de lumière créées par ces points).

• Les composants de lumière joints à un acteur.

• Matériaux émissifs.

Les lumières d'ambiance permettent aussi de conserver une qualité visuelle lorsque vous optimisez votre projet. La stylisation des lumières et des ressources préserve l'intérêt visuel sur les appareils bas de gamme.

Style BR Fornite classique	Style Cartoon	Style Comic

Pour en savoir plus sur les techniques d'éclairage infographique, consultez la rubrique Éclairage et couleur.

Windows

Plus vous vous éloignez du centre de la ville, plus les fenêtres de la scène se simplifient. Comme indiqué dans la conception de niveau, la simplification ajoute de la profondeur et permet d'optimiser la scène. Les fenêtres utilisent aussi des matériaux pour émettre de la lumière et soutenir encore davantage l'aspect stylisé. Le tableau ci-dessous décrit les diverses techniques utilisées pour les fenêtres.

Technique	Description	Exemple
Texture cubique intérieure	Une méthode reposant sur un matériau, pour donner l'apparence d'un espace 3D. Cette méthode est utilisée pour remplir les bâtiments dans lesquels les joueurs ne sont pas censés entrer, mais qui contribuent au décor. Pour accéder au matériau, cliquez sur Tiroir à contenu > Nom de projet > Matériaux > M_Windows_Interior.
Masque de fenêtre	Matériau qui randomise les positions des fenêtres pour apporter de la diversité aux bâtiments. Pour accéder au matériau, cliquez sur Tiroir à contenu > Nom de projet > Matériaux > M_WindowMask.
Valeur aléatoire issue de la position dans le monde	C'est la position de la fenêtre dans le monde qui détermine l'apparence d'une pièce, éclairée ou non. Tout matériau de fenêtre applique un décalage de position dans le monde à la couleur du matériau. Le décalage créer une luminosité aléatoire donnant de la vie à la ville. Cette méthode diminue le recours à des matériaux uniques et à la mémoire.
Matériau Cartoon Sheen	Diagonales appliquées à des fenêtres pour imiter un effet d'éclat stylisé. Tiroir à contenu > Nom de projet > Matériaux > M_Windows_Channel6.

Développer l'expérience

Après avoir appris les approches et techniques de création de l'esthétique du modèle, vous pouvez commencer à modifier la carte pour en faire le théâtre de votre expérience Tortues Ninja !

Parcourez le modèle et passez d'un style à l'autre pour imaginer les éléments de gameplay et de narration qui cadreront avec le filtre et la ville.

Voici quelques idées pour vous mettre le pied à l'étrier :

• Basez-vous sur le jeu de plateformes et enrichissez-le de rencontres d'ennemis. Pour apprendre à ajouter des rencontres, consultez la rubrique Obstacles et rencontres d'ennemis des Tortues Ninja.

• Utilisez les ressources de salle de presse comme scènes cinématiques de narration dans le style Comic. Consultez la rubrique Créer des scènes cinématiques pour en savoir plus.

• Avec l'outil Sequencer, rehaussez l'effet à l'aide de matériaux de type bulle de BD sous forme de boîtes de dialogue. Pour en savoir plus, consultez la rubrique Événements de jeu dans Sequencer.

Créer un style ensoleillé

À mesure que vous enrichissez le modèle ou intégrez des ressources à d'autres projets, commencez à concevoir une narration et un gameplay qui correspondent au décor de la ville et aux ressources Tortues Ninja. Pensez à l'ambiance que vous souhaitez donner et à quoi l'éclairage pourrait ressembler. Envisagez les parties de la carte que le joueur pourra explorer.

Référence de concept pour une carte de style ensoleillé avec rencontre de PNJ sur le toit.

Les volumes de post-traitement et les autres techniques visuelles vous permettent de donner vie à ce concept de ville ensoleillée.

Réglages de la skybox

D'abord, éclairez l'atmosphère avec la skybox procédurale. Procédez comme suit pour créer un ciel bleu :

1. Dans le tiroir à contenu, recherchez MI_ProceduralSkybox et double-cliquez pour ouvrir l'éditeur de matériau.

2. Dans le panneau Détails, réglez les valeurs ci-dessous comme suit :

   1. Ombre et lumière des nuages : RVB 1,0, 1,0, 1,0

   2. Couleur de l'horizon : RVB 0,0619, 0,970, 1,0

   3. Couleur supérieure : RVB 0,038, 0,119, 0,838

   4. Luminosité des étoiles : 0 (pour désactiver les étoiles)

   5. Luminosité de la lune : 9,5 (pour imiter le soleil)

Au lieu de régler la luminosité de la lune (Moon Brightness), vous pouvez aussi échanger la texture de lune dans le graphique de matériau avec votre propre image du soleil.

Réglages de la lumière

Le ciel bleu doit permettre au soleil et à la direction de sa lumière de mieux correspondre. Procédez comme suit pour régler la position du soleil et la direction de la lumière :

1. Dans l'organiseur, recherchez et sélectionnez DirectionalLight_Index1.

2. Faites pivoter la lumière vers la gauche pour définir une position plus élevée.

3. Dans le panneau Détails, faites passer l'intensité lumineuse à 6.

Ensuite, procédez comme suit pour éteindre les lumières des fenêtres de premier plan et de plan intermédiaire :

1. Cliquez sur une fenêtre de plan intermédiaire.

2. Dans la barre de menus, cliquez Sélectionner > Sélectionner tous les acteurs ayant le même matériau.

3. Supprimez l'ensemble de fenêtres.

4. Répétez les étapes pour les fenêtres de premier plan.

Supprimer les fenêtres lorsqu'elles ne sont pas nécessaires permet d'optimiser la scène.

Réglages du brouillard

Pour le mode ensoleillé, utilisez PostProcessVolume_Cartoon comme base. Procédez comme suit pour régler la profondeur et la couleur du brouillard :

1. Dans le tiroir à contenu, recherchez PP_DepthFog_Inst, puis double-cliquez sur le matériau pour ouvrir l'éditeur de matériau.

2. Dans le panneau Détails, double-cliquez sur la courbe de couleur Entrée de courbe.

3. Réglez les valeurs des clés de couleur du haut :

   1. Clé de couleur la plus à droite : RVB 0,022, 0,979, 0,629

   2. Clé de couleur centrale : RVB 0,0, 0,140, 0,307

   3. Clé de couleur la plus à gauche : RVB 0,208, 0,059, 0,117

Dans le panneau Détails de PP_DepthFog_Inst, attribuez les valeurs suivantes à la profondeur du dégradé de couleurs :

• Point éloigné de la courbe : 93511

• Point proche de la courbe : 14887

Réglages de postérisation

Enfin, ajoutez la postérisation pour créer un effet à points identique au mode Comic-Noir.

1. Dans le panneau Détails, sous Matériaux de post-traitement, ajoutez un élément de matrice de matériaux en cliquant sur l'icône **+**.

2. Dans le menu déroulant de la nouvelle matrice, choisissez Référence de ressource, puis recherchez et sélectionnez PP_Posterize.

3. Pour régler le degré de postérisation, sélectionnez le matériau et double-cliquez pour ouvrir l'éditeur de matériau.

4. Dans le panneau Paramètres, réglez Valeur de postérisation sur 0,05.

Avec quelques réglages des matériaux et lumières, la ville s'est réveillée sous un beau ciel bleu ! Maintenant, renvoyez les tortues dans leur repaire !