création d'une map

[jeje362]

Bonjour,

Je suis en train de commencer (tout doucement) à créer un jeu de stratégie par naviguateur. Je me suis lancer comme défit de ne pas utiliser de flash, je vais donc tout faire en javascript.

Je suis donc pour l'instant en train de créer la map (l'ile qui servira de base aux joueurs).

J'ai réussi a créer un semblant de map en faisant un tableau auquel j'ai appliqué les propriété suivante afin de le rendre plus atractif:

Code :

transform: skewX(15deg) skewY(15deg);
transform: rotate(-45deg);

Cela me permet d'avoir une map ressemblant a ce que l'on pourrais trouver sur d'autre jeu.

Mais je me demande si il n'y a pas un meilleur moyen afin d'avoir une map plus optimiser.

Donc voila si vous avez des idées, ou si vous même vous avez réussi a faire une map de ce genre.

Merci d'avance.

[Xenos]

Salut,

pour ma part, je considère la carte comme une image, et je la traite en SVG. Cela permet de changer les tuiles de losange à hexagone par exemple, ou d'utiliser des pavages semi-réguliers voir apériodiques. De plus, niveau zoom, cela se gère très bien (viewbox) et on peut y joindre de belles animations. Cela ne souffre pas de la pixellisation (c'est une image vectorielle), et on dispose d'un DOM assez solide (1 case = 1 élément du DOM, qui est donc manipulable facilement). Enfin, on peut l'insérer dans une page HTML, voir en mettre plusieurs dans la même page, ou bien l'afficher séparément, ou encore, l'insérer en image de fond d'un élément HTML (background-image).

Niveau inconvénient, c'est pas le top de la fluide (canvas sera plus rapide si on a des milliers d'éléments à afficher), les lecteurs d'écran galèreront un peu (pour eux, mieux vaut faire une version "non carte" du jeu); si le dézoom est important, alors la carte ramera énormément à cause du grand nombre d'éléments présents dessus. Enfin, niveau indexation Google, c'est peut-etre pas top.


Le fait de se priver des très vieux navigateurs (IE<8 je crois) n'est plus à considérer comme un inconvénient.

[jeje362]

Je vais être un peu chiant mais est ce qu'il te serait possible de me montrer un bout de code afin que je comprenne mieux?

[Ter Rowan]

Xenos, quel est l'intérêt des pavages semiréguliers par rapport à un pavage hexagonal "standard" ? de même pour apériodique

[@lucard]

je penses que Xenos essaye de dire que ce n'est pas le fait d'avoir une "forme semiréguliere" ou "apériodique" qui est un avantage, mais plutôt le fait de pouvoir "changer de forme" facilement.

[Sephi-Chan]

Xenos, as-tu des exemples de jolies cartes (oui, c'est subjectif) en SVG ? Je trouve que les aplats de couleurs font un peu Playmobil et manquent souvent de texture et du cachet d'un bitmap.

[@lucard]

rien n'empèche de mettre un bitmap en "fond" de svg...

<svg height="100%" width="100%">

 <pattern id="pattern1" patternUnits="userSpaceOnUse" viewBox="0 0 256 256" width="256" height="256">

   <image xlink:href="http://www.tutorialsforblender3d.com/Textures/Wood-Boards/Textured/DryCrackedBoards.png" width="256" height="256"/>

  </pattern><g transform="scale (1 .5), translate (256 256)"><g transform="rotate(-45 256 256)">

  <rect x="0" y="0" width="256" height="256" fill="url(#pattern1)" stroke="YELLOW" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="-256" y="0" width="256" height="256" fill="url(#pattern1)" stroke="YELLOW" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="256" y="0" width="256" height="256" fill="url(#pattern1)" stroke="RED" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="0" y="256" width="256" height="256" fill="url(#pattern1)" stroke="GREEN" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="0" y="512" width="256" height="256" fill="url(#pattern1)" stroke="GREEN" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="-256" y="512" width="256" height="256" fill="url(#pattern1)" stroke="GREEN" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="-256" y="256" width="256" height="256" fill="url(#pattern1)" stroke="GREEN" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="256" y="256" width="256" height="256" fill="url(#pattern1)" stroke="BLUE" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="256" y="512" width="256" height="256" fill="url(#pattern1)" stroke="BLUE" stroke-width="5px" stroke-dasharray="5,5"></rect></g></g>

</svg>

result : http://codepen.io/anon/pen/wtvAo

[Xenos]

@Sephi

Voici ce à quoi j'étais arrivé sur ECLERD. On peut tout à fait mettre des textures en arrière-plan des objets SVG. En poussant un poil plus loin, on peut même superposer des couches de textures de tailles différentes pour éviter la sensation de "répétition" (superposer 3 couches, de 512x512, 120x300 et 710x800 par exemple permet de ne pas avoir une "pavage" de texture 512x512 qui se répète).

@Ter Rowan
L'intérêt d'un pavage non régulier est d'offrir une carte originale (c'est déjà un avantage ), de changer facilement de forme, mais surtout, de créer de nouvelles stratégies (des grandes cases octogonales difficiles à défendre mais sur lesquelles on peut mettre de nombreuses unités mélangées avec des petits cases carrées avec moins de voisins, plus faciles à fortifier, mais permettant d'y mettre moins de monde).

@jeje
Non, je n'ai pas de bout de code sous la main mais google te trouveras des tas de tutoriels SVG.

[Thêta Tau Tau]

En voyant vos cases carrées ça me fait penser qu'il y a quelque mois je m'était amusé à faire un script canvas qui "arrondi" des cases afin de donner un rendu plus naturel. Je suis pas allé bien loin, mais je pense que ça peut potentiellement donner des trucs très jolis en combinant un arrondi "aléatoire" (avec des curves de bézier ou autre), des textures et une position aléatoire des éléments (arbres, maisons, rivières, routes...).
Si vous voyez pas ce que je veut dire, regardez comment sont faites les cases de civilization 5, c'est en 3D mais le même principe peut s'adapter en 2D.
Après forcément c'est pas la solution la plus facile à implémenter.

[Xenos]

J'ai aussi tenté d'insérer les transitions en SVG/



Finalement, j'aime mieux les cases carrées pour des raisons de gameplay: ne pouvant mettre qu'une usine par case, cela devient pratique de bien faire ressortir les limites entre ces cases. Mais si certains joueurs préfèrent des cases aux frontières bien nettes, d'autres joueurs préfèreront surement les cases avec des transitions...

Et nouvel avantage de SVG! Il est possible de le c'est à dire de laisser l'utilisateur choisir les couleurs et les textures (possible en canvas) mais également les courbes, les sprites, ou les animations (plus difficile en canvas, très facile en SVG via <def/> et <use/>).
Ainsi, on peut faire soi-même deux versions (limites nettes et limites floues), mais on peut aussi laisser les utilisateurs faire leurs propres versions et les partager.

D'ailleurs, j'aurai aussi pu générer le gradient des bleus de profondeur de l'eau en SVG (qui offre de chouettes gradients, et la prochaine spec de SVG a l'air encore plus fournie) et le poser en texture des tuiles, peu importe leur forme.