Share
Dans ce didacticiel, je vais vous montrer comment créer des graphiques 3D à ombrage plat pour votre jeu Unity et vous expliquer pourquoi vous souhaitez le faire..
Aujourd'hui, il existe une abondance d'outils et de moteurs 3D permettant à quiconque de créer des jeux 3D. Cependant, les défis de l'art 3D sont redoutables et nécessitent souvent beaucoup de temps, d'efforts et d'expertise que le joueur solo ou amateur n'a pas. Les modèles à faible polygone, associés à un ombrage plat, reprennent le style du début des années 90 en utilisant des techniques que tout le monde peut apprendre. Et ce n'est pas juste un retour en arrière nostalgique; Les ombrages plats peuvent facilement être combinés avec des techniques modernes telles que les cartes d'occlusion ambiante pour donner à votre jeu un look saisissant et avant-gardiste..
Obtenez l'exemple de projet Unity ici
Ce tutoriel suppose que vous sachiez déjà faire de la modélisation 3D ou que vous puissiez trouver des modèles 3D gratuits sur Internet. Je vais tirer des exemples de modèles à partir de rien; Il existe une multitude de didacticiels sur Internet pour vous initier à la modélisation 3D. Si vous débutez, je peux fortement recommander Wings 3D et SketchUp. Les deux ont des interfaces extrêmement accessibles comparées aux applications de modélisation professionnelles et exporteront vers des formats compatibles avec Blender et Unity..
Vous avez donc décidé de vous salir les mains avec Unity et de commencer à créer un jeu entièrement en 3D. Peut-être que vous n’avez aucune compétence artistique en jeu, ou peut-être que vous avez fait de l’art pour des jeux en 2D; dans les deux cas, vous apprendrez rapidement que la création de jeux 3D nécessite un très grand nombre de compétences. Vous devez non seulement apprendre à créer des modèles 3D, vous devez également les dérouler pour dessiner correctement une texture à la surface de votre modèle. Vous devez également créer minutieusement la texture, bien sûr.
Et si vous pouviez simplement créer le modèle, mais le terminer et le préparer pour votre jeu après quelques étapes supplémentaires pour le colorer et l'ombrer? Vous pourriez vous retrouver avec quelque chose comme ça:
Ou ca:
Bien sûr, le look est spartiate et lo-fi-mais c'est le point! Que vous visiez la nostalgie du début des années 90, un look abstrait moderne ou que vous vouliez simplement gagner du temps lors de la création d'actifs pour un jeu de confiture, l'ombrage à plat est un excellent choix de style pour les débutants et les experts en 3D..
Si vous débutez avec les techniques de jeu, la simplicité du flux de travail vous permet de vous concentrer sur les principes fondamentaux: apprendre à créer un modèle 3D avec une belle silhouette et une belle forme et le colorer avec un petit jeu de couleurs choisies à la main. En vous concentrant sur ces principes fondamentaux, vous apprendrez les techniques de base de l'art sans distraction..
Chaque modèle 3D est composé d'un ensemble de sommets qui déterminent la forme de ce modèle. Pour chaque sommet, il existe également un vecteur appelé Ordinaire-penser à cela comme une petite épingle qui sort du sommet.
Le moteur de rendu utilise la normale pour chaque sommet et compare sa direction à la direction de la ou des sources de lumière entrantes et à la direction dans laquelle la caméra fait face afin de déterminer la quantité de lumière à appliquer à ce sommet..
Le moteur de rendu atténue progressivement la quantité de lumière d'un sommet à un autre, donnant à un modèle 3D de base un aspect "plein d'oreiller". Sauf si vous appliquez une texture (et souvent, même si vous le faites), cela semble vraiment terrible sur tout ce qui n'est pas réellement une surface sinueuse, "pillowy":
Avec un ombrage à plat, toute la surface d'un polygone reçoit une quantité uniforme de lumière, calculée à partir d'un collage normal du centre du polygone vers l'extérieur:
Les applications de modélisation modernes utilisent des "bords durs" ou des "groupes de lissage" pour ajuster les normales de sommet de votre modèle afin qu'elles correspondent au polygone auquel elles sont adjacentes, ce qui lui donne un ombrage uniforme et plat. Un artiste 3D expérimenté les utilisera pour créer des bords nets et des surfaces plates, mais nous souhaitons donner à l'ensemble du modèle un aspect net et plat. Heureusement, Unity rend cela très simple.
Si vous connaissez suffisamment votre outil de modélisation, vous pouvez donner à votre modèle un aspect ombré en définissant tous les bords sur "Dur". Cependant, dans Unity, vous pouvez simplement choisir de laisser Unity créer automatiquement des bords rigides:
Cliquez sur votre modèle dans le Projet fenêtre pour élever son Importer les configurations dans le Inspecteur panneau.
Aller au Normales et Tangentes section et, dans le Les normales liste déroulante, choisissez Calculer.
Met le Angle de lissage à 0 et cliquez Appliquer.
L'unité fera de tout bord qui est un angle plus net que celui-ci un bord dur. Nous voulons que tous nos bords soient durs, donc il faut le régler naturellement 0 donne cet effet.
N'hésitez pas à expérimenter avec différents angles de lissage, en fonction de la géométrie de votre modèle, cela peut être un moyen incroyablement facile de lui donner un look complètement différent.
Maintenant que notre modèle est ombré à plat, nous devons lui donner de la couleur! Il y a plusieurs façons de le faire, mais certaines sont meilleures que d'autres:
Je préfère grandement la dernière méthode, que je vais vous décrire ci-dessous. Normalement, après avoir créé un modèle 3D, vous devez soigneusement le dérouler pour qu’il corresponde à une texture créée à la main. Cependant, comme nous ne souhaitons avoir qu'une seule couleur pour chaque polygone, l'apparence de votre travail de dépliage UV n'a pas d'importance, cela peut simplement être un mélange aléatoire de sommets, à condition qu'elle soit au-dessus du bon Couleur!
La première étape de la coloration consiste à créer la texture. Pour notre exemple, disons que nous voulons quatre couleurs:
Ensuite, chargez votre modèle 3D terminé dans le modeleur de votre choix et chargez votre texture. Sélectionnez toutes les faces du modèle que vous souhaitez associer à une couleur donnée et ouvrez-les automatiquement par UV. Le résultat sera probablement un fouillis confus de polygones.
Comme je l'ai dit, cependant, cela n'a pas d'importance. Déplacez tous les polygones les uns sur les autres et réduisez-les en une petite tache qui s'insérera dans l'un des carrés de la texture de votre palette. Ensuite, faites-les glisser sur la couleur de votre choix.
Regardez votre modèle. les sections texturées ont maintenant la bonne couleur! Répétez cette procédure pour les autres faces de votre modèle, sélectionnez-les à nouveau et décompressez-les en fonction de la couleur souhaitée. Si vous faites une erreur, ce n'est pas grave, il suffit de sélectionner à nouveau les faces, de les dérouler à nouveau si nécessaire et de les placer au bon endroit sur la texture. On ne peut pas en dire autant du "vrai" déballage UV!
Voilà! Vous avez un modèle coloré et ombré que vous pouvez importer dans votre jeu..
Au cas où vous vous le demanderiez, voici quelques raisons d'éviter les deux autres méthodes:
Cette méthode crée un grand nombre de matériaux que vous devrez suivre dans Unity et, plus important encore, Unity ne va pas traiter vos modèles de manière dynamique, ni utiliser un appel de tirage complet pour chaque matériau, ce qui constitue souvent le plus petit goulot d'étranglement du matériel graphique moderne..
En termes simples, vous obtiendrez de terribles performances si vous utilisez abondamment cette méthode..
En fait, cela fonctionne assez bien et vous pouvez l’utiliser en fonction de vos besoins particuliers ou de votre flux de travail artistique. Cependant, vous remarquerez immédiatement quelque chose: lorsque vous importez votre modèle et utilisez un shader Diffuse de base, vos couleurs de sommet ne semblent pas apparaître!
C'est parce que les shaders de base les ignorent; vous devrez utiliser des shaders spéciaux qui utilisent réellement les données de couleur de sommet. Ceux-ci peuvent être facilement trouvés, mais les choses se compliquent si vous souhaitez également d'autres effets de rendu provenant d'autres shaders: ces shaders n'utilisent pas non plus de couleurs de vertex et vous devez modifier le shader vous-même..
Si vous ne savez pas déjà écrire les shaders, cela peut vous prendre beaucoup de temps et d’efforts que vous préféreriez consacrer au reste de votre jeu. De plus, cela pourrait être juste moi, mais je trouve qu'il est beaucoup plus facile de changer plusieurs couleurs à la fois avec une texture plutôt que de les définir manuellement dans un modélisateur ou dans le jeu avec un script..
Maintenant que vous avez une palette de textures et une technique de base bien définie, vous pouvez créer le reste des modèles pour votre jeu. Comme vous pouvez le penser, vous pouvez simplement continuer à ajouter des couleurs à votre palette et utiliser la même texture pour tout le jeu..
Cela présente de gros avantages en termes de performances: si vous vous en tenez à utiliser le même matériau pour tout votre jeu, Unity dessinera généralement tous vos objets plus efficacement en les "groupant". Comme je l'ai déjà mentionné, les "appels de dessin" constituent un goulot d'étranglement majeur en infographie et il est judicieux de les limiter au minimum..
Si vous utilisez un seul matériau pour tout, Unity essaiera automatiquement de dessiner votre scène en effectuant le moins d'appels possibles, bien que chaque modèle doive être redimensionné de la même manière et ne pas avoir plus de 300 sommets. Il vous informera que tout se passe bien dans le Statistiques la fenêtre:
Pointe: Si vous souhaitez en savoir plus sur le traitement par lots, veillez à consulter la documentation Unity sur le sujet. Cela devrait être une lecture obligatoire pour toute personne intéressée par la performance de leur jeu.!
Vous avez un ensemble de modèles qui sont plats et colorés, et tout semble en place, mais si vous voulez changer les couleurs pendant le jeu?
Par exemple, supposons que votre script crée un avion, mais que vous souhaitiez ensuite le colorer en bleu s'il est convivial ou le rouge s'il s'agit d'un ennemi. Vous pouvez certainement créer des palettes et des matériaux distincts, mais cela signifie que vous perdez l’optimisation des performances de la mise en lots de ces deux types d’avions..
Ce n’est pas grave si seulement quelques-uns d’entre eux sont en vue à la fois. Cependant, prenons l'exemple d'un terrain généré par des procédures composé de tonnes et de tonnes de tuiles ou de cubes, de nombreux types de terrains différents, comme un certain jeu de sandbox populaire. Cela signifierait une tonne d'appels à tirage au sort - mais ne craignez rien, il existe un moyen de continuer à utiliser un seul matériau!
Rappelez-vous comment vous avez coloré votre modèle en plaçant ses coordonnées UV dans des zones colorées. Unity vous permet de modifier les sommets de votre modèle à la volée, y compris les coordonnées UV. Ainsi, pour chaque type de terrain, vous pouvez simplement déplacer les coordonnées UV dans la zone de couleur correcte via un script..
Créez un nouveau script C # dans Unity appelé PaletteColorizer et collez ce code dans:
utiliser UnityEngine; using System.Collections; Classe publique PaletteColorizer: MonoBehaviour public int colorsPerRow = 4; public int colorIndex = 0; public bool overrideUVs = false; void Awake () if (! enabled) return; SetUVsToColor (colorIndex); void Update () public void SetUVsToColor (int colorIndex) if (overrideUVs) SetUVs (gameObject, GetColorOffset (colorIndex)); else TranslateUVs (gameObject, GetColorOffset (colorIndex)); Vector2 GetColorOffset (int colorIndex) Vector2 offset = new Vector2 (); float row = Mathf.Floor (colorIndex / colorsPerRow); étape float = 1.0f / colorsPerRow; offset.x = (colorIndex - (row * colorsPerRow)) * step; offset.y = (1.0f - (row / colorsPerRow)); retour offset; static public void TranslateUVs (GameObject obj, Vector2 offset) var meshFilter = obj.GetComponent (); Mesh mesh = meshFilter.mesh; var newUVs = new Vector2 [mesh.uv.Length]; pour (int i = 0; i < mesh.uv.Length; i++) newUVs[i] = new Vector2(mesh.uv[i].x + offset.x, mesh.uv[i].y + offset.y); mesh.uv = newUVs; static public void SetUVs(GameObject obj, Vector2 offset) var meshFilter = obj.GetComponent(); Mesh mesh = meshFilter.mesh; var newUVs = new Vector2[mesh.uv.Length]; for(int i=0; i < mesh.uv.Length; i++) newUVs[i] = new Vector2(offset.x + 0.01f, offset.y - 0.01f); mesh.uv = newUVs;
Pour utiliser ce script, ajoutez-le simplement en tant que composant à tout objet de jeu avec un matériau utilisant une texture de palette, définissez le nombre de couleurs par ligne, puis définissez l'indice de couleur (en commençant par 0 dans le coin supérieur gauche et en comptant la droite et vers le bas).
Si les coordonnées UV de votre modèle ne sont pas configurées pour s’adapter à l’intérieur des cases de la palette (comme dans le cas du quad "Eau" autour des hexs), vérifiez la Ignorer les UV case à cocher; comme vous pouvez le voir ci-dessus, le script écrira de toutes nouvelles coordonnées plutôt que de déplacer celles existantes.
Une chose à garder à l'esprit à propos de cette méthode est que, lors de la modification d'un maillage, Unity créera discrètement un nouveau maillage en mémoire. Si vous faites cela souvent sur un grand nombre de maillages, vous risquez de rencontrer des problèmes de mémoire et vous voudrez peut-être rechercher un moyen de mettre en cache et de partager des maillages qui ont été colorisés de la même manière. Pour un nombre raisonnable de modèles low-poly, cependant, vous n'aurez probablement jamais à vous en soucier..
Les ombrages plats ne doivent pas nécessairement toujours être associés à des blocs de couleurs uniformes. Pour ajouter une occlusion ambiante, vous pouvez ajouter des détails subtils et un aspect réaliste "poussiéreux" à n'importe quelle surface. Unity Pro fournit des moyens d'ajouter l'occlusion ambiante en tant que filtre de post-traitement, mais je souhaite vous montrer comment ajouter une touche de finition supplémentaire sans avoir besoin de la version Pro ni même de shaders spéciaux..
Tout ce que vous avez à faire est de dérouler votre modèle et de "cuire" l'effet d'occlusion ambiante sur une texture. Cela vous oblige effectivement à consacrer un peu de temps et des efforts à dérouler correctement votre modèle, mais après cette étape, quelques clics et un peu de bidouillage dans votre programme de peinture vous permettront de donner à votre modèle un aspect légèrement plus réel et avant-gardiste.
Tout d’abord, vous voudrez démarrer Blender avec une scène vide: Appuyez sur UNE pour sélectionner tous les objets de la scène de démarrage, appuyez sur Effacer, puis appuyez ré confirmer. Vous ne voulez pas de lampes ou de caméras, car celles-ci seront importées sous forme d'objets indésirables vides dans Unity.
Ensuite, importez votre modèle. (Fichier> Importer> Wavefront (.obj)). Pour cet exemple, commençons par un rocher.
Ouvrez UV Editor et créez une texture capable de contenir à peu près la quantité de détails souhaitée. Je suis plutôt radin, alors je m'en tiens à 256x256px pour tout ce qui a trait à la taille du joueur (un rocher ou un arbre), et je ne grossis que pour les très grands objets (comme la montagne sur laquelle ils marchent).
Maintenant, déballez votre modèle. Il existe de nombreuses façons de s'y prendre, qui sont couvertes de manière beaucoup plus détaillée que je ne pourrais jamais l'espérer. Veuillez donc consulter la documentation de Blender ou d'autres didacticiels en ligne sur la manière de dérouler correctement et efficacement votre modèle..
Maintenant que vous avez un modèle non emballé, vous êtes prêt à appliquer l'occlusion ambiante sur votre texture. Blender rendra l'occlusion ambiante directement sur votre texture, en respectant les coordonnées UV que vous venez de déballer. Suivez simplement ces étapes:
Vous avez maintenant la texture AO cuite et un modèle qui a les coordonnées UV correctes pour l’utiliser. Enregistrez la texture dans un fichier image et exportez le modèle dans Blender vers un format que Unity peut utiliser (tel que .fbx).
Selon vos besoins, vous pourrez peut-être utiliser la texture telle quelle. Créez simplement un nouveau matériau Diffuse qui utilise votre nouvelle texture AO cuite et réglez la couleur sur quelque chose de joli.
Cependant, vous souhaiterez probablement avoir des modèles à plusieurs couleurs, tels qu'un arbre. Il vous suffit de suivre quelques étapes supplémentaires. Suivez les instructions ci-dessus pour créer une texture AO cuite pour votre modèle d'arborescence. Cette fois, cependant, vous voudrez savoir où vous placez vos coordonnées UV, car vous devrez colorier manuellement ces emplacements sur la texture..
Il serait sage de regrouper vos îlots UV par couleur. Dans cet exemple, je mets les parties du tronc en haut de la texture et les parties de la feuille en bas.
Ouvrez votre texture AO cuite avec le programme de peinture de votre choix (tout ce qui est compatible avec les calques, tel que GIMP). Créez un nouveau calque et placez-le au-dessus de votre calque AO, en utilisant le calque AO comme guide pour colorer le nouveau calque en fonction des couleurs que vous souhaitez voir dans le modèle..
Utilisez le Lasso outil, ou un autre outil de sélection de votre choix, pour sélectionner les parties de la texture que vous souhaitez colorer, puis les remplir avec la couleur correcte.
Maintenant que les couleurs sont configurées, il est temps de passer à la tâche finale: mélanger la zone d’affichage superposée aux couleurs. Déplacez le calque AO par-dessus le calque coloré et changez le mode de fusion en Multiplier.
Définissez l'opacité du calque sur ce qui vous convient le mieux. Utilisez votre propre jugement, mais assurez-vous de noter ce pourcentage, car pour obtenir un effet uniforme sur toutes vos textures, vous souhaiterez utiliser la même méthode de mélange et la même quantité..
Enregistrez cette texture dans un fichier et importez-la dans Unity à côté du modèle d'arborescence. Créez un matériau comme pour le bloc, en utilisant la texture que vous venez de créer..
C'est à peu près ça! Utilisez cette technique sur tous vos modèles pour donner à la scène entière un aspect plus raffiné et tangible que ce que vous pourriez obtenir avec un ombrage à plat de base..
Vous remarquerez peut-être que vos matériaux utilisent uniquement des shaders diffuses de base. L'un des avantages de l'utilisation de l'AO cuit au four mélangé directement sur la texture de couleur est que vous pouvez utiliser cette texture avec n'importe quel autre shader qui prend une texture diffuse… sans code spécifique requis pour l'AO.!
Vous disposez maintenant d'une boîte à outils pratique de techniques graphiques que vous pouvez utiliser pour créer un jeu entièrement ombré. Avec suffisamment de pratique, vous pouvez créer des visuels époustouflants rapides à produire et qui rendent efficacement.
Accentsconagua