Hi fellows, my goal is to create a highlighting rectangle around some moving objects. An example image is attached below. Pretty much like the result of some object detection algorithms.
I’m hoping that the rectangle could move with the object if possible, either physically or just following the object on the HUD.
Please help and thank you!
Hey there @ndalien1! Something a little like this would work out right?
So all this is is just a border widget attached to an actor set to screen space.
The border widget settings:
however if you’d like to use this and apply to different objects during runtime you’ll have to write up a script that spawns it and attaches it as an actor to your target. So I’d recommend making an actor that is just the widget, and spawning it when you need it and attaching it to whatever you want kind of like this:
Hope this helps!
Hi,
Thank you for the detailed tutorial! For now I only need the box to follow one specific actor that is always on screen, but it may move around.
I followed your steps and was able to create a border widget in a user widget instance. I also created a widget within the car object that I want to attach the red box onto. However, the box will only float based on the location where I placed the border in the user widget instance.
My question is: How could I make the box follow the car?
Thank you!
No worries, I might not have communicated it that clearly, so in your car’s actor you can make a widget component, which basically makes a widget that is attached directly to the car, so it will always be following the car naturally. You don’t have to add the widget to the player’s viewport or anything. Inside the widget component on the car you have to select the widget it’s using. (ignore the BP itself just see that this is what should be attached to your car and remember to set that widget to the correct widget class target)
Hi,
Thank you for the elaboration! Actually I did exactly the same thing but the red box was just floating at the location where I placed it in the widget (boxhud in your case), instead of following my car. Could you give me some suggestions on where to debug?
Thanks!
No problem! What I believe is happening is that you have your widget in a location inside the Panel/Canvas and not the the border being the entire widget itself. Basically canvases are made to set scale for widgets inside of it. You can of course make one with a canvas if you have other elements inside it that need different scaling, but in my example the border is the entire widget thus takes up the entire “screen” but the screen space is actually based on the position of the widget component on the visible actor.
How hierarchy my set up is:
How you could still use a canvas with it:
Let me know if that was it!
Thank you! Now the red box is working for my car!
Hi,
I have an extra question: the box seems to remain the same size on the screen no matter how far away the car is from the screen. (See image 1 and 2). I hope that the red box will be smaller as the car looks smaller. Is there an easy way to accommodate the size of red box to the size of car on screen?
One way that I can think about is to decrease the size with a function of distance. But I found that when the scale of red box is below 0.25, the edges will disappear. (See image 3)
Could you help me on this task?
Thank you!
No worries! All you have to do is set the draw size how you’d like it on the BP itself. You could probably make an simple equation to take the distance from the player car/cam to the object and adjust the size based on it.
would probably look a little something like this, with some form of preprocessing on the Y and X values to get a good ratio, probably something more rectangular for you usecase.
Hope this helps!
Thank you so much! It works great for the 2D red box!
In another way, I tried adding collision boxes to the object as a 3D red box. However, when cars are moving as fast as 50 MPH, the box edges look fuzzy and shaking. Do you know if there is any way that I can make a 3D box clear and stable?
Thanks!
So your 3D boxes are likely being effected by your motion blur coming from your post process volume. That’s unavoidable unless you were to either remove the motion blur or you could try to use custom render depth and using that to exclude them directly from your post processing. Got a comment here from a relevant thread with some solid resources. It’s a bit older but still checks out. Though I don’t have a direct tutorial for disallowing post processing on specific objects, this would be the path to go.
How can i exclude specific assets/blueprints from post process? - #7 by ryanjon2040
Hi,
Thank you for the explanation! I searched about motion blur and found a solution that works.
Although there is still some mild blur but it’s acceptable.
Hi，
Sorry to bother you again! I encountered another issue: when the cars slow down or hit a bump, the collision box will have a dislocation to the front side of the car while they are still attached together. I’m not sure yet how this happened, could be inertia. I hope to disable this effect, making the box just a decoration with no physical properties. I tried to made some changes in details but didn’t succeed. Could you give me some suggestions?
No worries, usually best to have a new thread for these things as it helps future community members. You’re speaking about the 3D box you made right? It should just be following it’s parent. Does your 3D box have any collisions or movement?
Hi, I made a new thread for this question. Can you check this link and give me some suggestions? Thank you!
