Discussion :

[Yordarus]

Bonjour à tous,

Je me présente, Yordarus, étudiant et passionné de jeux vidéo et de programmation. J'ai pu étudier quelques langages de programmation, mais depuis peu, je suis littéralement tombé sous le charme de JAVA ( oui je sais ça fait toujours comme ça ).

En me renseignant sur les librairies dispos, LWJGL me paraissait l'idéal pour débuter, wrapper autour de opengl + des libraries annexes pour gérer le son, l'entré/sortie ... etc.

Bien bien bien, tout ça c'est cool mais pour pouvoir l'utiliser correctement, il faut savoir utiliser opengl, et c'est là que je suis un peu perdu.

Pour afficher ma map, je voulais d'avoir le faire en 2D. Mon idée était de faire un quadrillage point par point. Ce qui fait que j'aurais une map de "tile" où mes "tiles" sont définis par 4 points. Ensuite, pour les images, je pensais à créer des textures, et appliquer ces textures suivant le type de "tile".

Cependant je ne comprends pas/connais pas la démarche logique pour créer et utiliser une texture avec opengl/lwjgl. Il y a beaucoup de variance, des fois il y a utilisation d'une api exterieur ( sdl, DeviL ) des fois non.... Du coup je me retrouve perdu.

Ca c'est mon premier point. Ensuite, t il y a 2 principes que je n'ai pas vraiment compris. Il s'agit de l'affichage de l'environnement suivant la position du joueur. Comment faire en sorte que si le joueur est à (x;y), on affiche l'arbre devant, et s'il est à (x1;y1) on affichage l'arbre derrière ?

Le deuxième principe est celui de la souris, qui permet de surligner la tile tant qu'on est dedans. Donc tant que la souris est dans le quad, on sait qu'elle est "sur" la tile n°xxx. Ce principe m'intéresse beaucoup car ça sera plus facile de raisonner en tile plutôt que tile/coordonnées.

Voilà je pense que ça va être pas mal pour commencer.

Merci à tous d'avance

[nouknouk]

Introduction et contexte

Comme convenu par MP avec Yordarus, je vais essayer d'exposer petit à petit les quelques connaissances que j'ai rassemblé lors de l'écriture d'un petit moteur en 2D isométrique. Quitte à l'expliquer à Yordarus, je me suis dit qu'il serait bien plus malin de poster sur developpez.com pour que tout le monde en profite.

Le résultat obtenu peut se voir sur ce mini-site: http://isoChat.no-ip.org. Le site est composé:
- d'une applet Java proposant un éditeur de carte en 2D isométrique
- d'une autre applet Java servant de 'player': elle permet de se connecter au serveur, d'être représenté par un avatar qu'on peut déplacer sur la carte et de discuter avec les autres utilisateurs connectés.

Un screenshot:


Au passage, le tout a été fait au dessus de l'excellent framework pulpcore (je fais un poil de pub, car ce framework amha mérite vraiment d'être connu).

Je vais donc organiser différents posts que j'écrirai au fur et à mesure en essayant de séparer chacun des concepts (tuiles, objets, ordre d'affichage, optimisation, ...).

A noter que mes explications se baseront sur l'utilisation d'une librairie d'affichage 'purement 2D'. Certains concepts seront à adapter si, comme Yordarus, on compte utiliser une 'librairie 3D' pour faire de la 2D (genre openGL, LwJGL, etc...) car dans ce cas l'affichage redessine la totalité de l'écran à chaque nouvelle image.

C'est fini pour l'intro. Passons au choses sérieuses.

[nouknouk]

Les tuiles

L'élement de base d'un moteur 2D isométrique est la tuile, à savoir la zone élémentaire de terrain.

Comment générer une tuile en iso à partir d'une texture 2D ?

Une tuile est à la base un espace de terrain carré qu'on va transformer pour faire son rendu en 'perspective'. Le résultate est la transformation du carré en un losange plus ou moins 'applati'.
Pour ce faire, on fait deux transformations successives à la texture d'origine carrée (1) : une rotation d'un angle de 45° (2) puis on applati l'image obtenue selon l'axe vertical (3).



Le facteur d'applatissement (factIso) correspond à la largeur de la tuile obtenue (ligne rouge, appelée ci-après tileWidth) divisé par la hauteur de la tuile (ligne bleue, ci-après appelée tileHeight).

Il existe potentiellement une infinité de valeurs possible pour factIso. Quelques uns seulement sont réellement utilisés pour le rendu isométrique.

Parmi ceux-ci, il y en a un qui prédomine pour différentes raisons (apsect plus naturel, rendu des lignes droites aux angles multiples de 45°, ...) : le ratio 2:1. C'est celui qui est utilisé dans IsoChat et qui sera détaillé par la suite. Comme le ratio est de 2 (2/1 = 2), la largeur d'une tuile est toujours égale à deux fois sa hauteur.

Toujours pour des raisons pratiques, la taille d'une image de tuile est choisie pour être un multiple de 4 ; quelques tailles typiques : 32x16, 48x24, 64x32, 128x64.

La forme d'une image de tuile:

Le principal point à vérifier lorsqu'on dessine une tuile est la façon dont plusieurs tuiles posées les unes à côté des autres vont s'agencer pafaitement entre elles. Il faut en effet que les tuiles adjacentes s'ajustent parfaitement, sans se chevaucher ni laisser des pixels vides.

Il y a là aussi différentes façons de construire le masque d'une tuile. Celle que j'ai choisie a un avantage important à mes yeux: l'image obtenue est parfaitement symétrique horizontalement et verticalement.
C'est extrêmement pratique pour construire à partir d'une unique tuile 3 autres variations simplement en appliquant une ou deux symétries (au passage, une symétrie sur X + une symétrie sur Y équivalent à une rotation de 180°).

Un exemple ici de 3 variations obtenues à partir d'une tuile de base (grossi deux fois):


Voici un exemple d'une tile de 64x32 grossi plusieurs fois pour bien distinguer les pixels. On notera les coordonnées de différents points specifiques de la tuile, coordonnées qui nous serviront plus tard:

Le tuile qui nous intéresse est la tuile verte. Les autres couleurs sont là pour montrer comment vont s'agencer les tuiles adjacentes.
bien entendu, dans la 'vraie vie', chaque image de tuile chargée en mémoire est isolée ; le pourtour correspond à des pixels totalement transparents.

Ici un exemple d'un tileSet (ie. une image regroupant plusieurs tuiles) de 3x3 tuiles, chacune de 64x32 pixels:


Le terrain (la map):

Maintenant qu'on a des tuiles, on va les disposer ensembles pour créer un terrain (une 'map' en Anglais ou carte).
Note: Perso, je n'ai pas eu l'occasion de travailler sur le rendu de terrains vallonés. Donc les explications ici se borneront au cas d'un terrain totalement plat.


Il nous faut adopter un système de coordonnées pour représenter chaque endroit de la carte, tout d'abord pour avoir une coordonnée pour identifier chaque tuile - genre la tuile (17,23) -, et puis pour identifier précisément chaque position faisant partie de la carte - par exemple, la position d'un joueur est (15.265, 7.314).

Là, il faut faire un choix de la représentation des coordonnées. J'ai choisi que l'axe des abscisses croissantes (X) soit dirigé vers le bas à droite de l'écran ; l'axe des ordonnées (Y) croissantes vers le bas à gauche. Ca nous donne ça au niveau de chaque tuile:


Et plus précisement, a l'intérieur d'une tuile:

Ici:
- le point rouge se situe aux alentours de (0.35, 0.1)
- le point bleu est aux coordonnées (0.80, 0.48)
- le point noir est pile au milieu de la tuile, coordonnées (0.5, 0.5)

[to be continued...]

[nouknouk]

réservé (2).

EDIT plus ou moins temporaire: quelques infos sur l'ordonnancement de l'affichage des sprites sur ce thread.

[nouknouk]

Second EDIT plus ou moins temporaire: la façon de convertir des coordonnées dans le système de coordonnées isométrique vers les coordonnées de l'écran ici.

[nouknouk]

réservé (4).

[nouknouk]

réservé (5).

[Othana]

Dommage, on n'a plus de suite...

[nouknouk]

Dommage, on n'a plus de suite...

Malheureusement, comme souvent c'est le temps qui me manque pour pouvoir donner suite dans de bonnes conditions.

A défaut, si ça intéresse du monde, je pense qu'il serait envisageable que je publie tout ou partie du code source de certaines réalisations, notamment le petit moteur 2D isométrique développé au dessus de la librairie PulpCore.

[dxtreme01]

Une suites s'il vous plait ? C'est vraiment intéressant comme sujet!