+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Map 2D isométrique en HTML/CSS (/showthread.php?tid=5493)
Pages :
1
2
Map 2D isométrique en HTML/CSS - Cawrotte - 16-06-2011
Bonjour à tous,Je possède actuellement un script pour afficher une map en deux dimensions.
Il est construit de la manière suivante :
- Dans la base de données, chaque tile (case) a sa coordonnée x, y et le type de texture.
- Un script PHP retransmet ces tiles et elles sont converties en div 30*30px positionnées par un CSS en fontion de leur position x et y.
- Dans l'afficheur de map, il y a une couche pour ces tiles, une au dessus pour les objets et une encore plus élevée pour les joueurs.
Je voudrais maintenant sortir de la 2D pour passer à l'isométrique et pouvoir construire des bâtiments, des dénivelés...
Ceci rajoute donc un axe Z ?
A partir de mon afficheur de map actuel, je n'ai aucune idée de la méthode à employer pour en faire un afficheur de map isométrique, en utilisant toujours les <div>...
Faut-il rajouter des couches à mon afficheur ? Faut-il modifier la structure de la base de données, rajouter l'axe Z ?
Comment alors placer les objets, qui ne pourront plus être découpés pour entrer dans des carrés comme sur l’afficheur 2D ?
Merci d'avance pour votre aide qui me sera précieuse,
Yann
RE: Map 2D isométrique en HTML/CSS - popayan - 16-06-2011
le plus simple serait d'ajouter un champ 'altitude' et de faire des tiles différentes pour chaque altitude. J'essaie de trouver des tiles pour illustrer ce que je veux dire
RE: Map 2D isométrique en HTML/CSS - Cawrotte - 16-06-2011
J'ai peut être une solution : une couche pour les tiles horizontales, une autre pour les verticales.
Qu'en penses tu ?
J'attends quand même de voir ce que tu proposes ca peut être intéressant :p
Voici une petite illustration de mon idée : http://yann-p.fr/tile.png
RE: Map 2D isométrique en HTML/CSS - Maz - 16-07-2011
Isométrique ne veut pas forcément dire 3D. Il y a la 3D isométrie, et la 2D Isométrie. L'isométrie n'est qu'une perspective.
Je n'ai jamais essayer de faire une carte en 3D Iso, je me suis limiter à un éditeur de carte 2D Iso à case hexagonal visible ici: http://mazdesign.free.fr/editeurCarte/
Je penses que pour y rajouter de la 3D, comme dans ton exemple (dommage qu'il soit tout rikiki), il suffirait comme tu le dis de rajouter la coordonnée Z, pour l'affichage, comme dans ton exemple, il suffis de surélever la case sur l'axe vertical et d'afficher le déniveler en dessous (comme la terre affichée), après pour faire des pentes, ça dois être plus compliqué et demander beaucoup plus de ressources graphiques comme des images avec une pente seulement sur la gauche, seulement en face, seulement à droite, sur la gauche et en face, etc...
RE: Map 2D isométrique en HTML/CSS - Deedllit - 10-10-2011
C'est de la 2D ISO avec de la déformation, y pas besoin de rajouté de layer. Il suffit de déformer les points afin créer une illusion de 3D, ensuite la texture jouera également un rôle.
RE: Map 2D isométrique en HTML/CSS - rexurbis - 20-10-2011
Voici ce que j'ai fait personnellement pour avoir une map 2d iso avec simulation des niveaux et de la profondeur : www.rexurbis.com . Le problème c'est que les écrans sont un peu longs à charger. Je cherche une solution.
RE: Map 2D isométrique en HTML/CSS - niahoo - 20-10-2011
arf c'est sympa rexurbis mais on est vite bloqués !
<j'arrive a pein à sortir de mon tunnel !
Tu devrais charger ta mao via ajax en permanence autour du joueur pour rendre ça fluide. mais sinon c'est marrant de voirt le monde se construire brique par brique (bon à la longue j'avoue que ça doit être relou)
RE: Map 2D isométrique en HTML/CSS - rexurbis - 20-10-2011
Oui, il faut que je trouve un moyen de rendre ça plus fluide. Je vais m'y atteler, mais tu connais "la flemme" ?
Et enrichir le gameplay qui est pour l'instant.... inexistant
RE: Map 2D isométrique en HTML/CSS - niahoo - 20-10-2011
ouais je connais
RE: Map 2D isométrique en HTML/CSS - Argorate - 21-10-2011
Ce qui est marrant c'est que tu qualifie ton jeu de "2D" alors que tu sembles en gérer 3...
Pour moi ton jeu est en 3D.
La 2D iso, ce n'est pas ça. Y a plein de jeux qui l'utilise mais qui restent en 2D.
Tu essai de faire un minecraft version browser game? ^^