Illuminer vos jeux avec un éclairage dynamique !

2

Index

Statistiques

7,890 visites, 13,722 vues

Outils

Partager

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 28 Dec, 2016. Last updated 25 Feb, 2019

Que la lumière soit !

Il est temps pour vous de faire quelques expériences. Bienvenue dans la partie pratique de ce tutoriel. Ici nous allons voir comment implémenter un éclairage dynamique au sein d'un jeu de plateforme extrêmement basique. Tout d'abord, nous aurons besoin d'un niveau. Voici notre magnifique niveau expérimental, réalisé avec soins et amour sur Paint en moins de trois minutes.

Dans ce niveau, nous voulons rajouter deux sources lumineuses. Nous utiliserons donc l'effet de Matraix, ce qui n'est pas étonnant puisque c'est le meilleur que nous puissions utiliser à ce jour. A présent, nous avons besoin d'un personnage. Voici Bob. Bob sera notre personnage. Bob est notre sujet de test cette fois-ci, à la place de Cloud Strife.

Bob est content.

Bob est actuellement en train de glander sur mon bureau. Il ne comprend pas mon incroyable fond d'écran et encore moins ce qu'il fout là. Nous devons l'implémenter dans notre niveau 2D dégueulasse aussi vite que possible. Vous êtes supposé connaitre les fondamentaux de Construct 2, c'est pourquoi je ne prendrais pas le temps d'expliquer comment implémenter le niveau et Bob. Etant donné que nous voulons rester simples, contentons nous de donner le comportement Solid à nos plateformes et le comportement plateform à Bob.

Bob est content.

Nous avons maintenant un petit monde, et un petit truc qui vit dessus. Prochaine étape : Les normal maps. Nous voulons illuminer Bob et son environnement des plus ternes, donc nous aurons besoin de quatre normal maps. En effet, notre niveau comprend trois plateformes plus Bob lui même. Notre scène a donc quatre morceaux à éclairer.

Attention : Vous devez travailler avec des morceaux de scène. N'essayez jamais de générer une normal map pour un niveau tout entier en une fois, non seulement vous serez confrontés à des bugs mais en plus vous allez perdre en qualité et en détails. En plus, il sera impossible d'éditer le rendu de vos plateformes et surfaces séparément si elles sont toutes agglomérées ensemble. Il est essentiel de décomposer votre environnement en plusieurs morceaux puis de travailler avec ces derniers. Exemple :

Pour réaliser ma création hasardeuse, je n'ai pas fait générer une normal map pour le niveau tout entier, mais six petites normal maps, une pour chaque parties qui composent le niveau. J'insiste encore sur la notion de parties. L'environnement de ce niveau ridicule est composé de divers éléments de couleur rouge, blanche et noire. Je n'ai pas créé une normal map pour chacun de ces éléments, juste pour chaque partie dont il est composé ! Gardez la différence à l'esprit. Revenons-en au monde de Bob.

En utilisant l'un des cinq outils décris au début de ce tutoriel, faites générer vos normal maps puis ajouter les dans le jeu. Créez une famille qui leur soit dédiée, puis appliquez lui l'effet de Matriax, NormalMap Extented. Configurez comme ça :

Assurez vous que toutes vos normal maps partagent la même taille et la même position que leur sprite respectif au sein du niveau. Dans la feuille d'événements, n'oubliez pas de définir la position de la normal map liée à Bob :

Ajoutez deux nouveaux sprites qui vont nous servir de sources lumineuses pour l'instant. J'utilise deux petit carrés nommés LightOne et LightTwo. Donnez leur le comportement Drag&Drop, puis dans votre feuille d'événements, procédez comme vous l'aviez fait dans la page précédente :

Vous noterez que nous n'avons jamais travaillé sur plus d'un seul sprite jusqu'à maintenant (si on ne compte pas les sprites des sources lumineuses). La situation est assez différente à présent, et si vous lancez la préview de votre travail, vous risquez d'obtenir une atrocité similaire à celle-ci :

L'étrange arrière fond magenta de vos normal maps est grosso modo ce qui va devenir de la pénombre une fois que vous aurez activé l'effet de Matriax (ou n'importe quel effet présenté dans ce tutoriel). Toutes vos normal maps du niveau de Bob ont actuellement cet arrière fond magenta, et disposent donc de leur propre pénombre personnelle, ce qui est moche, ridicule et inutile. Nous devons corriger ça, ce qui prend moins de six secondes sur Paint ou Photoshop :

Et une fois que nous avons remplacé tout ça par nos bonnes Normal maps...

...tout est parfait. Les tests sont concluants, maintenant nous devons juste remplacer nos deux carrés colorés par de vraies sprites, ce qui implique trois fois rien ou presque dans notre feuille d'événement. Modifions un peu l'opacité des lampes aussi. Et enfin, mesdames messieurs, nous y voilà :

     

Regarde moi ça, Bob. C'est encore plus beau que mon gâteau à la vanille.

  • 0 Comments

Want to leave a comment? Login or Register an account!