"sprite" préchargement d'images en javascript

Bonjour,
Je voudrais précharger mes sprites (images) dans un jeu en js.

Exemple:
Si j'ai 10 enemies de la même entity (mettons 10 RYU du jeu street fighters). Dans ce cas je précharge 10 images (similaires) et je garde les references pour les utiliser lors du jeu.

Mon problème:
J'aurais aimé ne pas avoir à créer 10 images au début. Mais plutot juste en charger une en cache et cloner les 9 autres en plein jeux.

Voici un exemple qui montre que ce n'est pas possible. Quelque soit x, le load d'une image déclenche. Ce qui veut dire que l'image est rechargée à chaque fois et que ca ne pointe pas directement sur celel cachée la première fois avec sprite1 dans cet exemple.:?
http://jsfiddle.net/4Xp7M/

Je trouve que c'est un peu tiré par les cheuveux si l'image est déjà en cache. Donc voila j'aimerais confirmer avec vous ma théorie du "ce n'est pas faisable". Il n'y a pas moyen pour ne pas avoir à créer toutes les sprites du niveau au début ??

Merci pour vos avis

Bonjour,

Quand tu changes l'attribut src d'un élément <img>, l'image est automatiquement rechargée donc requête + évènement onload. A noter que l'évènement onload est déclenché même si l'image est en cache.

Pour résoudre ton problème, je te suggère de te servir de l'attribut CSS background-image sur des <div> plutôt que d'éléments <img>. C'est la technique la plus couramment utilisée pour les sprites : il suffit de changer l'attribut background-position pour passer d'une frame à une autre d'un sprite.

Avec une classe CSS par sprite, une seule requête par image est envoyée lors de la lecture du fichier CSS. Donc le préchargement sera géré pour toi.

Si tu veux un exemple pour démarrer, j'avais commencé à bosser sur un petit jeu qui utilisait des sprites CSS : http://syllab.fr/projets/games/Junkyard/ ; Les modules qui t'intéressent : http://syllab.fr/projets/games/Junkyard/js/graphics/
C'est pas documenté mais il y a tout ce qu'il faut pour gérer un grand nombre de sprites animés à l'écran. :ccool:

http://www.developpez.net/forums/d90...-dessin-anime/

SpaceFrog:
Je crois que la manière dont j'ai pose le problème peut porter à confusion. Je ne veux pas animer 10 sprites de ryu pour avoir un ryu qui bouge. Je veux avoir 10 sprites similaires (qui utilise la même image src) pour représenter 10 ryu différents (qui vont attaquer Ken par exemple) dans le jeu juste par le chargement d'une seule en cache (Imaginons un cas sans animations pour les personnages).

SylvainPV:
J'utilise canvas avec drawImage (new Image() que je passe dans drawImage).
Regarde mon app. sur google chrome. https://chrome.google.com/webstore/d...poeellfieldede
(tu peux voir le code dans dev. tool de chrome :Pf12 par exemple et de toute manière mon moteur est open source*)
J'ai essayé mon moteur de jeu perso. sur une petite application dans chrome store (ce n'est pas en localhost comme sur iphone). J'ai un comportement bizarre des images alors que je les précharge durant la vue de loading. Quand je dis précharge je m'arrange à ce que l'attribut "complete" de chaque Image soit à true. Donc en principe, la prochaine image qui utilise la même src va etre loadée à partir du cache. Or comme tu peux le voir dans l'app, ca ne réagit pas convenablement et tu vois les images se loader (depuis le cache probablement?? mais C'est lent QUAND même???) petit à petit même après un préchargement.
Le seule moyen d'éviter ça que j'ai trouvé. C'est de garder en mémoire la réference de l'image préchargée durant le loading et de l'utiliser directement dans le drawImage au lieu d'en créer une nouvelle avec le même source quand j'en ai besoin dans le jeu.
L'exemple de ton jeu::ccool:
Je t'avoue que c'est intéressant ton approche css et de voir ce que tu as fait :). Pour tes petits robots, tu dois comme même reload l'image (background-image) du petit robot à chaque fois que tu en crées un (de la cache probablement?? mais Ce n'est PAS lent???) , Right!!? :roll:

La question est:
pourquoi toi c'est rapide mais dans mon cas lent?
Supposition1:
La taille des images? fait que l,on ne remarque pas le chargement des ptits robots VS mes bigs images d'animaux?
Supposition2:
je ne suis pas entrain de charger de la cache?

p.s. j'ai passé en diagonale ce soir... je regarde ça demain soir plus attentivement

merci pour votre aide

a partir du moment ou tu as une seule image et donc un seul chemin c'est le navigateur qui gère le cache, l'image n'est chargée qu'une seule fois.
Dans ton cas de figure cela relève à mon avis de la gestion du canvas

bonjour

pour eviter le prechargement dans le canvas utilise une image avec une url en base 64

mekal :
Je regarderais ca mais pour le moment j'ai déjà codé le préchargement et ca marche bien. Je vais faire des jeux style OLD donc ca m'arrange l'écran de loading.

SpaceFrog:
C'est bon tout s'explique. Donc c'est de la cache au drawImage qui prend QUAND :) même du temps. Et je sais exactement maintenant comment cela peut etre contourné sans recharger l'image à chaque fois mais je ne sais pas si il va y avoir problème de performance en utilisant cetet technique plutot que de faire ce que je disais au tout début (garder les references).

En résumé, il faut charger une image en cache (Ryu) une seule fois. Ensuite faire un bitBlt en utilisant la forme de drawImage adéquate.
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
C'est à dire que l'on va chercher une partie ou totalement une image en mémoire et non en cache pour faire notre drawImage pour les 9 autres Ryu de la scène. (c'est une copie mémoire)

Je fais ca dans jsFiddle ce soir et je vous montre. On verra bien si ca marche.

Code:

---

1 2 3 4 5 6

// Création de l'image et préchargement var ryuBase = new Image(); ryuBase.src = 'chemin_de_l_image';   // Création d'une nouvelle image var ryu1 = ryuBase.cloneNode();

---

Citation:

---

Envoyé par n2engineer5

J'utilise canvas avec drawImage (new Image() que je passe dans drawImage).
Regarde mon app. sur google chrome. https://chrome.google.com/webstore/d...poeellfieldede
(tu peux voir le code dans dev. tool de chrome :Pf12 par exemple et de toute manière mon moteur est open source*)
J'ai essayé mon moteur de jeu perso. sur une petite application dans chrome store (ce n'est pas en localhost comme sur iphone). J'ai un comportement bizarre des images alors que je les précharge durant la vue de loading. Quand je dis précharge je m'arrange à ce que l'attribut "complete" de chaque Image soit à true. Donc en principe, la prochaine image qui utilise la même src va etre loadée à partir du cache. Or comme tu peux le voir dans l'app, ca ne réagit pas convenablement et tu vois les images se loader (depuis le cache probablement?? mais C'est lent QUAND même???) petit à petit même après un préchargement.

Le seule moyen d'éviter ça que j'ai trouvé. C'est de garder en mémoire la réference de l'image préchargée durant le loading et de l'utiliser directement dans le drawImage au lieu d'en créer une nouvelle avec le même source quand j'en ai besoin dans le jeu.

---

Ah ben si tu utilises canvas il n'y a aucune raison de manipuler plus d'un élément image. En créer un seul et récupérer l'image Data au loading est la bonne façon de faire.

Citation:

---

Envoyé par n2engineer5

L'exemple de ton jeu::ccool:
Je t'avoue que c'est intéressant ton approche css et de voir ce que tu as fait :). Pour tes petits robots, tu dois comme même reload l'image (background-image) du petit robot à chaque fois que tu en crées un (de la cache probablement?? mais Ce n'est PAS lent???) , Right!!? :roll:

---

Non, l'image n'est pas reload (au sens HTTP). Elle est loadée qu'une seule fois et les données bitmap sont enregistrées pour être réutilisées au besoin par le moteur de rendu sur tous les éléments concernés.

Citation:

---

Envoyé par n2engineer5

La question est:
pourquoi toi c'est rapide mais dans mon cas lent?
Supposition1:
La taille des images? fait que l,on ne remarque pas le chargement des ptits robots VS mes bigs images d'animaux?
Supposition2:
je ne suis pas entrain de charger de la cache?

---

Je parierais sur la 2. Le cache peut être configuré à la fois côté client et côté serveur.

voila http://jsfiddle.net/6AccJ/13/

Il faut loader une image en cache (avec un src A) et utiliser cette instance dans tous les drawImage concernant ce src A. Aussi simple que ca. Pas besoin de bitblt.

:ccool:

merci à tous pour votre participation!
*le cloneNode a été mentionné dans mon exemple jsFIddle de mon premier post :)