Search Unity

  1. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice

Assets [Released] Advanced Procedural UI Generation! Create, modify, animate UI, even at runtime

Discussion in 'Works In Progress' started by Isfaq, Mar 14, 2020.

  1. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    MPUI Kit
    Create an infinite number of shapes for UI without any sprite assets, edit or animate at runtime with MPUI Kit for UGUI

    AssetStore | Website | Documentation | Follow Development


    How it works: MPUIKit's Image component procedurally generates basic shapes with given parameter and shade with color and gradient that you can modify at runtime. It is built on top of Unity's native UIBehaviour, thus all the UGUI functionalities are intact.

    Procedural Shapes:
    1. Circle
    2. Triangle
    3. Rectangle
    4. Pentagon
    5. Hexagon
    6. N-Star Polygon
    Customizability of the shapes:
    • Modify corner radiuses independently
    • Fill or Stroke
    • Outline
    • Falloff distance (Creates a fake Antialiasing effect)
    • Shading Color or 3 types of Gradient
    • Transparency
    More Features:
    • Shared material and batching
    • Shadow using Falloff
    • Shape rotation
    • Support for flipping shapes Horizontally and vertically
    • Along with shapes, you can add a sprite
    • Image fill mode: vertical, horizontal, radial
    • Works with Dotween
    • Supports Unity Mask and Layout







    Over the coming weeks and months, I will be updating more about the progress and post more information on this thread.
    Please let me know if you have any questions or suggestions, and I look forward to sharing more progress with you.

     
    Last edited: Oct 9, 2020
  2. StevenB2

    StevenB2

    Joined:
    Mar 17, 2014
    Posts:
    3
    Any chance something like this might be able to import animation in a similar style to AE2Unity? Would love to bridge the gap for our motion graphics artists to import their work more directly into unity.
     
  3. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    Sorry, I'm not familiar with AE at all. So, can't say I can do that.
     
  4. tahir_ali

    tahir_ali

    Joined:
    Jan 6, 2018
    Posts:
    88
    Price is a bit high. Procedural UI + Gradent Color both are available on asset store price not more than $15. If you want to compete put it on sale at start for $10 and original 15 or 20. Just my opinion. Although it feels like your asset has more detail as compare to other available assets.
     
  5. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    Hello, Thank you for your interest and opinion. As you can see, with this tool you can create more shapes than any of those you've mentioned. There is more to it. I have more things in my pipeline and I believe it's worth the price I have planned. I don't want to undercut other assets in the store. If someone needs less, they can buy other assets at a lower price and that's completely fine. But for people who need more features and performance, they can try to spend a bit more.

    For the beta release, I will be pricing the package pretty low. I hope to collect feedback from the beta users and opinions from people in the forum or twitter and make the package better. After the production version's release, the price will be higher and people who have already purchased it will get the update for free.
     
  6. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    bunch of buttons made with the mpuikit and animated with unity animation. It also works with dotween!
     
    tahir_ali likes this.
  7. fakegood

    fakegood

    Joined:
    Oct 11, 2013
    Posts:
    29
    Hello, I would like to know can those shapes be created in runtime?
    also, can those generated shapes added into Sprite Atlas and be loaded dynamically?
     
  8. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    Hi, The shapes can be created and modified at runtime. Since these are procedural shapes and not sprite assets, they cannot be added to sprite atlas. The use of the sprite atlas in general is to reduce drawcalls. These shapes need different techniques to manage drawcalls. It is possible to draw similar looking multiple shapes in one drawcall. I will be writing all about it in the documentation.
     
  9. fakegood

    fakegood

    Joined:
    Oct 11, 2013
    Posts:
    29
    yeah you are right. There are not much budget on drawcalls if the game is targeted for mobile.

    Also, will it be working with Unity's default Mask components?
    and is it possible to layer a particle system in between a background sprite, text and a foreground sprite?

    - background
    - particle system
    - text
    - foreground
     
  10. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    It works with unity’s mask component. I haven’t tested the layers with particles. But since my MPImage component extends the unity ui Image component and keeps the fundamental characteristics intact, that type of layering should work fine. I’ll test it shortly.
     
    fakegood likes this.
  11. daville

    daville

    Joined:
    Aug 5, 2012
    Posts:
    281
    I already own two other alternatives, but this one looks really promising, so I'll be watching this thread :)
     
    Isfaq likes this.
  12. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    Hi, @fakegood
    I have run a quick test on the layering you suggested and it works fine! upload_2020-5-6_5-22-24.png Under the main 'Canvas', the parent object of each group 'Background', 'Particles', 'Text', 'Foreground' has a canvas component attached to override the sorting.y
     
    Last edited: May 6, 2020
    fakegood likes this.
  13. fakegood

    fakegood

    Joined:
    Oct 11, 2013
    Posts:
    29
    that's awesome! thanks for the follow up! :)
     
    Isfaq likes this.
  14. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    New features have been added to MPImage component. It is now possible to rotate and flip shapes without rotating the RectTransform. Often it's not possible to rotate the RectTransform due to UI Layout constraints or the project needs. The ability to do so locally will be helpful for animations and more.
    There are two modes for shape rotation. 'Free' and 'Constrained'. In free mode, you can rotate the shape to any arbitrary angle. For images whose width and height are the same will have no problem with this mode but for the other, it may result in the shapes to get clipped. That's where constrained mode should be used. It only lets you rotate the shape in right angles.
    On top of Rotation, shapes can be flipped horizontally or vertically or both.
    Rotation of the shape is local and affects the shape only. So you can rotate the gradient independently.
    MPImage component also supports sprite to be applied along with a procedural shape and gradient.

     
    tahir_ali and Klausology like this.
  15. Klausology

    Klausology

    Joined:
    Aug 29, 2017
    Posts:
    40
    Oof, the ability to rotate and flip shapes is a nice touch! Might I ask if it is possible to create an outline but only on one side of the shape (without creating another shape)? Like so: Button1.png

    Also, would you have any plans to include a shine/gloss effect? Like so: Button2.png
     
  16. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    No, this is not possible without a separate image.

    Yes, I do have plans to add more effects and shine/gloss is one of them.
     
  17. Klausology

    Klausology

    Joined:
    Aug 29, 2017
    Posts:
    40
    Ahh alright cool cool
     
  18. mrTigr3o

    mrTigr3o

    Joined:
    Dec 30, 2019
    Posts:
    9
    Seems to be great. Have you set a release date?
     
  19. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    It's currently in review. As soon the review is done, I will release it. I hope by next week it will be available in the store.
     
  20. mrTigr3o

    mrTigr3o

    Joined:
    Dec 30, 2019
    Posts:
    9
    Great! Great! I can't wait to test this. ;)
     
  21. Klausology

    Klausology

    Joined:
    Aug 29, 2017
    Posts:
    40
    Yes yes, me too!
     
  22. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    MPUIkit is now available in the AssetStore for $21.90! Price is reduced (40% Off) for early beta users.
    Assetstore Link

    Please expect bugs and I appreciate your support and patience. I am actively working on this project and your feedback/bug reports will definitely be prioritized for the next updates. Thanks :)
     
  23. Klausology

    Klausology

    Joined:
    Aug 29, 2017
    Posts:
    40
    Hey mate! I just got your asset, was fooling around for a bit. Met with some warnings, mayhaps you could take a look?


    When I am trying to use the MPUIImage with a shared material, my console is flooded with this warning (but only if I have the gradient module enabled. Warnings cease if I disable the gradient module): warningIssue.png



    I am also trying to get a skewed image to work, but I am unsure yet if it is possible. Could you let me know if a skewed image like this would be possible:

    skewedImage.png

    Thanks mate!
     
  24. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    Thank you very much @Klausology
    I will surely look into this.

    Skewed shapes/images are still not supported but I'm adding it to the feature list for a future update.
     
  25. Klausology

    Klausology

    Joined:
    Aug 29, 2017
    Posts:
    40
    Ahh alright awesome! Thank you!
     
    Isfaq likes this.
  26. mrTigr3o

    mrTigr3o

    Joined:
    Dec 30, 2019
    Posts:
    9
    Thank you for this asset. Really nice.

    I found two little bugs:
    1. When you select two GameObjects that each have a MPImage component, the "stroke"/"outline witdh" and "Falloff" values are overwritten on the second MPImage by the first one.
    2. "Stroke"/ "Outline Width" does not work with anchors. (remains stuck at 0)

    I wasn't sure where to submit these bugs. Feel free to tell me if you'd rather have the bugs brought to you somewhere else than here.
     
  27. mrTigr3o

    mrTigr3o

    Joined:
    Dec 30, 2019
    Posts:
    9
    Somes more annoying bugs :
    3. Do not compile on Android platform : Assets\Standard Assets\MPUIKit\Runtime\Scripts\MPImage.cs(400,33): error CS0115: 'MPImage.Reset()': no suitable method found to override

    4. Some serialized values ( in MPImage component) are randomly reset. (I haven't figured out when yet.). For exemple, sometimes, the radius of some of my images is reset.
     
  28. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    Hello @mrTigr3o
    I am sorry for the issues. I am looking into these and will keep you updated here.
     
  29. mrTigr3o

    mrTigr3o

    Joined:
    Dec 30, 2019
    Posts:
    9
    Don't worry, it wouldn't be a Beta version if it didn't contain bugs.

    For point 4, I think I understand what's going on. In the Rectangle.cs file, the Vector4 m_CornerRaduis is clamped with the dimensions of the RectTransform. This sounds logical, but on some components like the FillRect of a slider,the problem appears because the dimensions on RectTransform seems to be calculated too late, and are equal to 0 at the time for the radius is updated. To solve the problem temporarily, I removed the "Clamp".

    Good luck!
     
  30. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    @mrTigr3o
    I have fixed Bug 1 and 3. I could reproduce bug 4 and what you said seems to be the reason. I'll have to find a better way to fix this.
    And bug 2, I did not quite understand the situation. did you mean that changing anchor of the recttransform resets the value of stroke.outline? I could not reproduce this. But I found something similar to bug 4. If I duplicate an image that is inside of a grid layout, the new duplicated image's stroke resets to 0.
     
  31. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    I have fixed the issue that's causing the flood of warnings. The next update will contain the fix.
     
  32. Klausology

    Klausology

    Joined:
    Aug 29, 2017
    Posts:
    40
    Awesome! Looking forward!
     
    Isfaq likes this.
  33. mrTigr3o

    mrTigr3o

    Joined:
    Dec 30, 2019
    Posts:
    9
    Good news for the fixes !

    To reproduce the bug 2 :
    1. Create one MPImage
    2. Go to the rectTransform of the gameObject
    3. Set values X=0 and Y=0 to anchorMin and X=1 and Y=1 to anchorMax and left/top/right/bottom to 0
    4. Go back to the MPImage component
    5. Stroke and OutlineWidth parameters is locked to 0.
     
  34. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    @mrTigr3o
    I could reproduce both bugs 2 and 4. They were caused by an unexpected change in RectTransform's size. When entered in play mode, on the first frame rectTransform.sizeDelta/rectTransform.rect.size returns a zero vector and on that frame, all the variables in MPImage that are clamped using the rectTransform's size get reset to 0. I could not find any workaround to this weird behavior, so I had to get rid of clamping the values using rectTransform's size. Luckily, it does not break anything in the shader and everything is perfectly usable.

    With all these bugs fixed and a couple of other improvements, I will be uploading a new version within 2-3 days.
     
  35. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    509
    Hi, I'm interested in this asset. I was wondering if it's possible to have a rectangle with only one corner with a straight cut (not rounded) where we can specify the "radius" of that straight cut. Also, two corners with straight cuts, for example, bottom left and top right, giving 45 degree angles. Possibly setting even the angle of those cuts, though that's not as important.

    In all the promo pics, I'm only seeing these cuts both on one side, where they connect at the mid point. To be more specific: In your "Procedural Shapes - Rectangles" image, to the right of middle you have a rectangle with a bluish outline that has rounded corners in the bottom left and top right. I'm looking for that, except with straight cut corners rather than rounded, to see if that's possible. Thanks.
     
  36. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    Hello, Currently it is not possible to achieve such a look that you are looking for. But I have plans to add corners like this for the rectangle shape initially and later others if possible. I think these will help you to create what you are talking about.
    upload_2020-7-13_14-4-12.png

    However, I am currently focused on making the existing feature stable. So, You can expect this sometime after the stable release.
     
    Korindian likes this.
  37. mrTigr3o

    mrTigr3o

    Joined:
    Dec 30, 2019
    Posts:
    9
    Ok, good news for the incoming update.

    For the clamped variables, maybe just clamp when changed by the user himself ?
     
  38. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    I suppose I could do that. It will only work on editor though. If you change the values from a script, it won't be clamped. I think still its an improvement. I will add it in the next update. Thanks :)
     
  39. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    A new version 0.88 is live now.

    [Bug fixes]
    - Compilation Error on Build
    - Some serialized values of MPImage component get overridden when multiple objects are selected
    - Stroke Width, Outline Width gets stuck at 0 when anchors set to stretched
    - Some Serialized values reset when entered play mode in the editor
    - Shader array size issue causing warnings
    - NullReferenceException when the MPImage component is reset in the editor
    - Documentation button in the MPUIkit Utility window takes to an empty webpage
    [Improvements]
    - If MPUIKit is not set up, SetupWindow popup does not show every time scripts recompile
    - A friendly warning in the console if MPUIKit is not setup on recompile
     
    Klausology likes this.
  40. andyz

    andyz

    Joined:
    Jan 5, 2010
    Posts:
    1,480
  41. L_Vi

    L_Vi

    Joined:
    Mar 5, 2015
    Posts:
    9
    In your screenshots, "Procedural Shapes-Rectangle/Stepped Gradient"... Is it possible to animate the direction / rotation of the gradient?
     
  42. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    Yes
     
  43. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    I understand your concern. Since the tool has just launched, there is no such benchmark yet. But in the asset store description, I have given how the asset works which can give you some idea about how the tool will perform. By default, it will perform similar to the tool you've mentioned but you have the option to further optimize it by batching with shared materials. Other than the better performance opportunities of mpuikit, you can also take a look at the feature set it offers and then decide if you need the extra features or not.
     
  44. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    Hello Guys, If you are getting this error when building your project -
    MPImage.cs(408,18): error CS0117: 'Image' does not contain a definition for 'Reset'

    Here is a quick fix. Remove line 408 in the MPImage.cs file and it will work as usual. This line was supposed to be removed but somehow got overlooked. It will be fixed in the next update.

    Edit: Fixed in 0.89

    upload_2020-7-23_22-19-37.png
     
    Last edited: Aug 2, 2020
  45. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    A new version 0.89 is live now.

    [Bug fixes]
    - Compilation Error on Build
    - Flip does not work in shared material mode
    - Radial Gradient offset
     
  46. ZeSunshine

    ZeSunshine

    Joined:
    May 28, 2014
    Posts:
    4
    Hi!
    I'm currently trying to use your tool, it work super well in unity but when I build for Android the shape I created doesnt appear on screen. do I need to do something special after creating and adjusting the shape?
     
  47. ZeSunshine

    ZeSunshine

    Joined:
    May 28, 2014
    Posts:
    4
    update: I tried creating the MPImage and leave it as the white square... that works, but the ring I created from a circle with 19.6 of stroke and 0.5 falloff with a 4 colors corner gradient with type filled (fill amount to 1 in the inspector) doesnt appear
     
  48. ZeSunshine

    ZeSunshine

    Joined:
    May 28, 2014
    Posts:
    4
    sorry for the spam,
    so after playing with all the settings for a while I managed to get the ring to appear, but it really doenst look like what I have in the editor. I think there might be a problem with the stroke and outline width settings, or maybe Im doing something wrong that Im not aware of?
    stroke and outline issue.PNG
     
  49. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    It appears to be a bug, I did manage to recreate this on an android build. I am working on it and will let you know what happens.
     
  50. Isfaq

    Isfaq

    Joined:
    Feb 2, 2017
    Posts:
    103
    Hello @ZeSunshine
    Adding this line in MPImage.cs script fixed the problem for me. can you please try this and confirm?

    upload_2020-8-2_15-2-57.png
     
unityunity