4

我正在开发一个 HTML5 游戏。服务器端代码（node.js、socket.io）大部分已经完成，我将继续完善客户端代码。

我一直在画布上直接绘制瓷砖/网格，并使用上下文和 clearRect 等移动玩家的精灵。我正在考虑在瓷砖地图/网格上绘制简单的动画和效果，例如：

  • 雨，闪电和雷声的音频剪辑。

  • 动画一些瓷砖。例如，草瓷砖通过帧循环（如动画 gif）让草在风中飘扬。

  • 弹出可以通过鼠标点击或键盘按钮关闭的文本框。

我查看了这个长长的 JavaScript 引擎列表，并试用了 CraftyJS 和 MelonJS，但其中大部分是为平台或街机风格游戏制作的，其中许多还没有准备好投入生产或维护不善。

是否有一个简单、轻量级、生产质量的 HTML5 画布引擎可以完成我想要的？

4

3 回答 3

2

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

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

它维护得很好，但还没有发布 1.0 版本。

于 2013-02-22T15:25:02.770 回答
1

它只是你想要实现的动画精灵吗？您可以在不使用游戏引擎的情况下轻松完成此操作。至于对话框 - 你可以在画布上使用 dom 元素。

这是我用 javascript 编写的精灵类 - 也许它有一些帮助:)

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

});

于 2013-02-22T15:34:08.060 回答
1

cgSceneGraph将为您完成这项工作。查看示例网页，有一些带有动画 Sprite 的示例。它是框架的原生组件，并且非常易于使用多个功能，例如动画精灵的同一实例中的多动画，spritesheet 的使用，...

于 2013-02-22T16:28:17.810 回答