Vector graphics with NanoVG and NanoSVG

Use of external libraries (DLLs) from ZGE.

Moderator: Moderators

Post Reply
User avatar
Rado1
Posts: 775
Joined: Wed May 05, 2010 12:16 pm

Vector graphics with NanoVG and NanoSVG

Post 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 26011 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
Posts: 13
Joined: Fri Jan 01, 2016 12:17 pm

Re: Vector graphics with NanoVG and NanoSVG

Post 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!
User avatar
Rado1
Posts: 775
Joined: Wed May 05, 2010 12:16 pm

Re: Vector graphics with NanoVG and NanoSVG

Post 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.
User avatar
Rado1
Posts: 775
Joined: Wed May 05, 2010 12:16 pm

Re: Vector graphics with NanoVG and NanoSVG

Post 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 25975 times
User avatar
VilleK
Site Admin
Posts: 2317
Joined: Mon Jan 15, 2007 4:50 pm
Location: Stockholm, Sweden
Contact:

Re: Vector graphics with NanoVG and NanoSVG

Post 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.
User avatar
Rado1
Posts: 775
Joined: Wed May 05, 2010 12:16 pm

Re: Vector graphics with NanoVG and NanoSVG

Post 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.
User avatar
Rado1
Posts: 775
Joined: Wed May 05, 2010 12:16 pm

Re: Vector graphics with NanoVG and NanoSVG

Post by Rado1 »

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