14

我正在寻找使用 WebGL 构建 2d 游戏。我想要 WebGL 提供的硬件加速,但我无法从画布标签中的 2D 画布上下文中获得它。

话虽如此,是否有关于使用 webGL 创建 2D 精灵的教程?或者,更好的是,是否有用于 WebGL 的 2D 精灵库?理想情况下,我正在寻找移植到 WebGL的cocos2d 之类的东西。

毫不奇怪,我为 WebGL 找到的所有演示、教程和库都专注于 3D 操作。是否有任何支持 2D 精灵的 WebGL 库?

4

7 回答 7

5

我可能弄错了,但我认为 2D 画布 API 的设计方式是让浏览器可以利用硬件加速,但他们现在选择不这样做。我希望画布 2D 的实现会随着 WebGL 的进步而显着改善。

于 2010-03-11T12:28:12.173 回答
5

你可以在这里找到 webGL 中的 canvas 2D API

于 2011-04-03T14:40:43.360 回答
3

我最近向 github 推送了一个简单的 2d 库,该库是用 webgl 编写的,带有一个幼稚(但功能强大)的画布后备。它使用与 cocos2d 相同的场景图,您可以在http://github.com/funkaster/ChesterGL上查看它- 请注意,它不是 100% 功能的,但您可以将其作为编写简单 2d 游戏的起点

于 2011-10-08T17:48:58.110 回答
1

请记住,您可以使用 gl.POINTS 绘制模式并在每个点而不是点处绘制纹理( sprite )。您只需要使用采样器。它真的很强大。

于 2013-06-02T01:29:26.527 回答
1

3D 中的 2D 非常容易做到。您只需将所有对象放在一个平面中并缩放视口以绘制该平面的所需部分。

无论如何,大约需要 10 年的时间,您才能期望在大多数人的浏览器中找到 WebGL 功能。使用正确的方法,您可以在不使用画布的情况下获得很长的路要走,使用预渲染图形旋转的技巧是任何 JavaScript 游戏开发人员都必须知道的,以及“精灵”动画。

重要的问题是,你只是在玩工具,还是在制作人们应该能够玩和享受的游戏?

于 2010-04-05T19:00:51.807 回答
1

Pixi.js 目前是最稳定、最活跃的:

https://github.com/GoodBoyDigital/pixi.js/

于 2013-11-24T17:15:19.143 回答
0

这可能有点临时性,但我认为值得付出努力,以防有人试图为 2D 对象操作找到一个好的 WebGL 包装器。我强烈推荐fabric.js,它在 canvas 元素之上提供交互式对象模型。它还具有 SVG 到画布(和画布到 SVG)解析器。官方网站的演示部分清楚地展示了这个 javascript 库的潜力。

于 2014-05-19T10:21:38.853 回答