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

[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 ^^