Official Vector Graphics Preview Package

Hey guys, I just wanted to share some work in progress stuff I've been creating for the Unity2DChallenge and say thanks for creating the Vector Graphics package! After a couple minor road bumps I've been making good progress (albeit with programmer art so far).

Here's an (unoptimized) WebGL export that even works on some modern mobile browsers:

http://paulewers.com/pewers/tiltywings/

Thanks devs!

 

Quick question, I'm trying to export a basic circle (with a gradient) from Affinity Designer as SVG, but Unity keeps spitting out "Incomplete mesh data in Sprite". However when I replace the gradient with a solid color and reexport, it imports fine.

This is the generated SVG src:

Code (JavaScript):

1. <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="54px" height="54px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path id="GradientHill" d="M0.012,26.717c0,-14.743 11.97,-26.713 26.714,-26.713c14.743,0 26.713,11.97 26.713,26.713c0,14.743 -11.97,26.713 -26.713,26.713c-14.744,0 -26.714,-11.97 -26.714,-26.713Z" style="fill:url(#_Linear1);"/><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(3.2714e-15,-53.4261,53.4261,3.2714e-15,26.7255,53.43)"><stop offset="0" style="stop-color:#9d9d9d;stop-opacity:1"/><stop offset="0.47" style="stop-color:#e9e9e9;stop-opacity:1"/><stop offset="1" style="stop-color:#fff;stop-opacity:1"/></linearGradient></defs></svg>

Any thoughts?

 

Ahh, I see. Thanks for digging in. Asking in the Affinity forums now.

 

To follow up, it sounds like there isn't any way to do this from the Affinity Designer export. I've made a feature request thread on their forums here:

https://forum.affinity.serif.com/index.php?/topic/73355-svg-gradient-export-format

but I can work around the issue manually for now. Not a huge deal.

EDIT: I had a thought: is this something I could potentially fix with an asset preprocessor?

 

There's something wrong with enabling the flipYAxis setting for VectorUtils.FillMesh(), but unfortunately I haven't figured out exactly what yet, It might be messing up the bounds somehow or doing some clipping? I'll try to get an good reproducible case, but I thought maybe somebody else has seen it?

 

Question about runtime-created vectors.

I've noticed when layering multiple on top of each other there seems to be z-fighting depending on angle/distance of the camera, even when z positions are separated by one or several units. Images from the vector samples package, runtime scene -

https://www.dropbox.com/s/lk2r849agidpqfr/vec1.png?dl=0
https://www.dropbox.com/s/xs774nemlo8khx8/vec2.png?dl=0

Any ideas why this might be happening, or potential workarounds?

 

Oh boy... I have a problem.

I'm using asset bundles and I've added SVG files to the asset bundles I'm using. When I instantiate the prefab as a GameObject, the object appears without any color other than debugger pink/purple. I dug a bit and figured out that I could use the following code.

Code (CSharp):

1.         GameObject go;
2.  
3.         GameObject rcPrefab = ShelfManager.bundleLoaded.LoadAsset<GameObject>(gameObjectData.imageName);
4.  
5.         if (rcPrefab != null)
6.         {
7.             go = GameObject.Instantiate(rcPrefab);
8.             go.name = gameObjectData.label;
9.      
10.             SpriteRenderer rcRenderer = go.GetComponent<SpriteRenderer>();
11.  
12.             if (rcRenderer != null)
13.             {
14.                 Material rcMaterial = rcRenderer.material;
15.  
16.                 Material rcShader = ShelfManager.bundleLoaded.LoadAsset<Material>(rcMaterial.name.Replace(" (Instance)", ""));
17.  
18.                 if (rcShader != null)
19.                 {
20.                     rcRenderer.material = Material.Instantiate(rcShader); // new Material(rcShader);
21.                 }
22.  
23.                 /*                if (rcMaterial.name.Contains("Unlit_VectorGradient"))
24.                                   {
25.                                       rcRenderer.material = new Material(Shader.Find("Unlit/VectorGradient"));
26.                                   }
27.                                   else if (rcMaterial.name.Contains("Unlit_Vector"))
28.                                   {
29.                                       rcRenderer.material = new Material(Shader.Find("Unlit/Vector"));
30.                                   }*/
31.              
32.             }
33.         }

Okay... so this works on an Android Device... however, in the editor all the GameObjects are pink. The material is set to Unlit_Vector and Unlit_GradientVector. If I set them manually at this point, the become their proper color despite the fact that they are exactly the same Unlit_Vector or Unlit_GradientVector. To complicate this... the code in comments works in the editor but not on the Android device. On the android with the commented code, we end up with pink shapes.

Here is a video capture of the behavior in the editor. Any assistance you can render would be amazing.

https://www.dropbox.com/s/qiih74ctqom7s0s/Unity 2018.2.17f1 (64bit) - [PREVIEW PACKAGES IN USE] - shelf.unity - CuriousReader - Android _DX11 on DX9 GPU_ 12_3_2018 2_37_39 PM.mp4?dl=0

I verified that the object loaded is indeed the .svg and not the sprite, btw.

Thanks!

 

I switched platform and tried to run my game in WebGl editor.

I noticed that the alpha channel is not working on any sprite renderer in editor (It's perfectly fine with the standalone PC/Mac version). (See picture for my alpha test).

Not sure if I need to setup any special shader or if it's a (known or not) bug.

I'm running unity 2018.3.b12 using Vector Graphics .22 in vector mode.

 

Can't seem to get gradients to work on a canvas.
First is Sprite Renderer
Second is SVG Image


In case anyone else is trying to get a vector sprite swapped button. It doesn't seem possible at the moment. (Wouldn't take much if you thought branching UnityEngine.UI sounds fun.)
However it's simple to get the same effect by using a animation transition.

 

My setting was [Graphic Emulation : WebGl1.0] [Shader Hardware Tier 3]. Thanks for pointing me that.

The Hardware tier is making no difference (1, 2 or 3) with the alpha. But if I switch to WebGl 2.0 or no emulation the alpha is working perfectly, no matter the hardware tier.

In webgl 1.0, the hardware tier does'nt seem to make any difference over the alpha, it's not working.

I also noticed that in WebGl1.0 if I use the animator with svg images the alpha is correctly blended in my animations. I don't know if they bypass the emulation or use a different way to render the textures.

By looking at Unity's web compatibility chart https://docs.unity3d.com/Manual/webgl-browsercompatibility.html I noticed that WebGl 2.0 is not supported over edge and Safari. Is alpha blending with WebGl 1 will be in the roadmap for the vector graphics (bug or feature)? Could you reproduce it on your side?

 

Using Vector Graphics 1.0.0-preview.22 on Unity 2018.2.15f1, if I create prefab from an object that has a nested SVG sprite, I receive this error:

Code (CSharp):

1. Could not extract GUID in text file Assets/SVG/Props/Newspaper/GameObject.prefab at line 87.
2. UnityEditorInternal.InternalEditorUtility:ProjectWindowDrag(HierarchyProperty, Boolean)

The line it's referencing is the GUID of the material on the SVG sprite object, which in the .prefab file is "00000000000000000000000000000000". If I instantiate the prefab, the material is still assigned to the sprite; but if I apply changes to the prefab, I receive the same error above.

Any ideas? Thanks!

- David

 

Interesting. In creating a simple project to replicate the issue, I've discovered that my new project stripped down to the bare minimum doesn't have the same problem. Problem doesn't appear in the editor on the PC or on the Android device. I'll keep working to discover what is going wrong somewhere in the process. I'm going to try to re-import the SVG files, re-create the asset bundles, etc.

Thanks for your help.

 

Thanks for checking into it! Just FYI, I updated to 2018.18f1 to see if it would help, and the issues is present there as well.

- David

 

In my main project, I'm still seeing the problem and when I look at the GameObject I see the following warning at the bottom of the Sprite Renderer component.

Material does not have _MainTex texture property. It is required for SpriteRenderer.

If I click the material and browse the scene for Unlit_Vector and select it... Poof... it fixes it. Any ideas?

I re-imported all the SVGs. I've re-added them to the assetbundles, rebuilt the assetbundles. I verified that they were in the assetbundles. I've used the debugger to look and make sure that the material was assigned.

 

Is this by design? IMO the rotation direction should match the Unity math stuff...

Code (CSharp):

1.  
2.         Vector2 testVec = Vector2.right;
3.         Debug.Log(testVec); // "(1.0, 0.0)"
4.         Debug.Log(Mathf.Atan2(testVec.y, testVec.x) * Mathf.Rad2Deg); // "0"
5.         testVec = Matrix2D.Rotate(90 * Mathf.Deg2Rad).MultiplyVector(testVec);
6.         Debug.Log(testVec); // "(0.0, -1.0)"
7.         Debug.Log(Mathf.Atan2(testVec.y, testVec.x) * Mathf.Rad2Deg); // "-90"

 

Dumb question, but are there plans to support SVGs with the new 2D anim/bone stuff?

 

Just started using this. So far it's pretty cool.

My biggest request would be: Add multi-sprite support so we don't have to split our SVGs into multiple files.

 

My first thought was something similar to how texture sprites are split, with rects. Define a rect, evreything inside that rect is a spline (you can even do a bool intersect operation to confine the curves to the rect.

Then you have multiple options to split the SVG up automatically similar to the texture method, including per layer, per group, per id, etc.

I don't think there's going to be a single solution to this, so the best method may be a shotgun blast of options.

EDIT: Bonus points if we can choose objects (by id or whatever) that we can tint different colours at runtime.

 

NOICE! I'll give that a try, thanks!

 

I converted an illustrator file to svg. But I guess it's "too big" for unity (Error message: Vertex array is too large. A sprite mesh may not have more than 65535 vertices.).

Can anyone share some tips on how to reduce the number of vertices in Illustrator? Thanks.

 

I might be being an idiot here, but I can't figure out how to include the "Unlit/Vector" shader in my project. It finds it with Shader.Find("Unlit/Vector") in the editor, but not during a build, and it doesn't show up in the shader selection dialog if I try to force include it in the project or attach it to a component.

 

For anyone interested, I'm working on a package that translates After Effects shape animations to Vector Graphics (via Bodymovin extension) -

This has been developed in tandem with a 2D challenge submission, which is made entirely with content and animation straight from After Effects -
https://connect.unity.com/p/i-feel-fantastic

 

I'm not sure how to solve this for you, but the material is located in Packages/Vector Graphics/Runtime/Materials.

This brings to mind that it may be nice to be able to set a default material for the SVG importer.

Thanks!

- David

 

Hello!
I'm making a game, where you should color the pictures.
Each picture consists of many pieces, so that each piece can be colored individually, by selecting right color and clicking on the piece. It was not hard using the UI system and png sprites. I could detect if I'm clicking on an empty area or not, by checking alphaHitTestMinimumThreshold property of UI image. But the problem is: The size of build is way too big, since for a decent quality the images should be in high resolution.

I decided too use vector graphics and now assets are much lighter, but they don't work with UI system. And now I cannot figure out how to detect a click on an image.
One way is to make polygon collider for each sprite, but considering that the sprites can be of any shapes, and there are literally hundreds of sprites it would be a really long work.
Is there a way to detect if you are clicking on an empty area of a sprite (alpha = 0) or colored area (using vector sprites)?
Something like in UI system. It is even harder with vector sprites, because I couldn't find a way to get a texture.

Sorry for a long post. Maybe It would be better to post it in UnityIf someone would suggest a simple solution, that would be great!

 

Thank you for your reply!
I think I will give a try to this method. I guess I will convert everything at the start of the level (maybe with some loading animation). If it takes 1-2 seconds, I think that would be all right.

 

Open source repository now up for converting After Effects shapes to animated vector graphics -
https://github.com/leetful/U.movin

 

We started using this package in Unity 2018.2 and immediately noticed benefits of faster runtime and smaller build size.

However, we ran into a problem when upgrading to Unity 2018.3: the newly imported vectors all get imported to the same in-game size, no matter the size in illustrator.

Here's an example of two test vectors in illustrator:


And here they are in Unity after just being imported, without me changing any of their settings:


Here's another screenshot to show that the objects are not scaled differently in the scene:


The two test assets should be different sizes when imported into the editor, but they get imported at the same size. This happens in Unity 2018.3 but it didnt happen in Unity 2018.2

Edit: I went back to Unity 2018.2 but it still had this problem. Im not sure in what version the problem started occurring, or if its related to Unity version at all. It could be upgrading to 2018.3 messed up my project files such that going back to an old version of Unity didn't do anything

 

This may be related to the viewbox parameter. For more, search this thread for “viewbox” by using the search field right above the thread. When exporting, you need to disable it, or you can open the SVG in a text editor, and remove it in the code.

 

This fixed it! Thanks!

 

From which version of Unity we can able to use .svg file in UnityUI? also, please tell which one is better for performance.

 

Hope this hasn't been answered before, can't find anything about it. I use an SVG Image component to display a vector graphic which works fine. I'd like to overwrite a color of a specific element in the vector (css), is this supported in any way?