Forum de la communauté SFML

Aide => Général => Discussion démarrée par: skarwild le Avril 28, 2014, 12:52:12 pm

Titre: TileMap isometric
Posté par: skarwild le Avril 28, 2014, 12:52:12 pm

Bonjour,
Je code en java avec jsfml mais vous trouverez peut etre une solution à mon problème, j'essaye de faire du tile maping isometric mais le rendu n'est pas top:'(.
Voici mon code:

public class Draw {
        public static void draw(RenderWindow g){
                Texture tex = new Texture();
                try {
                        tex.loadFromFile(Paths.get("sprites/Terrain/1926.png"));
                } catch (IOException e) {
                        // TODO Bloc catch généré automatiquement
                        e.printStackTrace();
                }
                Sprite sprite = new Sprite(tex);
                for(int i=0;i<10;i++){
                          for (int j = 0 ;j <10; j++){
                           int x = (j * 50 / 2) + (i * 50 / 2); // calcule la nouvelle position
                            int y = (i * 50 / 2) - (j * 50 / 2);
                                sprite.setPosition(new Vector2f(x,y));
                                g.draw(sprite);
                        }
                };
               
        }
}

Et voici ce que j'obtiens :
(http://image.noelshack.com/fichiers/2014/18/1398686037-tilemap.png)
L'image qui me sert à créer le tilemap:
(http://image.noelshack.com/fichiers/2014/18/1398689799-1926.png)
Je voudrais savoir si le code qui calcule les nouvelles coordonnées est bon et au niveau de "View" ce que je dois faire.
Cordialement

Titre: Re : Crash
Posté par: Laurent le Avril 28, 2014, 12:57:17 pm

Et bien utilise ton debugger. Parce que debugger un code, incomplet, juste en le regardant... c'est pas le plus simple ;)

Titre: Re : TileMap isometric
Posté par: skarwild le Avril 28, 2014, 02:21:12 pm

Sujet édité , si vous avez une question sur le code en java n'hésitez pas

Titre: Re : TileMap isometric
Posté par: Laurent le Avril 28, 2014, 02:46:04 pm

Ton problème n'a plus rien à voir avec ton post initial ?! Evite d'éditer dans ce cas, parce que ça rend tous les posts qui suivent (ici en l'occurence le mien) complètement hors-sujet... Et plus personne ne comprend la conversation.

Et du coup t'as résolu ton crash ? Et quel est ton problème là ?

Titre: Re : TileMap isometric
Posté par: skarwild le Avril 28, 2014, 03:01:07 pm

En fait mon crash venait juste d'une variable ou il manquait un "x" ...
Là je voudrais avoir quelque chose qui ressemble à ça :
(http://image.noelshack.com/fichiers/2014/18/1398690015-tilemap2.png)
moi j'ai ça :
(http://image.noelshack.com/fichiers/2014/18/1398691500-tilemap3.png) , il n'y a aucun effet de profondeur et les tuiles ne sont pas bien positionnées.
Merci

Titre: Re : TileMap isometric
Posté par: Develog le Avril 28, 2014, 06:54:08 pm

Une tuile isométrique est en faites un carré que tu tournes à 45 ° (une rotation) puis auquel tu divises la hauteur par 2 ce qui va te donner un effet d'isométrie.

(http://i.imgur.com/yp7Lz.png)

Titre: Re : TileMap isometric
Posté par: skarwild le Avril 28, 2014, 06:58:01 pm

En fait j'ai cherche mais j'arrive pas à donner l'effet aplati aux tuiles , j'ai essayé standart.setSize(standart.getSize().x, standart.getSize().y*2); (avec standart la vue de ma renderWindow) mais le résultat est pas super , si quelqu'un a une idée je suis preneur =)
Voici mon dernier rendu :
(http://image.noelshack.com/fichiers/2014/18/1398704754-tilemap4.png)
mon code pour afficher les tuiles:7

                sprite3.setRotation(45.f);
                int tile_width = 50;
                int tile_height = 50;
                for (int i = 0; i < terrain.length; i++) {
                        for (int j = 0; j < terrain[0].length; j++) {
                                int x = (j * tile_width / 2) + (i * tile_width / 2);
                                int y = (i * tile_height / 2) - (j * tile_height / 2);
                                sprite3.setPosition(x,y);
                                sprite3.setRotation(45.f);
                                g.draw(sprite3);
                        }
                }
 

et pour modifier ma vue :
maVue.setSize(maVue.getSize().x,maVue.getSize().y*2);
ou sinon il faut que j’utilise des tuiles avec une "épaisseur"?

Titre: Re : TileMap isometric
Posté par: Develog le Avril 28, 2014, 09:02:49 pm

En quoi l'effet aplati n'est pas visible dans ton dernier rendu ? :)

Titre: Re : TileMap isometric
Posté par: skarwild le Avril 28, 2014, 09:05:27 pm

j'ai utilisé maVue.setSize(maVue.getSize().x,maVue.getSize().y*2); car quand j'utilise MonSprite.setScale() ça fait des choses bizarre  :-X

Titre: Re : TileMap isometric
Posté par: Develog le Avril 28, 2014, 09:13:45 pm

Tu aurais un screen de l'effet obtenu sans le setView ?

Titre: Re : TileMap isometric
Posté par: Laurent le Avril 28, 2014, 11:05:59 pm

Le seul moyen d'avoir un rendu isometrique correct, c'est de préparer les tiles dans un éditeur d'images. Pas dans ton programme. Tu auras beau retourner ou étirer tes sprites dans tous les sens, ça ne marchera pas. Tu fonces droit dans le mur.

Le rendu isométrique ce n'est pas juste un rendu 2D carré qu'on bidouille un peu. C'est un vrai style à part.

Titre: Re : TileMap isometric
Posté par: skarwild le Avril 29, 2014, 02:18:34 pm

Merci pour vos réponses , juste une dernière question , à partir d'un carré vu de dessus est il possible de créer une tuile isométrique avec gimp? ou sinon comment faire pour en créer une ?

Titre: Re : TileMap isometric
Posté par: G. le Avril 29, 2014, 04:41:33 pm

Bah dans GIMP tu tournes ton carré et tu l'aplatis lol, c'est un peu ce qui est dit depuis le début du thread. :p
Mais c'est mieux de commencer directement avec un losange plutôt qu'avec un carré.

Titre: Re : TileMap isometric
Posté par: Develog le Avril 29, 2014, 05:03:58 pm

Tu auras un bien meilleur effet avec un losange comme dit G.
Avec un losange tu auras vraiment l'effet de 3D que tu recherches ;)