Hojas de sprites y animaciones

Ahora que tenemos la base para un juego completo, pasaremos a agregar las imágenes. Anteriormente ya vimos como agregar imágenes a un juego, así que aprovecharé este momento para enseñarles una técnica más avanzada: Las hojas de sprites.

Una hoja de sprites (Spritesheet) es una imagen grande que contiene varios sprites en la misma, tal como la imagen siguiente que es la que usaremos en el presente ejemplo:

La ventaja de las hojas de sprites sobre las imágenes individuales, es que la hoja de sprites pesa menos que la suma de todas las imágenes individuales, lo que es una ventaja especial en un juego web, por que significa menos ancho de banda consumido, menos llamadas al servidor y una descarga más rápida.

HTML5 Canvas ya viene con un método avanzado para dibujar secciones de una imagen sobre nuestro canvas, lo que nos permite usar hojas de sprites con mucha facilidad. Para usar esta forma, hay que pasar nueve parámetros a la función drawImage:

ctx.drawImage(image, sX,sY,sWidth,sHeight, dX,dY,dWidth,dHeight);

El primer parámetro, es la imagen que tiene nuestra hoja de sprites. Los siguientes cuatro, indican el área de nuestra imagen que será dibujada (source), y los últimos cuatro, indican el área en nuestro canvas donde será dibujada esta imagen (destiny).

Prosigamos al ejemplo práctico. Comencemos creando nuestra función personalizada en el prototipo de la pseudo-clase "Rectangle", que nos permitirá dibujar el área de una imagen en el área correspondiente a nuestro rectángulo:

    Rectangle.prototype.drawImageArea=function(ctx,img,sx,sy,sw,sh){
        if(img.width)
            ctx.drawImage(img,sx,sy,sw,sh,this.x,this.y,this.width,this.height);
        else
            ctx.strokeRect(this.x,this.y,this.width,this.height);
    }

Declaremos ahora una variable de tipo imagen y asignemos su fuente a la ruta de nuestra imagen:

    var spritesheet=new Image();
    spritesheet.src='assets/spritesheet.png';

Después, vayamos a donde dibujamos nuestro jugador, y sustituyamos el rectángulo verde, dibujando la primer imagen de nuestra hoja de sprites. La nave está en en la posición 0,0 de nuestra hoja de sprites, y tiene una altura y anchura de 10x10 pixeles, por tanto, la función quedaría así:

            player.drawImageArea(ctx,spritesheet,0,0,10,10);
            //player.fill(ctx);

Prosigamos con las naves enemigas. La cuarta imagen de nuestra hoja de sprites es la nave enemiga, y la quinta, la nave totalmente en blanco, que representa la nave enemiga cuando está siendo dañada. Ambas tienen 10x10 pixeles de alto y ancho, y se encuentran en las posiciones 30,0 y 40,0 respectivamente. Por tanto, las funciones para dibujarlas quedarían de esta forma:

        for(var i=0,l=enemies.length;i<l;i++){
            if(enemies[i].timer%2==0){
                ctx.strokeStyle='#00f';
                enemies[i].drawImageArea(ctx,spritesheet,30,0,10,10);
            }
            else{
                ctx.strokeStyle='#fff';
                enemies[i].drawImageArea(ctx,spritesheet,40,0,10,10);
            }
            //enemies[i].fill(ctx);
        }

Ahora que ya comprendemos la forma en que funciona esta función, hagamos lo mismo para las mejoras:

        for(var i=0,l=powerups.length;i<l;i++){
            if(powerups[i].type==1){
                ctx.strokeStyle='#f90';
                powerups[i].drawImageArea(ctx,spritesheet,50,0,10,10);
            }
            else{
                ctx.strokeStyle='#cc6';
                powerups[i].drawImageArea(ctx,spritesheet,60,0,10,10);
            }
            //powerups[i].fill(ctx);
        }

Y para los disparos:

        ctx.strokeStyle='#f00';
        for(var i=0,l=shots.length;i<l;i++)
            //shots[i].fill(ctx);
            shots[i].drawImageArea(ctx,spritesheet,70,0,5,5);

Nota que los disparos tienen una altura y anchura de 5x5 pixeles, a diferencia de los demás elementos que hemos dibujado antes.

Para hacer el juego más jugable, he bajado la velocidad de las naves enemigas y de las mejoras de 10 a 5 pixeles por turno, así como agregado 4 naves al comienzo del juego. Probemos el juego, y veremos como cada imagen de nuestra hoja de estilos es dibujada correctamente en su posición del juego.

Animaciones

Otra ventaja que presentan las hojas de sprites, es que permiten crear animaciones de forma sencilla. Como podrás ver en nuestra hoja de sprites, esta ya está preparada para agregar animaciones a nuestro jugador y a los disparos.

Para crear animaciones, primero se necesita un contador que nos indique el tiempo que ha pasado para calcular la animación correspondiente. Declaramos una variable para ello al comienzo de nuestro juego:

    var elapsedTime=0;

Posteriormente, se agrega el contador al ciclo, el tiempo delta pasado cada turno mientras el juego no esté en pausa. Para mantener mayor control sobre este contador, cuando supere el valor de 3600 (una hora), restaremos ese valor sobre el mismo:

            // Elapsed time
            elapsedTime+=deltaTime;
            if(elapsedTime>3600)
                elapsedTime-=3600;

Anteriormente aprendimos como calcular el tiempo delta, pero dado que estamos corriendo nuestro juego en forma constante a 50 milisegundos por ciclo, podemos hacer un truco para simplificar este cálculo. Tan solo debemos enviar este tiempo ocurrido convertido a segundos en la variable act, que al dividirlo entre 1000, resulta 0.05:

    function run(){
        setTimeout(run,50);
        act(0.05);
    }

No olvides recibir este valor en la variable act con la variable de nombre deltaTime. Ahora, aplicaremos la animación a nuestros objetos por medio de este contador.

Para obtener la imagen de la animación a dibujar, primero multiplicamos la variable de temporizador por la cantidad de cuadros por segundos que queremos en nuestra animación y lo convertimos en un entero. Posteriormente sacamos el módulo de nuestro contador entre la cantidad de imágenes que tiene nuestra animación, y este valor lo multiplicamos por el alto o el ancho de cada imagen, ya sea que estén dispuestos de forma vertical u horizontal dentro de nuestra hoja de estilos. Esto se muestra de forma más clara en la siguiente fórmula:

(~~(elapsedTime*framesPerSecond)%totalFrames)*frameWidth

Por ejemplo si tuviéramos una animación de 6 imágenes que quisiéramos a 20 cuadros por segundo, con 10 pixeles de ancho cada imagen dentro de la hoja de sprites, la formula quedaría de esta forma:

(~~(elapsedTime*20)%6)*10

Y este valor se suma al origen en X o Y, según corresponda si están dispuestos de forma horizontal o vertical. En el caso de nuestra nave, son tres imágenes dispuestas de forma horizontal con 10 pixeles de ancho, las animaremos a 10 cuadros por segundo para que no pasen demasiado veloz, por tanto el dibujado quedaría de esta forma:

            player.drawImageArea(ctx,spritesheet,(~~(elapsedTime*10)%3)*10,0,10,10);

En el caso de los disparos, son dos imágenes dispuestas de forma vertical con 5 pixeles de alto, por tanto, se dibujarían de esta forma:

            shots[i].drawImageArea(ctx,spritesheet,70,(~~(elapsedTime*10)%2)*5,5,5);

En los dos casos previos, dio la casualidad que el origen al que se sume el valor es 0, y como sumar un valor a 0 es redundante, podemos eliminar esta parte. Pero nota que la mayoría de las veces, la animación no comenzará en 0, así que deberás sumar su origen correspondiente.

Con esto, hemos aplicado una hoja de estilos a nuestro juego, y la base ha quedado completa. Así concluimos con el conocimiento para hacer un segundo juego, y con este, puedes seguir aplicando lo que has aprendido para mejorar y personalizar tu propio juego de naves.

Gracias por acompañarme una vez más en este sitio, y como siempre, cualquier duda o comentario, estoy en mi mejor disposición para ayudarles. ¡Felices códigos!

Código final:

[Canvas not supported by your browser]

(function(){
    'use strict';
    window.addEventListener('load',init,false);
    var KEY_ENTER=13;
    var KEY_SPACE=32;
    var KEY_LEFT=37;
    var KEY_UP=38;
    var KEY_RIGHT=39;
    var KEY_DOWN=40;

    var canvas=null,ctx=null;
    var lastPress=null;
    var pressing=[];
    var pause=true;
    var gameover=true;
    var score=0;
    var multishot=1;
    var elapsedTime=0;
    var player=new Rectangle(90,280,10,10,0,3);
    var shots=[];
    var enemies=[];
    var powerups=[];
    var messages=[];
    var spritesheet=new Image();
    spritesheet.src='assets/spritesheet.png';

    function random(max){
        return ~~(Math.random()*max);
    }

    function init(){
        canvas=document.getElementById('canvas');
        ctx=canvas.getContext('2d');
        canvas.width=200;
        canvas.height=300;
        
        run();
        repaint();
    }

    function run(){
        setTimeout(run,50);
        act(0.05);
    }

    function repaint(){
        requestAnimationFrame(repaint);
        paint(ctx);
    }

    function reset(){
        score=0;
        multishot=1;
        player.x=90;
        player.y=280;
        player.health=3;
        player.timer=0;
        shots.length=0;
        enemies.length=0;
        powerups.length=0;
        messages.length=0;
        enemies.push(new Rectangle(30,0,10,10,0,2));
        enemies.push(new Rectangle(70,0,10,10,0,2));
        enemies.push(new Rectangle(110,0,10,10,0,2));
        enemies.push(new Rectangle(150,0,10,10,0,2));
        gameover=false;
    }

    function act(deltaTime){
        if(!pause){
            // GameOver Reset
            if(gameover)
                reset();
            
            // Move Player
            //if(pressing[KEY_UP])
            //    player.y-=10;
            if(pressing[KEY_RIGHT])
                player.x+=10;
            //if(pressing[KEY_DOWN])
            //    player.y+=10;
            if(pressing[KEY_LEFT])
                player.x-=10;

            // Out Screen
            if(player.x>canvas.width-player.width)
                player.x=canvas.width-player.width;
            if(player.x<0)
                player.x=0;
            
            // New Shot
            if(lastPress==KEY_SPACE){
                if(multishot==3){
                    shots.push(new Rectangle(player.x-3,player.y+2,5,5));
                    shots.push(new Rectangle(player.x+3,player.y,5,5));
                    shots.push(new Rectangle(player.x+9,player.y+2,5,5));
                }
                else if(multishot==2){
                    shots.push(new Rectangle(player.x,player.y,5,5));
                    shots.push(new Rectangle(player.x+5,player.y,5,5));
                }
                else
                    shots.push(new Rectangle(player.x+3,player.y,5,5));
                lastPress=null;
            }
            
            // Move Shots
            for(var i=0,l=shots.length;i<l;i++){
                shots[i].y-=10;
                if(shots[i].y<0){
                    shots.splice(i--,1);
                    l--;
                }
            }
            
            // Move Messages
            for(var i=0,l=messages.length;i<l;i++){
                messages[i].y+=2;
                if(messages[i].y<260){
                    messages.splice(i--,1);
                    l--;
                }
            }
            
            // Move PowerUps
            for(var i=0,l=powerups.length;i<l;i++){
                powerups[i].y+=5;
                // Powerup Outside Screen
                if(powerups[i].y>canvas.height){
                    powerups.splice(i--,1);
                    l--;
                    continue;
                }
                
                // Player intersects
                if(player.intersects(powerups[i])){
                    if(powerups[i].type==1){ // MultiShot
                        if(multishot<3){
                            multishot++;
                            messages.push(new Message('MULTI',player.x,player.y));
                        }
                        else{
                            score+=5;
                            messages.push(new Message('+5',player.x,player.y));
                        }
                    }
                    else{ // ExtraPoints
                        score+=5;
                        messages.push(new Message('+5',player.x,player.y));
                    }
                    powerups.splice(i--,1);
                    l--;
                }
            }
            
            // Move Enemies
            for(var i=0,l=enemies.length;i<l;i++){
                if(enemies[i].timer>0)
                    enemies[i].timer--;
                
                // Shot Intersects Enemy
                for(var j=0,ll=shots.length;j<ll;j++){
                    if(shots[j].intersects(enemies[i])){
                        score++;
                        enemies[i].health--;
                        if(enemies[i].health<1){
                            enemies[i].x=random(canvas.width/10)*10;
                            enemies[i].y=0;
                            enemies[i].health=2;
                            enemies.push(new Rectangle(random(canvas.width/10)*10,0,10,10,0,2));
                        }
                        else{
                            enemies[i].timer=1;
                        }
                        shots.splice(j--,1);
                        ll--;
                    }
                }
                
                enemies[i].y+=5;
                // Enemy Outside Screen
                if(enemies[i].y>canvas.height){
                    enemies[i].x=random(canvas.width/10)*10;
                    enemies[i].y=0;
                    enemies[i].health=2;
                }
                
                // Player Intersects Enemy
                if(player.intersects(enemies[i])&&player.timer<1){
                    player.health--;
                    player.timer=20;
                }
                
                // Shot Intersects Enemy
                for(var j=0,ll=shots.length;j<ll;j++){
                    if(shots[j].intersects(enemies[i])){
                        score++;
                        enemies[i].health--;
                        if(enemies[i].health<1){
                            // Add PowerUp
                            var r=random(20);
                            if(r<5){
                                if(r==0)    // New MultiShot
                                    powerups.push(new Rectangle(enemies[i].x,enemies[i].y,10,10,1));
                                else        // New ExtraPoints
                                    powerups.push(new Rectangle(enemies[i].x,enemies[i].y,10,10,0));
                            }
                            enemies[i].x=random(canvas.width/10)*10;
                            enemies[i].y=0;
                            enemies[i].health=2;
                            enemies.push(new Rectangle(random(canvas.width/10)*10,0,10,10,0,2));
                        }
                        else{
                            enemies[i].timer=1;
                        }
                        shots.splice(j--,1);
                        ll--;
                    }
                }
            }
            
            // Elapsed time
            elapsedTime+=deltaTime;
            if(elapsedTime>3600)
                elapsedTime-=3600;
            
            // Damaged
            if(player.timer>0)
                player.timer--;
            
            // GameOver
            if(player.health<1){
                gameover=true;
                pause=true;
            }
        }
        // Pause/Unpause
        if(lastPress==KEY_ENTER){
            pause=!pause;
            lastPress=null;
        }
    }

    function paint(ctx){
        ctx.fillStyle='#000';
        ctx.fillRect(0,0,canvas.width,canvas.height);
        
        ctx.strokeStyle='#0f0';
        if(player.timer%2==0)
            //player.fill(ctx);
            player.drawImageArea(ctx,spritesheet,(~~(elapsedTime*10)%3)*10,0,10,10);
        for(var i=0,l=powerups.length;i<l;i++){
            if(powerups[i].type==1){
                ctx.strokeStyle='#f90';
                powerups[i].drawImageArea(ctx,spritesheet,50,0,10,10);
            }
            else{
                ctx.strokeStyle='#cc6';
                powerups[i].drawImageArea(ctx,spritesheet,60,0,10,10);
            }
            //powerups[i].fill(ctx);
        }
        for(var i=0,l=enemies.length;i<l;i++){
            if(enemies[i].timer%2==0){
                ctx.strokeStyle='#00f';
                enemies[i].drawImageArea(ctx,spritesheet,30,0,10,10);
            }
            else{
                ctx.strokeStyle='#fff';
                enemies[i].drawImageArea(ctx,spritesheet,40,0,10,10);
            }
            //enemies[i].fill(ctx);
        }
        ctx.strokeStyle='#f00';
        for(var i=0,l=shots.length;i<l;i++)
            //shots[i].fill(ctx);
            shots[i].drawImageArea(ctx,spritesheet,70,(~~(elapsedTime*10)%2)*5,5,5);
        
        ctx.fillStyle='#fff';
        for(var i=0,l=messages.length;i<l;i++)
            ctx.fillText(messages[i].string,messages[i].x,messages[i].y);
        ctx.fillText('Score: '+score,0,20);
        ctx.fillText('Health: '+player.health,150,20);
        //ctx.fillText('Last Press: '+lastPress,0,20);
        //ctx.fillText('Shots: '+shots.length,0,30);
        if(pause){
            ctx.textAlign='center';
            if(gameover)
                ctx.fillText('GAME OVER',100,150);
            else
                ctx.fillText('PAUSE',100,150);
            ctx.textAlign='left';
        }
    }

    document.addEventListener('keydown',function(evt){
        lastPress=evt.keyCode;
        pressing[evt.keyCode]=true;
    },false);

    document.addEventListener('keyup',function(evt){
        pressing[evt.keyCode]=false;
    },false);

    function Rectangle(x,y,width,height,type,health){
        this.x=(x==null)?0:x;
        this.y=(y==null)?0:y;
        this.width=(width==null)?0:width;
        this.height=(height==null)?this.width:height;
        this.type=(type==null)?1:type;
        this.health=(health==null)?1:health;
        this.timer=0;
    }

    Rectangle.prototype.intersects=function(rect){
        if(rect!=null){
            return(this.x<rect.x+rect.width&&
                this.x+this.width>rect.x&&
                this.y<rect.y+rect.height&&
                this.y+this.height>rect.y);
        }
    }
    
    Rectangle.prototype.fill=function(ctx){
        ctx.fillRect(this.x,this.y,this.width,this.height);
    }

    Rectangle.prototype.drawImageArea=function(ctx,img,sx,sy,sw,sh){
        if(img.width)
            ctx.drawImage(img,sx,sy,sw,sh,this.x,this.y,this.width,this.height);
        else
            ctx.strokeRect(this.x,this.y,this.width,this.height);
    }

    function Message(string,x,y){
        this.string=(string==null)?'?':string;
        this.x=(x==null)?0:x;
        this.y=(y==null)?0:y;
    }

    window.requestAnimationFrame=(function(){
        return window.requestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            function(callback){window.setTimeout(callback,17);};
    })();
})();