javascript - laberinto - juegos html5 3d

Motor para animaciones y efectos HTML5 Canvas?

Question

Estoy desarrollando un juego HTML5. El código del lado del servidor (node.js, socket.io) está casi terminado y estoy trabajando para pulir el código del lado del cliente.

He estado dibujando directamente mosaicos / cuadrícula en el lienzo y moviendo el sprite del jugador usando el contexto y clearRect, etc. Estoy pensando en dibujar animaciones y efectos simples sobre el mosaico / cuadrícula como:

• Lluvia, con relámpagos y trueno clip de audio.

• Animar algunas de las fichas. Por ejemplo, las baldosas de hierba tienen hierba que sopla en el viento al circular a través de marcos (como un gif animado).

• Abre cuadros de texto que pueden cerrarse con clics del mouse o presiona el botón del teclado.

Revisé esta larga lista de motores de JavaScript y probé CraftyJS y MelonJS, pero la mayoría de estos están hechos para plataformas o juegos de estilo arcade, y muchos de ellos no están listos para producción o tienen un mantenimiento deficiente.

¿Existe un motor de lienzo HTML5 simple, liviano y con calidad de producción que pueda lograr lo que deseo?

Answer 1

¿Se trata de sprites animados que quieres lograr? Puedes hacer esto fácil sin el uso de un motor de juego. En cuanto a los cuadros de diálogo, puede usar elementos dom sobre el lienzo.

Aquí hay una clase de sprite que escribí en javascript, tal vez sea de alguna ayuda :)

var FrtlsSprite = Class.extend({
init: function(bitmap, offsetX, offsetY, frameWidth, frameHeight, frameCount, loop){
    this.dtotal=0;
    this.framerate=0.007;
    this.loop = loop;
    this.isPlaying=false;

    this.bitmap = new Image();
    this.bitmap.src = bitmap;
    this.frames= new Array();
    this.currentFrame=0;
    this.endFrame=0;

    for(var i=0;i<frameCount;i++){
        this.frames.push(new FrtlsFrame(offsetX+i*frameWidth, offsetY+0, frameWidth, frameHeight));
    }
},
update: function(dt){
    if(this.isPlaying){
        this.dtotal += dt   //we add the time passed since the last update, probably a very small number like 0.01
        if (this.dtotal >= this.framerate){
            this.dtotal -= this.framerate; 
            this.currentFrame++;
            if(this.currentFrame==this.endFrame){
                if(this.loop == false){
                    this.stop();
                }
                else{
                    this.currentFrame=0;
                }
            }
        }
    }
},
draw: function(){
    fruitless.ctx.drawImage(this.bitmap, 
                            this.frames[this.currentFrame].pos.x, 
                            this.frames[this.currentFrame].pos.y, 
                            this.frames[this.currentFrame].dimensions.x, 
                            this.frames[this.currentFrame].dimensions.y, 
                            0, 
                            0, 
                            this.frames[this.currentFrame].dimensions.x*fruitless.worldScale, 
                            this.frames[this.currentFrame].dimensions.y*fruitless.worldScale);
},
play:function(frame){
    this.currentFrame=(frame==undefined)?0:frame;
    this.endFrame = this.frames.length-1
    this.isPlaying=true;
},
playTo:function(frame, endFrame){
    this.currentFrame=frame;
    this.endFrame = endFrame;
    this.isPlaying=true;
},

stop:function(frame){
    this.currentFrame=(frame==undefined)?this.currentFrame:frame;
    this.isPlaying=false;
}

});

Answer 2

Eche un vistazo a CreateJS ; es un gran motor para lo que estás buscando.

• EaseJS se puede usar para el elemento Canvas
• SoundJS para el clip de audio que desea reproducir

Está bien mantenido, pero aún no se ha lanzado una versión 1.0.

Answer 3

cgSceneGraph hará el trabajo por usted. Mira la página web de ejemplos , hay algunos ejemplos con Sprite animado. Es un componente nativo del framework y es realmente fácil de usar con varias características, como la animación múltiple dentro de la misma instancia del sprite animado, el uso de spritesheet, ...