Auteur Sujet: Test en css de grosse images pour les tuiles  (Lu 3783 fois)

Hors ligne khiguard

  • Modérateur
  • Membre Complet
  • *****
  • Messages: 119
  • Karma: +4/-0
    • Alonya: jeu de gestion et de stratégie.
Test en css de grosse images pour les tuiles
« le: 03 février 2010 à 10:04:40 »
Suivant le message dans le blog de prélude:
http://www.prelude.me/index.php?post/2009/12/03/La-performance-de-vos-sites-web
Il a demander de donne ces expériences sur le sujet.
J'ai donc fait un test pour savoir si en regroupant plusieurs tuiles d'une map 3d iso cela améliorait la performance.

Comme je suis en train de reprogrammer complètement le moteur de Sombre Destin pour la version 2, je vous montre le résultat (voir bas du message).
Comme vous pouvez le voir dans la première image, les collines se joignent suivant si il y en a proche d'elle. Il y a 16 images suivant la direction ou se fait la jointure (les 4 coins: nord, est, sud, ouest).
J'ai tester avec une image qui regroupe les 16 images et en utilisant les 16 images séparément, tout en css.

Dans le premier cas , celui de tout dans une image. C'est beaucoup plus lent à l'affichage (normal, il faut charger une image plus longue) et surtout, c'est beaucoup plus lourd. En effet, après avoir tester, étrangement une image contenant les 16 images est plus lourde que toute les images séparément. De plus, alors que parfois, vous n'auriez besoin que de 3,4 tuiles, ici il télécharge la grosse image. Avec une map qui contient un colline, une montagne et une mer, vous pourriez avoir à télécharger plus de 300ko d'image alors que juste une dizaine suffirait.

Dans le deuxième, c'est beaucoup plus rapide à l'affichage, le seul défaut est que chaque image ce charge à la fois et donc, lors de déplacement, il faut parfois 1 seconde avant qu'une tuile n'apparaisse.

Je déconseille de tout mettre dans un seul fichier pour un simple jeu. Pour des icons oui (d'ailleurs je le ferais), mais des tuiles cela est beaucoup trop lourd.

La seul possibilité est de créer un script qui télécharge toute les images en une fois à la première connexion.
J'ai déjà vu cela dans un site qui utilisait les images de ultima 8 (je n'ai plus le lien). Cela fonctionnait bien, mais ca prenait quand même 10 à 30 seconde suivant la connexion pour commencer seulement à jouer.

Voila donc mon petit test, si d'autre l'on fait, n'hésitez pas à partager votre expérience.


Au passage, si certain veulent que j'explique comment je fait pour faire les jointures entre les terrains en faisant tout faire par le moteur sans aucune programmation php, dites le moi, je ferais une petite explication théorique. (voir deuxième images ou je montre qu'avec uniquement 3 sortes de terrain dans la base, le moteur extrapole les jointure entre océan, mer et foret en créant les plage par exemple, le tout, très rapidement)
@+


Sombre Destin : Jeu de gestion/stratégie.
Alonya : Jeu de gestion/stratégie par partie. (en construction)
Acdn : Webzine ludique.

Hors ligne Prelude

  • Administrateur
  • Membre Héroïque
  • *****
  • Messages: 1155
  • Karma: +9/-0
    • Mon blog
Re : Test en css de grosse images pour les tuiles
« Réponse #1 le: 03 février 2010 à 10:13:03 »
Comme je suis en train de testé Heroes KingDoms, j'ai constaté qu'ils utilisaient cette tehnique de regroupement d'images en une seule.
En fait, ce sont les fameux "sprites" que l'on utilisait dans les années 80 pour réaliser nos jeux de l'époque.
Mais ça implique de gérer correctement le cache (voir le module mod_expires sous Apache) : il ne faut charger l'image qu'une seule fois évidement.

Et si tu veux nous faire un article sur GameOnNet (ah tiens, un fanzine qui existe depuis longtemps...), n'hésite pas !  ;)

Hors ligne khiguard

  • Modérateur
  • Membre Complet
  • *****
  • Messages: 119
  • Karma: +4/-0
    • Alonya: jeu de gestion et de stratégie.
Re : Test en css de grosse images pour les tuiles
« Réponse #2 le: 03 février 2010 à 10:33:03 »
Tu a raison, j'aurais du être plus précis:
J'ai fait un test sur un mutualisé (donc pas accès au configuration d'apache) et sur un moteur qui gère entre 50 et 100 tuiles, uniquement pour le terrain.

Heroes KingDoms n'utilise pas beaucoup de tuiles pour ses terrains. Donc cela va très bien.
Cette méthode doit être très bien si on a moins de 20 tuiles, mais au delà, il faut utiliser des méthodes spécifiques pour les gérer. Et même comme cela, je trouve que l'image regroupant 16 tuiles, est 25% plus grosse que les 16 séparées.

C'est juste ma petite expérience :)

Je ferais d'autre test, je communiquerais si les résultats change.

Pour un article, oui, mais bon, faut faire corriger et tout cela :)
@+
Sombre Destin : Jeu de gestion/stratégie.
Alonya : Jeu de gestion/stratégie par partie. (en construction)
Acdn : Webzine ludique.

Hors ligne Prelude

  • Administrateur
  • Membre Héroïque
  • *****
  • Messages: 1155
  • Karma: +9/-0
    • Mon blog
Re : Test en css de grosse images pour les tuiles
« Réponse #3 le: 03 février 2010 à 10:50:36 »
Si tu as accès à ton .htacess, tu peux modifier pas mal de choses. Par exemple, pour mettre en cache pendant 1 jour le fichier "monfichier.jpg" :

<Files monfichier.jpg>
Header set Cache-Control "max-age=86400"
</Files>

Le nombre max-age étant indiqué en secondes (60 sec x 60 min x 24 heures)

Et je corrige les textes, pas de problème  ;)