Utiliser ma carte normale ?
Avant de commencer, sachez que j'ai décidé d'écrire un genre de documentation assez complète sur ce sujet parce qu'il n'y en avait aucune. Ainsi, j'ai étudié, testé et décrit toutes les solutions un minimum viables sur lesquelles je suis tomber au cours de mes recherches.
Si je vous recommande toujours de lire toute cette page, je peux aussi vous faire gagner du temps : le meilleur effet disponible à ce jour est le dernier présenté sur cette page, NormalMap Extented, créé par Matriax. N'hésitez pas à vous rendrez directement sur la partie le concernant si le reste ne vous intéresse pas.
L'effet de Pode : Le tout premier
Commençons par celui que je considère être le point de départ de tous les différents effets qui suivront : L'effet 2D Dynamic Light créé par Pode.
Cet effet est en réalité l'adaptation des travaux d'un certain Matt Greer concernant les éclairages dynamiques 2D sur notre bien aimé Construct 2. Le travail du bonhomme est décrit ici, l'effet de Pode est téléchargeable là.
Cette solution est simple, mais efficace. Veuillez noter qu'il ne vous permet de créer qu'une seule et unique source de lumière dans son état actuel. Une fois que vous avez votre sprite et la normal map qui avec, vous devez appliquer l'effet sur la normal map, comme expliqué dans le précédent chapitre.
Une fois cela fait, il vous faut définir divers paramètres. Nous avons là l'image color au nom assez explicite, mais dans la version actuelle de l'effet, vous ne pouvez pas faire autrement que de définir une même valeur dans les trois champs. Vous pouvez ensuite configurer la direction de votre lumière dans votre feuille d'événement d'une façon similaire à celle du screenshot.
Les vecteurs XYZ définissent la position de la lumière sur vos textures. Veuillez noter que plus les valeurs que vous entrez pour Z sont faibles, plus les ombres produites sur votre sprite sont sombres.
Le carré jaune représente votre source lumineuse. Elle va suivre la direction de votre curseur, tout en faisant face au centre de votre sprite. Pour ça, nous utilisons un carré rouge invisible placé au centre du sprite en question.
La lumière devra toujours y faire face.
Bien entendu vous n'êtes pas totalement forcé d'utiliser un sprite tel que ce carré rouge pour faire en sorte que votre source lumineuse soit toujours aligné avec le centre de votre personnage, utiliser le sprite lui même ou un point de l'image de ce dernier fonctionnera aussi sans problème.
Avec un peu de bricolage, vous n'êtes même pas forcé de vous référer à un objet tout court. Ici, cette histoire de "lumière aligné avec le centre" provient du fait que nous utilisons le cosinus et le sinus de l'angle k pour la mettre en place. Cependant, il est certainement possible de procéder autrement.
J'ignore encore comment, toutefois.
L'effet de Chrisbrob : pas de normal map ?
Depuis le début de ce tutoriel je sais que j'ai certainement l'air d'une sorte de bonhomme en état d'ivresse qui ne fait pas grand chose si ce n'est vous hurler NORMAL MAP au visage dés qu'il en a l'occasion. Et si maintenant je vous disais qu'il existe aussi un moyen d'utiliser l'effet de Pode décrit précédemment sans avoir à en utiliser une ? Je suppose que certains voudront m'en mettre une.
Cependant, même si ça sonne bien, souvenez vous que la vie n'est ni douce ni magique. En effet, cette alternative implique que vous n'ayez pas à générer de normal map au préalable, et oui, tout se fait directement sur Construct 2 comme n'importe quel autre effet. Mais.
En fait, vous ne pouvez utiliser cet effet qu'en parallèle de celui de Pode.
Encore une fois, ce tutoriel sera tenu à jour, donc s'il existe un autre moyen pour utiliser le travail de Chrisbrob, je le préciserai ici et j'expliquerai ce dont il s'agit, pas d'inquiétude. Pour le moment, vous êtes limité avec l'effet de Pode.
La configuration globale n'est pas différente puisque nous sommes toujours sur l'effet de Pode. Les événements ne changent pas non plus. Toute la différence se situe au niveau du sprite sur lequel vous devez appliquer l'effet. Jusqu'à maintenant il s'agissait de la normal map de votre sprite. Comme évoqué plus haut, vous n'en avez plus besoin, supprimez là du canvas. A sa place, ouvrez une nouvelle instance de votre sprite (donc clonez le).
A présent, vous avez deux sprites, qui sont basiquement jumeaux. Appliquez l'effet de Chrisbrob sur l'un de ces deux sprites. Vous pouvez désormais considérer le sprite concerné comme étant votre normal map. Comme l'avez certainement compris, il s'agira ensuite d'appliquer l'effet de Pode sur ce même sprite puis de suivre la même procédure que celle décrite plus haut.
Assurez vous que vos deux jumeaux partagent une taille et une position identique, et le boulot sera terminé. Comme vous pouvez le voir sur le screenshot ci-dessous, nous obtenons un résultat similaire au précédent et pourtant aucune normal map n'a été utilisé !
Les résultats ne sont pas non plus incroyables, nous n'avons pas une réelle impression de reliefs, Cloud a toujours l'air aussi lisse que plat, mais bon il est quand même éclairé dynamiquement. Ce peut être un résultat suffisant pour un jeu rétro ou pour un projet comprenant du pixel art. Ou pour n'importe quel projet nécessitant un manque de relief. C'est à vous de voir.
Veuillez noter que cet effet se situe toujours en phase de développement.
L'effet BumpMapping : Parce qu'il est là
Et à présent pour en finir avec toute cette section consacrée aux effets ne comprenant qu'une seule et unique source lumineuse, voici le dernier d'entre eux. L'effet BumpMapping. Etant donné qu'il est de base pré-installé dans Construct 2 vous pouvez déjà l'utiliser sans ajouter quoi que ce soit d'autre, bien que vous ayez toujours besoin d'une normal map.
Attend attend, si je prends en compte le nom de l'effet, on doit utiliser une Bump Map. Tout d'abord, qu'est ce que c'est que ça, ensuite, quelles sont les différences avec une normal map ? Pourquoi on se complique soudainement la vie ?
Je suppose que pas grand monde ne s'en préoccupe, mais encore une fois, parce qu'il est nécéssaire de savoir ce qu'on fait et ce qu'on utilise en tant que concepteur de jeux, je vous recommande vivement de lire cet article.
En fait, l'effet fonctionne aussi bien avec des Bump maps qu'avec des Normal maps. La procédure est encore une fois la même, vous avez votre sprite, vous avez sa normal map, vous appliquez l'effet sur la normal map, vous faites en sorte qu'elle partage la même taille et la même position que votre sprite, vous définissez les paramétres de l'effet et j'en passe.
Ces paramètres sont assez simples. Nous avons la direction de votre lumière sur l'axe X, la direction de votre lumière sur l'axe Y, cette même direction sur l'axe Z et enfin, l'intensité globale de ladite lumière. C'est assez similaire à l'effet de Pode, sauf qu'ici votre source lumineuse n'a pas à être aligné avec le centre de votre sprite. Vous pouvez donc aisément éclairer plusieurs objets à la fois !
L'aspect mathématique qui permet à l'ensemble de fonctionner est totalement tordu. Je suis certain qu'il pourrait être refait plus proprement, plus logiquement. Je n'ai pas étudié l'effet en profondeur pour le moment. Comme vous pouvez le comprendre, la feuille d'événements qui suit est obsolète.
Tout fonctionne, mais c'est pété quand même.
Bien, vous connaissez à présent trois alternatives différentes pour mettre en place un éclairage dynamique dans votre projet. Mais vous ne pouvez pas utiliser plus d'une source lumineuse, ce qui est triste. En fait, il n'est pas impossible d'utiliser diverses sources lumineuses, mais dans ce cas il nous faudra modifier l'un des effets précédents en lui ajoutant diverses variables.
Par exemple, pour chaque sources lumineuses possibles, nous aurons besoin de définir ses vecteurs X, Y et Z, son intensité ou encore sa couleur. Mais dans la version actuelle des effets présentés sur cette page, vous êtes coincé avec une seule et unique source. Alors que faire ?
L'effet de Matriax : La perfection
Jusqu'ici, nous avons vu trois solutions pour illuminer vos petits mondes. Comme vous l'avez appris, ils fonctionnent tous sur un même principe, reposant sur deux objets : une image diffuse et une carte normale, placé l'une sur l'autre. L'effet de Matriax n'est pas différent. Il fonctionne avec les même ingrédients.
Mais. NormalMap extented est actuellement la meilleure solution possible pour éclairer vos niveaux de façon dynamique avec Construct 2. Oui, je l'ai dit. Encore une fois, l'effet est assez similaire à celui de Pode, mais avec un bien meilleur rendu et surtout...la possibilité d'utiliser trois sources lumineuses à la fois.
Vous pouvez customiser l'éclairage de chacune de ces sources séparément, et selon votre bon vouloir. Si vous voulez que la premiére source soit bien plus lumineuse que la seconde puis colorer la troisiéme source en rouge, aucun probléme. Vous pouvez télécharger l'effet de Matriax ici.
Un capx de démonstration est inclus dans l'archive, mais testons quand même tout ça sur le sujet de test officiel de ce tutoriel : Cloud Strife. Ne vous en faites pas, il aime ça, je le lui ai demandé. Voyons le résultat :
Je vous laisse juger. Pour en arriver là, vous devez suivre la procédure habituelle (normal map sur diffuse map, activer l'effet sur la normal map...vous connaissez la chanson) puis régler divers paramètres. Ces paramètres sont basiquement ce que j'ai mentionné plus haut. Nous avons trois sources lumineuses, nous devons définir toutes les variables qui concernent chacune de ces sources.
Penchons nous là dessus.
Vous observez à présent les diverses variables qui sont nécessaires pour définir une source lumineuse dans cet effet. Comme l'indique le premier champ, nous voyons ici les variables liées à la seconde source lumineuse. Vous pouvez l'activer ou la désactiver en entrant 1 ou 0 dans ce même champ. Les trois champs suivants permettent de définir la lumière sur les trois vecteurs XYZ.
Les trois champs suivants vont vous permettre de modifier la couleur de votre lumière grâce au modèle RGB. Il s'agit d'un modèle de couleur additif dans lequel le rouge, le vert et le bleu sont mélangés ensemble à divers degré afin de donner d'autres couleurs. En d'autres mots, en ajustant les valeurs de chacune des trois couleurs, vous pouvez en créer une autre.
Le champ Light luminosity a un nom des plus explicites.
Quatre autres variables sont présentes pour définir la luminosité ambiante. En bref, la lumière elle même est la luminosité appliquée sur tous les objets proches de votre sources de lumière alors que la luminosité ambiante est la luminosité totale de votre layer. Vous pouvez la colorer aussi.
Les trois dernières variables définissent le comportement de votre lumière. La taille du halo lumineux en son centre, sa luminosité globale (plus la valeur est grande, moins la lumière sera intense) et finalement, la distance qu'elle couvre. Parce que vous avez trois sources lumineuses, vous devez régler ces variables en trois fois. Vous n'avez plus besoin de vous soucier du centre de vos objets ou autre, contrairement à l'effet de Pode. Vous pouvez désormais mettre en place trois sources de lumière pour éclairer autant d'objets que vous souhaitez. Maintenant, côté événements, c'est plutôt simple.
La particularité ici c'est que vous avez besoin de la résolution de votre fenêtre pour faire en sorte que votre source lumineuse soit bien là ou vous voulez qu'elle se trouve. En d'autres mots, vos sources seront configurées comme ça :
For X = (LayerToCanvasX(0, "YourObject".x, "YourObject".y))/WindowWidth
For Y = (LayerToCanvasY(0, "YourObject".x, "YourObject".y))/WindowHeight
Note : when using this effect, the preview doesn’t work properly with Firefox. We honestly don’t know why, but everything is perfectly fine with any others browsers, so when you want to test your work, just choose Chrome or Opera.
Note : Quand vous utilisez cet effet, sachez que la preview ne fonctionnera pas correctement sur Firefox. Nous ne savons absolument pas pourquoi, mais tout est parfaitement fonctionnel sur n'importe quel autre navigateur, donc si vous voulez tester votre travail, tournez vous vers Opera ou Chrome.
Conclusion : Bien ! La présentation des principales solutions (actuellement) disponibles sur Construct 2 pour implémenter un éclairage dynamique est maintenant terminée. Je vous recommande personnellement NormalMap Extented de Matriax, parce qu'il est évidemment le plus complet de tous. J'ai voulu rédiger une sorte de document officiel au sujet de cet éclairage spécial pour Construct 2, c'est pourquoi j'ai pris le temps de présenter tout ce que je connaissais là dessus. Mais encore une fois, pour votre propre projet, il vaut mieux vous concentrer sur le dernier effet présenté sur cette page.
Dans tous les cas, vous restez libre de choisir celui que vous voulez. Sachez qu'il est possible de modifier n'importe lequel de ces effets (côté code j'entends) pour en faire une nouvelle alternative encore plus efficace capable de produire plus de trois sources de lumière. Ce tutoriel ne traite pas de ça pour l'instant.
Selon votre choix, il vous faudra concevoir vos niveaux de façon à ce qu'une seule ou peut être sources lumineuses puissent l'éclairer sans problème. Dans un futur proche, je prendrais le temps de modifier l'effet de Matriax pour y ajouter plus de sources lumineuses et vous expliquerez comment faire dans une nouvelle page dédiée. Des bases en javascript seront nécessaires.
Une de mes créations hasardeuses utilisant l'effet de Matriax :