TinyVG

TinyVG is an alternative to SVG that allows you to implement vector art in your games and apps. The advantage of vector art is that it can easily be resized to any size you want without blurring or creating scaling artifacts. The files that TinyVG produces are incredibly small too since it's not as complex as the SVG format. Learn more about TinyVG

gdx-TinyVG is libGDX's implementation of TinyVG created by Lyze using ShapeDrawer to render the vector shapes. This incredible lib allows you to use TinyVG throughout your games in various ways. More importantly, it includes a Drawable class that you can implement in your user interfaces. This is directly supported by Skin Composer. It is suggested to only use TinyVG sparingly (ie. title graphics) because rendering TinyVG is resource intensive. Follow the setup guide for gdx-TinyVG.

Importing TinyVG in Skin Composer

• Create your SVG and convert it to TVG
• In Skin Composer, go to Project >> Drawables
• Click "Add..." then "Image File" and select the TVG file you want to add to your skin
  • Or drag and drop the TVG file onto the window
• Click the "+" button of the drawable and select "Settings"
• Configure the drawable options and click "OK"
• Use this drawable with your widget styles.

Loading TinyVG in skin JSON files

Implementing the TinyVGDrawable in Skin Composer is easy enough, but the exported Skin will crash your game unless you use a custom JSON Loader. First, setup your project to include the gdx-TinyVG dependencies, then choose one of the following loaders:

TinyVGDrawable Custom Serializer

The TinyVGDrawable is the most flexible implementation of TinyVG. However, it is resource intensive and will increase the number of draw calls every time it's used. The custom JSON loader overrides the default behavior of the Skin loader and properly creates a Drawable based on Skin Composer's output format. Use the following code to create the loader:

TinyVGShapeDrawer drawer = new TinyVGShapeDrawer(spriteBatch);
TinyVGAssetLoader loader = new TinyVGAssetLoader();

skin = new Skin(Gdx.files.internal("path/to/skin.json")) {
    //Override json loader to process TinyVGDrawables from skin JSON
    @Override
    protected Json getJsonLoader(final FileHandle skinFile) {
        Json json = super.getJsonLoader(skinFile);
    
        json.setSerializer(TinyVGDrawable.class, new Json.ReadOnlySerializer<TinyVGDrawable>() {
            @Override
            public TinyVGDrawable read(Json json, JsonValue jsonData, Class type) {
                String file = json.readValue("file", String.class, jsonData);
                jsonData.remove("file");
                
                boolean clipBasedOnTVGsize = json.readValue("clipBasedOnTVGsize",Boolean.class, jsonData);
                jsonData.remove("clipBasedOnTVGsize");
                
                TinyVG tinyVG = loader.load(file);
                tinyVG.setClipBasedOnTVGSize(clipBasedOnTVGsize);
                return new TinyVGDrawable(tinyVG, drawer);
            }
        });
    
        return json;
    }
};

Use your Skin like normal and your widgets will function with fully scalable vector art!