Dans ce didacticiel Unreal Engine 4, vous apprendrez à dessiner des couleurs sur n'importe quel type de maillage.
Le dessin de maillage permet aux joueurs de coloriser les objets du jeu. Exemples de dessin de maillage: graffiti (goop) dans
Super Mario Sunshine , gels dans
Portal 2 et encre dans
Splatoon . Le dessin peut être utilisé comme élément de gameplay ou simplement être une conception graphique. Quoi qu'il en soit, le dessin par maillage ouvre de nouvelles possibilités pour les concepteurs de gameplay et les artistes.
Bien que cet effet soit utilisé presque également dans les exemples ci-dessus, vous pouvez utiliser le dessin de maillage pour de nombreux autres effets. Par exemple, vous pouvez peindre sur des objets avec des pots de peinture, dessiner des blessures sur des personnages ou même laisser les joueurs dessiner leur propre visage!
Dans ce didacticiel, vous apprendrez à dessiner sur un maillage squelettique. Pour ce faire, nous procéderons comme suit:
- Développez le maillage dans sa forme UV
- Utilisez le point d'intersection de trace de ligne pour créer un masque de maillage sphérique
- Rendre le maillage étendu et le masque sphérique dans la cible de rendu à l'aide de la capture de scène
- Utilisez un masque pour mélanger les textures dans le matériau du personnage.
Notez que ce didacticiel
ne concerne
pas le dessin de sommets. Le dessin des sommets dépend de la résolution du maillage et ne peut pas être modifié pendant le jeu. La méthode utilisée dans ce tutoriel, en revanche, fonctionne quelle que soit la résolution du maillage et peut être utilisée pendant le jeu.
Remarque: il est entendu que vous connaissez déjà les bases de l'utilisation d'Unreal Engine. Si vous êtes nouveau sur Unreal Engine, consultez notre série de tutoriels en 10 parties Unreal Engine pour les débutants .
Remarque: ce didacticiel est la quatrième partie d'une série de didacticiels sur l'utilisation de cibles de rendu dans Unreal Engine:
Se rendre au travail
Commencez par télécharger le
matériel de ce didacticiel. Décompressez-les, accédez à
MeshPainterStarter et ouvrez
MeshPainter.uproject . Cliquez sur
Jouer pour voir le personnage que nous allons colorier.
Comme dans les tutoriels sur la neige et l'herbe, cette méthode nécessite également une capture de scène. Pour gagner du temps, j'ai déjà créé un plan pour capturer la scène. Si vous souhaitez en savoir plus sur les options de capture, lisez notre tutoriel sur la
création d'empreintes de pas dans la neige .
Voyons d'abord comment dessiner sur un maillage.
Dessin de maillage
Dans la plupart des cas, les mailles avec lesquelles vous devez travailler ont déjà un scan UV. Par conséquent, il serait logique de créer un masque à l'aide de la cible de rendu, puis de l'appliquer au maillage. Cependant, la génération d'un masque directement sur une cible de rendu (en utilisant Dessiner un matériau pour rendre la cible) entraîne généralement des cassures des coques UV.
Voici un exemple de scan de cube UV et de texture de masque sphérique:
Et voici le masque appliqué au cube:
Comme vous pouvez le voir, le masque sphérique dimensionnel 2D ne se plie pas autour des coins et ne prend pas en compte la géométrie. Pour générer le masque correct, un masque sphérique doit échantillonner des
positions dans le monde . Comment accéder à des positions dans le monde lors de l'utilisation du nœud Dessiner du matériau pour rendre la cible?
Si vous avez étudié les méthodes de dessin par maillages, vous avez peut-être trouvé une vidéo de Ryan Brooke sur le
dessin des dégâts des personnages à l'aide de cibles de rendu (la méthode utilisée dans mon tutoriel est basée sur sa méthode). Dans la vidéo, il génère avec succès des masques sphériques tridimensionnels et les accumule dans la cible de rendu. Il a réussi à le faire parce qu'il crée une cible de rendu pour stocker les positions de maillage dans le monde, qui peuvent ensuite être échantillonnées à l'aide d'un masque sphérique. Examinons cette méthode plus en détail.
Méthode Ryan
Cette méthode comprend quatre étapes. La première étape consiste à «déployer» le maillage souhaité. Il vous suffit de déplacer tous les sommets pour obtenir le maillage dans sa forme UV. Par exemple, voici les coordonnées UV du personnage:
Et voici le personnage après le déploiement sur Unreal:
Vous pouvez étendre le maillage en utilisant de simples calculs des déplacements des positions du monde (dont nous parlerons ci-dessous).
La deuxième étape consiste à coder les positions mondiales dans la cible de rendu. Pour ce faire, définissez la couleur du matériau de balayage sur
Position mondiale absolue et utilisez la capture de scène pour capturer le balayage. Voici à quoi ressemblerait la cible de rendu:
Remarque: la cible de rendu change de couleur car le personnage est animé. Cela conduit à un changement constant de position dans le monde.
La troisième étape consiste à créer des masques sphériques. Après avoir accédé aux positions du maillage dans le monde, nous pouvons les échantillonner sur un masque sphérique, puis dessiner un masque sphérique directement sur la deuxième cible de rendu.
La dernière étape consiste à appliquer un masque au matériau du personnage pour mélanger les couleurs, les textures ou les matériaux. Voici la visualisation des troisième et quatrième étapes:
Voyons maintenant ma méthode proposée.
Méthode proposée
Bien que la méthode de Ryan fonctionne, il a besoin des éléments suivants:
- Deux rendus de rendu cible. Le premier capture le maillage non développé et le second accumule des masques sphériques.
- Une cible de rendu pour stocker des positions dans le monde
- Cible de rendu pour la collecte de masques sphériques. Pour chaque acteur sur lequel vous souhaitez dessiner, vous aurez besoin d'une cible de rendu distincte.
La méthode décrite dans ce didacticiel refuse le deuxième rendu et la position cible du rendu dans le monde. Ceci est possible en combinant les masques de balayage et sphériques en un seul matériau (matériau de balayage). Après cela, le balayage est capturé en utilisant le mode composite additif pour l'accumulation de masques sphériques.
Il convient de noter que les deux méthodes fonctionnent mieux lorsque le maillage n'a pas d'UV se chevauchant. Si les UV se chevauchent, alors les pixels ont un espace UV commun, et donc les mêmes informations sur les masques. Par exemple, les deux mains d'un personnage peuvent être déployées aux UV dans le même espace. Si un masque est appliqué à une main, il sera également appliqué à l'autre.
Maintenant que nous nous sommes familiarisés avec la méthode, commençons par créer un matériau de balayage.
Créer un matériau plat
Accédez au dossier
Matériaux et créez un nouveau matériau. Nommez-le
M_Unwrap , puis ouvrez-le.
Modifiez les options suivantes:
- Modèle d'ombrage: éteint. Grâce à cela, la capture de scène ne capturera pas les informations d'éclairage.
- Recto verso: activé. Parfois, les faces agrandies peuvent regarder dans l'autre sens (cela dépend de la façon dont le scan UV du maillage a été effectué). Le paramètre Two Sided garantit que nous voyons toutes les faces inversées.
- Utilisation \ Utilisé avec Skeletal Mesh: activé. Lorsque ce paramètre est activé, les shaders nécessaires au travail du matériau sur les maillages squelettiques seront compilés.
Ensuite, nous développons le maillage. Pour ce faire, créez le diagramme ci-dessous. Veuillez noter que j'ai déjà créé les
paramètres CaptureSize et
UnwrapLocation dans l'
actif MPC_Global.
Nous allons donc effectuer un scan UV du maillage à l'emplacement spécifié et avec la taille spécifiée. Notez que si le scan UV unique de votre maillage se trouve dans un canal séparé, vous devrez modifier l'
index de coordonnées du nœud
TextureCoordinate . Par exemple, si les coordonnées UV uniques se trouvent dans le canal 1, l'
index des coordonnées doit être défini sur
1 .
L'étape suivante est la création d'un masque sphérique. Pour ce faire, nous avons besoin de deux paramètres: le point d'intersection et le rayon de la sphère. Créez les nœuds sélectionnés:
Ce schéma renvoie le blanc pour les pixels à l'intérieur du masque sphérique et le noir pour les pixels à l'extérieur. Ne vous inquiétez pas de la définition de valeurs pour les paramètres, car nous le ferons en contondant.
Il est important de définir le nœud
Absolute World Position sur
Absolute World Position (à l'exclusion des matériaux Material Shader Offsets) . Cela est nécessaire car la position du pixel dans le monde changera en raison du déroulement. L'exclusion des décalages de matériau Shader nous offre une position de départ dans le monde avant le déploiement.
Et c'est tout ce qu'il faut pour le matériau de balayage. Cliquez sur
Appliquer et fermez le matériau. Ensuite, nous devons appliquer le matériau au personnage afin de le développer.
Déploiement de personnages
Dans ce tutoriel, le plan du grappin fera le déploiement et la capture. Tout d'abord, nous avons besoin d'une instance dynamique du matériau de balayage. Accédez au dossier
Blueprints et ouvrez
BP_Capture . Ajoutez ensuite les nœuds en surbrillance à l'
événement BeginPlay . Assurez-vous que
Parent est défini sur
M_Unwrap .
Ensuite, nous avons besoin d'une fonction pour effectuer un balayage et une capture. Créez une nouvelle fonction appelée
PaintActor . Créez ensuite les entrées suivantes:
- ActorToPaint: le type doit avoir la valeur Actor . Il s'agit d'un acteur pour lequel nous effectuerons un balayage et une capture.
- HitLocation: saisissez Vector . Ce sera le point central du masque sphérique.
- BrushRadius: tapez Float . Le rayon du masque sphérique en unités du monde.
Bien que cette méthode de dessin puisse fonctionner avec n'importe quel acteur, nous ne vérifierons que si l'acteur résultant est hérité de la classe
Character . Et pour simplifier le code, nous allons stocker le composant maillage squelette dans une variable, car nous devrons y faire référence plusieurs fois. Pour ce faire, nous allons ajouter les nœuds sélectionnés:
Il est maintenant temps de faire le développement et l'application d'un masque sphérique. Pour ce faire, ajoutez des nœuds sélectionnés à la fin de la chaîne de nœuds:
Voici ce que fait chaque ligne:
- Tout d'abord, nous préservons le matériau source du maillage afin de pouvoir le réappliquer ultérieurement. Ensuite, nous appliquons le matériau de balayage.
- Cette ligne passe le matériau de numérisation au point d'intersection et au rayon de la brosse pour appliquer un masque sphérique
Pour tester le balayage, nous devons d'abord tracer la ligne du joueur pour obtenir le point d'intersection.
Obtenir un point d'intersection
Cliquez sur
Compiler et revenez à l'éditeur principal. Fermez ensuite
BP_Player . Ouvrez la fonction
Shoot et ajoutez les nœuds en surbrillance. Pour ce didacticiel, définissez
Brush Radius sur
10 .
Cliquez sur
Compiler et fermez
BP_Player . Cliquez sur
Jouer , puis
cliquez avec le
bouton gauche sur le personnage pour explorer et appliquer un masque sphérique.
Si vous ne comprenez pas pourquoi le masque continue de bouger, c'est parce que les pièces se déplacent par rapport au masque sphérique. Cependant, ce n'est pas un problème, car nous n'effectuons une capture de balayage qu'au moment de l'intersection.
Maintenant que nous avons déplié le maillage, nous devons effectuer une capture par balayage.
Capture de balayage
Pour commencer, il serait bien d'ajouter un plan noir non éclairé derrière le maillage étendu. Cela évite les coutures sur le bord des coques UV. Ouvrez
BP_Capture , puis ajoutez un composant
Plan appelé
BackgroundPlane . Pour gagner du temps, j'ai déjà créé du matériel noir. Pour le matériau, sélectionnez
M_Background .
Dans ce didacticiel, nous utilisons
500 × 500 unités pour le dépliage et la capture, donc le plan d'arrière-plan ne doit pas être inférieur à ces tailles. Réglez l'
échelle sur (5.0, 5.0, 1.0) .
Étant donné que la position de l'avion et la position du balayage sont les mêmes, il serait bon de déplacer l'avion vers le bas pour éviter les conflits z. Pour ce faire, définissez la valeur
Emplacement (0,0, 0,0, -1,0) .
Ensuite, nous devons effectuer une capture. Revenez à la fonction
PaintActor et ajoutez les nœuds en surbrillance:
Nous allons donc capturer le maillage élargi, après quoi le matériau source du maillage sera à nouveau appliqué.
Dans le schéma résultant, la capture de scène remplace le contenu de la cible de rendu. Pour que les masques sphériques s'accumulent, nous devons
ajouter la capture de la scène au contenu précédent. Pour ce faire, sélectionnez le composant
SceneCapture et définissez le
mode Capture de scène \ Mode composite sur
Additif .
Cliquez sur
Compiler , puis fermez le plan. Maintenant, nous devons utiliser la cible de rendu dans le matériau du personnage.
Utilisation du masque
Accédez à
Personnages \ Mannequin \ Matériaux et ouvrez
M_Mannequin . Ajoutez ensuite les nœuds en surbrillance. Définissez l'
exemple de texture sur
RT_Capture .
Ce schéma affichera la couleur rouge lorsque le masque est blanc et l'orange lorsque le masque est noir. Cependant, nous pouvons faire des textures ou des couches de matériaux se mélanger.
Cliquez sur
Appliquer et fermez le matériau. Cliquez sur
Jouer et
cliquez avec le
bouton gauche sur le personnage pour commencer à dessiner.
Où aller ensuite?
Le projet terminé peut être téléchargé
ici .
Bien que nous ayons utilisé des masques sphériques dans ce didacticiel, ce n'est pas la seule figure qui peut être utilisée. Après tout, il y a des cubes, des cylindres, des cônes et bien plus encore! Pour en savoir plus sur ces formes de formes et comment les utiliser, vous pouvez lire les deux articles suivants:
Si vous souhaitez apprendre une autre façon de dessiner sur un maillage, lisez l'article de Tom Lohman intitulé
Rendu des blessures sur les personnages . Au lieu d'accumuler des masques sphériques, il utilise un nombre fixe de masques sphériques. L'avantage de cette méthode est son bon marché (qui dépend du nombre de masques sphériques) et la relative simplicité d'animation des masques. L'inconvénient de cette méthode est la stricte restriction du nombre de masques sphériques.