用于2D游戏的Canvas 2d上下文或WebGL

时间:2012-10-06 10:23:17

标签: html5-canvas webgl

我打算写一个游戏,它将使用很多精灵和图像。起初我尝试了EaselJS但是玩了一些其他基于画布的游戏,我意识到它并不是那么快。当我看到Mozilla的BananaBread时,我认为“如果WebGL可以如此快地完成3D,那么它可以更快地完成2D”。所以我转移到了three.js(使用平面和透明纹理,精灵的纹理偏移)。

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

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

2 个答案:

答案 0 :(得分:39)

简短的回答是肯定的。如果你使用得很好,那么WebGL可以提高效率。一个天真的实现要么没有任何好处,要么表现更差,所以如果你还不熟悉OpenGL API,你可能暂时想要坚持使用画布。

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

我的推荐?如果您只是学习两者,请从Canvas2D开始,让您的游戏与之相配。以简单的方式抽象您的绘图,例如使用DrawPlayer函数而不是ctx.drawImage(playerSprite, ....),以及当您达到游戏正在运行且您希望它运行得更快或游戏设计指示的点时您必须使用更快的绘图方法,使用WebGL为所有这些抽象函数创建一个更改渲染后端。这样你就可以避免在早期使用渲染技术时出现这种情况(这总是一个错误!),让你专注于游戏玩法,如果你最终实现这两种方法,那么对于像Internet这样的非WebGL浏览器你会有很大的后盾。资源管理器。无论如何,你可能不会真正需要提高速度。

答案 1 :(得分:4)

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

那就是说,我认为你现在大部分时间都在靠自己。我不知道WebGL的任何2d库,除了可能是PlayN http://code.google.com/p/playn/,尽管它在Java中并且使用Google Web Toolkit转换为JavaScript。我也很确定它没有使用上面博客文章中提到的技术,但如果你的游戏不使用磁贴,那么该技术可能对你没用。

如果你计划2d,那么你可能不会想要三个.js。