Share
Unreal 3 Editor est un puissant outil de développement de jeux gratuit avec la plupart des jeux Unreal 3 (Unreal Tournament, Gears of War, Roboblitz). Devenu rapidement un outil standard dans l’industrie du développement de jeux, il est reconnu pour conférer beaucoup de pouvoir directement à l’artiste, en particulier grâce à son éditeur de matériaux basé sur des nœuds..
Ce didacticiel offre une introduction à l'éditeur de matériaux d'Unreal et ne suppose aucune connaissance préalable de l'outil, ni la présence d'outils autres que l'éditeur. Grâce à la création d'un matériau (ou «shader») «moniteur scintillant», ce tutoriel présentera certaines des fonctionnalités puissantes que l'éditeur de matériau est capable de créer..
Ce didacticiel a été créé à l'aide de la version d'Unreal Editor fourni avec Unreal Tournament 3, mais est susceptible de fonctionner avec d'autres versions de l'éditeur..
Vous devez d’abord obtenir les fichiers que nous utiliserons pour créer notre shader. Vous pouvez les récupérer en utilisant le lien de téléchargement ci-dessous. Vous aurez besoin à la fois des fichiers Text.tga et Panner.tga, car nous allons les utiliser pour créer un shader à l'ancienne "écran d'ordinateur" (avec clignotement rouge et clignotant)..
Télécharger
Lancez l'éditeur Unreal en lançant d'abord Unreal Frontend, situé dans le dossier «Binaries» de tout jeu basé sur Unreal que vous possédez (vous devrez peut-être rechercher UnrealFrontend.exe). Exécutez le fichier UnrealFrontend.exe, puis cliquez sur le bouton 'éditeur' pour lancer l'éditeur..
L'éditeur Unreal est un outil complexe, mais nous ne nous concentrons que sur une petite partie de celui-ci. Une fois qu'il s'ouvre, cliquez sur le bouton 'Navigateur générique' pour ouvrir le 'Navigateur générique', qui est l'outil de gestion des actifs d'Unreal..
Dans le 'Navigateur générique', cliquez sur "Fichier> Importer". Accédez à l'emplacement où vous avez enregistré les images source de l'étape 1 et sélectionnez Text.tga. Après un moment, une boîte de dialogue Options d'importation apparaîtra. Tous les défauts sont bons sauf un; Lorsque la boîte de dialogue vous demande le nom d'un "package", tapez "Moniteur". Suivez la même procédure pour Panner.tga. Unreal organise les fichiers dans "Packages". Désormais, nos deux images source doivent être importées dans un package appelé 'Moniteur' (voir deuxième image).
Maintenant que nous avons importé nos images sources, nous pouvons configurer notre shader. Pour ce faire, cliquez avec le bouton droit de la souris sur l'arrière-plan gris du 'Navigateur générique' et choisissez 'Nouveau matériau'. Dans la boîte de dialogue suivante, attribuez à la matière un nom comme "Écran". Lorsque vous cliquez sur ok, le 'Material Editor' s'ouvre.
C'est maintenant que les choses s'amusent! L'éditeur de matériaux comporte quatre zones principales: la grande zone grise au centre correspond à l'espace de travail; elle contient des entrées dans les principaux canaux du shader, la zone sombre à gauche représente un aperçu 3D du matériau, l'espace en bas de l'écran contient les options matérielles et la colonne à droite, une liste de toutes les expressions matérielles (nœuds) que vous pouvez utiliser pour construire votre matériau..
Faites défiler cette liste jusqu'à ce que vous en trouviez un nommé "Exemple de texture". "Glissez et déposez" l'échantillon de texture sur l'espace de travail (à l'aide du bouton gauche de la souris), et un nœud 'Exemple de texture' sera créé. Vous pouvez déplacer le nœud en cliquant dessus pour le sélectionner, puis "ctr l + clic gauche" et en le faisant glisser. Vous pouvez naviguer dans l’espace de travail en faisant un clic droit sur l’arrière-plan gris et en le faisant glisser..
Déplacez le «Material Editor» pour un moment afin que vous puissiez voir à nouveau le «navigateur générique». Cliquez sur l'image source 'Texte' importée précédemment pour la sélectionner. Revenez immédiatement dans l'éditeur de matériaux et sélectionnez le nœud d'échantillon de texture. Sous les options, il devrait y avoir une ligne indiquant «Texture: Aucune». Cliquez sur la flèche verte, à droite de cette ligne, pour lier la sélection du "Navigateur générique" au "Exemple de texture"..
Ajoutez un autre noeud "Exemple de texture" et liez-le à l'image source "Panner", de la même manière que vous avez lié l'image "Texte". Nous n'allons pas encore l'utiliser, mais nous le ferons éventuellement. Vous devriez avoir quelque chose comme l'image ci-dessous.
Bien que nous ayons placé nos images sources dans l'espace de travail, nous ne les avons pas encore connectées aux entrées du matériau. Cliquez et faites glisser sur le carré NOIR à gauche de l'échantillon de texture 'Texte' nommé. Ceci est une "sortie". Les sorties sont toujours à gauche d'un nœud. Un fil devrait apparaître, à la suite de votre curseur lorsque vous faites glisser le curseur. Relâchez le curseur sur le canal d'entrée «Emissive» du shader.
Le "texte" vert devrait apparaître sur l'objet de prévisualisation à gauche. Par défaut, l'aperçu est une sphère, mais vous pouvez trouver un cylindre ou un cube plus performant. Il y a des boutons en haut de la fenêtre d'aperçu pour basculer entre les objets d'aperçu.
Cliquez sur le premier des trois coches. Ceci applique vos modifications au matériau. Félicitations, vous avez construit un shader dans Unreal! Malheureusement, c'est très ennuyeux, le reste de ce didacticiel consistera donc à le pimenter. Le moment est venu de sauvegarder votre paquet dans le «navigateur générique»..
Pour commencer, supposons que nous essayons de créer un écran de moniteur plus ancien, semblable à ce que vous verriez dans une base militaire de la guerre froide. Donner à l'écran un «scintillement» est un bon moyen d'introduire de la vie dans le matériau. L’une des manières les plus simples de procéder consiste à passer rapidement d’une version à l’autre de notre image «Texte»..
Cliquez avec le bouton droit de la souris sur l'onglet de sortie NOIR de l'échantillon de texture 'Texte' et choisissez 'Rompre le lien'. Dans la liste "Expression matérielle", cliquez et faites glisser un nœud de chacun des éléments suivants: Multiplier, Constante, Interpolation linéaire, Temps et Sinus. Essayez et arrangez-les comme sur l'image ci-dessous.
Connectez maintenant l’échantillon de texture 'Texte' à l’une des entrées de la multiplication. Connectez le noeud 'Constant' à l'autre entrée de la multiplication. N'oubliez pas que les entrées sont toujours à droite d'un nœud et les sorties à gauche. Le 'Material Editor' d'Unreal se déroule toujours de droite à gauche. Une fois que vous avez connecté l'échantillon de texture 'Constante' et 'Texte', cliquez sur le nœud 'Constante'. Dans les options situées au bas de l'éditeur, vous devriez voir un champ de saisie intitulé "R". Vous pouvez changer la valeur de la constante ici. Changez-le en '1.2'. Cela nous donne une version plus lumineuse de notre image 'Texte' sortant du noeud multiply..
Le nœud «Interpolation linéaire» vous permet de passer progressivement d’une image à l’autre, ou dans notre cas, entre notre image «Texte» originale et notre nouvelle version plus lumineuse. Raccordez les nœuds comme indiqué dans l'image ci-dessous.
La seule chose qui nous manque maintenant, c’est un alpha pour expliquer comment les deux versions de notre mélange d’images «Texte». L'entrée «alpha» du nœud «Interpolation linéaire» nécessite des précautions particulières. Tout ne peut pas y entrer. C'est limité à un seul "canal" d'information. Nous y reviendrons plus tard.
"Sinus" et "Temps" sont une combinaison de nœuds communs qui vous donne une valeur qui oscille constamment entre "0" et "1" (enfin, techniquement, "-1", mais ce n'est pas grave). Il est important de noter qu'Unreal verra la valeur "0" comme couleur noire. Une valeur de '1' sera blanche. Donc, configurez les nœuds 'Sine' et 'Time' comme ci-dessous, puis connectez le 'Interpolation linéaire' à l'entrée 'Emissive' du matériau, et vous obtiendrez un matériau qui a une belle impulsion. Si l'effet n'est pas assez exagéré pour vous, vous pouvez alors augmenter la constante jusqu'à un nombre plus élevé. Expérimentez pour voir ce que vous obtenez!
Cet effet est idéal pour un écran à impulsions, mais pour lui donner l’impression que l’écran scintille, nous devons augmenter la vitesse du pouls. Cliquez sur le noeud "Sinus" et changez la "Période" de "1.0" à "0.1". Maintenant, il devrait vraiment ressembler à un ancien moniteur CRT avec un mauvais scintillement.
Pour ranger un peu les choses, maintenez la touche "Alt + Ctrl" enfoncée et cliquez en haut à gauche sur nos nœuds. Faites glisser en bas à droite pour créer une boîte de sélection. Lorsque vous le lâchez, tous les nœuds dans lesquels vous avez boxé sont sélectionnés. Appuyez sur la touche «c» pour créer une boîte de commentaire et nommez-la «scintillement». Maintenant, lorsque vous cliquez sur le nom «Scintillement», vous pourrez déplacer tout le groupe (maintenez la touche de contrôle enfoncée et faites glisser). Déplacez le groupe 'Scintillement' un peu à droite pour vous donner plus de place.
Utilisons maintenant l’échantillon de texture 'Panner' que nous avons ajouté plus tôt pour donner l’impression que notre shader d’écran a un problème de rafraîchissement / balayage. Pour ce faire, nous allons faire défiler l'image avec une barre horizontale..
Accédez à la liste "Expressions sur les matières" et ajoutez un nœud "Panoramique". Ce nœud vous permet de faire défiler un nœud d’échantillon de texture. Raccordez le nœud 'Panner' avec notre échantillon de texture 'Panner', puis raccordez-le à l'entrée 'Emissive' du matériau. Par défaut, le nœud "Panner" a une vitesse de "0", cliquez dessus et changez sa "Vitesse Y" en "-0.2". Le seul problème avec cela à présent est qu’il s’agit d’un parchemin blanc, et nous devons le mélanger à notre scintillement vert..
Dans la liste "Expressions sur les matériaux", faites glisser un noeud "Ajouter" et un noeud "Masque de composant", puis connectez-les comme ci-dessous (toutes les images couleur dans Unreal sont composées de trois canaux de niveaux de gris à 8 bits: un rouge , un vert et un bleu). Le nœud 'Component Mask' nous permet de sélectionner un seul canal et de l'isoler. Sélectionnez le nœud «Masque de composant» et, dans ses options, cochez la case en regard de «G» (pour le vert). Câblez le nœud 'Component Mask' au nœud 'Add', avec notre échantillon de texture 'panoramique', mais n'utilisez pas la sortie NOIRE de l'échantillon de texture, utilisez plutôt celui VERT. Je vais entrer plus dans pourquoi plus tard.
Nous avons maintenant nos deux effets superposés, mais tout est blanc. C'est bon. Voici à quoi ressemblera notre chaîne "verte" finale. Nous allons recréer un résultat en couleur à la fin.
Sélectionnez le masque de composant, le sinusoïde, l'ajout, le panoramique et nos nœuds d'échantillonnage de texture, puis appuyez sur le curseur. Nommez leur groupe 'Barre horizontale' puis faites glisser vos deux groupes pour les ranger un peu.
Vous avez peut-être remarqué que le mot "Échec" dans l'image "Texte" d'origine n'apparaît plus dans la fenêtre d'aperçu du matériau. En effet, l'image originale «Texte» était entièrement ROUGE et, comme nous n'utilisons que le canal GREEN pour le moment, nous ne le verrons pas. Nous isolerons le canal ROUGE de l’échantillon de texture 'Texte' et ferons notre dernier effet sur celui-ci..
A présent, vous devriez en savoir presque assez pour créer l'image suivante à partir de zéro. C'est très similaire à la combinaison que nous avons utilisée pour créer l'effet scintillant. Vous pouvez cliquer avec le bouton droit de la souris sur l'échantillon de texture 'Texte' précédent et choisir 'Dupliquer' pour créer une seconde copie à utiliser ici..
Il y a trois différences majeures entre cette combinaison et la configuration «scintillante».
Si vous regardez la fenêtre d'aperçu du matériau, nous avons une version en niveaux de gris du mot 'Fail' clignotant. Ceci est une représentation en noir et blanc de tout ce qui sera rouge dans notre matériel final. Regroupez ces nœuds et appelez-les 'PulsingRedFail'
Pour combiner tout notre travail en un seul résultat couleur, utilisez un nœud 'Ajouter' dans la liste 'Expression matérielle'. Cela vous permet de recréer une image multicanal à partir de canaux 8 bits distincts. Vous devriez avoir un joli écran vert du début des années 90 avec un avertissement rouge clignotant en bas.
Si vous voyez un écran bleu sarcelle, assurez-vous que votre groupe "Barres horizontales" est configuré correctement (et que vous utilisez uniquement le canal vert à partir de l'exemple de texture "Panoramique"..
Voici le matériau final, et son apparence appliquée au modèle.
Cliquez sur l'image pour une version haute résolution
Vous devez maintenant avoir une compréhension de base de l’éditeur de matériaux dans Unreal, ainsi qu’une expérience des nœuds les plus courants. Vous pouvez créer de nombreux effets incroyables avec cet outil, alors amusez-vous à expérimenter!
Accentsconagua