Search Unity

  1. Unity 2018.3 is now released.
    Dismiss Notice
  2. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  3. Want more efficiency in your development work? Sign up to receive weekly tech and creative know-how from Unity experts.
    Dismiss Notice
  4. Build games and experiences that can load instantly and without install. Explore the Project Tiny Preview today!
    Dismiss Notice
  5. Nominations have been announced for this years Unity Awards. Celebrate the wonderful projects made by your peers this year and get voting! Vote here!
    Dismiss Notice
  6. Want to provide direct feedback to the Unity team? Join the Unity Advisory Panel.
    Dismiss Notice
  7. Improve your Unity skills with a certified instructor in a private, interactive classroom. Watch the overview now.
    Dismiss Notice

Vector Graphics Preview Package

Discussion in '2D Experimental Preview' started by rustum, May 4, 2018.

  1. Pawl

    Pawl

    Joined:
    Jun 23, 2013
    Posts:
    104
    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!
     
    benoitd_unity and mcoted3d like this.
  2. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    Very nice, silky smooth vector graphics! Thanks for sharing!
     
  3. Pawl

    Pawl

    Joined:
    Jun 23, 2013
    Posts:
    104
    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?
     
  4. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    What happens is that Affinity Designer exported the gradient definition *after* the path that uses it. Although this seems to be conformant with the SVG spec, we do not currently support this and we require the <def> section to be defined before the elements that reference it.

    We will try to improve on this in future versions of the SVG importer. In the meantime, maybe there's an option to force Affinity Designer to export the gradient definitions ealier in the file? For your example, I manually moved the <def> section before the <path> to fix it.
     
    Pawl likes this.
  5. Pawl

    Pawl

    Joined:
    Jun 23, 2013
    Posts:
    104
    Ahh, I see. Thanks for digging in. Asking in the Affinity forums now.
     
  6. Pawl

    Pawl

    Joined:
    Jun 23, 2013
    Posts:
    104
    Last edited: Nov 26, 2018
  7. ecurtz

    ecurtz

    Joined:
    May 13, 2009
    Posts:
    557
    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?
     
  8. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    I just had a quick look and I think there might be a bug in the way we flip the vertices. I think we fail to take the bounds origin into account when flipping, so that setting flipYAxis to true may only work if the bounds start at the origin. We'll try to solidify this in the next version. In the meantime, you can probably modify the Mesh object manually after calling FillMesh with flipYAxis = false.
     
  9. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    It would probably be a bit fragile, but it's worth a try. You could textually search for the <def> section and bring it directly under the root <svg> element with string manipulation. Again, this feels fragile/error prone but may work just fine if your .svg files have a predictable format.
     
    Pawl likes this.
  10. leetful

    leetful

    Joined:
    Feb 23, 2013
    Posts:
    15
  11. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    I would think this is a general problem that you can encounter with any sprite (not just SVG). Setting the transparency sort mode of the camera to "Orthographic" would help:
    https://docs.unity3d.com/ScriptReference/Camera-transparencySortMode.html

    You can also look at the sprites "Order In Layer" to see if that helps as well.
     
  12. CodogXII

    CodogXII

    Joined:
    Apr 18, 2014
    Posts:
    4
    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!
     
    Last edited: Dec 3, 2018
  13. Lancelot-Bleu

    Lancelot-Bleu

    Joined:
    Oct 15, 2014
    Posts:
    5
    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.

    AlphaWebGl.png AlphaWebGLInspector.jpg
     
  14. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    This shouldn't happen, and you shouldn't have to patch the materials after loading the asset (assuming the vector graphics package is installed in the target project from which you load the bundled assets). It seems that the material references are broken in the asset bundle. I could not reproduce on my side, so if you could send a simple project that reproduces the issue, that would be appreciated.
     
  15. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    I think the editor is running in a mode that doesn't support GPU instancing, which is required for sprite tinting at the moment.

    Look under "Edit > Graphics Emulation" to see if you're running on a lower tier. Also check the player settings to select an appropriate graphics device API.
     
  16. RaymondEllis

    RaymondEllis

    Joined:
    Jul 15, 2015
    Posts:
    2
    Can't seem to get gradients to work on a canvas.
    First is Sprite Renderer
    Second is SVG Image
    upload_2018-12-3_20-31-46.png

    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.
     

    Attached Files:

  17. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    There's one tweak that you must do to make it work. On your canvas, select "TexCoord2" in the "Additional Shader Channels".
     
    RaymondEllis likes this.
  18. Lancelot-Bleu

    Lancelot-Bleu

    Joined:
    Oct 15, 2014
    Posts:
    5
    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?
     
  19. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    Yes, it's a known limitation. We currently require GPU instancing for vector sprite tinting since the color channel is already used to store the shape colors. Providing an alternate solution for tinting is on the roadmap.
     
    Lancelot-Bleu likes this.
  20. BrainAndBrain

    BrainAndBrain

    Joined:
    Nov 27, 2014
    Posts:
    81
    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
     
  21. CodogXII

    CodogXII

    Joined:
    Apr 18, 2014
    Posts:
    4
    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.
     
  22. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    I was able to reproduce this with 2018.2, but it seems fixed with 2018.3.

    I'm not sure what's the cause of this, but I expect this is an issue with the prefab system, and probably unrelated to the SVG importer. I'll try to get more information.
     
    BrainAndBrain likes this.
  23. BrainAndBrain

    BrainAndBrain

    Joined:
    Nov 27, 2014
    Posts:
    81
    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
     
  24. CodogXII

    CodogXII

    Joined:
    Apr 18, 2014
    Posts:
    4
    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.
     
  25. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    Given this weird behavior, as well as the prefab issue from @BrainAndBrain, I suspect that there's an issue with references to a material that comes from a package. It would be worth trying creating your own material in your project, make them reference "Unlit/Vector" or "Unlit/VectorGradient", and use this material instead of the default one that is used when importing an SVG file. Maybe that will fix the issue.
     
  26. ecurtz

    ecurtz

    Joined:
    May 13, 2009
    Posts:
    557
    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"
     
  27. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    That's a good point. The direction of the Matrix2D rotations wasn't intentional. Depending on which coordinate system you use, you may want a different direction. Unity uses right-hand side rotations, SVG uses left-hand side rotations. Given this, we plan to provide these methods where the direction of the rotation will be explicit:
    -
    RotateRH
    : right-hand side rotation, like Unity
    -
    RotateLH
    : left-hand side rotation, like SVG

    The
    Rotate
    method will be deprecated.
     
    ecurtz likes this.
  28. Pawl

    Pawl

    Joined:
    Jun 23, 2013
    Posts:
    104
    Dumb question, but are there plans to support SVGs with the new 2D anim/bone stuff?
     
  29. Wahooney

    Wahooney

    Joined:
    Mar 8, 2010
    Posts:
    268
    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.
     
    mcoted3d likes this.
  30. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    There are plans to have animation support, but some work has to be done first. Providing bone weights support is not trivial with SVG since the assets can be re-tessellated, so the bone weights have to be transferred back to the new vertices. Doing this in an accurate manner is non-trivial.

    For these reasons, we are exploring alternative ways to hook ourselves into the animation system, such as dividing the SVG into parts (a bit like the experimental PSD importer). However, all of this is very exploratory at the moment, and we cannot provide a delivery estimate.
     
    Pawl likes this.
  31. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    This is something we would like to support. The main challenge is finding good rules on where to break the SVG in multiple sprites (should we split every groups, or every element that has a specific ID, etc.). If you have suggestions regarding this, I'm all ears :)
     
  32. Wahooney

    Wahooney

    Joined:
    Mar 8, 2010
    Posts:
    268
    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.
     
    mcoted3d likes this.
  33. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    This is possible, the
    ImportSVG
    methods returns a
    SceneInfo
    struct which has a dictionary of nodes by IDs. You can modify the node's shapes before tessellation:

    Code (CSharp):
    1. var sceneInfo = SVGParser.ImportSVG(new StreamReader(svgPath));
    2. var shape = sceneInfo.NodeIDs["ShapeID"].Shapes[0];
    3. var fill = shape.Fill as SolidFill;
    4. fill.Color = Color.red;
    5. // ...
    6. var geoms = VectorUtils.TessellateScene(sceneInfo.Scene, tessOptions);
    7. var sprite = VectorUtils.BuildSprite(geoms, 100.0f, VectorUtils.Alignment.Center, Vector2.zero, 128, true);
    8.  
     
    Wahooney likes this.
  34. Wahooney

    Wahooney

    Joined:
    Mar 8, 2010
    Posts:
    268
    NOICE! I'll give that a try, thanks!
     
  35. SwingNinja

    SwingNinja

    Joined:
    Mar 13, 2017
    Posts:
    12
    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.
     
  36. mcoted3d

    mcoted3d

    Unity Technologies

    Joined:
    Feb 3, 2016
    Posts:
    152
    I can help you reduce the number of vertices from the SVG importer. In the inspector, you can try to reduce the target resolution of the basic settings. If you don't have any luck, you can try to switch to the advanced settings: leave the "Max Cord Enabled" and "Max Tangent Enabled" unchecked, and put a high value in "Step Distance". This should allow you to import the SVG with a minimal number of vertices. Afterward, play with the "Max Cord" and "Max Tangent" values until you have something satisfactory.
     
  37. ecurtz

    ecurtz

    Joined:
    May 13, 2009
    Posts:
    557
    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.
     
  38. leetful

    leetful

    Joined:
    Feb 23, 2013
    Posts:
    15
    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