UMG Image Jitter

Development Rendering
1

Whenever I gradually scale up a UMG image, the image seems to jitter while it is scaling. I have no idea of why this is happening. I found this](https://answers.unrealengine.com/questions/179523/umg-movement-jitter.html) on the Answer Hub. They seem to be having a similar problem, but unfortunately it doesn’t look like they were able to figure out a solution. If anyone could help on this it would be highly appreciated. Here is an image](Imgur: The magic of the Internet)of how I am scaling the UMG image.

2

Pixel Snapping. Without it everything will have a high degree of fuzziness. We don’t have a way yet to allow it to be disabled at will on specific elements.

3

Is there a way to reduce the amount of or get rid of pixel snapping while scaling an image? I know you said we can’t disable it, but maybe there is a way to calculate the scale that doesn’t pixel snap as much.

4

No, it’s handled at the slate renderer level when we generate the vertices for the batches.

5

3D Widgets probably don’t suffer the same issue do they since they’re in the world? That *could *be a good workaround.

6

That avoids this problem, but results in a whole host of other problems. You’d be better off modding the engine and adding the functionality. It would possible hack in as another option that can be passed along with every element, or as a special option on every widget they can optionally push onto the paint stack when they are drawn.

The two places we do it are FSlateVertex’s constructor for pixel snapping the actual drawn verts, and ToSnappedRotatedRect when we’re pixel snapping the clip rect.

7

+1 for an option to disable it :slight_smile:

8

Movements of UI elements look bad in most situations (notably scrolls, or all kinds of UI transition animations).

Slate and UMG are maybe the greatest UI authoring framework out there, even for standalone applications, but I think its fair to say this UI animation jitter is a substantial issue for video games.

It would be great to see a reasonable solution to this problem to reach Epic’s quality bar we’ve been used to :slight_smile:

9

Jitter?what does it mean?

10

Also having this issue. Everything in my UI moves, so it would definitely be nice to disable pixel snapping. Stuff like slider bars go from 1 to 2 pixels, it’s beginning to be noticeable.

11

Still looks pretty bad in 2018. All animated widgets are doing ugly micro snapping and wiggling

12

Don´t understand so much having animation tools and can´t disable Pixel Snapping since is obvious animations won´t looks goods. For static elements it makes sense, for animated elements its don´t. There is any place to vote for a option like that?

13

Still no way to disable this?

14

No way to disable this yet?

15

It’s easy with custom slate widgets.

Code 
int32 SHWSimpleImage::OnPaint( const FPaintArgs& Args, const FGeometry& AllottedGeometry, const FSlateRect& MyCullingRect, FSlateWindowElementList& OutDrawElements, int32 LayerId, const FWidgetStyle& InWidgetStyle, bool bParentEnabled ) const
{
	const FSlateBrush* ImageBrush = Image.GetImage().Get();
 
	if ((ImageBrush != nullptr) && (ImageBrush->DrawAs != ESlateBrushDrawType::NoDrawType))
	{
		const bool bIsEnabled = ShouldBeEnabled(bParentEnabled);
		ESlateDrawEffect DrawEffects = bIsEnabled ? ESlateDrawEffect::None : ESlateDrawEffect::DisabledEffect;
 
		const FLinearColor FinalColorAndOpacity( InWidgetStyle.GetColorAndOpacityTint() * ColorAndOpacity.Get().GetColor(InWidgetStyle) * ImageBrush->GetTint( InWidgetStyle ) );
 
		if(bNoPixelSnapping)
		{
			DrawEffects |= ESlateDrawEffect::NoPixelSnapping;
		}
 
		FSlateDrawElement::MakeBox(OutDrawElements, LayerId, AllottedGeometry.ToPaintGeometry(), ImageBrush, DrawEffects, FinalColorAndOpacity);
	}
 
	return LayerId;
}
3 Likes
16

Thank you!

17

Hi, I really don’t know much. How did you create this content for Blueprint?

18

Using only Blueprints is not possible. You need to inherit from SImage to implement it in C++ :frowning: