Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Yordarus
    Invité(e)

    Par défaut [LWJGL] Création d'un RPG en 2D ISO

    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

  2. #2
    Modérateur
    Avatar de nouknouk
    Homme Profil pro
    Inscrit en
    décembre 2006
    Messages
    1 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : décembre 2006
    Messages : 1 647
    Points : 2 045
    Points
    2 045

    Par défaut

    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.
    Mon projet du moment: BounceBox, un jeu multijoueurs sur Freebox, sur PC et depuis peu sur smartphone/tablette Android.

  3. #3
    Modérateur
    Avatar de nouknouk
    Homme Profil pro
    Inscrit en
    décembre 2006
    Messages
    1 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : décembre 2006
    Messages : 1 647
    Points : 2 045
    Points
    2 045

    Par défaut

    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...]
    Mon projet du moment: BounceBox, un jeu multijoueurs sur Freebox, sur PC et depuis peu sur smartphone/tablette Android.

  4. #4
    Modérateur
    Avatar de nouknouk
    Homme Profil pro
    Inscrit en
    décembre 2006
    Messages
    1 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : décembre 2006
    Messages : 1 647
    Points : 2 045
    Points
    2 045

    Par défaut

    réservé (2).

    EDIT plus ou moins temporaire: quelques infos sur l'ordonnancement de l'affichage des sprites sur ce thread.
    Mon projet du moment: BounceBox, un jeu multijoueurs sur Freebox, sur PC et depuis peu sur smartphone/tablette Android.

  5. #5
    Modérateur
    Avatar de nouknouk
    Homme Profil pro
    Inscrit en
    décembre 2006
    Messages
    1 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : décembre 2006
    Messages : 1 647
    Points : 2 045
    Points
    2 045

    Par défaut

    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.
    Mon projet du moment: BounceBox, un jeu multijoueurs sur Freebox, sur PC et depuis peu sur smartphone/tablette Android.

  6. #6
    Modérateur
    Avatar de nouknouk
    Homme Profil pro
    Inscrit en
    décembre 2006
    Messages
    1 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : décembre 2006
    Messages : 1 647
    Points : 2 045
    Points
    2 045

    Par défaut

    réservé (4).
    Mon projet du moment: BounceBox, un jeu multijoueurs sur Freebox, sur PC et depuis peu sur smartphone/tablette Android.

  7. #7
    Modérateur
    Avatar de nouknouk
    Homme Profil pro
    Inscrit en
    décembre 2006
    Messages
    1 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : décembre 2006
    Messages : 1 647
    Points : 2 045
    Points
    2 045

    Par défaut

    réservé (5).
    Mon projet du moment: BounceBox, un jeu multijoueurs sur Freebox, sur PC et depuis peu sur smartphone/tablette Android.

  8. #8
    Membre régulier Avatar de Othana
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    mars 2007
    Messages
    187
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : mars 2007
    Messages : 187
    Points : 79
    Points
    79

    Par défaut

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

  9. #9
    Modérateur
    Avatar de nouknouk
    Homme Profil pro
    Inscrit en
    décembre 2006
    Messages
    1 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : décembre 2006
    Messages : 1 647
    Points : 2 045
    Points
    2 045

    Par défaut

    Citation Envoyé par mcferson Voir le message
    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.
    Mon projet du moment: BounceBox, un jeu multijoueurs sur Freebox, sur PC et depuis peu sur smartphone/tablette Android.

  10. #10
    Candidat au Club
    Homme Profil pro
    Inscrit en
    janvier 2014
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : janvier 2014
    Messages : 3
    Points : 4
    Points
    4

    Par défaut

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

Discussions similaires

  1. Création d'un jeu tactics 2D iso HTML5
    Par dathims dans le forum Jeux web
    Réponses: 3
    Dernier message: 15/12/2011, 15h12
  2. Création RPG en ligne en PHP/Flash - Système Innovant!
    Par spykiller dans le forum Projets
    Réponses: 12
    Dernier message: 25/09/2009, 00h06
  3. Réponses: 2
    Dernier message: 19/05/2008, 12h24
  4. création d'un RPG online - besoin testeurs
    Par eldiablol dans le forum Autres
    Réponses: 0
    Dernier message: 05/05/2008, 15h06
  5. [Conception] Création d'un RPG
    Par Gimmly dans le forum PHP & Base de données
    Réponses: 42
    Dernier message: 25/02/2006, 22h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo