Page 1 of 1

Vector graphics with NanoVG and NanoSVG

Posted: Fri Oct 14, 2016 11:34 pm
by 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
scr.png (26.64 KiB) Viewed 23308 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.

Re: Vector graphics with NanoVG and NanoSVG

Posted: Thu Oct 20, 2016 8:27 pm
by 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... :shock: :D
Another great addition to ZGE! Thanks!

Re: Vector graphics with NanoVG and NanoSVG

Posted: Fri Oct 21, 2016 5:50 am
by 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.

Re: Vector graphics with NanoVG and NanoSVG

Posted: Sat Oct 22, 2016 2:34 pm
by 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
Screenshots of ZgeNano demo 2 and demo 3 screenshots
scr2.png (113.2 KiB) Viewed 23272 times

Re: Vector graphics with NanoVG and NanoSVG

Posted: Sun Oct 23, 2016 7:06 am
by 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.

Re: Vector graphics with NanoVG and NanoSVG

Posted: Sun Oct 23, 2016 5:34 pm
by 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.

Re: Vector graphics with NanoVG and NanoSVG

Posted: Thu Dec 22, 2016 2:12 pm
by Rado1
New version 1.0 of ZgeNano library can import also SVGZ (compressed SVG) files. Download the DLL form here.