Add advanced tutorials

[faiface]

The tutorials in the wiki currently cover just basic topics. These tutorials need to be written:

• Target/Triangles/Picture interface pattern (the "inside of the library")
• Canvas and composition methods (used to create lighting, holes, etc.)
• Hacking Triangles (e.g. creating a high-performance tilemap)
• Creating own Target (some basic + a OpenGL target implementing an effect with custom a shader)
• Optimizing and avoiding common performance pitfalls

[carbontwelve]

I'd like to see a tutorial on loading a game world from a tileset and stored map, alongside collision.

I really like this library, Pixel reminds me a lot of p5.js and Processing, it would be interesting to see some of Daniel Shiffmans' coding challenges ported to this library.

[faiface]

@carbontwelve Thanks for the suggestion! However, this raises questions: what kind of tilemap? A map generated by the Tiled editor? Or some own format? Or something else?

[carbontwelve]

I think showing an example of a map generated by the Tiled editor may be more universal as it is a well known tool for the job, I am not sure how much more complex than any other method that would be to implement though - certainly an advanced topic.

[akiross]

If I might add an opinion, I think it would be nice to have an example or tutorial on pixelgl or, in general, pixel + OpenGL so that a developer could learn how to use raw OpenGL in pixel programs.

For example, it would be nice to know how one could issue raw OpenGL calls (or glhf if you prefer) to a picture/sprite and use it in pixel, or would be nice to see how can one could pass IMDraw data to a custom shader (vertex, fragment, geometry, etc).

I feel like an example or tutorial on this would be very useful and enabling, allowing developers familiar with OpenGL to use pixel as "compositing" framework, allowing to create very nice effects with shaders, or mixing 2D and 3D, etc.

In addition, it would allow performance optimization where needed (in my case, for example, I would like to use geometry shaders to produce procedural textures, and doing it with IMDraw is much slower and more complex).

[faiface]

@akiross Good point. I added the fourth advanced tutorial topic, which should cover what you're talking about. Will do these tutorials when I have time (I'm very busy right now).

[faiface]

@akiross Btw, if you want to do it now, without a tutorial, it's possible, but you'd probably need to study how pixelgl.Canvas works and take inspiration from there. If you attempt this before the tutorial, feel free to get some help on gitter ;)

[PaluMacil]

I second the suggestion for a Tiled-based tile game tutorial. Tiled looks like the most universal high quality tile editor out there.

[Chillance]

Any updates on this? I would very much also like to know how one could do a custom shader and use it with Pixel.

[faiface]

No updates on this right now, but, yeah, I could get back to this.

[Chillance]

Any ETA on that? :)

[faiface]

Nope :)

[zcking]

I know this issue has been open for some time now, and there might already be examples scattered across the internet, but I threw together a very simple example of loading a TMX tile map from Tiled and drawing some tiles with Pixel: https://github.com/zcking/tiles

I'm still a rookie at using Pixel, but maybe that will help get some one in the general direction.

[faiface]

@zcking Cool! This seems like a good fit for a community example, what do you think? If you agree, please make a PR at github.com/faiface/pixel-examples

I have one suggestion about the code. You seem to have hardcoded positions of tiles in the spritesheet. It would be nicer if you didn't hardcode it, but made/generated some file and loaded the positions from there.

[zcking]

Thanks @faiface I agree! I'll get a PR submitted over there after making the change to load from a data file.

[bunyk]

Hello! I'm voting for "Optimizing and avoiding common performance pitfalls", but that should probably be a series. First one in it is already present: "Drawing efficiently with Batch", but it would be also nice to have one about IMDraw.

I made a mostly vector "game" that draws hundreds of lines, circles rectangles and labels, and it's starting to get slow. By commenting out some parts I figured out that it's mostly because of circles, and I have just three types of various sizes so I'm thinking of maybe moving them to some sprite and drawing them with batch. Not sure if that would be correct way to go.

Also, it would be nice to have some tutorial on building ui, for at least something like buttons and text inputs.

[bunyk]

And I just figured out that there is no such thing as circles, it's actually polygons made using CPU-intensive trigonometry, and number of vertexes in them is equal to Precision attribute of IMDraw. So setting Precision to 3 makes circles look like triangles, setting it to 8 makes smaller ones look good enough, but raises FPS from below 20 to below 50.

But probably most performant way would be to create a sprite sheet with circles of sizes and colors I use and keep vector graphics only for lines. Probably I should look at https://github.com/cebarks/spriteplus