What I’m trying to do with widgets is create a image the slides based on player yaw to be used as a compass tape.
I can’t figure out my next step is, to be honest i haven’t spent a lot of time with UMG so it could be something really simple, I’ve been searching all over the internet for hours now and can’t seem to make much progress. so i’m here asking for help.
I want to be able to spin the mouse left and right and have the image scroll horizontally along with my players yaw. IE. if i’m facing Bearing 0, the image is centered at 0. If i’m facing Bearing 15, image has slid to be centered at bearing 15 and so on.
My idea is that i should be able to do one image, like a measuring tape. have it fill the UMG screen from left to right (and then later I’ll mask out all but the middle area where the center is). I find when I hit the 0 bering in game, the image skips. I’m trying to find a way to tile the image horizontally so i could keep spinning to the left and it would just keep going through the tape (as both ends are connected).
maybe i’m thinking about this all wrong or maybe I’m just missing a few parts. Any help or advice is appreciated.
image below is similar to the concept i’m trying to achieve.
Thank you, that gives me some where to go from here. I’m still not sure how i should be setting up the “Monodimentional” compass image, should it be a material? or in the widget and just using the do-product math. I apologize for my lack of knowledge as I am still learning this stuff.
the issue I now have is trying to find a way I can “hide” or crop the outer parts of the image. so that only the the chunk in the middle shows and then the image would pan left and right? I’ve tried placing it inside a box. but the Transform node seems to move everything.
I do have it being drawn to a different widget, where my other widgets stay in palce, but even applying it to it’s on canvas panel and trying to crop it there doesn’t seem to work.
it seems that even thouh i just transform the child “image” it applies the transform to the parent Panel.
Does anyone know how i can crop the “image” down in UMG, or even somewhere else in editor, to just the middle reading and about an inch and a half left and right of center.
Use a material to apply transforms in UV space to get the image like you want. This has the added advantage of being able to loop the image with wrapped sampling as needed when the compass comes back around.
any tips on what nodes to use in the material editor? there are so many… and what do i set the material domain to? I’ve never done a material like this before and do I keep my blueprint the same and just apply this material to the image i have in the widget?
Took me a few hours, but it is a UMG Material, with a pan parameter, and then a simple Rotator.yaw calculation.
I use MinMaxNormalize which is exactly the same as NormalizeToRange, but I didn’t include the Kismet math header at the time so… there’s that.
The texture is X seamless, and North is in the middle. If South was in the middle, just simply add 0.5 to each result below.
I use a material, that exposes a float3 parameter, but I only change the ‘R’ or ‘X’ value, between -1 and 1, depending on the heading.
I then calculate the -1 to 1 value using this code:
Then in UMG I created a dynamic material instance, and set my HUD Brush to that, and then applied this Blueprint code in the UMG tick event.
It simply sets the Material Pan ‘R’ parameter value, which is only really offsetting the U of the texture coordinate.
And here is a compass blueprint in the world so I could test my compass. Visible in the top
