Hi.
On mobile UMG is extremely dark. To the point where it does not look anything like what you see in the ES2 Previewer.
Any idea how this can be worked around, or fixed?
As a test i added some post process volumes in the level. It has no effect. This seems to be stricly UMG on Mobile problems
Howdy Crocopede,
Thank you for reporting this issue. Would you be able to attach your DXdiag and your project log files to this post? What device are you using to deploy to and what OS is that device on? Any additional information would be greatly appreciated.
Thanks and have a great day!
Hi Sean.
Thank you. I will be back at the office in a few hours and will then be able to provide the logs.
Deploying to iphone 5c ios 8.0.2
Will test an android as well as soon as im back.
Hi.
Attached the logs and DXDiag.
Please let me know if there is any other logs outstanding.
I have been staring at the screen the past hour waiting for the game to launch for android to comment if it works on android or not. But here are the logs so long.
I will post once i know if it occurs on android as well.
Hey Crocopede,
I have just ran a couple tests to see if I could run across the error that you were seeing but i was unsuccessful. Would you be able to share your project or the asset with me so that I may be able to recreate the issue? You can send it to me privately through the forums if you would like. Here is a link to my page: https://forums.unrealengine.com/member.php?4890-Sean-Gribbin.
If you don’t wish to share your project, is there a step by step way that I may be able to reproduce this issue?
Also, be sure to let me know how the Android test goes with the UMG.
Thanks!
Hi.
Sent you the link.
The widgets in question is basically all widgets except the main menu one you can ignore.
Widgets are created and added to viewport in the HUD Abduction BP.
Load Umap Level 1. From there you can hit play… press the pause button on top right corner. This brings up the widget Pause menu.
On ES2 preview it is all nice. But once you launch it to IOS it goes haywire.
Please keep in mind that this project was to learn how to use ue4 and my methods of doing things might be extremely unoptimized and all over the place.
Still learning. In other words… please be gentle when you see the mess.
The android version im still trying to test. For some reason after the 4.5 switch over, my android build locks up and pauses for 2 hours on one section.
I will leave it overnight to cook and hopefully by tomorrow it will finish so i can test on android.
Hi.
No luck yet on android build. Still stuck in the same section. Will try and migrate to a new project and see if i can then build Android
Howdy Crocopede,
Thank you for reporting this issue and sharing your project. I have been able to see the darkness of the UMG once it was deployed to a mobile device. I have written up TTP# 349196 and placed this issue into our bug database so that it may be fixed in a future release.
Thanks again and have a great day!
Thank you for taking a look and submitting the bug report.
Just a question… what are the chances of it being fixed with the final 4.5 release?
I am trying to establish a time frame to determine if i should port back the old HUD system i had or wait for the fix as im almost ready to launch my game App Store and Google Play.
I have tested this issue on our internal build here and it has not been resolved at this time. With the deadline for 4.5 rapidly approaching, unfortunately, this issue will not resolved be in the release. Since you are almost ready to ship your project, I would highly recommend that you port back to the old HUD system for the time being. UMG is still in its experimental phase of development so it is being worked on every day.
Thanks!
Is this in the review? Because I cannot reproduce it in the latest stable.
Hey ,
I tested this issue on our latest internal build an the issue is still occurring. I have been using the users project when testing this issue.
Thanks and have a great day!
Hi. Cool no issues. Thanks for letting me know.
Will revert to the old hud.
Keep up the good work.
Hi.
I just wanted to add here in case someone else does have this issue. I noticed if i increase the Value of the color by 0.3 it more closely resembles what i initially wanted.
It is not ideal but basically choose your color, then just add .3 to the value and it looks on mobile like it was intended to.
Now i can keep my HUD using UMG. Yay!
The picture was taken directly from the Iphone. Just added the color picker in PS to demonstrate which value.
It’s not mobile that is broken, it’s the desktop build. It’s incorrectly applying sRGB adjustments to the colors in the color picker. It’s very easy to confirm:
- Produce a solid color image in some image editor like MS Paint
- Import into UE4 and place it into UMG as an image widget
- Add an empty (white) image widget
- Try tinting the white image to match the imported image.
You just can’t. The color picker actually reads the correct color (as displayed in the Hex field), but it thinks the color is linear and tries to gamma-correct it. If you disable the sRGB preview flag, you’ll see the correct color, but UMG will use the wrong color instead.
Here’s a screenshot showing the problem:
I picked the red surrounding the heart to tint the white background. It picked the [correct color][2], but displays it with incorrect gamma.
Disabling the sRGB preview displays the correct color in the picker window, but it doesn’t make UMG use it correctly.
I found out why it’s happening and I have a workaround.
It seems that Slate writes linear color values to the vertices of the geometry used to render its components to tint them. On desktop, it’s not a problem because both textures and the framebuffer are marked as sRGB. This means the GPU automatically converts texture samples from sRGB to linear and converts the fragment shader output color from linear to sRGB (if not using HDR, in which case UE4 does this using a tonemap shader).
However, it seems that due to spotty driver support, hardware support for sRGB textures and framebuffers is disabled in mobile. Non-tinted Slate elements display fine, because the texture colors will simply pass-through to the framebuffer, but tinted elements will use the linear color, which is darker than the sRGB color.
The workaround involves modifying the file Engine/Shaders/SlateElementPixelShader.usf:
First, add this:
#if ES2_PROFILE || ES3_1_PROFILE
// gamma correct
VIn.Color.rgb = pow(VIn.Color.rgb,InvDisplayGamma);
#endif
Before this:
float4 OutColor;
#if SHADER_TYPE == ST_Default
OutColor = GetDefaultElementColor( VIn );
#elif SHADER_TYPE == ST_Border
OutColor = GetBorderElementColor( VIn );
#elif SHADER_TYPE == ST_Font
OutColor = GetFontElementColor( VIn );
#else
OutColor = GetLineSegmentElementColor( VIn );
#endif
This should convert the linear vertex color to sRGB before it’s used to tint the widget.
There’s another glitch where mobile preview has increased gamma for all slate components. To make mobile preview match the real device, change this:
Change this block:
#if !COMPILER_GLSL_ES2
// gamma correct
OutColor.rgb = pow(OutColor.rgb,InvDisplayGamma);
#endif
To this:
#if !ES2_PROFILE && !ES3_1_PROFILE
// gamma correct
OutColor.rgb = pow(OutColor.rgb,InvDisplayGamma);
#endif
With that I get the same results on PIE, mobile preview and iOS. The color picker picking wrong colors is a completely unrelated bug, but at least the color it displays should be the color you see in your widgets.
Thanks for the information .
I will be sure to include this workaround in the Bug report. Thanks and have a great day!
It still occurs on 4.6.1. How can I resolve this?
Hey ,
Than you for reporting that this is still occurring. Would you be able to share a couple screen shots of what you are currently seeing? Also, Would there be a quick setup that I could use to test this issue internally?
Any additional information would be greatly appreciated.
Thanks and have a great day!