Botones en pantalla

Ahora que estamos desarrollando para móviles, necesitamos encontrar una nueva forma de controlar el juego, dado que no disponemos de un teclado. Una de las soluciones populares, aprovechando las capacidades multi-toque de estos dispositivos, es simular botones en la pantalla.

Para este ejemplo, nos basaremos en el código de Municiones Dinámicas. Comenzaremos agregando una función para crear botones:

    function Button(x,y,width,height){
        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;
    }

    Button.prototype.touch=function(){
        for(var i=0,l=touches.length;i<l;i++){
            if(touches[i]!=null){
                if(this.x<touches[i].x&&
                    this.x+this.width>touches[i].x&&
                    this.y<touches[i].y&&
                    this.y+this.height>touches[i].y){
                    return true;
                }
            }
        }
        return false;
    }

    Button.prototype.stroke=function(ctx){
        ctx.strokeRect(this.x,this.y,this.width,this.height);
    }

Como podrás ver, esta función es bastante similar a la función rectángulo, con la diferencia principal en la función touch, que analiza todos los toques, y si encuentra uno de los toques contenidos en su área, regresa verdadero; de lo contrario, regresa falso al final.

Crearemos cuatro botones, para los movimientos izquierda, derecha, disparo y pausa. No olvides tomar en cuenta el botón de pausa, ya que ahora no contamos con teclado en lo absoluto:

    var btnLeft=new Button(10,270,20,20);
    var btnRight=new Button(40,270,20,20);
    var btnShoot=new Button(170,270,20,20);
    var btnPause=new Button(90,0,20,20);

Para hacer uso de los botones, solo debemos llamar a su función touch:

            // Move Rect
            if(btnRight.touch()) //RIGHT
                player.x+=10;
            if(btnLeft.touch()) //LEFT
                player.x-=10;

Para efectuar una acción "tap", es decir, un golpecito en lugar de la acción de dejar presionado el botón, como es la acción esperada con el botón de pausa, sólo debe compararse si acaba de iniciar un toque, y si el botón está en acción touch al mismo tiempo:

        if(lastPress==1&&btnPause.touch()){
            pause=!pause;
            lastPress=null;
        }

Para el botón de disparo, ¿Se debería usar touch, o tap? En el código original, se usaba el equivalente a tap, pero puede resultar incómodo este movimiento repetido en la pantalla móvil. Sin embargo, usar touch, crea más disparos de los que realmente son deseados. Una forma de solucionar esto, es creando un temporizador. Comencemos por declararlo:

    var shootTimer=0;

Ya sabes usar temporizadores. Se compara si el temporizador está activo, de ser así, se resta su valor, y de lo contrario, se busca si es tiempo de realizar otro disparo, en cuyo caso, se vuelve a activar el temporizador:

            // New Shot
            if(shootTimer>0){
                shootTimer-=deltaTime;
            }
            else if(btnShoot.touch()){
                shots.push(new Rectangle(player.x+3,player.y,4,4));
                shootTimer=0.1;
            }

De esta forma, podemos controlar la cantidad de disparos por segundo, en caso que el jugador deje presionado el botón. Si prefiere hacer tap en lugar de dejar presionado el touch, la acción funciona de igual forma. No olvides dibujar los botones en pantalla:

        ctx.strokeStyle='#fff';
        btnRight.stroke(ctx);
        btnLeft.stroke(ctx);
        btnShoot.stroke(ctx);
        btnPause.stroke(ctx);

Con esto, tendremos botones virtuales en nuestra pantalla. He movido el jugador un poco más arriba, para que los dedos no obstruyan su posición en la pantalla; este es un factor muy importante a considerar cuando se usan botones virtuales en pantalla.

También he desactivado la pantalla completa en modo paisaje, ya que para este juego no aplica. Creo que puedes saber como hacerlo, pero en caso de tener duda, revisa el código final. Quizá también puedas tener una idea más original de que hacer en este caso.

Finalmente, dado que los tiempos de actualización suelen ser menores en los navegadores de dispositivos móviles, he cambiado la forma de regular el requestAnimationFrame de la forma que hemos usado hasta ahora, a usar el deltaTime. Esto ya quedó explicado en el tema RequestAnimationFrame: Regulando el tiempo entre dispositivos, pero si tienes dudas en su aplicación, el código final incluye ya dicho formato.

De igual forma, cualquier duda que no quede clara, puedes dejarla en los comentarios.

Código Final:

Ver el ejemplo: http://canvas.ninja/mobile3.html

(function(){
    'use strict';
    window.addEventListener('load',init,false);
    window.addEventListener('resize',resize,false);
    var canvas=null,ctx=null;
    var scaleX=1,scaleY=1;
    var touches=[];
    var lastPress=null;
    var pause=false;
    var time=0;
    var shootTimer=0;
    var shots=[];
    var player=new Rectangle(100,260,10,10);
    var btnLeft=new Button(10,270,20,20);
    var btnRight=new Button(40,270,20,20);
    var btnShoot=new Button(170,270,20,20);
    var btnPause=new Button(90,0,20,20);

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

    function resize(){
        if(window.innerWidth>window.innerHeight){
            canvas.style.position='';
            canvas.style.top='';
            canvas.style.left='';
            canvas.style.width='';
            canvas.style.height='';
            scaleX=1;
            scaleY=1;
        }
        else{
            canvas.style.position='fixed';
            canvas.style.top='0';
            canvas.style.left='0';
            canvas.style.width='100%';
            canvas.style.height='100%';
            scaleX=canvas.width/window.innerWidth;
            scaleY=canvas.height/window.innerHeight;
        }
    }

    function run(){
        requestAnimationFrame(run);
        
        var now=Date.now();
        var deltaTime=(now-time)/1000;
        if(deltaTime>1){
            deltaTime=0;
        }
        time=now;
        
        act();
        paint(ctx);
    }

    function act(deltaTime){
        if(!pause){
            // Move Rect
            if(btnRight.touch()) //RIGHT
                player.x+=120*deltaTime;
            if(btnLeft.touch()) //LEFT
                player.x-=120*deltaTime;

            // 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(shootTimer>0){
                shootTimer-=deltaTime;
            }
            else if(btnShoot.touch()){
                shots.push(new Rectangle(player.x+3,player.y,4,4));
                shootTimer=0.1;
            }
            
            // Move Shots
            for(var i=0,l=shots.length;i<l;i++){
                shots[i].y-=120*deltaTime;
                if(shots[i].y<0){
                    shots.splice(i--,1);
                    l--;
                }
            }
        }
        // Pause/Unpause
        if(lastPress==1&&btnPause.touch()){
            pause=!pause;
            lastPress=null;
        }
    }

    function paint(ctx){
        ctx.fillStyle='#000';
        ctx.fillRect(0,0,canvas.width,canvas.height);
        
        ctx.fillStyle='#0f0';
        player.fill(ctx);
        ctx.fillStyle='#f00';
        for(var i=0,l=shots.length;i<l;i++)
            shots[i].fill(ctx);
        
        ctx.fillStyle='#fff';
        ctx.fillText('Last Press: '+lastPress,0,20);
        ctx.fillText('Shots: '+shots.length,0,30);
        if(pause){
            ctx.textAlign='center';
            ctx.fillText('PAUSE',95,150);
            ctx.textAlign='left';
        }
        
        ctx.strokeStyle='#fff';
        btnRight.stroke(ctx);
        btnLeft.stroke(ctx);
        btnShoot.stroke(ctx);
        btnPause.stroke(ctx);
        
        // Touch Debug
        ctx.fillStyle='#999';
        for(var i=0,l=touches.length;i<l;i++){
            if(touches[i]!=null){
                ctx.fillRect(touches[i].x-1,touches[i].y-1,2,2);
            }
        }
    }

    function enableInputs(){
        canvas.addEventListener('touchstart',function(evt){
            var t=evt.changedTouches;
            for(var i=0;i<t.length;i++){
                var x=~~((t[i].clientX-canvas.offsetLeft)*scaleX);
                var y=~~((t[i].clientY-canvas.offsetTop)*scaleY);
                touches[t[i].identifier%100]=new Vtouch(x,y);
                lastPress=1;
            }
        },false);
        canvas.addEventListener('touchmove',function(evt){
            evt.preventDefault();
            var t=evt.changedTouches;
            for(var i=0;i<t.length;i++){
                if(touches[t[i].identifier%100]){
                    touches[t[i].identifier%100].x=~~((t[i].clientX-canvas.offsetLeft)*scaleX);
                    touches[t[i].identifier%100].y=~~((t[i].clientY-canvas.offsetTop)*scaleY);
                }
            }
        },false);
        canvas.addEventListener('touchend',function(evt){
            var t=evt.changedTouches;
            for(var i=0;i<t.length;i++){
                touches[t[i].identifier%100]=null;
            }
        },false);
        canvas.addEventListener('touchcancel',function(evt){
            var t=evt.changedTouches;
            for(var i=0;i<t.length;i++){
                touches[t[i].identifier%100]=null;
            }
        },false);
        
        canvas.addEventListener('mousedown',function(evt){
            evt.preventDefault();
            var x=~~((evt.clientX-canvas.offsetLeft)*scaleX);
            var y=~~((evt.clientY-canvas.offsetTop)*scaleY);
            touches[0]=new Vtouch(x,y);
            lastPress=1;
        },false);
        document.addEventListener('mousemove',function(evt){
            if(touches[0]){
                touches[0].x=~~((evt.clientX-canvas.offsetLeft)*scaleX);
                touches[0].y=~~((evt.clientY-canvas.offsetTop)*scaleY);
            }
        },false);
        document.addEventListener('mouseup',function(evt){
            touches[0]=null;
        },false);

        function Vtouch(x,y){
            this.x=x||0;
            this.y=y||0;
        }
    }

    function Rectangle(x,y,width,height){
        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;
    }

    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);
    }

    function Button(x,y,width,height){
        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;
    }

    Button.prototype.touch=function(){
        for(var i=0,l=touches.length;i<l;i++){
            if(touches[i]!=null){
                if(this.x<touches[i].x&&
                    this.x+this.width>touches[i].x&&
                    this.y<touches[i].y&&
                    this.y+this.height>touches[i].y){
                    return true;
                }
            }
        }
        return false;
    }

    Button.prototype.stroke=function(ctx){
        ctx.strokeRect(this.x,this.y,this.width,this.height);
    }

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