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

Question

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

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

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

Answer 1

简短的回答是肯定的.如果你使用它,WebGL可以提高效率.一个天真的实现将不会产生任何好处或表现更差,所以如果您还不熟悉OpenGL API,您可能希望暂时坚持使用canvas.

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

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