Question

我正在开发一款HTML5游戏。服务器端代码（node.js，socket.io）大部分都已完成，我正在继续抛光客户端代码。

我一直在画布上直接绘制tile / grid并使用context和clearRect等移动玩家的精灵。我正在考虑在tile-map / grid上绘制简单的动画和效果，例如：

下雨，闪电般的闪电和雷声音频剪辑。
动画一些瓷砖。例如。草瓦通过框架循环（如动画GIF）在风中飘扬。
弹出与鼠标点击或键盘按键紧密相关的文本框。

我已经查看了这个long list of JavaScript engines并尝试了CraftyJS和MelonJS，但其中大部分是针对平台或街机风格的游戏制作的，其中许多还没有为生产做好准备或者维护得很差。

是否有一个简单，轻量级，生产质量的HTML5画布引擎可以实现我想要的效果？

Answer 1

看看CreateJS;对于您正在寻找的东西来说，它是一个很棒的引擎。

EaseJS可用于Canvas元素
SoundJS表示您要播放的音频剪辑

维护得很好，但尚未发布1.0版本。

Answer 2

它只是你想要实现的动画精灵吗？无需使用游戏引擎即可轻松完成。至于对话框 - 你可以在画布上使用dom元素。

这是我在javascript中编写的sprite类 - 也许它有一些帮助：）

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 3

cgSceneGraph将为您完成这项工作。看看examples web page，有一些动画精灵的例子。它是框架的原生组件，在动画精灵的同一个实例中使用多个动画非常容易使用，使用spritesheet，......

HTML5 Canvas动画和效果的引擎？

3 个答案: