我正在计划编写一个游戏,这将使用很多精灵和图像。起初我尝试了EaselJS,但玩了一些其他的画布式游戏,我意识到这不是那么快。当我看到Mozilla的BananaBread时,我以为“如果WebGL可以做得如此之快,那么它可以做2D更快”。所以我移动到了3.js(使用平面和透明纹理,纹理偏移为精灵)。
问题是:更好吗?更快?大多数WebGL游戏都是3D,所以我应该使用画布2D上下文为2D和WebGL为3D?我也注意到,2DGL中没有WebGL的库(除了WebGL-2d,但是它的水平很低)。
请注意,兼容性不是我最大的担忧,因为我不打算随时发布任何东西:)。
解决方法
简短的答案是肯定的。如果您很好地使用WebGL,可能会更有效率。一个天真的实现将不会产生任何好处或表现更差,所以如果您还不熟悉OpenGL API,您可能希望暂时贴上画布。
一些更详细的注意事项:WebGL可以非常快速地绘制纹理四边形(精灵),但是如果您需要更先进的2D绘图功能,例如路径跟踪,则您将需要坚持2D画布来实现WebGL中的这些类型的算法不平凡的。你的游戏的性质也使你的选择有所不同。如果您在屏幕上只有几个移动项目Canvas将是相当快速,相当简单。但是,如果您正在重画整个场景,WebGL会更适合于这种渲染循环。
我的建议如果你只是学习两者,从Canvas2D开始,让你的游戏工作。以简单的方式抽象绘图,例如具有DrawPlayer函数而不是ctx.drawImage(playerSprite,….),当您到达游戏运行的位置,并希望运行速度更快或游戏时设计要求您必须使用更快的绘图方法,使用WebGL为所有这些抽象函数创建一个改变的渲染后端。这给你的优点是早期渲染技术(这是一个错误!),而不是挂起来,让你专注于游戏,如果你最终实现这两种方法,你对非WebGL浏览器,如互联网有一个很好的后备资源管理器。有可能你不会真的需要一段时间的增加速度。