demi-terrains?

[Holy]

Moi j'ai une solution qui fonctionne terriblement bien mais qui demande beaucoup d'abstraction avant conception. C'est directement inspiré de la manière dont les "autotiles" de RPG Maker fonctionnent, en un peu plus poussé pour certaines fonction (notamment pour gérer la hauteur).

J'explique l'idée des autotiles de RPG maker avec une petite illustration ça sera plus simple :


Depuis cette image, il est possible de faire toutes les possibilités de bordure grâce aux cases C et D. La A ne sert qu'à être sélectionné dans l'éditeur et la B est ignoré.

A partir de cet autotile, le gestionnaire de rendu va déterminer les bordures à sortir en fonction des cases voisines. Si c'est une tuile différente de celle où le curseur se trouve, alors on met une bordure orientée vers elle.

Cette technique est pratique pour faire des bordures automatiques mais y a un obstacle majeur, il faut pouvoir gérer facilement la création d'images de toutes les possibilités (y en a une quarantaine au total si je ne me trompe pas) et donc ça peut bouffer de la bande passante sacrément vite et il faut pouvoir les générer automatiquement avec une librairie d'image, sinon c'est la misère (faites pas ça à la main quoi ^^).

J'ai pendant longtemps utilisé un script PHP perso qui prenait l'image montrée plus haut et qui créait automatiquement les 46 possibilités différentes de case (32px sur 32px) de ce type. C'était pas trop difficile à maintenir, mais c'est quand même pas l'idéal, surtout niveau bande passante et fluidité du coup.

Je suis passé depuis deux semaines à un autre système, beaucoup plus puissant qui me permet de faire ceci :

<div class="water">

<div class="n-o"></div><div class="n-e"></div>

<div class="s-o"></div><div class="s-e"></div>

</div>

Donc en gros, j'ai un div supérieur qui constitue ma case et qui précise le type de tuile (ici water) et à l'intérieur j'ai 4 sous-calques (16px sur 16px) qui constituent chacun le quart de l'image. Chaque quart affiche la bonne bordure (c'est un script php qui lui indique quelle mini image afficher) ^^

Ca me permet de n'avoir plus que 20 images par type de tuile, mais surtout des images quatre fois plus petites, ce qui me permet de gagner en qualité (16 x 16 = 256 couleurs, donc je suis sûr de ne pas perdre de qualité, tout en pouvant compresser à fond), en bande passante (les images sont moins nombreuses et de plus petite taille). J'ai juste un fichier Css qui est foutu en cache et qui fait 1ko par tuile, donc rien de bien énorme.

Le tout est automatisé désormais, j'ai juste à ajouté une tile dans mon dossier spécial autotiles et hop il m'ajoute un dossier avec les 20 parties d'images dont j'ai besoin et il génère automatiquement un fichier Css qui me permet d'afficher les quarts de case en background des sous-calques. Quand je lance la carte, j'ai un préloader qui charge toutes les mini-images des tuiles, comme ça après le reste n'est plus qu'une question de Css

Je suis vraaaaiment pas sûr d'avoir été clair, le sujet étant particulièrement chaud à expliquer. Je pense que le plus simple serait que je fasse une petite vidéo de mon éditeur et de mes modules de génération automatique.

Dans tous les cas, ça demande pas mal d'efforts de conceptualisation, mais quand on arrive au bout, c'est un bonheur à tout point de vue (j'ai passé la nuit passée à coder un algorythme de compression JSon pour ma carte, c'était sport mais j'économise plus des trois quarts de mes ressources). J'arrive à générer de belles cartes dynamiques, complexes qui me prennent pas plus de 1.5.ko par requête ajax de cette manière. Ma carte est diablement plus fluide depuis que je suis passé sous ce système.

Edition : J'ai fait une vidéo super rapide, je suis sur mon eeePc, donc ça lag un peu >_< Mais je pense qu'on voit l'essentiel : http://www.youtube.com/watch?v=NXwjewFHAxQ (désolé pour le son bizarre)

Chaque case est en fait divisé en quatre sous cases. Et chaque fois que je pose une tuile, les 9 cases au tour sont actualisées en fonction de la nouvelle tuile.