画布2d上下文或用于2d游戏的WebGL



我正计划编写一款游戏,它将使用大量的精灵和图像。起初我尝试了EaselJS,但在玩其他一些基于画布的游戏时,我意识到它没有那么快。当我看到Mozilla的BananaBread时,我想"如果WebGL能这么快地完成3D,那么它就能更快地完成2D"。所以我移到了three.js(使用平面和透明纹理,精灵的纹理偏移)。

问题是:它更好吗?更快?大多数WebGL游戏都是3D的,所以我应该为2D使用画布2D上下文,为3D使用WebGL上下文吗?我还注意到,在2D中没有WebGL的库(除了WebGL-2D,但它的级别很低)。

请注意,兼容性不是我最关心的问题,因为我不打算在短期内发布任何内容:)。

简短的回答是肯定的。如果使用得当,WebGL的效率会高得多。一个天真的实现要么没有任何好处,要么性能更差,所以如果你还不熟悉OpenGL API,你可能想暂时停留在画布上。

更详细的注意事项:WebGL可以非常非常快地绘制纹理四边形(精灵),但如果您需要更高级的2D绘制功能,如路径跟踪,您需要坚持使用2D画布,因为在WebGL中实现这些类型的算法并非易事。游戏的性质也会影响你的选择。如果你一次在屏幕上只有几个移动的项目,Canvas将相当快速且相当简单。但是,如果每帧都要重新绘制整个场景,WebGL更适合这种类型的渲染循环。

我的推荐?如果你只是在学习两者,那么从Canvas2D开始,让你的游戏发挥作用。以一种简单的方式提取绘图,例如使用DrawPlayer函数而不是ctx.drawImage(playerSprite, ....)函数,当你达到游戏正在运行并且你希望它运行得更快或者游戏设计要求你必须使用更快的绘图方法时,使用WebGL为所有这些抽象函数创建一个交替的渲染后端。这给了你不在早期被渲染技术所困扰的优势(这总是一个错误!),让你专注于游戏性,如果你最终实现了这两种方法,你就可以为Internet Explorer等非WebGL浏览器提供一个很好的后备方案。无论如何,你可能在一段时间内都不需要提高速度。

WebGL可以比画布2D快得多。看见http://blog.tojicode.com/2012/07/sprite-tile-maps-on-gpu.html作为一个例子。

也就是说,我认为你现在主要靠自己。我不知道WebGL有任何2d库,除了PlayNhttp://code.google.com/p/playn/尽管它是用Java编写的,并使用GoogleWebToolkit转换为JavaScript。我也很确定它没有使用上面博客文章中提到的技术,尽管如果你的游戏没有使用瓷砖,也许这种技术对你没有用处。

如果你正在计划2d,那么three.js可能不是你想要的库。

最新更新