Using vector image as sprite in Unity

1-Convert swf to svg 2-Import SVG in Unity 3-Animating Vector Sprites in Unity 4-Solution to make SVG look smoother

1-Convert swf to svg

SVG (Scalable Vector Graphics) can offer efficiency gains in performance, and file size, when making games. Unlike spritesheets they can be scaled up and down without any quality loss that too maintaining a small file size.

To convert the movieclip into SVG we will need to add Animate CC SVG Exporter plugin. For that, you can go to this URL: https://www.adobeexchange.com/creativecloud.details.7232.animated-svg-exporter.html# and install the Animate CC SVG Exporter plugin.

If the installation fails, you can download the zxp file and install it manually. JSFL:Install Zxp in Animate CC

After you reopen Animate CC, go to

Windows (menu) >> Extensions (menu item) >> SVG Animation (sub-menu item)

The SVG Animation plugin panel will look something like this:

SVG Animation Panel

Set the Source sub-panel of SVG Animation plugin panel to "Selected Library Item". And then click export.

Two types of output are supported:

1. Animated SVG

2. SVG file sequence

Unity's vector graphics component does not seem to use Animated SVG. So we must convert the file to SVG sequence.

Possible error:

TypeError: svgXml.defs[0] is undefined

This problem occurred because the file was deleted outside by mistake. But was open inside the editor. To solve the problem just start with a new file.

2-Import SVG in Unity

In Unity, SVG can be imported by using the plugin "SVG file importer" SVG file importer has been introduced in Unity 2018.2. The SVG importer supports the most common features of the SVG 1.1 specification, such as gradients, fills, clipping paths, dashed lines, and rounded corners. Vector graphics sprites imported in this manner are supported by the Unity 2D tools.

To use SVG importer plugin, you will need Vector Graphics package, without installing it, the inspector won't show any settings for the selected svg file.

Here are the steps to load the Vector Graphics package:

Go to package manager. Select All packages, and Turn on : Show preview packages. Search "Vector Graphics" package in the list.

Install it.

Package Manager

Please note that loading may take some time, and you can see it in the status bar below. Packages are project specific so you will need to install it for your project separately.

Inspector now should be able to show the settings something similar to this screenshot. I selected the svg file named as "geek.svg" in my asset manager.

Inspector

3-Animating Vector Sprites in Unity

Unlike spritesheets Unity's internal animation tools cannot be used to animate the vector sprites. And therefore all the vector sprites will need to be animated using C# code. I got this code from Unity forums. In the inspector assign the Sprite[ ] with the SVG files you want to animate.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class VectorAnim: MonoBehaviour {
	float FPS = 35f;
	public Sprite[] frames;
	private SpriteRenderer outputRenderer;
	private float secondsToWait;
	private int currentFrame;
	private bool stopped = false;
	// Start is called before the first frame update
	void Start() {}
	public void Awake() {
		outputRenderer = this.GetComponent < SpriteRenderer > ();
		currentFrame = 0;
		if (FPS > 0)
			secondsToWait = 1 / FPS;
		else
			secondsToWait = 0f;
		Play();
	}
	public void Play(bool reset = false) {
		if (reset) {
			currentFrame = 0;
		}
		stopped = false;
		outputRenderer.enabled = true;
		if (frames.Length > 1) {
			Animate();
		} else
		if (frames.Length > 0) {
			outputRenderer.sprite = frames[0];
		}
	}
	public virtual void Animate() {
		CancelInvoke("Animate");
		//Cancels all Invoke calls with name methodName on this behaviour. 
		if (currentFrame >= frames.Length) {
			currentFrame = 0;
		}
		outputRenderer.sprite = frames[currentFrame];
		if (!stopped) {
			currentFrame++;
		}
		if (!stopped && secondsToWait > 0) {
			Invoke("Animate", secondsToWait);
		}
	}
	void Update() {
		if (Input.GetKeyDown(KeyCode.Space)) {
			Play();
		}
	}
}

4-Solution to make SVG look smoother

If the SVG is not looking smooth, you may need to change some settings.

1. Choose 8x Multi SamplingAllow

2. MSAA in camera settings.

Here is how to do that: Go to Edit >> Project Settings

Set Anti aliasing to 8x Multi Sampling. Please note that this may however increase the memory size.

Before:

After: