有没有 webgl 的 2d sprite 库?

发布于 2024-08-25 11:24:27 字数 1536 浏览 10 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

遗失的美好 2024-09-01 11:24:27

我可能错了,但我认为 2D canvas API 的设计方式是让浏览器可以利用硬件加速,但他们还选择不这样做。我预计随着 WebGL 的进步,canvas 2D 的实现将得到显着改善。

I may be mistaken, but I thought that the 2D canvas API was designed in such a way that browsers can make use of hardware acceleration, but they have chosen not to yet. I expect the implementations of canvas 2D to improve dramatically as WebGL progresses.

冷清清 2024-09-01 11:24:27

您可以在此处找到 webGL 中的 canvas 2D API

You can find the canvas 2D API in webGL here

雪化雨蝶 2024-09-01 11:24:27

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

I recently pushed to github a simple 2d library written on webgl with a naive (but functional) canvas fallback. It uses the same scene graph than cocos2d, you can check it on http://github.com/funkaster/ChesterGL - note that its not 100% functional, but you can use it as a starting point to write a simple 2d game

意中人 2024-09-01 11:24:27

2D 转 3D 非常容易实现。您只需将所有对象放置在一个平面中并缩放视口即可绘制该平面的所需部分。

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

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

2D in 3D is extremely easy to do. You just have to place all your objects in a plane and scale your viewport to draw the desired portion of that plane.

In any case, there is approx 10 years 'till you can expect to find WebGL capability in most peoples browsers. With the right methods you can get a long way without using canvas, the trick of using prerendered rotations of your graphics is a must know to any JavaScript game developer, along with "sprite" animations.

The important question is, are you just playing with the tools, or are you making a game that people should be able to play and enjoy?

雨夜星沙 2024-09-01 11:24:27

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

Keep in mind, that you can use the gl.POINTS draw mode and draw a texture ( sprite ) at each point instead of a point. You simply have to use a sampler. It is really powerful.

胡渣熟男 2024-09-01 11:24:27

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

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

Pixi.js is currently the most stable and active:

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

老街孤人 2024-09-01 11:24:27

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

This might be a bit extemporaneous, but I think it's worth the effort in case anyone is trying to find a good WebGL wrapper for 2D object manipulation. I strongly recommend fabric.js, which provides interactive object model on top of canvas element. It also has SVG-to-canvas (and canvas-to-SVG) parsers. The demos section of the official web site clearly shows the potential of this javascript library.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文