Auteur Sujet: [css - jquery] Animation images javascript  (Lu 9193 fois)

Hors ligne khiguard

  • Modérateur
  • Membre Complet
  • *****
  • Messages: 119
  • Karma: +4/-0
    • Alonya: jeu de gestion et de stratégie.
[css - jquery] Animation images javascript
« le: 16 novembre 2010 à 11:00:15 »
Voici un petit script pour faire une animation avec des images fixe.

A l'origine cela viens d'un site qui parle d'animer un sprite avec du css (et jquery), je vous passe le lien pour ceux qui veulent voir les exemples, c'est toujours intéressant.
Articles : http://web.virtuousquare.fr/?p=269
Démonstration : http://web.virtuousquare.fr/wp-content/themes/default/tuto/stage/stage1.htm

En partant de la, je suis arriver à faire d'autre animation tel que le déplacement isométrique d'un personnage ou une animation. (qui me serviront à d'autre moteur).
Je vous passe la page avec les exemples :
http://sombredestin.net/_PUBLIC/script/deplacement/deplacement.php
Pour l'animation, il suffit de cliquez sur le bouton, pour l'animation de mouvement, il faut garder le bouton de la souris enfoncer.
Je met le code en téléchargement ici : http://sombredestin.net/_PUBLIC/script/deplacement/script_mouvement.zip, pour ceux qui veulent voir (j'ai fait cela vite fait et en simplifiant au maximum pour la compréhension).

Prélude sera content, j'utilise la technique de rassembler toute les images dans un seules et on bouge dedans grâce aux CSS et à jquery. :)
Par contre, on est vite limité, au delà de 120ko (+ ou -), l'image ne se charge pas dans le navigateur. Je n'ai pas trouver pourquoi, si quelqu'un sait comment passer outre ou si il sait pourquoi, je suis preneur.

Voila, donc dites moi ce que vous en pensez, dites moi si vous avez d'autres méthodes plus simple ou juste différente.

@+
« Modifié: 16 novembre 2010 à 11:21:08 par khiguard »
Sombre Destin : Jeu de gestion/stratégie.
Alonya : Jeu de gestion/stratégie par partie. (en construction)
Acdn : Webzine ludique.

Hors ligne guile

  • Membre Junior
  • **
  • Messages: 56
  • Karma: +1/-0
Re : [css - jquery] Animation images javascript
« Réponse #1 le: 22 novembre 2010 à 00:39:12 »
Jolie exploitation d'une technologie! J'y ai beaucoup réfléchi et une interrogation reste : quid des performances?
Que se passerait-il si on (ab)use de ceci dans une page ? Par exemple une quarantaire d'élément animés dans une page?
On me dira "tout dépend du client machine/navigateur", et je me demande si un ordi normal le supporterait

Hors ligne Prelude

  • Administrateur
  • Membre Héroïque
  • *****
  • Messages: 1155
  • Karma: +9/-0
    • Mon blog
Re : [css - jquery] Animation images javascript
« Réponse #2 le: 22 novembre 2010 à 07:36:24 »
Ce serait un test à faire : ajouter une animation à chaque clic et voir si le navigateur rame un peu ou pas.
Quelqu'un se lance dans ce test ?
D'ailleurs, n'y a t-il pas de limite au nombre de timer déclaré en javascript ?!

Hors ligne khiguard

  • Modérateur
  • Membre Complet
  • *****
  • Messages: 119
  • Karma: +4/-0
    • Alonya: jeu de gestion et de stratégie.
Re : [css - jquery] Animation images javascript
« Réponse #3 le: 22 novembre 2010 à 09:37:22 »
Voici le test avec 40 animations : http://sombredestin.net/_PUBLIC/script/deplacement/deplacement2.php
Chez moi ça rame pas du tout, donc il y a de l'espoir.

Bon, le script est à remettre à jour car l'auteur du script innitial l'a améliorer, je mettrait à jour le script quand j'aurais un peu de temps, mais pour ceux qui veulent voir, c'est par la:
http://web.virtuousquare.fr/?p=390

Par contre, si quelqu'un arrive à mettre à genou le script je suis intéresser pour connaitre les limitations.

Maintenant ce genre d'animation, je verrais plus cela comme animation partiel dans un jeu. Une action: une animation. Un déplacement, une attaque, un sort. A la rigueur, faire bouger les sprites qui ne sont pas en mouvement (10 -20), une animation de déplacement à la fois, et une animation ou deux d'action (lancement sort), pas plus.
Je verrais bien cela dans un tactical RPG ou un RPG tout cours.

Edit:
Citer
D'ailleurs, n'y a t-il pas de limite au nombre de timer déclaré en javascript ?!
Je suis en train de faire des essais javascript, sur une carte avec des personnages qui s'animent, qui bouge avec trajet en pathfinding, le tout en boucle. Je vous montrerais quand j'aurais fini pour voir si c'est viable.
@+
« Modifié: 22 novembre 2010 à 11:11:23 par khiguard »
Sombre Destin : Jeu de gestion/stratégie.
Alonya : Jeu de gestion/stratégie par partie. (en construction)
Acdn : Webzine ludique.

Hors ligne guile

  • Membre Junior
  • **
  • Messages: 56
  • Karma: +1/-0
Re : [css - jquery] Animation images javascript
« Réponse #4 le: 26 novembre 2010 à 10:18:33 »
Je piaffe d'impatience de voir ça :)

Hors ligne khiguard

  • Modérateur
  • Membre Complet
  • *****
  • Messages: 119
  • Karma: +4/-0
    • Alonya: jeu de gestion et de stratégie.
Re : [css - jquery] Animation images javascript
« Réponse #5 le: 02 décembre 2010 à 10:31:39 »
Citer
Je piaffe d'impatience de voir ça Sourire
Si tu parle de mon message au dessus il est déjà en ligne et j'ai fait un post pour en parler : http://forum.jeux-web.com/index.php?topic=410.0
@+
Sombre Destin : Jeu de gestion/stratégie.
Alonya : Jeu de gestion/stratégie par partie. (en construction)
Acdn : Webzine ludique.