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

[quentin01]

Le mieux pour ce genre de jeu en réseau c'est quand même de donner les données principales du personnage au client, par exemple ses coordonnées x et y ainsi que son état d'animation. Comme ça tous les joueurs sont toujours synchro' ( Fin façon de parler vu que le réseau n'est pas parfaitement en temps réel non plus ).

[Maks]

Oui c'est l'idée ^^

Memo des méthodes pour canvas :

http://simon.html5.org/dump/html5-canvas...sheet.html

[Maks]

Je me permets de quoter mon WIP pour compléter ce sujet

Pour en revenir rapidement aux font bitmap de Impact JS je me suis penché sur comment ça fonctionne vu que j'ai besoin de quelque chose de plus complet maintenant.
Après avoir généré une font ici : http://impactjs.com/font-tool/

Code :

var buffer = document.createElement('canvas');
    var ctx = buffer.getContext('2d');

    for (var i = 0, l = text.length; i < l; ++i) {
        var letter = text.charAt(i);
        var letterASCII = text.charCodeAt(i);
        var xLetter = (letterASCII-32)*6; // -32 car on commence à SPACE et *6 la largeur d'une lettre en Courrier New 11 spacing -1
        ctx.drawImage(this.image, xLetter, 0, 6, 13, i*6, 0, 6, 12);
    }

    return buffer;

avec text le string en entrée, et this.image l'objet image que l'on gèrera selon les préférences de chacun.

Quelques points quand même pour reprendre mon bout de code :
- 6 correspond à la largeur en pixels pour Courrier New taille 11 avec -1 en espace et 12 à la hauteur choisie
=> ces deux données étant vérifiables en dur sur Photoshop après avoir généré la font.

C'est pour cela que j'ai choisi Courrier New, les lettres ayant toutes la même largeur (contrairement à Arial par exemple) ce qui simplifie clairement les choses.

Cependant si vous souhaitez quelque chose de plus générique ou utiliser une autre police, il faudra jouer avec :
- la méthode measureText() pour le width de la font
- et pour le height, c'est pas un cadeau, il faudra manipuler le tableau de pixels imageData : http://stackoverflow.com/questions/11345...tml-canvas

Si le texte est fixe, avec le buffer, ça va. Mais s'il est appelé à changer souvent, c'est autant de traitement en plus...

Voilà j'espère que ça aidera ^^

[Maks]

Un framework pour Canvas qui me semble vraiment pas mal :

http://www.kineticjs.com/

Permet de rajouter facile une couche d'intéraction à canvas :

http://www.html5canvastutorials.com/kine...mouseover/

Et plein d'autres choses !

Dommage que je n'ai pas vu ça avant ^^

[Wells]

Develloper tout un jeu, vous y aller un peu fort

Par contre je pense refondre totalement ma cartographie en se basant sur les canevas, ce qui me donnera l'occasion d'y plonger les pattes.

Rester dans le coin, je sent qu'il va y avoir des questions prochainement

[Maks]

avec toutes les ressources que j'ai mises sur ce topic tu as de quoi faire

[Maks]

Je continue à alimenter le topic pour ceux que ça intéresse

L'API canvas ne cesse de m'impressionner, aujourd'hui j'ai découvert les Global Composition : http://www.html5canvastutorials.com/adva...-tutorial/

Ce qui permet de gérer le dessin par calque comme sur Photoshop. "lighter" est très utile pour rendre transparent un fond noir par exemple... Destination permet de gérer un z-index.

Une utilisation très intelligente du truc : http://blogs.msdn.com/b/ie/archive/2011/...tball.aspx pour économiser des ressources.

Sinon une autre bonne nouvelle, il y aura l'accélération graphique pour canvas activée par défaut dans Chrome 18, ce qui n'est honteusement pas le cas actuellement, Google préférant surement favoriser WebGL, une technologie qui ne sera surement jamais cross-browser à mon avis malheureusement. IE privilégiant Silverlight, pas de WebGL à venir dans IE 10.

A noter que l'accélération graphique est activée pour Chrome Android tout de même.

[Ter Rowan]

IE privilégiant Silverlight.

Silverlight, c'est bientôt fini, tout porte à penser que microsoft estpas loin de l'abandonner au profit d'ashtemeleuh (ils n'ont même pas abordé le sujet aux derniers tech days de ce que je crois)

[Maks]

Ouep j'ai lu aussi que HTML5 et JS prendront beaucoup plus de place dans Windows 8. D'autant plus que maintenant on peut faire des app offline et que niveau rapidité, on a vu avec Node.js que JS est clairement dans le coup (voir au dessus du lot).

S'ils abandonnent Silverlight ça peut laisser la place à WebGL dans IE 11 alors

[Maks]

Portage Objective-C => JS

http://www.cuttherope.ie/

---

http://www.youtube.com/watch?v=XAqIpGU8ZZk une vidéo intéressante sur V8, le jeu vidéo par navigateur ect