Widget or Blueprint

Development Programming & Scripting UI
1

Hi,
I am looking to create an analogue clock to display to my user in the bottom right of their screen. I intend to use sprites due to the nature of the game. HOwever, I am a bit stumped as to how best to achieve this. I have got a digital clock working perfectly with my sky sphere, but for the analogue I can see two options:

  1. create the clock face and hands as images in an Interface Widget and set the rotation based on the time
  2. create a blueprint and do likewise.

in the first option, there is no obvious way to rotate the hands accurately (rotation options dont seem to exist and set angle is not playing ball!). Therefore the blueprint option seems to be the easier, however, I cant think of a way to display my blueprint in the HUD widget?!

any advice most gratefully received.

2

Another way would be handling it in the material.
Use textures for the handles (masked) and the clock face and then just rotate the handle textures as desired.

3

was afraid someone may say that! Materials is probably my weakest part of UE4 knowledge! oh well off to google I go lol. thanks for the advice

4

I’ve used the UI Widget for speedometers and tachometers. The dashboard needles updated every frame at different rates, so there are no real performance issues.

It is totally possible to use a UI widget for the hands of a clockface. The key here is to position the clock hands’ pivot points at the center of the clock.

Also, you could coordinate the sky sphere and clock as well.

5

update: ignore me I am an idiot!

Thanks Doctor_Kannon, how can I change the pivot point of the hand sprite though? There is no option in the UI widget editor to do this? I can change anchor etc… the only option I can think of is to double the width of the image and have the hand on one side, but that seems like a faff.

cheers

6

The answer you seek is in Render Transform.

In your details panel:

[Details > Render Transform > Angle]. This is the angle of rotation.

[Details > Render Transform > Pivot] X: 0.5, Y: 0.5

The pivot is set to 0.5 as this is 1/2 the image. A pivot of 0 or 1 will rotate the image at the corner.

The needle (or clock hand) is a square image. The base of the needle (pivot) is in the center of this image… The point of the needle is centered on one side of the square image.

The image is placed so the pivot is at the center of the dial. Now, the image can be rotated as necessary.

In your case, you will need separate images for the clock face, and each needle. Each image will be approximately the same size. All images are positioned at the same X,Y coordinate. Then with their pivots set to (0.5, 0.5), you change their angles. Thus hour, minutes, and seconds images are all rotated.