Développer un jeu avec Javascript et Canvas : The no tears way

[Maks]

Je disais ça parce que je reconnais des bouts de code de ce tuto : http://www.siteduzero.com/informatique/t...vec-canvas

On verra si tu arrives à maintenir 60 fps avec l'évolution de ton moteur graphique

[quentin01]

C'est chaud de tenir les FPS sur un jeu en JS pour le moment. Mais avec les évolutions comme asm.js ( <3 ) ça va être facilement faisable.

[Seby63]

Hm je pense que c'est faisable. Faut juste faire attentions aux calculs et fonctions d'affichages

Ajout de quelques arbres avec possibilité de passer derrière ou devant

http://je-joue-je-gagne.fr/kenji/

---

asm.js c'est quoi exactement? J'ai lu un peu mais j'ai pas réellement compris le principe

---

ASM c'est quoi exactement? J'ai lu 2-3 trucs mais j'ai pas réellement compris le principe.... Une nouvelle bibli?

[Argorate]

HS: en plein écran ça lag grave chez moi ^^

entre 30 et 40 fps en mode normal et 12 fps en full screen.

[Maks]

C'est chaud de tenir les FPS sur un jeu en JS pour le moment. Mais avec les évolutions comme asm.js ( <3 ) ça va être facilement faisable.

c'est faisable mais il faut passer quelques heures sur le profileur et reprendre les concepts des anciens jeux (dessin par région, mise en cache d'élément, viewport...), il y a un gros travail d'optimisation à faire

pour asm j'attends de voir, ça m'a surtout l'air bien pour du calcul

[Seby63]

Argorate, navigateur?

Oui c'est sûr que ça doit être optimisé sinon je pense que c'est tendu...

[Xenos]

Pareil que Maks, pour asm et pour l'optimisation.

Tous les concepts des moteurs 3D actuels (et passés) sont bons à prendre pour l'optimisation (car ce sont des problèmes déjà rencontrés par ces moteurs, et déjà résolus):
Les octrees (je compte réutiliser ce principe en 2+N et 3+N dimensions, c'est à dire 2D/3D + N paramètres comme le n° de caméra, la timeline, le n° du joueur...)
La clique SpatialGraph/Scenegraph/RenderQueue
L'exemple de Quake, assez vieux, bien documenté, devrait permettre de débroussailler les optimisations à faire.
La pré-compilation (lumières par exemple), les options de q3map peuvent guider.
Les tutos de NeonHelium (menu à droite au milieu) peuvent aussi aider. C'est du OpenGL: inutile de le "faire", mais le lire permet au moins de comprendre deux-trois techniques.

Et, oui, 55FPS en basique, 20 FPS en mode "élargi" pleine page, le bouton avec les flêches vertes). Firefox 20, Windows XP.
60FPS en fenetre sur Chrome v25, 38FPS en élargi (Chrome a boosté à mort canvas).

A la limite, le FPS n'est pas dérangeant. Ce sur quoi il te faut t'attarder au plus vite, c'est la synchronisation! :o
A 60FPS, il me faut 7 secondes pour aller de la case [2;0] à la case [0;2] (en considérant que [0;0] est la case avec d'angle, avec les arbres, visibles quand on apparait). A 20FPS, il me faut 16 secondes ! Normalement, il est nécessaire que tu sépares ton "contrôleur" (celui qui dit où le personnage est à tout instant) et ton afficheur (le canvas qui dessine). Car là, je pense que les deux sont mélangés (ok, pour un tuto de début, c'est bien, mais là, je vois que tu commences à complexifier et si tu complexifies une mauvaise base, non-synchrone, alors tu auras d'énormes difficultés à la rendre correcte et synchrone).

[Maks]

c'est ce qu'on appelle "framerate independance" ^^

Pas mal tes liens Xenos, même si ça concerne la 3D et OpenGL ça peut s'appliquer à WebGL (d'ailleurs j'ai encore rien vu d'ambitieux sur WebGL qui tournait à 60 FPS plein écran, malgré l'accélération matérielle très supérieure par rapport à canvas 2D).

La raison des mauvaises performances du canvas de Seby je la connais vu qu'on a suivi le même tuto au début mais comme il affirme le contraire je le laisse chercher :p (un coup de profileur et ça se voit tout de suite ceci-dit)

[Seby63]

Bizard, moi je tient le 60 FPS avec FF, Chrome et IE...

Pour le tuto oui je le reconnais, je l'avais utiliser sur un ancien projet mais comme j'ai repris 2-3 choses...

Dans le profileur je sais que la fonction d'affichage prend beaucoup de temps ^^ Mais j'ai pas plus chercher que ça Ta utiliser quel genre de système toi? ^^

[Xenos]