I am building HUD(head up display) for visual feedback system in car. I need to create a Augmented reality like display with depth(z axis). there need to be a two different display A and B. Display A should be at front and Display B should be back of A(display A need to translucent but hide some part of display B). when I pressed key display A should fade out and display B should side front in place of A.
Q1. How to create a 3Dwidget with depth (like z axis)?
Q2. Animate multiple widget and remove overlay between multiple widget?
any help is appreciated. Thank You!
Hi there,
There can be multiple approaches to this.
Q1: You don’t really need Z Depth to achieve that effect. You can just scale it down and when its masked it will appear to be in Z Depth. You can use 2 sub widgets in one container widget : let’s say HUDContainer, Display1_WGT, Display2_WGT..
Q2: Animation is the tricky part of this, since the animation should be always parallel to the road. So you have to know where the road is while doing the animations. Even though from my perspective this would be not appearing the best through ScreenSpace UMG… However if its not AR but static on windshield, it can be done nicely if the widgets are static you can always mask the one behind. For masking you can check UE Retainer Box Mask
If this is AR you can use the other features of the engine like WidgetComponents for actors. You can create 2 actors with widget components. Make animations in real 3D AR and umg only does masks and display required data. (I would have gone this direction)
i tried masking using retainer box but the could not solve the problem. i need to clip half of the display in the back and slide back display to the front. could you please explain how to mask in this case?
any help is appreciated.
- In back one (the one currently needs to be masked) make a retainer box and make everything is child of it.
- Create a new material with UI Transparent domain.
put this shader inside and arrange the visibility parameter, whichever object is behind make its MaskVisibility parameter 1
Hi Grimnir,
Thanks for your help so far. I am getting close to solve this problem. I faced little problem while rendering the retainer material. it has a black background instead of transparent. how to solve this?. Also, any ideas about how to animate the displays?. Animation works like this:
- first, Display 1 slide front and disappear.
- Display 2 move in the place of display 1.
- New Display appear in place of display 2.
Thanks!
Hi please make sure parameter name for texture is same in the retainer.
both should be same.
For shadows not sure if you are using umg widget or widget component. Think widget component has shadow option. For normal widgets you can fake it with geting ground distance and location and convert them to screen space and move a fake shadow image.
hi,
Retainer box is working so, it’s not the issue with texture parameter name(i used same name). I think, i need to change the texture material some how and make it transparent. is it possible?.
Regarding shadow, I am using widget(not widget component). is it possible to put a widget in top of static mesh and hide it and cast shadow from mesh actor.
Thanks!
Yes it should be transparent, please do try using default_white texture maybe its cause of that.
For shadow question you asked. Yes it is possible to make a 3d mesh transparent and still cast shadow. For that you can use hidden shadow.
Actor is hidden still shadow is visible.
Hi Grimnir,
I have made some progress and managed to fix the texture issue but i am facing some problem with shadow. I tried to put a plane mesh(for shadow) and widget inside single actor blueprint and try to make it a HUD class but i dont know if it’s possible.
Eg. In my case, I have a BP_HUD_WG(actor with widget). Car_HUD is a HUD class and contain BP_HUD_WG as a child actor class. Now, from Car_HUD event graph i can create a widget but how can i call entire BP_HUD_WG and make it visible in HUD( i need to use HUD class).
Thanks!
So I understand what you are trying to do. There is couple of ways to achieve what you are trying to do and think you are on the right track. First let’s go with this method if it doesn’t suits you, I can also show how to do it in ScreenSpace (HUD Viewport). However I think this will be more suited to your needs especially this will be in VR or RealWorld application on a car.
1- Keep you actor as intact. I added one WidgetComponent and Static Mesh adjusted like below.
2- I choose a sphere for SM and set hidden in game, also open cast hidden shadows. Also close collision No Collision
3- I adjusted widgetcomponent to my needs, scaled down, add render resolution 1280 720, put my widget class in. This allows me to render a widget UMG in realworld, we don’t have to go screenspace(Viewport HUD) like you do (don’t need to create widget and add to viewport)
. Widget itself is just image with a text, so you can add your widget with masks etc, just choose transparent material for widgetcomponent.
4- I put this actor to world (You can spawn from player if you prefer). On this actors graph, I made couple of simple scripts. (A) I get player pawn and search its capsule component and this actor to player pawn. (B) After I add some rotations and location of choice so that the widget appears in the right position. Simply getting forward normal multiply by a distance and find the player facing rotations and add the to relative transform.
This give me a static actor, in front of player, with a widget and some shadow like below.
Now you can always access this actor, get widget class and do something. Tell widget to animate etc. This can be attachted to car also it will always show in front of car. There can be other needs like: As a designer I want widget to react road surface. As a designer I want display to move to the direction of car when I am turning etc.
Let me know, can also show the other way if you want.
The other way btw,
Get a location in front of actor at camera height on tick also ground location on that point,
Pass and Translate that locatiosn to screen space (HUD) and achor widget gauges in front and a fake shadow on ground pos.
Has pros and cons,
Pros: A bit more efficient to render things on screen space.
Cons: There will be single trace need for ground pos, and shadow will be fake not super reactive to light conditions etc, even can fail in very dark scenarios.
I like custom HUD approach. it gives me more flexibility. however, I faced some issue with class and understanding the logic behind this. could you please explain
this blueprint. i tried but got nothing so far. also, i need to animate the display. will it case any issue?.
Thanks for giving hope to noob like me..:))
no worries, you will be always be noob in something in this industry, like everybody anyway 
Yes no class cause class (object target) is self ( which is the actor holding widget and mesh)
Distance is
but adjust to your needs.
yes. you are right. This industry is challenging and exciting.
it’s not working for me. not sure what happened. what is capsule collision doing?. if i want to move the HUD according to the movement of the car. how can i do it?.
sorry for asking too much. i need to this for my project.
Yeah self awareness is a good aspect which is commonly missing.
So in the demo I show, I am getting players capsule and attaching to it, then moving the actor a little bit forward.
You can do it same for the car actor.
Get car actor → root component → as attach actor parent node
Get car actor → root component ->forward vector and locations again to change relative position of the widget (so its not on top but front)
basically “GetPlayerPawn” chould be changed with car. Not sure how you setup vehicle, you need to point to car actor.
This is the result i got. i can see the sphere shadow but do not know why widget is not showing up. Also, my widget has retainer box where i had masked(your technique) which is also missing while adding in viewport of BP_HUDactor. where exactly are we configuring the camera here?
Thanks!
Can you try rotating your WidgetComponent in details 180 degrees in Z?
wow, it works like a charm. thanks. small issue. when i tried to add widget in my BP_actor I am only getting part of display. i am not getting masked part where i used retainer box. any fix?.
1 Like
can you play with this if it helps. You can also try widget material to masked maybe that can be also a rendering issue.
Hi, i have a very strange problem. when i use additive in blend mode of material, my display do not have a black background in overlap part but i can not see it in BP_actor viewport. if i change it to transparent or masked, i can see it in actor viewport but I got a black background like before. Dont know how to solve this strange problem.
