[ - Tutoriel - ] Comment mapper avec des panoramas

La création de jeux indépendants/amateurs (tuto, entraide, questions...) sous les moteurs de la série RPG Maker.
Raytwo-x
Koruldia Master
Messages : 2041

[ - Tutoriel - ] Comment mapper avec des panoramas

Message non lu par Raytwo-x » mer. nov. 17, 2010 10:49 pm

Bon, voilà voilà, j'ai dis que j'allais le faire, alors je le fais.

Je compte indiquer étape par étape ce que je fais, avec peut-être quelques parties annexes pour faciliter un peu la tâche.

Les captures d'écrans sont faites sur Photoshop pour faire la map, mais rien n'empêche d'utiliser autre chose, comme The Gimp, Paint, etc...

Bon bon bon, alors, je commence où... (pour tout dire, au moment où j'écris ce tuto, j'ai rien préparé, pour bien être dans la même situation que vous).



Première étape : Préparer le terrain

Bon, on commence par ouvrir son RPG Maker VX (pas besoin de vous faire un dessin pour ça, vous êtes assez grands je pense).

On commence par créer une carte avec les proportions qu'on veut, je vais donc en faire une petite, pour faire rapide et facile.

Image
Comme on peut le voir ici, rien de compliqué : un nom de map, la taille minimum, et rien de plus.

Comme vous le verrez en appuyant sur OK, vous obtenez une map normale, tout ce qu'il y a de plus basique, elle est simplement vide et transparente (exactement ce qu'on veut donc).

Image
Le résultat à obtenir. Les carrés bleu clair/foncé indiquent la transparence.

Voilà, la première étape est finie. Rien de difficile jusqu'ici.



Deuxième étape : Faire notre panorama/carte

Ici, ça se complique un petit peu.
Préparez votre logiciel de retouche d'images favori (pour ce tutoriel, j'utiliserai Paint et Photoshop, libre à vous d'en utiliser un autre).

Vous allez donc devoir créer une image vide, de la taille de votre map (ou plus petit si vous désirez faire un panorama qui ne prend pas toute la map).

Pour connaître la taille de votre map, il faudra utiliser un logiciel très difficile d'utilisation. J'ai nommé... la calculatrice Windows (ou le cerveau pour les chanceux qui en ont un, ici c'est pas mon cas...).

Si on regarde la carte que j'ai crée, on remarque que la largeur est de 17 cases et la hauteur de 13.

Une case fait 32 pixels. Vous devez donc faire les calculs suivants pour obtenir la taille de votre carte :

Largeur en cases * 32
Hauteur en cases * 32

Ce qui donne pour moi :

17 * 32 = 544
13 * 32 = 416
(en gros, la hauteur/largeur de la fenêtre de jeu de RMVX).

Donc vous pouvez créer votre image vierge (non Darxenas, non, pas de sous-entendus) grâce a ceci :

Image
Voilà à quoi ça doit ressembler sur Photoshop.

Normalement, vous obtenez un rectangle blanc.
Vous pouvez dessiner votre carte directement sur le logiciel, mais j'expliquerai pas ici car vous n'êtes pas là pour apprendre à utiliser Paint. :dent:

Bon, après un p'tit temps, vous devriez avoir votre carte (ouais, je sais, je me suis pas foulé... Pour la grille qui divise l'image en cases de 32*32, faudra chercher tout seul ou me faire un don de 20 Korulz en espèces).

Image
Celui qui reconnait ce que j'ai dessiné aura un cookie.

Bon bah voilà, vous avez votre... *toussote* magnifique map !
Vous pouvez donc l'enregistrer, et la placer dans le dossier "Parallaxes" de votre projet.

Image
Ça va vous aider pour la prochaine étape.

Bon, l'étape 2 est terminée.



Troisième étape : Utiliser le panorama dans RPG Maker

Et oui, c'est long hein ? Une fois que vous aurez l'habitude, ça ira plus vite.

On retourne donc dans RPG Maker, et on fait un clic droit -> "Propriétés de la Carte" sur la carte sur laquelle on veut utiliser le panorama.

Vous retombez sur la fenêtre que vous avez vu à la création de votre carte.
C'est normal. Mais cette fois, on va y apporter des changements.

Cliquez donc sur le bouton "..." du menu déroulant "Image :" dans la partie "Panorama Défilant".

Surprise, qu'est-ce qui s'y trouve?

Image

Bawi, on retrouve notre panorama, on peut donc cliquer sur OK, et ensuite cocher "Afficher dans l'éditeur" dans les propriétés de la carte.
Ce qui va donner...

Image

Voilà voilà, on a notre panorama dans l'éditeur. Maintenant, il manque plus que les collisions des cases.

Vous allez donc devoir enregistrer ces deux images dans le dossier "System" de votre jeu.

Vous n'êtes pas obligés de faire ça mais c'est pour une question de facilité, vous comprendrez après.

En voilà une déjà :

TileE.png:
Image

Oui, on ne la voit pas. C'est justement ça qui est utile !

Et enfin, TileEPano.png
Image

Une fois que c'est fait, allez dans le dossier "System" de votre projet et renommez "TileEPano" en "TileE" (et donnez un autre nom à TileE).

Ensuite, retournez dans RPG Maker, et allez dans l'onglet E des tilesets.

Cliquez ensuite sur le bouton "Gestionnaire des ressources", dans votre barre d'outils.

Image
Un peu au-dessus du panorama avec la bulle d'aide.

Refermez simplement la fenêtre ensuite et vous verrez votre tileset avec des carreaux bleu et rouge à gauche.

Cliquez ensuite sur le bouton "Paramètres de passage" (il se trouve à gauche du bouton "Carte" dans la barre d'outils).

Ce mode vous permettra de dire quelle case est traversable et laquelle ne l'est pas.
Ici c'est simple, on clique sur la rouge pour obtenir une croix et on mets un cercle sur le bleu.

Après ça, désactivez le mode "Paramètres de passage" et passez sur le mode "Carte" (bouton juste à droite) et utilisez le carré bleu pour faire des endroits traversables, et le rouge pour les endroits non-traversables.

Pour moi, ça donne ça :
Image

Bon, vous avez fini. Votre map est prête.

Pour ne pas avoir les carrés rouge/bleu sur votre map (vous le remarquerez en testant votre projet), il suffit simplement de retourner dans le dossier "System" et de nommer l'image vide "TileE". Vous aurez alors un panorama convenable et praticable.

Voilà, ce tuto s'achève ici.
Après, à partir de ça, vous pouvez développer de nouvelles techniques : comme faire votre éclairage vous-même, etc... Mais ça, c'est plus pour ici (manque de temps et de sommeil, mais je tenais à le boucler pour aider ceux qui en ont besoin).

Après, pour faire des maisons sans se cogner au toit ou marcher dessus, c'est une autre technique que je détaillerai pas ici : les évènements.
Si vous réfléchissez un peu (pensez aux fiches des persos), vous pourrez le faire assez facilement.

Bon, certes, j'utilise pas la meilleure méthode. Mais bon, tant qu'elle me va à moi hein... :stupide:

Vous pouvez aussi télécharger le projet en fichier joint pour observer ce qu'il y a dedans.

Je suis disponible pour répondre aux questions, si elles sont posées dans ce topic.
Et si vous avez une suggestion à faire pour améliorer le tuto c'est pareil.

Merci de le signaler et je ferai mon possible. ;)
Dernière modification par Raytwo-x le jeu. nov. 18, 2010 6:44 pm, modifié 1 fois.

Avatar de l’utilisateur
Darxenas
Koruldia Divinity
Messages : 5138
Localisation : Kingersheim, France
Contact :

Re: [ - Tutoriel - ] Comment mapper avec des panoramas

Message non lu par Darxenas » jeu. nov. 18, 2010 9:47 am

Bibiche a écrit : Donc vous pouvez créer votre image vierge ( Non Darxenas, non, pas de sous-entendus ) grâce a ceci.
Promis... j'ai rien vu... :stupide:

Mais sinan je tenais à te féliciter : ce tuto est une merveille !!! :love: Facile à comprendre, puis t'as carrément bien foutu des images (lol tu rigoles mais ça va aider) ! Sans parler des petites allusions humouristiques ici et là (ma raison de vivre...)... Ahh... j'aime j'aime j'aime ! :happy: Merci beaucoup !!!
Bibiche a écrit :Je suis disponible pour répondre aux questions, si elles sont posées dans ce topic.
Puis oui j'ai une question, t'es co ce soir à partir de quelle heure ? x) Mdrrr nan je déconne, j'ai aucune question. :clin:

AllanKewell
Koruldia apprentice
Messages : 17
Localisation : Vois tu le rond bleu au milieu de la france pendant la météo ?

Message non lu par AllanKewell » jeu. nov. 18, 2010 4:42 pm

Merci pour le tutoriel. Très complet et très explicatif.

Par contre, petite question, comment arrive tu à diviser ta map en 32*32 sous Photoshop (et je ne donnerais pas 20 koruldz :stupide: )

zessirb
Koruldia God Warrior
Messages : 585

Message non lu par zessirb » jeu. nov. 18, 2010 6:12 pm

Tutoriel très complet, bravo !

Je me rend compte que ça a l'air plus compliqué sur VX que sur XP.

Tu pourrais d'ailleurs écrire comment faire sous XP ?

EDIT :
Raytwo a écrit :Voila voila, on a notre panorama dans l'éditeur. Maintenant, il manque plus que les collisions des cases.

Vous allez donc devoir enregistrer ses deux images dans le dossier "System" de votre jeu.

Vous n'êtes pas obligés de faire ça, mais c'est pour une question de facilité, vous comprendrez après.

En voila une déjà :

TileE.png:
Lien de l'image mort (en tout cas ça s'affiche pas chez moi).

J'en profite pour vous demander si un hébergeur d'image (que je connais depuis peu, avant j'utilisais aussi Image Shack) est bien : 1mage.net
Il a l'air simple et pratique, mais peut être qu'il est moins fiable, à voir.

Raytwo-x
Koruldia Master
Messages : 2041

Message non lu par Raytwo-x » jeu. nov. 18, 2010 6:30 pm

Zessirb, regarde bien, fais clic droit dans la grande zone vide ;) c'est une image vide pour supprimer les carrés bleus/rouges.

Pour XP euhhh... Jamais fais ! Mais c'est le même concept, sauf que tu peux pas afficher le panorama dans l'éditeur ,ce qui facilite pas m'enfin bon.

Alors, pour Allan, même si il fait le radin :

dans la barre d'outils : Edition->Préférences-> Repères, grilles, etc...

La, tu auras plusieurs petits paramètres, va dans la partie "Grille" et met "32" dans le champ "Pas" et règle sur Pixels, et pour subdivision, c'est en combien tu veux faire diviser chaque cube.

Et Dadarx bah euhhhh... Merci et de rien ! :dent:

( et toute la soirée a partir de maintenant, donc 18h30 précisément )

zessirb
Koruldia God Warrior
Messages : 585

Message non lu par zessirb » jeu. nov. 18, 2010 8:31 pm

J'ai rien dit ^^

Pour XP, il faut juste aller dans la BDD et choisir un panorama pour un tileset.

Raytwo-x
Koruldia Master
Messages : 2041

Message non lu par Raytwo-x » jeu. nov. 18, 2010 8:33 pm

Ha oui, juste. Mais bon, jamais essayer avec XP, j'ai attendu le passage vers VX pour expérimenter ça ^^

Et je le préfère, au final ( pourtant au début, il me dégoutait ce truc )

Avatar de l’utilisateur
KaYsEr
KoruTeam
KoruTeam
Messages : 5151
Localisation : Londres
Contact :

Message non lu par KaYsEr » jeu. nov. 18, 2010 10:24 pm

Pour XP, il faut juste aller dans la BDD et choisir un panorama pour un tileset.
Wi c'est la seule soluce mais c'est pas pratique, faire des "bandes" de tileset, le truc innadapté considérant la configuration de l’outil et sa lenteur d’exécution lié au système de tiles super lourd.
Car ok là on parle d’une map panorama qui ferait la taille écran, donc ça tient dans quelques bandes, mais imagines une grande map entièrement comme ça, vla comment ça ramerait (et que c'est chiant de s'y retrouver), surtout si faut en prime avoir la couche haute pour que le perso passe dessous, et parlons même pas d’une couche de lumière, pour cette méthodologie à base de parallaxe VX reste largement au top.

Bah super tuto (dadarx autorisé à corriger les quelques fautes s'il en voit ^^)
:bravo:
Héhé tu t'es souvenu de mon truc des cases colorés sur tileset pour les collisions, mais en fait pour tout avouer, histoire de quand même mieux voir quand jsuis en phase de level design, bah je mets juste une croix rouge comme ça x pour les collisions (centrée sur une case de 32²), et pour les zones passables bah.......... Je mets rien !

Bin wi y a que 2 choix, tu passes ou passes pas, donc besoin que d'une seule case différente, vu que la 2eme sous entendra forcément son contraire, du coup tu y vois super clair, et la ptite croix rouge est assez discrète pour ne pas gêner trop les tests. Bien entendu après quand je dois publier un truc bah je la retire vite fait dans photoshop (ou je renomme un fichier sur lequel elle n’est pas là en effet), toute façon c’est juste 5 pixels, le minimum de chez minimum pour que ça se voit.
Dernière modification par KaYsEr le ven. nov. 19, 2010 1:29 am, modifié 1 fois.
Image

Raytwo-x
Koruldia Master
Messages : 2041

Message non lu par Raytwo-x » ven. nov. 19, 2010 12:21 am

Ha bah oui, c'est vrai que ça aurait été mieux si j'avais fais ça en plus discret mais bon... Je me souviens que j'ai fais cette fiche vers 5h du matin, j'avais plus les idées très claires... xD

Mais oui, j'ai retenu, je viens pas te déranger pour demander des conseils pour les négliger après ! En tout cas merci ^^

Et pour les fautes, j'en ai déjà corrigé quelques une, le problème avec moi c'est surtout les "j'ai corrigé", "j'ai corriger", j'ai jamais réussi a faire la différence pour savoir le quel je dois utiliser... mwarf.

Sinon c'est clair, pour XP c'est pas pratique du tout ! Ici, c'est directement dans l'interface, y a plus qu'a mettre des collisions. Puis on peut utiliser les events pour afficher des trucs, et ajouter certains panoramas en + en plein jeu, comme des couches de lumières etc, c'est super utile. ( Surtout que j'adore jouer avec la transparence et autres )

Avatar de l’utilisateur
Darxenas
Koruldia Divinity
Messages : 5138
Localisation : Kingersheim, France
Contact :

Message non lu par Darxenas » ven. nov. 19, 2010 10:38 am

C'est bon, j'ai vérifié les rares fautes qu'il y avait. :clin: Super tuto je le redis !

Avatar de l’utilisateur
aktoby
Koruldia Silver Soldier
Messages : 134
Localisation : World of Ruins

Message non lu par aktoby » lun. nov. 29, 2010 1:57 am

Merci pour ces idées géniales :love:
aktoby :music:

Raytwo-x
Koruldia Master
Messages : 2041

Message non lu par Raytwo-x » lun. nov. 29, 2010 2:06 am

Héhé, pas de problèmes, les merci reviennent aussi a Kayser ^^

startos
Koruldia Master
Messages : 1307
Localisation : PARIS
Contact :

Message non lu par startos » lun. nov. 29, 2010 10:32 am

Très bon tuto !! :clin:
Image