Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.

Closed 9 years ago.

Improve this question

I am looking to build a 2d game using WebGL. I want the hardware acceleration that WebGL provides and I cannot get this from the 2D canvas context in the canvas tag.

With that said, is there a tutorial on creating 2D sprites using webGL? Or, better yet, is there a 2D sprite library for WebGL? Ideally, I m looking for something like cocos2d ported to WebGL.

Not surprisingly, all of the demos, tutorials and libraries I have found for WebGL focus on 3D manipulation. Are there any WebGL libraries that support 2D sprites?

Answer 1

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.

Answer 2

You can find the canvas 2D API in webGL here

Answer 3

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

Answer 4

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?

Answer 5

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.

Answer 6

Pixi.js is currently the most stable and active:

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

Answer 7

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.

友情链接