JeuWeb - Crée ton jeu par navigateur
Plateau de jeu - Écrire le CSS - Version imprimable

+- 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 : Plateau de jeu - Écrire le CSS (/showthread.php?tid=3640)

Pages : 1 2

Plateau de jeu - Écrire le CSS - Sephi-Chan - 04-02-2009

Bonjour,

Ces derniers jours, j'ai développé un petit jeu de plateau, et maintenant que la partie métier est presque achevée, je m'intéresse au plateau de jeu, de taille fixe (19*19 cases) et de cette forme :

[Image: ISO%20Map_u1233747420.gif]


J'aimerai avoir un rendu de ce genre (mes tuiles n'ont pas exactement les mêmes dimensions) au niveau des chevauchements de cases. Ici, on peut voir que les bâtisses chevauchent un peu les cases qui les entourent. Je n'arrive pas à reproduire ça correctement en CSS.

[Image: Fire%20Emblem%20-%20Path%20of%20radiance...745481.jpg]

Je suppose que mon approche n'est pas la bonne, c'est pourquoi j'en appelle à votre aide. Comment organiseriez-vous vos blocs pour avoir ce rendu en plusieurs couches ?

J'espère que vous pourrez m'aider. Smile


Sephi-Chan, pas fan des cartes…

RE: Plateau de jeu - Écrire le CSS - Anthor - 04-02-2009

Je t'avais pas déjà expliquer comment l'avoir ? Big Grin

RE: Plateau de jeu - Écrire le CSS - Ruz - 04-02-2009

ben, euh...
J'ai une bete réponse, alors ca doit surement etre plus compliqué en réalité que ce que j'ai compris que tu demandes...

En gros: première couche: le sol (perso, mes cartes font 1 div par tuile, le tout positionné par JS, qui s'occupe des calculs de positions), Z-index faible.

Après: deuxième couche: Z-index supérieur au sol, chaque objet: une div (a placer en commencant par le fond par facilité)

NB: pour les possibiliotés de déplacements, ben, je rajouterais une couche entre sol et décors/persos

perso, chez moi, ca fonctionne pas trop mal, et le débordement est hyper simple à réaliser (je le fait pour les souches des arbres, par ex). Par contre, ben, faut tenir compte de la taille de chaque image à positionner (variable en ce qui me concerne) et faire gaffe qu'une image(div) est carrée => un petit objet derrière un autre grand (dans la partie "transparente" de ce deuxième décor) n'est pas cliquable directement, ou alors, faut jouer avec les Z-index. (le truc chiant)
J'ai par contre le problème des décors sur plusieurs tuiles à finir de résoudre.

Enfin, si tu vas voir ma présentation de projet, tu devrais avoir un screen d'une de ces cartes (c'est de l'hexa, mais ca change rien au problème)... C'est ma méthode, pas parfaite, mais utilisable.

RE: Plateau de jeu - Écrire le CSS - Sephi-Chan - 04-02-2009

(04-02-2009, 02:00 PM)Anthor a écrit : Je t'avais pas déjà expliquer comment l'avoir ? Big Grin
Le problème, c'est que ça gérait assez mal les décors répartis sur plusieurs cases. :/

Je ne suis pas sûr de comprendre Ruz, ton HTML ressemble à quoi ?


Sephi-Chan

RE: Plateau de jeu - Écrire le CSS - Anthor - 04-02-2009

(04-02-2009, 02:47 PM)Sephi-Chan a écrit :
(04-02-2009, 02:00 PM)Anthor a écrit : Je t'avais pas déjà expliquer comment l'avoir ? Big Grin
Le problème, c'est que ça gérait assez mal les décors répartis sur plusieurs cases. :/

Je ne suis pas sûr de comprendre Ruz, ton HTML ressemble à quoi ?


Sephi-Chan

Exactement la même que la mienne, et je ne vois pas en quoi cela était compliqué, beaucoup d'objets sont sur plusieurs cases.
Mes souches d'arbres peuvent faire plus d'une case, sans que cela me gêne ?

RE: Plateau de jeu - Écrire le CSS - Ter Rowan - 05-02-2009

j'aurais dit la même chose que Ruz, effectivement ça me semble le mieux

RE: Plateau de jeu - Écrire le CSS - Ruz - 05-02-2009

mon html?
<div id="carte"></div>

HTML généré par JS?
Code PHP :
<?php 

<div class="case" style="top: 146.25px; left: 305px; z-index: 11;"><img src="images/S/0.png"></div><div class="case" style="top: 142.25px; left: 276px; z-index: 10;"><img src="images/S/0.png"></div><div class="case" style="top: 127.25px; left: 268px; z-index: 9;"><img src="images/S/0.png"></div><div class="case" style="top: 123.25px; left: 238px; z-index: 8;"><img src="images/S/0.png"></div><div class="case" style="top: 108.25px; left: 231px; z-index: 7;"><img src="images/S/0.png"></div><div class="case" style="top: 104.25px; left: 201px; z-index: 6;"><img src="images/S/0.png"></div><div class="decor" style="top: -39.75px; left: 158.5px; z-index: 10; height: 164px; width: 119px; position: absolute;"><a href="javascript:void(0);" onmouseover="return overlib('<i>arbre feuillu</i><br /><b>Action(s) :</b><ul><ul><li>Couper</li></ul>','44 / 0',FGCOLOR,'#CCCCFF');" onmouseout="return nd();" onclick="return overlib('<i>arbre feuillu</i><br /><b>Action(s) :</b><ul><li><a href=\'javascript:void(0);\' onClick=\'Javascript:do_a(4,8,4,44,0);\'>Couper</a></li></ul>',STICKY, CAPTION,'44 / 0',FGCOLOR,'#CCCCFF');"><img src="images/D/arbre.png"></a></div>
par contre, afficher un décor sur plusieurs cases, pas de soucis... Tant qu'une case de référence soit affichée.
Exemple: un décor (banc) fait 3 cases de large.
Je veux l'afficher : ben, une Div avec l'image... positionnée par rapport à la case du milieu (le plus simple à mettre en place)...
Tant que la tuile centrale s'affiche, j'ai mon banc... si elle disparait, le banc disparait (arf, zut, la 3e case est visible,e t je vois pas le bout de banc...). Et hop, pas de blocage... je marche dans le banc...
J'ai plusieurs solutions à ce problème, mais aucune ne me plait :
* couper les décors "multiples" en plusieurs parties de décors, chacun relié à une tuile de la carte... chiant, et attention les joints entre les morceaux...
* créer une seule image, mais rajouter les infos sur les cases concernées. A l'affichage, n'afficher qu'une seule fois l'image et la positionner correctement. (mwouais... comment évaluer la position de la tuile de référence si celle-ci n'est pas affichée?)
* éviter les décors sur plusieurs cases

Bon, suis crevé, je relirai ce message demain... suis pas sur que ca soit clair

EDIT: je remarque qu'en plus, je génères pas ma map de la manière que je décris... m'enfin, a refaire, je ferais comme décris ^^

RE: Plateau de jeu - Écrire le CSS - Sephi-Chan - 06-02-2009

Hello,

Merci pour vos réponses. Smile

Voilà ce que j'ai pour le moment (grâce à une couche ground, une couche items, une couche characters et une couche sky).
[Image: Image%208_u1233845033.png]

Dans mon système actuel, c'est à moi de rendre une case bloquante ou non. Donc dans le cas d'un décor qui tient sur plusieurs cases, je dois mettre un terrain infranchissable (ou ralentissant, si c'est une forêt, par exemple) sur la case où il est posé.

Là, j'en suis à générer le CSS afin de conserver une partie XHTML la plus légère possible. C'est plutôt verbeux mais ça ne nécessite pas de calculs à l'exécution.



<div id="board">



	<div class="layer-ground">

		<div class="case case-1-1">

			<div class="grass-1"></div>

		</div>

		<div class="case case-2-1">

			<div class="grass-1"></div>

		</div>

		<div class="case case-1-2">

			<div class="grass-2"></div>

		</div>

		<div class="case case-2-2">

			<div class="grass-1"></div>

		</div>

	</div>



	<div class="layer-characters">

		<div class="case-2-2"><!--  -->

			<div class="character-1"></div>

		</div>

	</div>



	<div class="layer-items">

		<div class="case-2-1">

			<div class="house-1"></div>

		</div>

	</div>



	<div class="layer-sky">

		<div class="case-2-1">

			<div class="cloud-1"></div>

		</div>

		<div class="case-2-2">

			<div class="cloud-1"></div>

		</div>

	</div>



</div>


Sephi-Chan

RE: Plateau de jeu - Écrire le CSS - wild-D - 06-02-2009

pourquoi tu as à chaque fois un conteneur séparé pour chaque couche ?
tu devrais pouvoir avoir un rendu correcte avec simplement le minimum et en jouant un max avec les z-index (la couche sera "virtuelle" du fait des z-index; ça alourdi un poil la feuille de style, mais elle est chargée une fois alors que tes page elles le seront à chaque fois ).



<div id="board">



	<div class="layer-ground">

		<div class="case case-1-1">

			<div class="grass-1"></div>

		</div>

		<div class="case case-2-1">

			<div class="grass-1"></div>

                        <div class="house-1"></div>

                        <div class="cloud-1"></div>

		</div>

		<div class="case case-1-2">

			<div class="grass-2"></div>

		</div>

		<div class="case case-2-2">

			<div class="grass-1"></div>

                        <div class="character-1"></div>

                        <div class="cloud-1"></div>

		</div>

	</div>

</div>


RE: Plateau de jeu - Écrire le CSS - Anthor - 06-02-2009

Citation :pourquoi tu as à chaque fois un conteneur séparé pour chaque couche ?
tu devrais pouvoir avoir un rendu correcte avec simplement le minimum et en jouant un max avec les z-index (la couche sera "virtuelle" du fait des z-index; ça alourdi un poil la feuille de style, mais elle est chargée une fois alors que tes page elles le seront à chaque fois ).

Non, parce que les positions en isométriques ne sont pas linéaires.
Un objet en surface plus haut que la case doit passer par dessus la case qui se trouve au derrière.

Et ce n'est pas les 4 blocs en plus qui vont tuer ton serveur quand même ?