HTML5画布动画和效果引擎？

Question

我正在开发一个HTML5游戏。服务端代码（node.js，socket.io）大部分完成，我现在要开始优化客户端代码。

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

- 雨，闪电，雷声音剪辑 - 使一些瓦片动起来。例如，草瓦片通过循环帧（类似于动画gif）吹草。 - 弹出可以通过鼠标点击或键盘按钮关闭的文本框。

我查看了这个JavaScript引擎的长列表，并尝试了CraftyJS和MelonJS，但其中大多数都是为平台或街机风格的游戏而设计的，并且许多引擎还没有准备好投入生产或维护不良。

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

- Legendre

---

我个人非常喜欢Impact，但恐怕它不适合你的需求，因为它有点过重且不免费... - MarcoK

@MarcoK - 你说得没错。Impact的影响对我来说太重了。由于这是一个商业（个人）项目，我有一些预算，所以它不需要免费。但是，考虑到代码的大部分已经编写完成，我只需要向客户端添加动画精灵，我不想被迫“重新开始”并在Impact的限制内工作。 - Legendre

Answer 1

看看CreateJS吧，它是你所寻找的一个很棒的引擎。

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

它被很好地维护着，但还没有发布1.0版本（至今为止）。

- MarcoK

---

更新：感谢提到CreateJS。它看起来非常好维护/支持，并且具有多个与声音、预加载、绘图等相关的工具。我想我会选择这个。 - Legendre

不要忘记你将获得的额外内容（工具等）以及背后的赞助商（Adobe、Microsoft等），这将增加项目成功/生存的机会！ - MarcoK

是的。一开始我很想选择cgSceneGraph，但是我看到了CreateJS提供的所有工具和赞助商，所以最终决定选择它。非常感谢你，你为我节省了很多搜索时间。 - Legendre

Answer 2

cgSceneGraph可以帮助您完成任务。 请查看示例网页，其中有一些带有动画精灵的示例。它是框架的本地组件，非常易于使用，并具有多个特性，如在同一动画精灵实例中使用多个动画，使用雪碧图等。

- Gwennael Buchet

---

感谢您的推荐。我很赞同。事实上，在这之前我还没有见过cgSceneGraph。虽然我认为我现在可能会选择CreateJS。 - Legendre

随你便。CreateJS也是一个不错的选择 :) 只是为了提供信息，cgSceneGraph提供了许多功能，并且设计用于扩展。因此，您不受框架的限制，即使框架没有本地提供所需的渲染，也可以在短时间内完成每个渲染。您的每个类都将自动继承框架。这就是为什么它真正强大和比其他框架更灵活，但这是我的观点，所以我不确定是否完全客观 :) - Gwennael Buchet

这是一个非常好的观点！我的代码很大一部分都是定制的，所以我真的需要灵活性和可扩展性，而不是被绑定到特定的框架上。 - Legendre

我仔细研究了一下这些例子，印象深刻。开始改变对CreateJS的看法，并倾向于选择cgSceneGraph！ - Legendre

谢谢 :) 如有任何问题，请随时提出。我很乐意帮助 :) - Gwennael Buchet

Answer 3

您想实现的只是动画精灵吗？您可以轻松地在不使用游戏引擎的情况下完成此操作。至于对话框，您可以在画布上使用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;
}

});

- Jackson

---

谢谢你提供的代码。是的，我想我可以使用JQuery来创建对话框。 - Legendre