Una de bocadillos.

Ver artículo anterior de esta serie
Ver artículo siguiente de esta serie
El ejemplo en movimiento:
http://bajoeltejadodezic.googlecode.com/svn/trunk/bocadillos/bocadillos.html
El javascript del ejemplo:
http://bajoeltejadodezic.googlecode.com/svn/trunk/bocadillos/bocadillos.js
A lo largo del juego el protagonista tendrá contacto con otros personajes y hablará con ellos. La idea es que el dialogo se muestre a base de "bocadillos" y que exista un narrador, "ejem" (carraspeos), que los vaya leyendo.

En este ejemplo he creado un objeto “AnimaciónBocadillos” para que realice la animación y para que construya los bocadillos en función del texto que se le pase (posiblemente, aquí deberé pasar también la ubicación del archivo de audio para que se reproduzca cuando se visualiza el bocadillo).

Empecé creando una función que esperaba que fuese recursiva pero la llamada utilizando setTimeout() a una misma función pasando parámetros parece complicada (si no imposible) desde este “dichoso” lenguaje.

Con el código siguiente se crea y se inicia la animación:

var bocadillos = [
    [565,270, "Hola,;¿Estas buscando algo?", "#fff"],
    [420,280, "Sí,;busco a mis amigos.;¿Los has visto?", "#fff"],
    [565,270, "No.;¿Quieres que te ayude?", "#fff"],
    [420,280, "¡Sí!", "yellow"],
    [565,270, "Consigue lo que aparece en esta lista;y te diré donde están tus amigos.", "#fff"]
            ];
new AnimacionBocadillos(bocadillos).progresa();

En la variable bocadillos incluimos cada uno de los bocadillos de la animación, indicando el punto (x,y) donde se anclara el bocadillo, el texto que se mostrará (cada línea separada por “;”) y el color del relleno.
Al llamar al método progresa del objeto AnimacionBocadillos se iterará sobre el array, se limpiara el canvas y se irán mostrando los bocadillos.
Dentro de la función “muestraBocata” se mide el tamaño de la línea más ancha del texto, se descompone en líneas con split(“;”), y se mide el ancho con el método measureText(lineas[i]).width.
Con la altura de la fuente lo tenemos más complicado ya que no parece que exista un método estándar para obtenerla (las fuentes en la web son un quebradero de cabeza especial). En nuestro caso, como la fuente la elegimos nosotros, para calcular el alto de la línea, utilizaremos el método infalible “a capón”.

Un método curioso (¿qué remedio?), encontrado en la web, para calcular el alto de una fuente:
http://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-an-html-canvas
function measureTextHeight(ctx, left, top, width, height) {
    // Draw the text in the specified area
    ctx.save();
    ctx.translate(left, top + Math.round(height * 0.8));
    ctx.mozDrawText('gM'); // This seems like tall text...  Doesn't it?
    ctx.restore();
    // Get the pixel data from the canvas
    var data = ctx.getImageData(left, top, width, height).data,
        first = false,
        last = false
        r = height,
        c = 0;
    // Find the last line with a non-white pixel
    while(!last && r) {
        r--;
        for(c = 0; c < width; c++) {
                if(data[r * width * 4 + c * 4 + 3]) {
                        last = r;
                        break;
                }
        }
    }
    // Find the first line with a non-white pixel
    while(r) {
        r--;
        for(c = 0; c < width; c++) {
                if(data[r * width * 4 + c * 4 + 3]) {
                        first = r;
                        break;
                }
        }
        // If we've got it then return the height
        if(first != r) return last - first;
    }
    // We screwed something up...  What do you expect from free code?
    return 0;
}
// Set the font
context.mozTextStyle = '32px Arial';
// Specify a context and a rect that is safe to draw in when calling measureTextHeight
var height = measureTextHeight(context, 0, 0, 50, 50);
console.log(height);