Overlay mapping.

Voici ma méthode pour faire de l'overlay mapping, j'utilise cette méthode pour mon projet World of Forestia. ( Oui je fais de la pub!).

Si vous suivez bien vous serez capable de faire ce genre de map à la fin de ce tutoriel :

Ce dont vous avez besoin :

- Rpg Maker Ace.
- Des ressources que vous pouvez trouver facilement sur le net.
- The Gimp (dispo est cette adresse : Lien ).

Vous avez aussi besoin de trois scripts, les trois ne sont pas nécessaires mais vous faciliterons grandement la tâche.

Voici le lien de téléchargement sous forme de démo pour les trois scripts ainsi que les deux DLL.

http://www.mediafire.com/download/hzv1nx1hg0js5f1/TutoOverlay.rar

Et un petit pack de ressources pour commencer :

http://www.mediafire.com/download/jfof84ufydqebil/Plantes.rar

Explications sur ces scripts :[/b]

Le premier permet de faire des screenshots de votre carte entière grâce à l'appuie d'une touche (F7).

Attention deux fichiers "dll" sont nécessaires pour faire fonctionner le script "screenshots", ils sont présent dans le dossier "system" de cette même démo.
A vous de copier ce fichier dans le dossier "system" de votre projet.

Le second est tout simplement le script d'overlay mapping.

Et le troisième sert à déterminer quel case sur votre map est passable ou non grâce à la gestion des zones.


C'est partis ...

Première chose à faire c'est une simple carte comme celle ci-dessous, elle doit comporter que les choses importantes du terrain et quelques détails (suivant les ressources que vous possédez pour l'overlay).

Une fois cette carte créée lancez là pour la tester et pressez la touche F7 de votre clavier pour en faire un mapshot, l'image sera dans le dossier "Mapshot" de votre projet.

Maintenant il vous faut l'ouvrir dans The Gimp, faites un clique droit sur celle-ci et choisissez "Edit with Gimp", le logiciel se lance et ouvre votre image.

Voila ce que vous avez devant vous :

Maintenant et avant toutes choses il faut ajouter un calque à l'aide de ce bouton dans le haut du logiciel :

Choisissez "Nouveau claque" et Validez.


Vous voila maintenant près à commencer l'overlay, je conseil de commencer par tout ce qui se trouve sur le sol, ensuite ce qui se trouve en hauteur et au dessus du personnage, pour finir les effets de lumière pour embellir vos cartes encore plus.

Si vous avez bien compter il faudra avoir au final trois calques différents Ground, Par et Light.

Pour ajouter des images sur votre carte il faut procéder par glisser-déposer, donc cliquer sur l'image à déplacer et lâchez là sur votre carte.

Une fois terminé vous aurez ce genre de résultat :

Il faut maintenant retirer le calque qui représente votre "Mapshot" pour au final n'avoir que les ressources affichées et sauvegarder votre premier calque qui représente la partie "sol" pour l'overlay, voici comment faire :

Chercher ici votre "mapshot" normalement c'est celui tout en bas de cette séries d'images :

Une fois trouvé cliquez sur l'oeil celui ci permet de rendre invisible le calque, voila ce que vous avez une fois cette opération effectuée :

Sauvegardez ce calque de cette façon :

Fichier -> Exporter -> Changer le nom de votre image par "Sol.PNG" pour les différencier pas la suite -> exporter -> exporter.


Voila votre premier calque est terminé, nous allons maintenant passer au calque des ressources qui se trouvent au dessus du joueur comme les arbres, plantes etc...

Ouvrez à nouveau de la même manière l'image "mapshot" dans Gimp.

Comme précédemment ajoutez un nouveau calque et commencez à glisser -> déposer vos ressources sur votre carte, une fois terminé vous aurez ce genre de carte :

Et ensuite le calque seul lorsque vous aurez sauvegardé :




...

Vous voici maintenant en possessions de deux calques, un qui représente les ressources apparentes u le sol de votre carte et le deuxième qui représente les ressources qui se trouve au dessus du joueur comme les arbres etc...

Nous allons maintenant voir ce que votre travail donne en jeu.

Pour commencer vous devez renommer pui coller les deux calques au format PNG dans le dossier Overlay.
Si il n'est pas encore présent créé le dans  le dossier Graphics de votre projet.

Vous devriez avoir ça au final dans le dossier Graphics :



Avant de déplacer les deux calques dans ce dossier nous allons les renommer mais attention pas n'importe comment.

Pour commencer il faut que vous releviez l'id de la carte sur laquelle ces deux calques apparaîtrons, pour connaître l'id d'une carte c'est très simple, c'est indiqué sous celle-ci dans l'éditeur de carte :



N'oubliez pas de mettre un événement qui active les interrupteur correspondant aux calques dans le script overlay.

Vous pouvez maintenant tester votre carte et voir les changements.

Voici ce que ça donne de mon coté :




La passabilité :

En testant votre carte vous pouvez remarquer que vous marchez encore sur le bas des arbres etc, grâce au script que vous avez ajouté précédemment (zone passable) dans votre projet nous allons remédier à cella.

Retournez dans l'éditeur de votre carte et choisissez l'outil "région" pour régler les tiles qui devront être impassable :



Le script est réglé de façon à ce que se soit la région avec l'id 50 qui soit impassable mais vous pouvez modifier cella dans le script même.

Pour faire court le joueur ne pourra pas marcher sur les carrés représentant la région id 50.



Attaquons maintenant les effets de lumière

Rien de plus beau dans un projet que les effets de lumière coupler avec un système de jour/nuit.

Voici les étapes pour créer des effets de lumière.

1 : Prendre un screenshot de votre map et l'ouvrir dans GIMP.
2 : Créer un nouveau calque vide


3 : Sélectionner l'outil "outil de dégradé et faite les réglages comme sur le screen ci-dessous (couleur, type de dégradé et sa forme)


4 : Appliquer votre dégradé sur votre map ou se trouve la source de lumière, dans le cas présent se sera une torche.


5 : Une fois vos dégradés appliqués vous devez créer un nouveau calque et le peindre entièrement en noir à l'aide de l'outil de remplissage :

6 : Quand cela est fait vous devriez avoir devant vous GIMP avec une image noire similaire au screen du dessus.

7 : Maintenant vous pouvez supprimer le calque qui représente la map (clic droit sur le calque en question et faite supprimer le calque).
une fois fait il faut déplacer le calque avec votre dégradé vers le haut (au dessus du calque noir)
Quand vous avez fini vous devriez avoir ce genre d'image :


Vous pouvez à présent exporter votre image (fichier -> exporter -> image JPG).

Avant de la placer dans votre dossier "overlay" il faut renommer votre image light91-1 (remplacer 91 par l'ID de votre map).

Et voici le résultat final :

Biensûr les différents réglages de luminosité, couleurs etc... permettent d'obtenir beaucoup d'autres résultats.

Très intéressant, tu les trouves où tes ressources d'arbres s\'il te plaît?

...


...


...


     

Merci pour vos réponses

En fin de tutoriel je fournirai un petit pack de ressources que j'utilise dans mon projet pour vous aider à commencer.

+5 points de participation

Excellent tutoriel, merci !

Merci à Elisa et Korndor pour son commentaires.

Bientôt la suite du tutoriel ou je vais m'attaquer à la partie "effets de lumières" sur les cartes.

Pour donner un effet comme celui-ci :


Et tout ça sans script de lumière ce qui évite grandement les bug en tout genre !

...

Si j'avais la moindre once de talent en mapping, je suivrais ton tutoriel avec plaisir.

En attendant, on ne peut que s'incliner devant ton propre talent et la qualité de tes explications. Ça paraît tellement simple présenté comme ça. ^^'

Merci pour ton message Ekron

Mais c'est très simple en fait, suffit de tester pour s'en rendre compte, je t'assure !

Après il faut bien évidemment un peu de courage c'est plus long pour mapper mais le résultat est tellement mieux au final...

...

C'est vrai que ce tutoriel, au vu des résultats que l'on peut obtenir, donne vraiment envie de tenter cette technique. Si j'arrive à trouver le temps, je pense que je m'y essaierai.

Il est toutefois certain que n'importe qui ayant vu l'une de tes maps ne peut douter de la qualité graphique que permet d'atteindre cette technique.

ekron a écrit:Il est toutefois certain que n'importe qui ayant vu l'une de tes maps ne peut douter de la qualité graphique que permet d'atteindre cette technique.

+1

J'avais moi-même les mêmes appréhensions que toi, ekron, et après quelques jours de test, ça paraît plus clair, et logique en somme.

Par contre, c'est long, très long. J'ai des maps où j'ai modifié, supprimé, remis, etc. pendant 4 heures, et souvent je les reprends plus tard, mais le résultat vaut largement la peine.

Exelent début de tutoriel !
Sa m'aidera beaucoup pour mon projet !

Bonjour et merci pour ce tutoriel, je vais à présent refaire mes maps car le rendu est tellement plus beau!
J'aimerais juste savoir comment animé les tilesets d'eau grâce à l'overlay mapping ?

Merci pour les commentaires.

@ Dreeks :

Cette partie viendra dans la troisième partie du tutoriel néanmoins si tu es pressé c'est indiqué il me semble dans le début du script comment faire.

@XtremViper :

Je me rend compte qu'au plus je fais de l'overlay, au plus je vais vite, je me rappel ma toute première map, j'ai du mettre 4 heures avant de la finir, maintenant je fais ce genre de map en 1h30 +-.

...

Peut-on avoir ton pack de ressources, herbes, ect ?   

Je fournirai un petit pack de ressources, je l'envoie ce soir.

Pour le reste il faudra que vous cherchez par vous même sur le web sinon c'est trop facile

Ok, de toute façon, il ne me reste que le herbes a avoir, j'ai déjà les arbres.

Voila le pack de plantes et autres petites choses, n'hésitez pas à poster vos map dans la section adéquate pour montrer vos créations.

www.forestia-productions.com/Pack-Plantes.rar

Si vous cherchez un peu il y a moyen de trouver d'autres ressources sur le net.

Premièrement :

Merci beaucoup pour ton tuto, sa va me permettre de faire des maps de fou =D

Deuxièmement :

Tu parles de 3 scripts mais quand je télécharge la démo, je ne vois aucun script, ni dans le projet ni de fichiers avec des liens menant à ses scripts.

J'ai par contre bel et bien le fichier ".dll".

Aurais-tu le liens des scripts s’il te plait ?   

Kikou Xandiar,

Merci pour ton message

Dans le dossier que tu as télécharger tu as une démo, un projet, lance le et ouvre l'éditeur de script, les trois scripts sont bien dedans.

...

C'est vraiment top.
Je dois dire que tu es un peu comme un super heros pour moi.

C'est grace au gens comme toi qui partage leurs savoir
avec des neophites comme moi que ce forum est si bien.

Bonne journé.

Excellent Tuto, en plus très bien expliqué et détaillé, tu apporte beaucoup a la communauté des makers Spy !! et merci pour le lien pour les arbres et herbes.

Une petite question me viens a l'esprit tout de même, il est possible de faire de la recolo de map comme c'est le cas pour les charas au sprite par sprite? j'ai en tête de faire un palais entièrement blanc (genre la tour d'or blanc dans Elder Scroll, je sais plus le nom exact).

Merci pour vos messages

Une petite question me viens a l'esprit tout de même, il est possible de faire de la recolo de map comme c'est le cas pour les charas au sprite par sprite? j'ai en tête de faire un palais entièrement blanc (genre la tour d'or blanc dans Elder Scroll, je sais plus le nom exact).

Oui c'est possible de faire ça, je pense qu'il vaut mieux faire avant tout ta carte normalement puis faire un screen et travailler l'image sous Paint.net ou Gimp.

Bonsoir    (Désolé en cas de nécropost ...)

Déjà, excellent tutoriel, bien détaillé et tout ....

Mais est-ce normal ceci ? (Il apparait "en dessous" de la maison)

Exemple:

Et une solution existe pour le faire apparaitre devant ?

Merci d'avance