Search Unity

  1. Are you interested in providing feedback directly to Unity teams? Sign up to become a member of Unity Pulse, our new product feedback and research community.
    Dismiss Notice

Shapes - a real-time vector graphics library

Discussion in 'Assets and Asset Store' started by Acegikmo, Jul 3, 2020.

  1. Censureret

    Censureret

    Joined:
    Jan 3, 2017
    Posts:
    359
    Hey :) i just bought the asset i was wondering how you made the animations (like shown in the showcase) i couldn't seem to find any documentation on that ? :)
     
  2. MystFTG

    MystFTG

    Joined:
    Apr 28, 2013
    Posts:
    23
    Hi, I have a few questions to determine if this asset, which looks really great so far, would be the right fit for my current project.

    1) Can everything be generated purely from code? Let's say I wanted to create a few thousand polygons from data in an xml file, would that be possible? "Polylines and Polygons can't be instanced" in the documentation suggests that this might not work.
    2) Is there a limit to the complexity of polygons? Some polygons I'd have to create can have well over 500-1000 points.
    3) Are holes in polygons supported?
    4) I'm working with map data, so I would use float coordinates like "6.19691914,50.530300345" to create polygons. Would that create any issues?
    5) In the documentation you mention "Polygons and the Polylines both generate meshes on the fly when they are modified. They might be expensive on the CPU end in some cases, if you use a lot of points". What would be considered "a lot" in this case? For example, I'm displaying 50 polygons with an average of 500 points each.

    Thank you very much!
     
  3. tomraegan

    tomraegan

    Joined:
    Mar 28, 2016
    Posts:
    114
    Hi!

    Shapes is just brilliant. Looks amazing and I'm using it quite a bit.

    I'm not really a coder and I've been using PlayMaker for years. I've studied your code (to the extent that I can 'study' any code) and attempted to implement a modified version of it for my own purposes, without any real success.

    I was just wondering if some PlayMaker actions were part of the development plan for Shapes?

    Thanks for the asset.
     
  4. Razziel

    Razziel

    Joined:
    Nov 1, 2016
    Posts:
    7
    I'm modifying the color and radius via script and I'm getting this behaviour ("gradient pie"?) on the circles.

    upload_2021-1-4_14-19-5.png

    As soon as I modify any value from the inspector it repaints itself as a normal disc. Do I need to call a specific method after modifying a shape in the code (something like "Repaint")?
     
  5. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    Apologies for the late response, I've had a bit of a holiday break! (I hope you all had a good one too!)

    almost all of them are using animation curves, while others are code-based animation, so they're all using Unity's existing animation tools. Animation isn't really a part of this package, but all things are animatable, if that makes sense!

    In this case, "can't be instanced" means that they will not take advantage of GPU instancing as a form of optimization. But you can definitely instantiate everything from code as well as from prefabs!

    there are no limits except Unity's mesh limitations, which is at 65,535 vertices. Though at that number, the triangulation algorithm might get into performance issues when you generate or modify any existing polygons, but you should be totally fine in the 500-1000 range

    Nope! Not yet, though stencil buffer support is coming soon, which could achieve similar effects. A halfway solution if you have the ability to code it, would be to create splits in your polygon to turn it into a polygon without holes, and then feed those points into Shapes

    Pretty much all positioning in Shapes is using floating point coordinates, so that should be totally fine. Positioning is not pixel based, it's all in local space coordinates of your objects

    it really depends on the hardware - however, you only pay the triangulation cost on generate and on modify, not while drawing it, after that point it comes down to your hardware and how many draw calls you can push. It sounds like it should be fine?

    There are no plans for PlayMaker integration at the moment I'm afraid!

    could you clarify a little how you are modifying it, how it looks before modification, and what you expect it to look like?
     
  6. stefan_wandelbots

    stefan_wandelbots

    Joined:
    Jan 19, 2021
    Posts:
    1
    Is it possible to build a grid layer visualization (like the default grid layer in Unity or Blender) with this library? Or would this result in too many individual lines (which are all separete meshes)?
     
  7. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    currently that would involve lots of separate lines which can get heavy en-masse, but, people have been requesting support for pattern overlays for things like the rectangle, and a grid could be one of those patterns!
     
  8. econt

    econt

    Joined:
    Apr 8, 2019
    Posts:
    52
    Hi,

    I am trying to draw a polyline with a Polyline-Component. I want to change the point in start with a script and draw the new points. The new Points are added/updated but somehow the line is not updating (it disapeered) here is the code:
    public List <PolylinePoint> _path = new List<PolylinePoint>();
    public Polyline _polyline;
    // Start is called before the first frame update
    void Start()
    {
    _polyline = GetComponent<Polyline>();

    _polyline.meshOutOfDate = true;
    _polyline.points = new List<PolylinePoint>();
    // _polyline.points = _path;
    _polyline.points.AddRange(_path);
    _polyline.UpdateMesh(true);
    _polyline.meshOutOfDate = false;
    _polyline.UpdateMesh(false);
    }
    I tried a lot with UpdateMesh and out of date but did not get the solution. - Do you have a code expample that works?

    Thanks in Advance!
     
  9. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    It's enough to just do these two, the out-of-date state and mesh updating will be done automatically:

    Code (CSharp):
    1. _polyline = GetComponent<Polyline>();
    2. _polyline.SetPoints( _path );
    my guess is that your points have a thickness of 0 or the colors have an alpha of 0!

    upload_2021-1-28_15-24-0.png
     
  10. Amplify_Jeffrey

    Amplify_Jeffrey

    Joined:
    Feb 3, 2021
    Posts:
    1
    Greetings from the Amplify team,

    I've been trying Shapes for the last couple of days, you've done a great job with the asset btw.

    Was trying to scale a group of round cornered rectangular shapes and wondering if there's a way to do a non-uniform scale without distorting the shape layout, using Unity's Transform > Scale.
    Seems like I can only achieve this per shape and through "Size" input with "Scale Mode > Coordinate" Enabled

    Thanks, keep it up!
     

    Attached Files:

    GilbertoBitt likes this.
  11. PiresFM

    PiresFM

    Joined:
    Oct 24, 2020
    Posts:
    1
    Hello, I'm very interested on your asset but my use case for it is 100% UI (it's a heavy UI game).
    • Are you planning to support UI overlay in the future?
    • Is there an example provided that uses camera space? Does it support things like auto resize to resolution?
    • Is it performant when used like that vs UI canvas?
    Thanks!
     
  12. Amplify_RnD_Rick

    Amplify_RnD_Rick

    Joined:
    Feb 15, 2016
    Posts:
    526
    Hi,

    Like @Amplify_Jeff mentioned we started using Shapes on an external project of ours, its really clean and so pleasant to look at its results.

    I have another question/request on top of Jeff's one .

    Just to give contextt, on our end Shapes main usage will be for UI and we're on the process of creating UI primitives like buttons, sliders, scroll views,etc on top of it.

    We noticed is that there isn't any way to mask Shapes components, which will be required for p.e. scroll views. After some digging we found out that this was already requested by another user over here and it was already implemented on your end but it hasn't been released yet.

    Do you have any estimate on when you can release a new version with this feature?

    Thank you so much!
     
  13. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    Just implemented this for 3.0.0 when using coordinate scaling mode!

    I have no plans to support Unity's canvas UI - their system is almost diametrically opposed to the way Shapes works, and it's incredibly hard if not impossible to get Shapes up and running in it :(

    kinda yes, but it's pretty complex! It's a FPS hud that scales with the view

    it should be performant, but it really depends on how many things you draw and how you draw them!

    generally, I think it's good to keep in mind that Shapes is not designed to be a UI library, but it can be used for HUD/UI like things

    soon, as mentioned here!
     
    Amplify_RnD_Rick likes this.
  14. BTStone

    BTStone

    Joined:
    Mar 10, 2012
    Posts:
    1,247
    Hey @Acegikmo

    I noticed that Shapes doesn't support the URP 2D Renderer (or I missed some settings somewhere?)

    By support I mean: the shapes don't get drawn/rendered on screen at all. Just nonexistent, not even purple on screen.

    Did the 3.0.0 update fix that in any way?
     
  15. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    nope! I generally don't support experimental APIs, but some people have found workarounds in the meantime;

    https://shapes.userecho.com/en/comm...g-with-2d-renderer-after-regenerating-shaders
     
    florianhanke and BTStone like this.
  16. BTStone

    BTStone

    Joined:
    Mar 10, 2012
    Posts:
    1,247
    Alright, I'll try that workaround for now then, thanks
    Aaaand hope that Unity will make the 2D Renderer stable asap :)
     
  17. JamesMakesGamesLtd

    JamesMakesGamesLtd

    Joined:
    Aug 22, 2012
    Posts:
    34
    Just diggin into Shapes, loving it so far :D

    I'm struggling with rendering stuff in the right order/sorting though. As far as I can see this isn't covered in the docs. I'm using Immediate Mode mostly. With the default objects, I can stack elements using the Sorting Order in the Sorting & Depth dropdown, but how can I do this in Immediate Mode?

    Also, I must be missing something with the Sorting Layer options exposed in the same dropdown. I tried to create a sorting layer for the elements to render them on top of some non-Shapes game objects (on a lower sorting layer), but they're still obscured by these objects. How can I for example, ensure Shapes are always drawn on top of lower sorting layers?

    Thanks!
     
  18. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    while the component-based Shapes sort like any other mesh renderer, immediate mode draw order will always be the order in which you call the draw commands, at the point in the render pipeline specified by the second parameter of Draw.Command()

    so in other words, the first Draw.X you call will be furthest back, the last Draw.X you call will be closest/on top

    that being said, opaque shapes specifically will also write to the depth buffer, so if you draw an opaque shape close to the camera, and then another shape further behind that line, the closer line will still be on top since it wrote to the depth buffer
     
  19. hdxpmc

    hdxpmc

    Joined:
    May 1, 2016
    Posts:
    43
    Hello,
    Can we do these operation with Shapes ?
    1. touch down: get point0
    2. touch move: get all point on Bezier Curve and draw with immediate mode
    3. touch up: get all point on Bezier Curve and generate Mesh.

    We just want to get mesh along Cubic Bezier Curve Path after user touch up.
    Is the Shape draw in immediate mode matching with Mesh ?

    Best regards
     
  20. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    Immediate mode has a feature to draw bezier curves specifically yes!

    you can find example code here

    basically you do this:

    Code (CSharp):
    1. using( var path = new PolylinePath() ) {
    2.     path.AddPoint( a );
    3.     path.BezierTo( b, c, d, pointCount );
    4.     Draw.Polyline( path, lineThickness, PolylineJoins.Simple );
    5. }
     
  21. DGordon

    DGordon

    Joined:
    Dec 8, 2013
    Posts:
    609
    Any way I can set the Depth test using Draw.Polyline()? I'm using two polylines one on top of the other, one as LessEqual and one Greater, so I can render any part of the line with a different visual when its behind an object. I'd like to use immediate mode so I can round out the corners, unless theres a way to do that in the component at this point.
     
  22. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    you can set Draw.ZTest to change the depth testing in immediate mode! As for rounding corners, you can have round joins, but you can't set an arbitrary radius, for that you'll need to use polylinePath.ArcTo in immediate mode
     
    DGordon likes this.
  23. DGordon

    DGordon

    Joined:
    Dec 8, 2013
    Posts:
    609
    Im assuming theres a reason this cant work, but it would have been really easy if I could just apply a constant "rounding radius" to the entire component, which would just make sure all points in the polyline smooth out according to that number in a consistent way.

    Basically, I just want to make the line look more toony (smooth curves) and less sci-fi (angles, ie: x-com).

    In case that could be done somehow, someday, using the regular polyline component ... Im flagging it would be awesome. Basically, I want you to do the math, and just let me say how round I want things without having to check per-point if it should arc :p.
     
  24. DGordon

    DGordon

    Joined:
    Dec 8, 2013
    Posts:
    609
    Oh, oh, also ... is there any way to give the polyline an outline? That would be huge for a toon shaded game. With an outline PP effect it looks much better, but I have other reasons for not using that ... would be great to have that built in.

    Oh, and loving this btw! Thanks!
     
  25. DGordon

    DGordon

    Joined:
    Dec 8, 2013
    Posts:
    609
    The lines are too dark against the color scheme of the rest of the scene ... its a toon shaded game, and I have colors adjust to get it looking the way I want, and it would be nice to be able to increase the intensity of the color of the lines ... they should be basically glowing for this style. Right now they blend in too much.

    [Edit -- Yay! I searched around and found the Shapes.config file, and just set HDR to true there. Thanks so much for the foresight :D]
     
    Last edited: Mar 19, 2021
  26. DGordon

    DGordon

    Joined:
    Dec 8, 2013
    Posts:
    609
    Okay, just flagging that I used Immediate Mode to redo the lines using ArcTo as mentioned above ... and holy moly its awesome. Great product. If anyone is thinking of purchasing, I highly recommend ...

    It was really easy getting it to work with ArcTo once I got used to it, and I even realized I could do outlines if I want super easily by making a thicker line behind my main one thats black. Good stuff!
     
  27. Streamfall

    Streamfall

    Joined:
    Aug 8, 2011
    Posts:
    40
    Hi Freya,
    Picked this up yesterday, really excited!

    On Unity v. 2020.2.1f1, with URP 10.2.2, anything rendered with Immediate Mode does not actually appear. The Procedural Tree scene does not work for example. I have tried the different camera callbacks as well as switch to a default forward render pipeline for URP just in case it was some setting of mine related to transparency etc. Component based shapes work fine.

    I am going to try upgrading to the new LTS, 2020.3.2f1 and see if that changes anything. I'll post when I know.

    Thanks for making Shapes!

    Edit 3, for clarity : In order to test if this is an issue with some setting in my project, I Installed Shapes via package manager into a blank URP project. I received a pop up message to the effect of the plugin locating URP and updating the shaders to reflect. Did not see that message when I installed the package in my main project. Some time I will invest in trying to figure out what is happening there. I have strange issues with my project sometimes related to assemblies because my code is in namespaces. For now I'll be using component versions of shapes.
     
    Last edited: Apr 12, 2021
  28. JohannesPD

    JohannesPD

    Joined:
    Jan 9, 2020
    Posts:
    2
    Are you using the recent version of Shapes (v3.2.3)? Some earlier versions had issues that have been resolved so that should be the first thing to check.
     
  29. shaunnortonAU

    shaunnortonAU

    Joined:
    Jan 19, 2018
    Posts:
    7
    Do you know if this works with 2020, standard rendering, for Oculus Quest VR?
     
  30. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    it should yes!
     
  31. Beloudest

    Beloudest

    Joined:
    Mar 13, 2015
    Posts:
    226
    Hi there, enjoying the tool so far thanks. I am trying to make a curved UI and have realised it might be tricky to do with Shapes shapes :) Do you know if it might be possible to deform and bend rects? I can see there is an arc tool that might help me but it would cool to be able to bend any shape.

    Edit
    I think the billboard setting has got me there. Seems that takes Z into account :)
     
    Last edited: Apr 19, 2021
  32. stychu

    stychu

    Joined:
    May 9, 2016
    Posts:
    62
    Is it easy to create decals (attack range/area) with this package? Some examples
     

    Attached Files:

  33. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    there's no way to bend/morph shapes, but it sounds like you want to use the arc shape?

    kinda, it depends on how much control you want over the look of it, there's obviously limitations in Shapes on what the shaders will look like, on top of not having support for projecting onto surfaces, but you can definitely do stuff in this direction! There's an example of this included in the example screenshots too
     
  34. Beloudest

    Beloudest

    Joined:
    Mar 13, 2015
    Posts:
    226
     
  35. DylanF

    DylanF

    Joined:
    Jun 25, 2013
    Posts:
    23
    Looks fun! Unfortunately, most shapes are only showing in the left eye with hdrp vr. This is 2020.3.4f1 with shapes 3.2.3 using openxr and hdrp 10.4.0.

    Here's a sample scene from each eye:
    shapesLeftEye.JPG shapesRightEye.JPG
     
  36. DGordon

    DGordon

    Joined:
    Dec 8, 2013
    Posts:
    609
    Hello,

    I saw that immediate mode in HDRP wasn't working at one point. Did that ever get fixed? I just switched my project from BiRP to HDRP and wondering if I cant use what I had going now (movement grid ala x-com done with immediate mode).

    [Edit -- I figured it out. I just searchd HDRP in your docs and it came up in one place, pieced it together from there. Very easy. Thanks for a great product!]
     
    Last edited: Apr 25, 2021
  37. rxmarccall

    rxmarccall

    Joined:
    Oct 13, 2011
    Posts:
    350
    Hello @Acegikmo, super excited to finally have purchased Shapes, excellent asset!
    Currently the Disc component API only gives access to Start and End angles in Radians, however in the Editor Inspector we can choose Degrees and Turns. Is there some way for me to set the angle value using Degrees? Or will I need to convert to Radians always?
     
  38. Nyarlathothep

    Nyarlathothep

    Joined:
    Jun 13, 2013
    Posts:
    314
    Are there any known issue with Shapes and WebGL? I just did a quick test build of my game for WebGL and most of the Shapes components that I'm using seemed to be ok except for circles which were missing. If that's a known issue are there any workarounds?
     
  39. camogram

    camogram

    Joined:
    Jul 11, 2018
    Posts:
    8
    Hi,
    This asset looks great - will it run on Universal Windows Platform (HoloLens - DirectX)?

    Thanks!
     
  40. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    Shapes uses radians all across its internals, so, you have to convert!

    degrees*Mathf.Deg2Rad // degrees to radians

    turns*ShapesMath.TAU // turns to radians


    unfortunately yeah, currently Unity (and/or google chrome?) has issues with GPU instancing on webGL in some browsers. I don't know of the timeline for a fix on that, since it's out of my control, but there's more info on that here. you can of course also turn off GPU instancing in Unity and in Shapes

    should work as far as I know, as long as it has support for GPU instancing!
     
    Nyarlathothep likes this.
  41. Nickromancer

    Nickromancer

    Joined:
    Jul 31, 2016
    Posts:
    37
    Is it possible have a component for us to override and draw custom shapes like using the Immediate Mode so that I can have draw order working correctly easily.

    I was trying to re-create dashed spline by drawing a lot of line segments. It is very hard to use Line component in this case.
     
  42. Cam_Fox

    Cam_Fox

    Joined:
    Nov 23, 2018
    Posts:
    6
    Cheers! Is there a recommended way to draw shapes in 2d behind sprites ordered by SpriteRenderer/Canvas "Order in Layer", or to sort in 3d space using transform Z? Otherwise, is there a way to draw shapes to a render texture via another camera so I can try to sort that behind my sprites?
     
  43. Cam_Fox

    Cam_Fox

    Joined:
    Nov 23, 2018
    Posts:
    6
    It looks like the static Draw helper doesn't support changing draw layer or depth. I was able to achieve the procedural effects I needed by creating a hierarchy of GameObjects and attaching ShapeRenderer components (eg the provided Line, Rectangle, Disc components), one per object since it won't let me attach multiple. Then I could configure params of each shape at runtime from my other scripts AND access draw depth and layer properties.

    Very cool library. It'd be awesome if the static Draw helper could support draw depth and layer for drawing in immediate mode since this would be way cleaner than having prefab hierarchies of template objects.
     
    Last edited: Jun 6, 2021
  44. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    unfortunately, by nature of how immediate mode works it will always draw in the order you issue the calls. there are however ways to work around it, for instance, if you use the opaque blend mode, then it will always be sorted correctly since they read and write to the depth buffer. you can also change where in the render pipeline the whole command buffer is run, using the second parameter of the Draw.Command() function

    as for using layers to filter drawing, this is also not really possible, but with a little bit of extra code you can cull based on it if you want. more elaborate answer with example code in this feedback thread!
     
  45. Cam_Fox

    Cam_Fox

    Joined:
    Nov 23, 2018
    Posts:
    6
    Thanks for your reply and the reference to that feedback thread! IMO and as a feature request, it'd still be nice for Shapes to include a helper class to simplify drawing with sort order from code, even if it's not 'true' immediate mode. (The explanation for why immediate mode itself doesn't work with draw depth makes sense to me.) Maybe a DrawManager prefab that handles the necessary game objects hierarchy? A lot of us rely on SpriteRenderer draw depth with 2d games and the workarounds so far seem a little clunky / require homegrown solutions.

    Cheers!
     
  46. ryanzec

    ryanzec

    Joined:
    Jun 10, 2008
    Posts:
    678
    Is there something I am missing as the sample gallery does not seem to be working for me in the latest 2021 stable version using URP:
    2021-06-30 10_05_33.png
     
  47. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    that looks weird, did you update an existing install of Shapes in that project? If so, it might be worth trying a clean install

    you can also try regenerating shaders and materials from the advanced menu at the bottom of the shapes settings window

    in addition - if you're using any experimental URP things, or the 2D renderer, it's possible things aren't working correctly there either

    edit: I just opened it in 2021.1 URP and it seems fine on my end
     
    Last edited: Jul 1, 2021
  48. tahir_ali

    tahir_ali

    Joined:
    Jan 6, 2018
    Posts:
    111
    How can I make this ?
    upload_2021-7-16_18-12-12.png
     
  49. Nyarlathothep

    Nyarlathothep

    Joined:
    Jun 13, 2013
    Posts:
    314
    I have an issue with shapes (drawn using immediate mode) flickering.

    You can see it happening in this video. I'm stepping frame by frame here, as you can see the lines and circles attached to the asteroids are flickering. This video shows the same thing on another shape, this time it's running in realtime.

    The flickering seems to be with the batch count changing up and down very rapidly - is it possible that some shapes are getting drawn twice? If so, how can I fix this?

    Here's a sample of code which draws the circle around the asteroids, just to show I'm not doing anything crazy (I hope):

    Code (CSharp):
    1. public override void DrawShapes(Camera cam)
    2. {
    3.    if (_parent == null)
    4.       _parent = transform.parent;
    5.  
    6.    var pos = _parent.position;
    7.    var bot = new Vector3(pos.x, 0, pos.z);
    8.    var scale = ScaleReference.localScale.x;
    9.  
    10.    using (Draw.Command(cam))
    11.    {
    12.       Draw.BlendMode = ShapesBlendMode.Screen;
    13.       Draw.DiscGeometry = DiscGeometry.Flat2D;
    14.       Draw.Color = Color.gray;
    15.       Draw.RingThickness = 3;
    16.       Draw.RingDashed(bot, Quaternion.Euler(90, 0, 0), _dashStyle, scale);
    17.    }
    18. }
     
  50. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,266
    • The large hue ring is a closed polyline arranged in a circle, where the hue of each point is set to a fully saturated value, going all the way around the hue circle
    • The center rectangle is a Quad shape, with a color set in each color
    • The border of the quad is a rectangle border
    • The drop shadow of the polyline ring are made of Disc/Rings with gradients


    Your code looks fine and should work fine! I've recently fixed an issue with instancing in Shapes, which would cause issues like this. I imagine this will likely be fixed in the coming version. In the meantime, you can disable GPU instancing in the Shapes settings, which might help it stop flickering for now :)
     
unityunity