Plateau de jeu - Écrire le CSS

[Sephi-Chan]

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 :




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.



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.


Sephi-Chan, pas fan des cartes…

[Anthor]

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

[Ruz]

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.

[Sephi-Chan]

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

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

[Anthor]

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

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 ?

[Ter Rowan]

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

[Ruz]

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> 

[Sephi-Chan]

Hello,

Merci pour vos réponses.

Voilà ce que j'ai pour le moment (grâce à une couche ground, une couche items, une couche characters et une couche sky).


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

[wild-D]

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>

[Anthor]

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 ?