Premier petit jeu et quelques questions.

Version imprimable

31/07/2013, 16h02
GalliezB

Premier petit jeu et quelques questions.

Bonjour,

Je me lance dans la réalisation de mini jeux en HTML5 tout en créant mon blog sur le sujet ( pas encore fonctionnel ).
Pour commencer j'ai décidé de faire ultra simple puis de complexifié jusqu'à pouvoir réaliser un jeu digne de ce nom ( et surtout pour le fun :D ).

Mon premier petit jeu se trouve ici et voici les sources.

Ok rien d'énorme pour un début, mais c'est volontaire pour justement étudier et avancer pas à pas. Ce petit exercice m'as soulevé pleins de question que j'aimerai résoudre avant de me lancer dans mon 2e petit jeu. Pourriez-vous m'éclaircir ceci :

1° Je ne voit aucune différence entre requestAnimFrame et un setTimeout ou setInterval. Pourquoi requestAnimFrame est conseillé partout ?

2° J'aimerai précharger les images en javascript sans les mettre dans le HTML avec un display none par exemple. Est-ce possible ? Car actuellement je dois réactualiser la page si les images ne sont pas en cache pour le premier affichage.

3° J'ai remarqué que les images s'empile par rapport à l'ordre du code. Existe-t-il un moyen de les gérer comme avec un z-index lorsque celle-ci sont dans un même canvas ?

4° J'ai eu des soucis avec onkeyup ( d'abord trouvé sur le net via onKeyUp ). Quelle est la différence entre onkeyup et onKeyUp ?

Toute autre remarque ou aide est évidemment la bienvenue :ccool:
Merci pour votre aide !

1° : avec requestAnimation le navigateur sait mieux optimiser s'il y a plusieurs animations concurrentes. Il va tout redessiner en même temps par exemple. Tu y gagneras en CPU, GPU et mémoire. N'hésite pas à utiliser un polyfill pour la compatibilité ! Je pense à celui de Erik Möller.

2° : Par exemple. Mais il existe d'autres moyens, notamment avec CSS, Ajax, etc
Code:

1 2 3 4 5 6 7 8 9 10 var images = []; function precharge() { for (var i=0;i < arguments.length; i++) { images[i] = new Image(); images[i].src = arguments[i]; } } // Utilisation : precharge('mon_image1.png','mon_image2.png','mon_image3.png')
4° : Une histoire de norme quand tu le déclares inline dans le HTML ... ou pour apporter un style rétro à ton code :aie: Javascript est sensible à la casse, donc pas de majuscule à onkeyup ! Idem pour onmouseover etc

Ce sont les questions classiques quand tu te lances dans ce genre de jeu. As tu pensé à utiliser une librairie complète qui gère toutes ces problématiques à ta place ? Je pense pas exemple à "createjs" ;)

31/07/2013, 17h52
SylvainPV

2° Je te conseille d'utiliser des feuilles de sprites plutôt qu'une image par objet. Puis tu peux coder un ResourceLoader qui va charger toutes tes images et les mettre en cache avant de lancer le jeu. Regarde du côté de l'objet Image en Javascript et de son attribut onload.

3° il faut voir le canvas comme une toile de peinture. Si tu fais un trait jaune puis un trait rouge par dessus, tu ne peux pas dire ensuite au trait jaune de revenir par-dessus. Il n'y a pas cette notion objet dans le canvas (bitmap) contrairement au SVG (vectoriel). A toi donc d'adapter ton code pour dessiner tes éléments dans l'ordre désiré.

4° utilise plutôt element.addEventListener('keyup', function(){ ... });
Au passage voilà un bon moteur de jeu JS utilisant WebGL avec fallback canvas : GoodBoyDigital/pixi.js/
Tu peux t'en servir pour produire rapidement un jeu. Si ton objectif est d'apprendre par toi-même comment faire ton jeu, la source est assez claire également.
31/07/2013, 18h44
Watilin

Il y a moyen de jouer un peu avec la superposition grâce à la propriété globalCompositeOperation. J'ai tendance à éviter de m'en servir car ça peut rendre les choses confuses, mais dans certains cas ça peut être pratique.
https://developer.mozilla.org/en-US/...al/Compositing

À propos de requestAnimationFrame, un de ses avantages est qu'il sait adapter le FPS, par exemple le faire diminuer quand la fenêtre est en arrière-plan.
31/07/2013, 19h55
GalliezB

Citation:

Kaamo:
Ce sont les questions classiques quand tu te lances dans ce genre de jeu. As tu pensé à utiliser une librairie complète qui gère toutes ces problématiques à ta place ? Je pense pas exemple à "createjs"

Oui, je comptais débuter avec EaselJs, Turbulenz, Canvas Engine ou tant d'autre. Mais après les avoir explorer et n'avoir que peu compris la doc, je me suis dis que commencer en Javascript simple, cela me permettrai de mieux comprendre le tout.
Et rien qu'avec ce test, je comprends déjà mieux certains framework.

Citation:

SylvainPV:
2° Je te conseille d'utiliser des feuilles de sprites plutôt qu'une image par objet. Puis tu peux coder un ResourceLoader qui va charger toutes tes images et les mettre en cache avant de lancer le jeu. Regarde du côté de l'objet Image en Javascript et de son attribut onload.

Oui je suis tombé la dessus, mais j'y réfléchi encore. Et mes tests n'ont rien donné de concluant pour le moment. J'vais creuser de ce côté la pour créer ma fonction qui chargera mes images.
Ok pour les sprites, je mettrai tout sur une image. Mais imagine une image de background extra longue. Il est mieux de la séparer ou de vraiment tout mettre ensemble ?

Citation:

SylvainPV:
4° utilise plutôt element.addEventListener('keyup', function(){ ... });
Au passage voilà un bon moteur de jeu JS utilisant WebGL avec fallback canvas : GoodBoyDigital/pixi.js/
Tu peux t'en servir pour produire rapidement un jeu. Si ton objectif est d'apprendre par toi-même comment faire ton jeu, la source est assez claire également.

Je ne connaissais pas ce framework, je l'ai ajouté à tous ceux que je vais tester.
En mettant Moncanvas.addEventListener('keyup', function(){ ... }); , je risque pas d'avoir un soucis sur la gestion du clavier si un clic est effectué en dehors du canvas ?
J'ai remarqué ce comportement sur certains jeux HTML5. Bien que ce problème disparaitra dès que je passerai le tout en fullscreen.

Citation:

Watilin :
Il y a moyen de jouer un peu avec la superposition grâce à la propriété globalCompositeOperation. J'ai tendance à éviter de m'en servir car ça peut rendre les choses confuses, mais dans certains cas ça peut être pratique.
https://developer.mozilla.org/en-US/...al/Compositing

Ok, je jette un œil, mais j'avoue que ça me parait aussi confus si le jeu deviens trop gros. Au pire j'empilerai des canvas, je trouve ça plus facile pour s'y retrouver.

Un grand merci à tous :ccool: