Night.png);">
Apprendre


Vous êtes
nouveau sur
Oniromancie?

Visite guidée
du site


Découvrir
RPG Maker

RM 95
RM 2000/2003
RM XP
RM VX/VX Ace
RM MV/MZ

Apprendre
RPG Maker

Tutoriels
Guides
Making-of

Dans le
Forum

Section Entraide

Sorties: Star Trek: Glorious Wolf - (...) / Sorties: Dread Mac Farlane - episode 3 / News: Plein d'images cools créées par (...) / Sorties: Star Trek: Glorious Wolf - (...) / Jeux: Final Fantasy 2.0 / Chat

Bienvenue
visiteur !




publicité RPG Maker!

Statistiques

Liste des
membres


Contact

Mentions légales

229 connectés actuellement

29185530 visiteurs
depuis l'ouverture

5795 visiteurs
aujourd'hui



Barre de séparation

Partenaires

Indiexpo

Akademiya RPG Maker

Blog Alioune Fall

Fairy Tail Constellations

Eclipso

Planète Glutko

Hellsoft

Le Temple de Valor

Guelnika & E-magination

Tous nos partenaires

Devenir
partenaire



Perspective isométrique : définition et conception d'une grille

Ce tutoriel vous permettra pas à pas à dessiner ses map en utilisant le standard isométrique, souvent utilisé dans les rpg.

Ecrit par Titania


❤ 1

Voilà je vais essayer de vous apprendre à faire des map en perspective isométrique… En voici un exemple :

image
Exemple d'une map du jeu Dofus.

Je vous vois venir, « En quoi ??? C’est quoi ce charabiat ??? ». Ne vous affolez pas je vais tout vous expliquer…

Tout d’abord, c’est quoi la 2d isométrique diriez vous… En fait c’est très simple. C’est une façon de représenter le réel. Contrairement à la perspective classique, (dite cavalière), le trièdre, système de 3 axes, (prenons x, y et z) voit ses axes espacés de 120° chacun. Une petite illustration s’impose…

image
(Source : Wikipedia)

Vous commencez a comprendre mais vous vous demandez peut-être « mais qu’est ce qu’elle dit elle avec ses axes inutiles ? ».En Fait c’est très simple… Si on colle pleins de trièdres côte à côte on obtient une grille, et lorsqu'on a cette grille, on a plus qu’a laisser notre imagination s’occuper de la suite… Mais encore faut-il la faire la grille, encore une fois, c’est un exercice très simple.
Sur une page blanche (relativement grande) commencez par tracer des lignes verticales avec un outil de taille 2 pixels, espacées d’environ 65 pixels chacune. On devrait tous avoir ceci :

image

Vous voyez vous vous en sortez ! Ensuite Sur votre logiciel de dessin afficher une grille quelconque (mais de préférence de pas 128 et de 4 subdivisions). La grille nous servira à tracer les lignes a 120°.
Pour le faire très simple avec un outil 1 pixel partez de l’angle haut gauche d’un carreau de la grille passez par le milieu du coté droit du carreau et finissez a l’angle inférieur droit du carreau d’a coté. J’arrête de parler les images parleront d’elles même :

image

Nous y sommes, faite la même chose a chaque carreaux. Faite la même chose de sens contraire et vous aurez votre grille fin prête…
Bon comme je suis gentille je vous met la grille déjà toute faite (vous me direz « elle aurais pas pu nous la donner sans nous faire * #@%& ^^ » et bien non, au moins vous saurez la faire de vous-même !).


Lien vers l'image (Source : Wikipedia)

Vous êtes bien content, vous avez la grille mais qu’allez vous en faire ??? (Si si vous pensez sûrement cela ^^). Ne vous impatientez pas et continuez à lire !

Si vous remarquez bien sur votre grille, tous les trièdre cote a cote forme de nombreux cubes ! Et oui c’est magique :

image
(Source : Wikipedia)

C’est à partir de ces cubes qu’on pourra dessiner toutes sortes d’objets, notamment des maisons ! Si Si je vous assure regardez :

image
Par Gus. (Source : http://www.guylene-delisle.fr/article-une-ville-en-perspective-109894635.html)

Voila normalement vous savez faire des décors en isométrique, il vous reste plus qu’a convertir en tileset et créer un bon script de gestion des collisions, mais ceci pourrait faire l’objet d’un autre tutorial.


Mis à jour le 26 janvier 2021.
Les images d'origine par Titania n'ayant pu être retrouvées, elles ont été remplacées.





thebassgroove - posté le 04/08/2010 à 18:53:49 (1 messages postés)

❤ 0

Bonjour à tous,

Je souhaite que ce message soit lu le plus possible, c'est la raison pour laquelle l'écriture est si grande.

J'ai repris RPG Maker depuis quelques jours en espérant que des améliorations avaient été apportées depuis ma dernière utilisation (au environ de la sortie de RPG Maker XP, je crois...)

Bref, quelle déception...

Alors j'ai effectué quelques recherches et notamment sur la 2D isométrique. J'ai essayé qqs scripts dont celui plus haut, mais pas vraiment convaincu : un temps de chargement plus long, un script lourd et complexe... Afin de résoudre cela, j'ai donc utilisé ma petite tête !

Pourquoi créer un script après tout ? Pourquoi ne pas modifier directement les scripts system ?

C'est ce que j'ai fait !

Premièrement dans Game_Player :

Portion de code : Tout sélectionner

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 #--------------------------------------------------------------------------
 # * Processing of Movement via input from the Directional Buttons
 #--------------------------------------------------------------------------
 def move_by_input
    return unless movable?
    return if $game_map.interpreter.running?
case Input.dir8
when 1
move_lower_left
when 2
move_down
when 3
move_lower_right
when 4
move_left
when 6
move_right
when 7
move_upper_left
when 8
move_up
when 9
move_upper_right
    end
  end



Ceci ajoute 4 nouvelles directions donnant ainsi un effet 3D (2D iso, vous avez compris ^^)
Mais le problème, c'est que les mouvements en diagonale sont d'un angle de 45° (x+1 entraîne y+1)
Et bien il suffit de changer l'incrément dans Game_Character :
Vers la fin, vous trouverez tous les move_left, move_lower_left, move_upper_left...

Pour move_lower_right par exemple :

Portion de code : Tout sélectionner

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#--------------------------------------------------------------------------
  # * Move Lower Right
  #--------------------------------------------------------------------------
  def move_lower_right
    unless @direction_fix
      @direction = (@direction == 4 ? 6 : @direction == 8 ? 2 : @direction)
    end
    if (passable?(@x, @y+1) and passable?(@x+1, @y+1)) or
       (passable?(@x+1, @y) and passable?(@x+1, @y+1))
      @x += 1
      @y += 1
      increase_steps
      @move_failed = false
    else
      @move_failed = true
    end
  end



il suffit de remplacer

Portion de code : Tout sélectionner

1
2
      @x += 1
      @y += 1


par :

Portion de code : Tout sélectionner

1
2
@x += 1
@y += 0,333333


par exemple.

Et voilà un perso qui bouge dans tous les sens !
Bon je vous l'accorde, les ressources proposées par défaut dans le RTP ne sont pas en iso.
J'ai donc cherché (beaucoup, beaucoup...) pour finalement trouver des RTP rippés de DOFUS, le MMORPG. Leur style ressemble au cel-shading et ont une géométrie de type isométrique.
Plus besoin par conséquent de script :D

PS : si vous souhaitez les liens, envoyer un message privé.


29Kairu29 - posté le 11/11/2010 à 22:19:19 (14 messages postés)

❤ 0

Salut ! Super tuto ! Moi qui cherchais comment faire pour creer des tolères iso pour mon projet... Merci beaucoup ! Sauf qu'après pour dessiner c'est autre chose 8D

@Thebassgroove : ouais cool bon boulot ;D franchement chapeau ! Compte sur moi pour utiliser "tes scripts" pour mon projet en iso ! Mais au fait, esque ça marche vraiment impec ? Merci d'avance !


P.S. : Esque quelqu'un peut me dire comment on fait pour redimensionner cette grille pour que ça colle avec les tolères d'rmxp ?


Shuta - posté le 14/11/2010 à 22:45:19 (300 messages postés)

❤ 0

La mort c'est l'arret du coeur... L'amour c'est la raie du cul.

Woh ! Ce topic remonte à loin !
Mais je cherchait de l'iso et voilà XD
J'avoue que ce topic est génial !
Je vais l'utiliser de mes projets =)

Ero Sakuga


SuperGregMaker - posté le 20/03/2011 à 22:40:20 (111 messages postés)

❤ 0

J'aime les trains.

Whaou ! Pas mal ce tuto ! Mais incomplet, car tu nous parles de faire des décors en iso, et la on a que la grille avec les 3 axes, donc aucun renseignement sur la mise en relief de la texture, etc ...

J'ai essayé de faire une petite arche (oui j'ai oublié un "cube" en haut, que Dieu me foudroie sur le champ ...) ; j'ai rippé la texture 3D que tu as utilisé pour ton exemple, et voici le résultat :

image
> Lien direct : Image

Que Dieu vous garde, j'ai plus de place chez moi ...


eydiaze - posté le 22/08/2013 à 15:37:53 (33 messages postés)

❤ 0

très intéressant .... sauf que sans images :triste3

Suite à de nombreux abus, le post en invités a été désactivé. Veuillez vous inscrire si vous souhaitez participer à la conversation.

Haut de page

Merci de ne pas reproduire le contenu de ce site sans autorisation.
Contacter l'équipe - Mentions légales

Plan du site

Communauté: Accueil | Forum | Chat | Commentaires | News | Flash-news | Screen de la semaine | Sorties | Tests | Gaming-Live | Interviews | Galerie | OST | Blogs | Recherche
Apprendre: Visite guidée | RPG Maker 95 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker MV | Tutoriels | Guides | Making-of
Télécharger: Programmes | Scripts/Plugins | Ressources graphiques / sonores | Packs de ressources | Midis | Eléments séparés | Sprites
Jeux: Au hasard | Notre sélection | Sélection des membres | Tous les jeux | Jeux complets | Le cimetière | RPG Maker 95 | RPG Maker 2000 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker VX Ace | RPG Maker MV | Autres | Proposer
Ressources RPG Maker 2000/2003: Chipsets | Charsets | Panoramas | Backdrops | Facesets | Battle anims | Battle charsets | Monstres | Systems | Templates
Ressources RPG Maker XP: Tilesets | Autotiles | Characters | Battlers | Window skins | Icônes | Transitions | Fogs | Templates
Ressources RPG Maker VX: Tilesets | Charsets | Facesets | Systèmes
Ressources RPG Maker MV: Tilesets | Characters | Faces | Systèmes | Title | Battlebacks | Animations | SV/Ennemis
Archives: Palmarès | L'Annuaire | Livre d'or | Le Wiki | Divers