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

MPImage.cs mistake set OutlineWidth doesn't contain value. Fix It later )

 

Thank you for pointing it out. It's already on the way to the next update. Cheers

 

it doesnt seem to work on my side (both fixes)

 

Well, then I'll keep looking into it. If you can give me some more details that will help a lot. Is the image object inside any layout group? Are you using prefab? How is the image anchored? If possible, you can send me a sample project to reproduce the issue.

 

Hi, just purchased (10/7/20 on 2019.4.1)
Is there an issue with MPUI and runtime generation from prefabs?
I've got a scroll list that's generated at runtime.
When the scroller's generated the MP images are also generated (I can see them in the editor hierarchy) but they're not rendered to screen .. but when I click an MP image in the editor hierarchy all render and display as they should.

 

Hello, I just uploaded an update (v0.90) and it should fix this issue. The update will be live anytime soon. If it's not fixed after updating, let me know, I'll look into it again.

 

A new version 0.90 is live now.

Spoiler: Changelog

[Bug Fixes]
- Canvas Group fade does not affect Outline Color
- Error when MPImage is placed outside of a canvas
- Material Mode changes done in prefab mode does not persist
- StrokeWidth, OutlineWidth property setters do not work

[Improvements]
- Support for Unity 2019.1 and later

 

Resolved! Nice one Isfaq.
MPUI's extra awesome when teamed up with ECHO17's Enhanced Scroller asset

 

Hi. I just got a new update.
In my case, the above contents are not fixed.
And, the alpha of Outline Color is affecting the alpha value of MPImage. I need you to check this out, too. (ver 2020.1.0f1)

I am sorry that I am not good at English.

 

Hey lim - is your screen grab the Scene or Game view? and are the UI (Form) field assets from prefabs or dropped directly into an Editor canvas?

 

The screen is a game view.
And the assets were created by Prefab at runtime.

 

Have you got a grab of what the design is meant to look like?

 

Hi, I have identified the bug. I'll fix it as soon as I can.

 

Here is a quick fix. Change the line 533 and 561 with the following line in 'MPImage.shader' file

color = half4(lerp(_OutlineColor.rgb, color.rgb, lerpFac), lerp(_OutlineColor.a * color.a, color.a, lerpFac));

This fix will be available in the next update.

 

Hi @Isfaq,

I found a bug:
The gradient system isn't compatible with Unity masks. As you can see on the picture, an MPImage that is under a mask and has a gradient is always invisible. It reappears as soon as you disable the gradient of the MPImage.



Do you think you can do something about it?
Thank you.

 

I could recreate the issue. Looks like Unity does not allow shader vector arrays when inside a mask. Luckily I found a workaround and it works. The fix will be available in the next update.
Thank you for pointing it out.

 

Perfect !!
When are you gonna release the next update?

 

Within this week.

 

A new version 0.91 is live now.

Spoiler: Changelog

[Bug Fixes]
- Linear/Radial Gradient does not work inside Unity mask
- Outline Color alpha affects Base Color alpha

 

Hi,

first of all thanks for your great asset. I really like all the functionality and I already changed some of my UI using your asset. Now I was running the game on my iPhone and got some weird behavior that isn't occurring in the editor:
- One really large Circle that is only partially shown on screen isn't shown at all. Maybe there is some clipping occurring?
- I created a back-Button by using a rounded hexagon. The right corner is shifted inwards, so it seems both adjacent edges are one vertical edge. On my mobile only arcs of the rounded corners are shown.

Do you have any idea? Whats the difference between the shaders for the editor and metal on my mobile?

 

Hi, I have recreated the issues you have mentioned and working on it. Hopefully it will be fixed soon. I’ll post any updates I come up with here.

 

If I can help you with anything - down to the coding level - please feel free to contact me.

I really like your asset and I would be happy to help you with this.

 

Thanks a lot for the kind offer. That's very nice of you. However, I seem to have fixed the issue and now it's not running fine on iPhone X. I'll be running more tests on some other iOS and Android devices and finalize for the next update. The problem was occurring due to some precision issues in the shader. I had to use float for some data types but I used half which worked in editor but causing problems in mobile builds in some specific scenarios.

While working on this, I found another bug with Radial gradient. It often throws error while building. It will also be fixed in the next update.

 

Did you think about letting us define a separate gradient for the outline/stroke? I've got a button that has another gradient on the online. Currently I'm working with two separate MPIMages laying above each other.

Another feature-request would be letting us to define a fixed gradient instead of an overlay. In Unity I've got the possibility to switch between both. In a previous version the fixed gradient unfortunately didn't work for me.

But, again: Great asset.

 

Just updated to version 0.91, using 2020.1.2 and getting an error in 'MPUI/ Procedural Sprite' shader, when the gradient type is set to 'Corner' - this results in a pink image.

You also have a missing class on the MainCamera in your demo scene.

 

I haven't thought about it due to complexity. But I will try it out.

Sorry I did not quite understand the issue.

Thanks for letting me know, however, it's already fixed and will be available in the next update in 2-3 days.

 

I'm just playing around atm, learning how to manipulate MPUI with DOTween (for animations/ clicks/ over states/ etc).

I'm trying to tween a gradient, but I'm struggling to get this working. Do I have to get the material and tween the colour(s) on that? I think I get this from GradientEffect, but it's always returning null (my MPUI image material is set to dynamic atm).

 

Here are two ways you can animate a gradient.

Code (CSharp):

1.  
2. private void Start()
3. {
4.     MPImage image = GetComponent<MPImage>();
5.     GradientEffect gradientEffect = image.GradientEffect;
6.     Gradient gradient = gradientEffect.Gradient;
7.     GradientColorKey[] colorKeys = gradient.colorKeys;
8.    
9.     // 1. Tweening one color of the gradient
10.     DOTween
11.         .To(() => colorKeys[0].color, col => colorKeys[0].color = col,
12.             Color.cyan, 2f).SetEase(Ease.Flash)
13.         .OnUpdate(() => {
14.             gradient.colorKeys = colorKeys;
15.             gradientEffect.Gradient = gradient;
16.             image.GradientEffect = gradientEffect; });
17.  
18.     // 2. Tweening all colors of the gradient using Dotween Sequence
19.     Sequence sequence = DOTween.Sequence();
20.     for (int i = 0; i < colorKeys.Length; i++)
21.     {
22.         int index = i;
23.         Tween tween = DOTween
24.             .To(() => colorKeys[index].color, col => colorKeys[index].color = col,
25.                 Random.ColorHSV(), 2f).SetEase(Ease.Linear);
26.         sequence.Join(tween);
27.     }
28.  
29.     sequence.OnUpdate(() =>
30.     {
31.         gradient.colorKeys = colorKeys;
32.         gradientEffect.Gradient = gradient;
33.         image.GradientEffect = gradientEffect;
34.     });
35.     sequence.SetDelay(3f);
36.     sequence.Play();
37. }
38.  

 

A new version 0.92 is live now.

Spoiler: Changelog

[Bug Fixes]
- Error while building player due to Radial Gradient
- Shader error on Corner Gradient
- Some shapes don't not appear on mobile builds

 

Hi -- just purchased this asset and started fooling around with it. I tried sprinkling some MPUI objects with some existing UI components. I have a standard routine that zooms UI components out by scaling. However I discovered the MPUI objects would not appear unless I switch their gameobjects on and off in the code. Here's my coroutine that does the scaling, with my kludgey fix:

Code (CSharp):

1. IEnumerator ScaleModalIn(Transform modal)
2.     {
3.         var mpimages = modal.gameObject.GetComponentsInChildren<MPUIKIT.MPImage>();
4.         float t = 0;
5.         while (t < 1.0f)
6.         {
7.             yield return new WaitForEndOfFrame();
8.             t += Time.deltaTime;
9.             modal.localScale = Vector3.one * modalShowCurve.Evaluate(t);
10.             if (modalShowCurve.Evaluate(t) > .25f)
11.             {
12.                 for (int i = 0; i < mpimages.Length; i++)
13.                 {
14.                     mpimages[i].gameObject.SetActive(false);
15.                     mpimages[i].gameObject.SetActive(true);
16.                 }
17.             }
18.         }
19.         modalButtonClicked = false;
20.         afterModalOpen();
21.     }

Now I've since discovered I don't have to do this for each MPUI object -- it's enough to simply activate and deactivate the parent gameobject. But my question is -- is this expected behavior and what is best practice when scaling MPUI objects in code? Your online documentation ends halfway thought gradient shading and never gets to the good stuff ;-) (scripting reference, best practices, etc.)

Thanks,

--Bo

 

Any update on getting skewed images to work? Been looking for an asset that can make this happen since forever. Mostly all the updates have been bug fixes though.

 

Hello enjoying the asset! wondering if you could add cut off edges to it. Basically like the corner radius just a different type.

Also is there any way to use a shader - e.g. Shader Graph shader with it?

 

Hi @forzabo
This is not an expected behavior. I have to check this out and see what’s going wrong. I will try with your code and let you know as soon as I have any update regarding this.

These informations will be added soon. I am currently collecting feedbacks and fixing bugs. I will write a comprehensive documentation along with the first stable and it will include best practices, faqs, scripting reference and guidelines etc.

 

I am prioritizing bug fixes at this moment. However, skewed image feature is in progress now. Some scaling issues needs to be fixed for proper skewing effect. Hopefully it will be added soon.

 

This feature is planned along with some other style of corners. It will be only available for the rectangle shape. I haven’t started working on it yet. But it will be added right after the skewed image feature.

 

Hi @Isfaq -- Here's some some more complete but still minimal code with a few comments to show you what I'm doing:

Code (CSharp):

1.  
2.  
3. public AnimationCurve modalShowCurve;
4. public void Foo()
5.     {
6.         infoModal.SetActive(true); //infoModal is gameobject with children containing various UI elements -- text, images, etc
7.         infoModal.transform.localScale = Vector3.zero;
8.         StartCoroutine(ScaleModalIn(infoModal.transform));
9.     }
10.  
11.   IEnumerator ScaleModalIn(Transform modal)
12.     {
13.         float t = 0;
14.         while (t < 1.0f)
15.         {
16.             yield return new WaitForEndOfFrame();
17.             t += Time.deltaTime;
18.             modal.localScale = Vector3.one * modalShowCurve.Evaluate(t);
19.  
20.             modal.gameObject.SetActive(false); //Kludge to force MPImage to render
21.             modal.gameObject.SetActive(true); //
22.  
23.         }
24.         modalButtonClicked = false;
25.         afterModalOpen();
26.     }
27.  
28.  

Ah, ok -- I thought it might have been accidentally truncated.

 

Hey, I really like your asset pack. I've ran into a few issues while using it however, when I save a prefab with some procedural ui inside, exit the prefab then go back into it it displays as a square and wont update unless I click on the MPUI image in the inspector. It seems this issue persists when prefabs are instantiated while the game is running too.

The other issue is I can't seem to get any ui element created with MPUI to display correctly on IOS builds. I am running Unity 2019.2.9f1.

Thanks, I look forward to new updates!

 

Thanks for this awesome asset.

I have a couple of questions if you don't mind.

How do you make a button have a different color when you click/hover it? I don't see any options for that.

And if you create a button that has a shadow image, a button fill image with gradient, an outline image and bottom shadow image, plus some text and small image above it, will it have less draw calls and be easier on performance than just to use a big image for it?

Thanks.

 

Found a couple of minor bugs in the latest version (0.92.0), I'm using 2020.1.2.

- Use right mouse click to add MPUImage to the scene, press ctrl+Z -> MPUImage is still there.

- Add a sprite to the sprite element -> set aspect ratio button doesn't appear until you click off and back onto the MPUImage game object.

- Save the scene -> use right mouse click to add MPUImage to the scene -> scene is not set as dirty.

 

One simple way to accomplish this is to use unity's button script with color transition and make the MPImage the target (instead of the typical unity ui image):

 

Thanks forzabo, what if the button consists of several MPUimages though? (goes with my second question above if you create a button that has several MPUImages overlayed to build a button).

Like this:

 

In that case, the easy way to do this would be to use animation transition: make the MPUImage components (and texts, too if you want to have those do stuff on transition) children of the button component, change the button transition type to animation, and go crazy

 

Thanks forzabo!

What about my question regarding the performance of a setup like this compared to just use a sprite with high resolution?

 

I don't know, I'm curious too -- hopefully @Isfaq can shed some light with some benchmarking or something.

 

Hello @el_Guero, Sorry for replying late. Thank you Forzabo for your helpful replies.
About the performance, A single sprite for the button will be more performant than one or multiple MPImage. Due to the shape and other calculations done in the GPU, you might have lower fps on weaker mobile GPUs if you have a lot of MPImage on the screen. MPImage is intended to be used for conveniently creating UI elements as well as animating them at runtime, not using it for everything. Hope it answers your question.

 

I will look into this issue asap. Thanks for letting me know.

I could not find any irregularities on ios build yet, If you could describe how the MPImages get displayed on iOS build, that would be very helpful.

 

Thank you very much for reporting the bugs. I will look into these as soon as I can.

 

Thanks for the reply. This kinda makes me wondering now though if I should have even bothered with MPUIKit. I just finished setting up my entire UI with MPUIKit graphics because I thought it would perform better than sprites. I am not really interested in animating them at runtime either so...
My buttons are now 4 MPUIKit images + text. If one alone will have an impact compared to a sprite, then this is definitely not going to work.

Do you do refunds?

 

If it’s not working for you, email me your invoice. I did include how mpuikit works in the documentation as well as in the store description. I’ll make sure it’s more clear.