+- 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 : création d'une map (/showthread.php?tid=5962)
RE: création d'une map - Sephi-Chan - 07-02-2012
(07-02-2012, 03:41 PM)Argorate a écrit : PS sephi: comme l'avait dit un malvoyant (ou aveugle me souviens plus) dans un autre topic du forum, les jeu où les cartes sont en <table> sont 100 fois plus accessible pour eux, puisque comme celui-ci l'avait expliquait, avec les table, chaque case est lié et a une suite logique, qui permet donc de facilement se repérer.
A la différence des <div> où il expliquait que c'était chian, car pas lié entre eux, il était obligé de se représenter dans sa tête la map pour s'y retrouver.
Je vois plutôt une map comme des listes. Des listes de bâtiments, des listes de décors, etc.
Et comme je disais, ce serait se voiler la face de dire que tu as choisi une technique pour son accessibilité. Si ton jeu n'est pas accessible, ce n'est pas un argument recevable.
(07-02-2012, 03:41 PM)Argorate a écrit : J'en conclue que c'est le manque de savoir qui vous fait parler, plus que le problème technique.
...
Bref, arrêtez de dire nawak, les <table> sont parfait pour les map 2D à case carré.
C'est l'hopital qui se fout de la charité ! Descend de ton grand cheval et on discute. :p
Là tu juges un problème à l'emporte-pièce avec ta vision étriquée du sujet.
Maintenant, ouvre ton esprit et imagine que tu souhaites afficher ta carte en streaming façon Google Maps : quand tu te déplaces vers un bord de la zone visible, la suite se charge. Tu vas t'amuser à faire ça avec un tableau : tu vas devoir ajouter des tonnes d'éléments inutiles (les td et leurs tr) car tu dois peupler les colonnes et les lignes, alors qu'avec une structure en couches (que je montre plus bas), tu n'aurais pas ce problème.
Après, j'ai d'autres exemples bien plus concret pour toi : les QG qui occupent 4 cellules sur la carte de Dévotion. Je prends le code d'une seule cellule sur laquelle se trouve un de ces bouts de QG :
<td class="t13" data-x="93" data-y="33" data-terrain='{ "type_case":13, ... }' data-case='{ "id":"2", ... }'>
<div id="93:33" class="qg divbatiment0_0" data-titre="RICHE_TEXTE_qg2">
<div class="skin1 curseur_case map-cur-allie"></div>
</div>
<div id="RICHE_TEXTE_qg2">
<span style="color:#41678d">QG n°2</span>
</div>
</td>
C'est donc une cellule sur laquelle il y a un bout de QG. Et les mêmes informations sont répétées sur les 4 autres bouts. À quoi ça rime ? C'est un concours d'inefficacité ? Où se passe l'inscription ?
Si tu avais raisonné en couches :
<div id="map">
<ul class="terrains">
<li class="tile-1-1" data-foo="…">…</li>
<li class="tile-1-2" data-foo="…">…</li>
</ul>
<ul class="buildings">
<li class="tile-1-2 2-tiles-width 2-tiles-height" data-foo="…">…</li>
</ul>
</div>
Tu aurais gagné en légèreté, en maintenabilité et en souplesse. Ici, on s'en fiche de la structure, on indique simplement des cases par leurs position : inutile d'avoir des lignes ou des colonnes.
Enfin voilà, c'est un peu abrutisant de ne raisonner qu'en cases.
RE: création d'une map - php_addict - 07-02-2012
oui et puis recharger ta map en ajax si tu est en <table> je trouve ca nul...
sans oublier que ca fait au moins 10 ans que le w3c ne recommande pas les table pour les positionnements d’élément...
RE: création d'une map - Argorate - 07-02-2012
Sephi: On en a déjà parlé, c'est tout a fait possible de créer un tableau pour faire bougé la map, c'est déjà le cas dans mon jeu lorsque la vision dépasse la taille du cadre.
Après j'ai pas dit que j'avais choisis cette méthode pour l’accessibilité mais que j'avais justement appris via qqun de concerné que c'était quand même le cas^^
Sinon pour mon QG, je n'ai juste pas optimisé la map, je suis au courant, et j'ai préféré ajouter de nouvelle chose que de refaire la map, mais c'est sur ma liste
Et d'ailleurs ça m'invite a répondre a php_addict, où lorsque je ferais la refonte de la map, je passerais en json only, ce qui fait que le fait que j'utilise une <table> n'aura plus aucun importance, puisque je n'échangerais plus que les données entre client et serveur et c'est le js qui fera l'affichage
Sinon tu confonds tout: w3c dis que les table ne sont pas là pour position des éléments, mais pour afficher des données tabulaire, hors comme la dis ter rowan, une map 2D en x;y rentre très bien dans ce cas de lignes et colonnes...
Après pour les superpositions, j'utilise des div dans mes cases, donc ce n'est plus des <table> mais bien des <div> pour le positionnement des couches.
RE: création d'une map - christouphe - 07-02-2012
@Sephi: je n'arrive pas à visualiser comment tu fais pour afficher une carte de 4 cases avec des listes...avec des div ok:
<div id="carte">
<div id="case1_1"></div>
<div id="case1_2"></div>
<div id="case2_1"></div>
<div id="case2_2"></div>
</div>Avec leur CSS respectif en fonction de la taille d'une case.
J'aimerai un exemple.
RE: création d'une map - php_addict - 07-02-2012
(07-02-2012, 04:53 PM)Argorate a écrit : Après pour les superpositions, j'utilise des div dans mes cases, donc ce n'est plus des <table> mais bien des <div> pour le positionnement des couches.
des <div> dans des cellules de <table> c'est quand même très verbeux pour pas grand chose...
RE: création d'une map - Sephi-Chan - 07-02-2012
Argorate : il n'y a donc aucun intérêt d'utiliser des tables par rapport à de simples blocs. Et si tu n'as pas optimisé ta map sur ce point, c'est simplement parce que tu ne peux pas avec cette approche case par case.
(07-02-2012, 05:03 PM)christouphe a écrit : @Sephi: je n'arrive pas à visualiser comment tu fais pour afficher une carte de 4 cases avec des listes...avec des div ok:
<div id="carte">
<div id="case1_1"></div>
<div id="case1_2"></div>
<div id="case2_1"></div>
<div id="case2_2"></div>
</div>
Avec leur CSS respectif en fonction de la taille d'une case.
J'aimerai un exemple.
Et ben avec des listes, c'est pareil qu'avec des div (je les trouve plus sémantiques).
L'astuce repose simplement sur l'utilisation de classes pour positionner les cases.
À côté de ça, j'ai une feuille de style (générée) contenant la position de chaque élément :
.tile-1-2 {
top: 0;
left: 50px;
}
Bien sûr, les
li situé dans #map sont en position absolute.