Vector graphics with NanoVG and NanoSVG

[Rado1]

Dream became reality. You can now use external library ZgeNano for fast antialiased 2D vector drawing in ZGE. The library uses NanoVG and part of NanoSVG libraries. Current version implements:

• almost whole NanoVG API - basic shapes, composite shapes, fonts, pictures, ... (functions for transformations based on float[6] matrices, nvgTextGlyphPositions and nvgTextBreakLines are excluded due to relatively complicated processing of outputs)
• NanoSVG functions for importing SVG files
• my own simple renderer of SVG to NanoSVG primitives; the current version does not support gradients; advanced SVG (clipping, masking, effects, filters) will probably never support

The API is relatively simple and the results are quite nice. For details about API see NanoVG header file. One big advantage is the possibility to read resources (pictures and SVG data) from files in runtime. Alternatively, you can embed them in File components and read the content from memory. Just see my interactive demo:

scr.png (26.64 KiB) Viewed 26010 times

To play with it just move mouse and click around - you can even sink the steam boat.

The demo project file with DLL can be downloaded from here. Please use it with latest ZGE beta.

As next, I plan to add gradients in rendering SVG, add compiling to 64bit + Android, and publish ZgeNano on GitHub. Later, I'll maybe add some NanoVG-based GUI components.

Any comments are welcome.

[zondarg]

Wow, this looks great, I need to have a deeper look at this. I once had the idea of somehow using Inkskape-style graphics but dismissed it as being too complicated (missing a svg interpreter), but with this...
Another great addition to ZGE! Thanks!

[Rado1]

Dear zondarg, I'm glad you like it. After some improvements of the library I'm working on now, I'll create my first SVG+2D physics game. I already made some experiments and it seems to be promising technology producing really nice look.

[Rado1]

You can now use update of the ZgeNano library with new features:

• SVG import can use also linear an radial gradients with some restrictions - just 2 colors in one gradient and radial gradient does not support stretching and rotation
• SVG picture can be rendered to an array and later used as a texture
• SVG rendering to NanoVG allows to filter particular parts of the SVG file - this can be used to store more pictures or animations or animation parts of the same object to one SVG file

Here you can download the updated DLL and 3 demo models.

Demo 1 - interactive picture with boat
Demo 2 - demonstrates rendering of more than 1000 objects (used for performance testing - 150 FPS on AMD FirePro M2000 in fullscreen)
Demo 3 - import/rendering of SVG with gradients and filtering of SVG shapes - 2 pictures in one file

Screenshots of ZgeNano demo 2 and demo 3 screenshots

scr2.png (113.2 KiB) Viewed 25974 times

[VilleK]

Cool! All three demo projects work fine here. I've been wanting to add nice quality 2d-vector features for ZGE and you seem to have found the perfect match here in Nano-libs! Thanks for your work.

[Rado1]

Thanks Ville.

FYI I added ZgeNano to GitHub: https://github.com/Rado-1/ZgeNano. From now, all sources, demo projects and binaries can be downloaded from this repository. You can also put your issues there.

[Rado1]

New version 1.0 of ZgeNano library can import also SVGZ (compressed SVG) files. Download the DLL form here.