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

Thank you for looking into the issue. It's very odd it seems that anything I create with MPUI just doesn't display when on IOS. I will do a few more tests just to make sure.

 

iOS Has some issues with larger Circles and Circles within prefabs that did not have textcoords. I still haven't figured out the perfect solution however look there.

Issue does not occur in Editor has to be built to iOS Device.

Simple (Image 3)
Works at Radius: 265.7
Breaks at around 304.9 and greater - Green square
Stroke: 42.9
Falloff: 1.7
Outline width: 26.28

Fill Vertical (Image 3)
Works at Radius: 229.6
Breaks at around 265.7 and greater - Orange square
Stroke: 30
Falloff: 0
Outline width: 0

Note a larger transform scale of 2.0 on a radius of 174 will work for the size around 304 or greater.

Editor:

iPad


iPad of Circles getting larger radius test. Results above


Editor with Orange Large Circles for Testing Scale on Transform and 174 radius

iPad of Orange Large Circles

 

Thank you very much for sharing the details. These will be very helpful for my testing. I will look into this issue.

 

Hello everyone, I have created a public board where you can check the development progress and known issues of MPUIkit.
Clickup Board : https://share.clickup.com/b/h/6-16365511-2/c6f439102846193

 

@Danoli3 @forzabo @neondan
Hey guys, I have fixed some of the issues you have mentioned.

1. iOS build issue : I assume this was only happening for circles. In that case, it's hopefully fixed now. Let me know if any other shapes had the same issue. In my testing, it's just the circles.

2. Scaling from code makes the MPImages disappear: in forzabo's code, you have set the scale to zero at the beginning of the game that caused the pixelscale to be calculated incorrectly. I have fixed it and it will be fine now.

3. Falloff changes when Screen Resolution changes

These fixes will be available in the next update by this week.

 

@Isfaq I've just been playing around with this asset a little bit, seems pretty neat so far! I was just wondering if you'd consider adding other blend types, like Additive, Multiply, etc., and maybe HDR color support to go with it? I'd love to use this to create some glowy sci-fi style worldspace UIs!

 

Bug:
Rect2D Mask doesn't work when masking elements of MPImage. Normal Mask is fine however

 

Thanks for reporting. I have fixed it and it's ready for the next release.

I have not planned for blending modes and HDR. I am not sure about the compatibility of such a feature right now but I will look into it. HDR is probably doable, I will keep you updated here.

 

There are still some issues on iOS . MPImage's that have a sprite assigned display as just a white square. Works fine on Android

I'm using the latest version - v0.95

 

I am looking into it right away

 

Hey @Carwashh, I could not reproduce the iOS build issue in any of my iOS devices. I created a new project in Unity 2019.4.10, downloaded the MPUIKit package from the store and made a fresh build.
Can you please make sure while building for iOS, MPUIKit is properly setup? You should receive a warning in the console while entering play mode if MPUIKit is not setup.

 

A new version 0.96 is live now.

Spoiler: Changelog

[Bug Fixes]
- MPImage does not work with RectMask2d
- Prefabs and Templates doesn't work when exported for other projects

 

Apologies, it appears all the sprite references have been lost on my Mac.

 

Hey op, this asset has proven to be very helpful in my project and id like to thank you for that. a cool feature id love to see integrated in the future is a blur effect with controllable levels, have the mpimage rect blur anything behind it

 

Hi every one!
Any chance it's gonna work with textures (RawImage support)?
At least some basic/limited functionality.

 

Hi, is there a way to uninstall MPUI from my project?

 

I'd like to program my GUI entirely in C#. The documentation for the API doesn't seem to be available on your website. Would this tool make it easier to code my GUI as opposed to using traditional drag/drop methods? Thank you in advanced.

 

worck with soft mask asset ?

 

Hi @Isfaq,

I am working on a new UI for my project, and was looking for some assets to use. It looks like your UI kit it is what I need. Can I check with you a couple of things.

Basically I am trying to achieve iOS like feel.

1. Does your UI Kit provides linear gradient with alpha?
2. Blur effect?
3. Soft shadows?

Similar to attached image

Thank you

 

Hey Artpen! I think the developer is on holidays. Thought I could help you out with your questions as I am using this asset in my project currently.

1) Yes there is a linear gradient with alpha option (See pic 1)
2) There are no blur background effects
3) There is an edge fall off effect that we can use to emulate a soft shadow effect but it will require 2 MPUI images. (See pic 2)


Pic 1:

Pic 2:

 

Thank you @Klausology.
I think it is what I need. I found another package with blur effect. But I don't think it will work with this one unfortunately. Will have to try...

https://leloctai.com/asset/translucentimage/#features

 

Oh yes I was originally planning to get this asset too for the background blur effect but scraped the plan. I am pretty sure that asset won't work with MPUI asset out of the box though.

 

Hi. Does your asset integrate with the new UI Toolkit?

 

Hello guys, apologies for replying late. I was on a vacation.

@MEEMEEMAN
MPimage does not currently support any kind of blurring.

@Azirell
Sorry, RawImage is not supported yet.

I will however keep these two features in mind. If possible after prototyping, I will add them in a future update.

@seldemirov
It's not tested for the new UI Toolkit and it most likely will not work. You can use it only in UGUI.

Thanks, @Klausology for your replies

 

Hey developer! So I have just finished testing this asset and it is really awesome. Makes me wonder how I managed to survive without it in the past. Btw, I've compiled several questions whilst testing out the asset:

1) There isn't any mention of sprite atlas being compatible with this asset in the documentation. I found out that it works with sprite atlas by trying it out of course. Mayhaps it'd be great if the documentation mentions it? Or mayhaps this is an obvious thing that I missed?

2) I think it'd be great if we are allowed to set a custom location when we create a shared material through the MPUI Inspector. Presently, it defaults to under the "assets" folder as the default location. It would definitely speed the workflow up if we could set a default custom location and change it when we want to at any time.

3) I wondered if it is possible to introduce a "sprite overlay mode"? Right now the MPUI drawn shape conforms to the sprite's shape. If we could merely overlay a sprite on top of a MPUI drawn shape, that would be really awesome.




So this pic shows the normal mode (which is how MPUI works presently with the normal white sword sprite and the pink square MPUI). I was wondering if the sprite overlay mode shown could be made possible in the future?


4) In addition to sprite overlay mode mentioned above, if said functionality could be expanded upon to have a "sprite overlay - wrap repeat mode", that would be even better, like so:





5) Also, would it be possible to have a world space sprite mode to have a sprite repeat uniformly on various MPUI images?



Here you can see the white sprite on the left, and various MPUI Squares on the right. It does not scale beautifully, unfortunately.

6) Would it also be possible to include a saturation value for us to adjust. This way we can adjust merely the saturation of the MPUI easily. (E.g. to indicate that a skill is locked or unavailable)

7) Lastly, I noticed that the raycast padding has no visible gizmos available. Turns out Unity's UI image does not have it either. According to this thread >> (https://forum.unity.com/threads/ui-image-component-raycast-padding-needs-a-gizmo.1019260/), Unity plans to add this feature I believe? Do you think you will also be adding a scene visualization after Unity adds it to their own UI Images or?


Thank you again for making really awesome assets!!!

 

You can delete the entire MPUIKit folder or you can go to graphics settings and remove the MPUI shader from the 'Always include Shaders' section.

It is not tested with softmask asset.

 

Thank you for the comprehensive suggestions.

Since MPImage is derived from Unity's default image, it does work with atlases, so I assumed it is obvious. But I will include it in the documentation anyway.

Certainly a quality of life improvement. I'll do it in a future update.

All of these seem very useful and doable features. I'll keep these in the plan.

If Unity provides the visualization, it will automatically inherit to mpImage I believe. If not I'll try to support it.

 

Ahh yes of course! It was my fault for missing this link!

Awesome awesome! Thank you very much!

 

Hey @Artpen ! Saw this free Blur UI package on reddit. Thought you might be interested in checking it out. It's URP only though

https://www.reddit.com/r/Unity3D/comments/kir3xm/free_shader_asset_ui_blur_optimised_for_mobile/

 

Hi @Isfaq ,
I've just bought your asset and exploring my UI idea. All looking great, congrats!

Unfortunately I'm not very satisfied with shadow output.
Here I'm sending you two outputs from a design app (Sketch) and your asset:

As you can see, there are strange artifacts on the corners and it doesn't looks like the shadows we're used to.
What I would expect is: Take the Built-in Shadow Component from Unity and apply blur to it. I'm not sure how difficult to do it but and that means we don't need a parent component to carry the shadow.



View attachment 763078

 

Hello, I am really sorry to say that shadows are not the intention of mpImage's falloff feature. You can achieve some type of shadows but what you are expecting is currently not possible. I agree that it's a common necessity but drawing shadows properly is pretty tricky. MPUIKit does not have any blurring functionality right now.
However, I will keep your suggestion in mind for future releases.

 

@Isfaq thanks for the reply. I understand if it's tricky.

I was exploring different shadow options on ui and found out UIEffects library has a shadow effect too.
Source code: https://github.com/mob-sakai/UIEffect/blob/upm/Scripts/UIEffect.cs

Is it possible for you to integrate this code/shader with your asset?


Edit: Never mind, it was not good too. I bought True Shadow asset for shadows. It's quite good.

 

Hi! I need a bit of direction on how to change the radius of a circle at runtime. Getting a reference to Circle and changing Radius doesn't do anything. Do I need to call some method to rebuild? Thanks!

 

Hey developer! I notice that the gradient color does not translate correctly in linear space. Hope you will be able to create a fix for this for future releases

Gamma gradient color working correctly:


Linear gradient color not translating correctly:

 

Hi, I have updated the documentation with scripting references. Here you can find how to change the shape values from script.

 

Thanks for reporting. I’ll take a look.

 

Hey developer, I notice that the mpui image does not update itself when changing the corner radius option from free mode to uniform mode. However, I am unsure if this is intended behaviour or not. Would you be able to verify if this is intended?

 

Hi, this is the expected behavior. It helps in case you accidentally click uniform, you don't lose the values of each independent component of that property until you make a change.

 

Ahh alright understood! Thank you!
Also, I am currently rotating the MPImage every frame using the convenient shape rotation module you have provided. Whilst it works great, there appears to be gc alloc generated every frame. Is there a way around this?

 

I'm afraid there is no other workaround than to rotate the recttransform. Each time something changes in the mpImage, it has to register for an internal UI rebuild in order for it to update, that causes the gc alloc.

 

I just bought MPUIKit and it looks great so far. This video was on the asset store when I purchased so I was hoping to get it as one of the demo models but it didn't seem to be there. Will you be releasing anytime soon? Could I get an early version of it? Many thanks. Excellent work.

 

Thank you very much. I will add the scene in the final stable release which will be very soon.

 

Is alpha cutoff for raycasting possible? I've got a circular MPUI object fit within a wide rectangular shape. It scales to match the container, but Circle > Fit mode means only a small area is actually covered with UI. The shape of the circle sometimes procedurally changes to oval with rounded corners, or square.

How do I make it so raycasts are blocked for the mouse under the visible image? I tried using alphaHitTestMinimumThreshold but that didn't work. It has to be performant, I can't do a GetPixels texture read each frame to check alpha manually.

Thank you!

 

Hi, I am not sure about the possibility yet, I am looking into this and will get back to you.

 

MPUIkit v0.97 is now available.

It introduces a new component MPImageBasic which is a simplified version of MPImage. The benefit of being simplified is it can self-manage the draw calls it needs where MPImage used to issue one draw call per Image unless a shared material is provided. Read more about the differences

The documentation is now updated and available on the website.

Additionally, Partial support of Soft Mask Asset is added (for now Unity 2019.4 LTS only).

Spoiler: ChangeLog

New Features

• MPImage Basic
• Integration with Softmask Asset

Improvements

• WebGL support
• Better Scripting API
• Ability to Choose Location for creating new material from the MPImage inspector

Changes

• No need to setup MPUIKit after importing the package.

Bug Fixes

• Falloff not working with circles on android when a larger value is provided

 

Hey,

Great update! Just updated our projects with it.

I've come across a bug, unsure if it's new or not. If you're editing a prefab and create a new MPImage (original or basic) from the right click menu, no GameObject is created and the prefab isn't set as dirty.

Repro:
- Open a prefab with UI in
- Right mouse click
- Create an MPImage (or basic)
- Inspector displays the newly created object
- Note that no new GameObejct is created in the hierarchy

 

Thanks for reporting, I have updated the package. It should be fixed in the new version along with some more fixes.

 

MPUIKit v0.98 is now available.

Spoiler: ChangeLog

Bug Fixes
- Editor was not being dirty when a new mpimage is created
- Softmask integration apply button causing shader error when clicked multiple times
- MPImageBasic was not working with rectmask2d

 

Hey, the issue isn't quite fixed.. I've done a gif this time. If no GameObject is selected when creating an MPImage, no GameObject is created.

[Edit:

I've just found where all those MPImages went, they're created in the active scene.. even though I was inside a prefab
]

 

Hey Mr. developer! I just imported a brand new MPUIkit v0.98 into a fresh project, and when I open up the MPUIKit's utility panel, i receive these warnings and errors. They don't appear to be really huge issues though as they are not interfering with any actual project work. Thought you might be interested to know of it (See SS1)


Also, regarding the GC issue I brought up a few posts earlier. I tried to deep profile to figure out where the gc sources are coming from, and I've noticed that most of them are a result of string concat allocations, and that most of them come from the gradienteffect script. So I have attempted to modify the script somewhat to reduce unnecessary gc allocations like so:



Such modifications do reduce the gc allocations substantially and I wonder if you might consider making changes to reduce gc allocations when possible? Do feel free to disregard this request if you already have plans to do an overhaul on gc allocations in the subsequent updates of course!

I was also going to ask if it were possible to introduce a vertex gradient instead, like that of textmeshpro. It would reduce additional draw calls for sure. Turns out you already have plans to do that in your backlog. Definitely excited for that feature to be included!