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, ...