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

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.

 

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.

 

Sorry, I'm not familiar with AE at all. So, can't say I can do that.

 

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.

 

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.

 

bunch of buttons made with the mpuikit and animated with unity animation. It also works with dotween!

 

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?

 

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.

 

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

 

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.

 

I already own two other alternatives, but this one looks really promising, so I'll be watching this thread

 

Hi, @fakegood
I have run a quick test on the layering you suggested and it works fine! Under the main 'Canvas', the parent object of each group 'Background', 'Particles', 'Text', 'Foreground' has a canvas component attached to override the sorting.y

 

that's awesome! thanks for the follow up!

 

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.

 

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:

Also, would you have any plans to include a shine/gloss effect? Like so:

 

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.

 

Ahh alright cool cool

 

Seems to be great. Have you set a release date?

 

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.

 

Great! Great! I can't wait to test this.

 

Yes yes, me too!

 

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

 

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):



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:



Thanks mate!

 

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.

 

Ahh alright awesome! Thank you!

 

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.

 

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.

 

Hello @mrTigr3o
I am sorry for the issues. I am looking into these and will keep you updated here.

 

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!

 

@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.

 

I have fixed the issue that's causing the flood of warnings. The next update will contain the fix.

 

Awesome! Looking forward!

 

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.

 

@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.

 

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.

 

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.


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

 

Ok, good news for the incoming update.

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

 

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

 

A new version 0.88 is live now.

Spoiler: Changelog

[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

 

This looks nice but there are already such assets around - see https://assetstore.unity.com/packages/tools/gui/procedural-ui-image-52200
Unless someone benchmarks all these assets and tests usability it would be hard to choose a new one!

 

In your screenshots, "Procedural Shapes-Rectangle/Stepped Gradient"... Is it possible to animate the direction / rotation of the gradient?

 

Yes

 

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.

 

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

 

A new version 0.89 is live now.

Spoiler: Changelog

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

 

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?

 

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

 

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?

 

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.

 

Hello @ZeSunshine
Adding this line in MPImage.cs script fixed the problem for me. can you please try this and confirm?