# How to highlight an object with a rectangle? **URL:** \ **Category:** UI\ **Tags:** unreal-engine, UE4, Blueprint, question\ **Created:** [September 15, 2022, 11:16pm UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656 "2022-09-15T23:16:11Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![ndalien1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@ndalien1](https://forums.unrealengine.com/u/ndalien1)\ **Post date:** [September 15, 2022, 11:16pm UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/1 "2022-09-15T23:16:11Z")
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! ![WeChat908fe8cfa4b54df4f38646da95dac3c2](https://d3kjluh73b9h9o.cloudfront.net/original/4X/7/e/1/7e1b258305ed0d1ec5d3644b70f4e2bc3b015b54.jpeg) ---
**Author:** ![SupportiveEntity](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@SupportiveEntity](https://forums.unrealengine.com/u/SupportiveEntity)\ **Post date:** [September 16, 2022, 1:56am UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/2 "2022-09-16T01:56:32Z")
Hey there @ndalien1! Something a little like this would work out right? ![UnrealEditor_2022-09-15_21-43-56](https://d3kjluh73b9h9o.cloudfront.net/original/4X/7/5/5/7559b4061e94197505243b60e4230f272eaf9f55.gif) So all this is is just a border widget attached to an actor set to screen space. ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/1/6/8/16843dd0eb1dda7599261c06680ca8a4ac9c959a.png) ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/7/9/f/79f640e2d749e6632cb0953d7ed3dbba18828c5e.png) The border widget settings: ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/d/f/5/df57bc8839e3fb6321f7c3973e24d0b37e00d5f7.png) 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: ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/d/2/c/d2cdb08dfca8706398b9dc39ee721bb187f27ddc.png) Hope this helps! ---
**Author:** ![ndalien1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@ndalien1](https://forums.unrealengine.com/u/ndalien1)\ **Post date:** [September 16, 2022, 6:45pm UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/3 "2022-09-16T18:45:06Z")
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! ---
**Author:** ![SupportiveEntity](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@SupportiveEntity](https://forums.unrealengine.com/u/SupportiveEntity)\ **Post date:** [September 17, 2022, 12:31am UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/4 "2022-09-17T00:31:15Z")
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) ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/f/3/d/f3d17387e639f91ed342744a93ca5b26d2e06b66.png) ---
**Author:** ![ndalien1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@ndalien1](https://forums.unrealengine.com/u/ndalien1)\ **Post date:** [September 19, 2022, 8:44pm UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/5 "2022-09-19T20:44:25Z")
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! ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/c/e/f/cef41f37925171c4e6aa3d35ff8637bfd10fef36.png) ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/3/5/a/35aa2bd67ea197fc2611c363c6b7385589e88e74.png) ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/b/d/c/bdc84434513901d1743ba41bc08e1c9d6b1dc4ea.jpeg) ---
**Author:** ![SupportiveEntity](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@SupportiveEntity](https://forums.unrealengine.com/u/SupportiveEntity)\ **Post date:** [September 19, 2022, 11:27pm UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/6 "2022-09-19T23:27:57Z")
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: ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/f/c/d/fcd4a296c8d0ee8a3f2d20a40cfdfffcb505ed67.png) How you could still use a canvas with it: ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/9/2/7/92781e1676efa0fda46074de7b9e71cb0d6f8e6c.png) Let me know if that was it! ---
**Author:** ![ndalien1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@ndalien1](https://forums.unrealengine.com/u/ndalien1)\ **Post date:** [September 26, 2022, 7:01pm UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/8 "2022-09-26T19:01:37Z")
Thank you! Now the red box is working for my car! ---
**Author:** ![ndalien1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@ndalien1](https://forums.unrealengine.com/u/ndalien1)\ **Post date:** [September 26, 2022, 8:18pm UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/9 "2022-09-26T20:18:19Z")
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? ![a.PNG](https://d3kjluh73b9h9o.cloudfront.net/original/4X/b/e/2/be23e8cc68e5e4e69eaa13ecd2b8bf58532443f6.jpeg) ![b.PNG](https://d3kjluh73b9h9o.cloudfront.net/original/4X/5/f/9/5f9d38c101f739fed023c037044b0af73426665b.jpeg) 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! ![Capture.PNG](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/e/c/2ecdee102338aec645fab39e10d7650274d326ee.jpeg) ---
**Author:** ![SupportiveEntity](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@SupportiveEntity](https://forums.unrealengine.com/u/SupportiveEntity)\ **Post date:** [September 26, 2022, 11:36pm UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/10 "2022-09-26T23:36:21Z")
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. ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/3/7/d/37db998163bb5a9e2a9878c211aae22ed5ad2e38.png) 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. ![image](https://d3kjluh73b9h9o.cloudfront.net/original/4X/4/b/4/4b453c985abdb313cecefe3354d4a9e8a83740ad.png) Hope this helps! ---
**Author:** ![ndalien1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@ndalien1](https://forums.unrealengine.com/u/ndalien1)\ **Post date:** [September 28, 2022, 1:32am UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/11 "2022-09-28T01:32:45Z")
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! ![截屏2022-09-27 21.31.18](https://d3kjluh73b9h9o.cloudfront.net/original/4X/4/a/9/4a9e4bcb4e4d866ee419a87e7e17852b6e8fad3e.jpeg) ---
**Author:** ![SupportiveEntity](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@SupportiveEntity](https://forums.unrealengine.com/u/SupportiveEntity)\ **Post date:** [September 28, 2022, 4:23am UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/12 "2022-09-28T04:23:26Z")
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](https://forums.unrealengine.com/t/how-can-i-exclude-specific-assets-blueprints-from-post-process/300726/7) ---
**Author:** ![ndalien1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@ndalien1](https://forums.unrealengine.com/u/ndalien1)\ **Post date:** [September 28, 2022, 7:49pm UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/13 "2022-09-28T19:49:15Z")
Hi, Thank you for the explanation! I searched about motion blur and found a solution that works. > [@Disable motion blur](https://forums.unrealengine.com/t/disable-motion-blur/342951/5): > > Hello again, I tried on a new project, and with Anti Aliasing set to FXAA and motion blur disabled in the project settings I get rid of the weird motion blur. ( And motion blur disabled on post process volume and camera ) Although there is still some mild blur but it’s acceptable. ---
**Author:** ![ndalien1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@ndalien1](https://forums.unrealengine.com/u/ndalien1)\ **Post date:** [October 5, 2022, 8:10pm UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/14 "2022-10-05T20:10:58Z")
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? ---
**Author:** ![SupportiveEntity](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@SupportiveEntity](https://forums.unrealengine.com/u/SupportiveEntity)\ **Post date:** [October 6, 2022, 7:08am UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/15 "2022-10-06T07:08:19Z")
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? ---
**Author:** ![ndalien1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@ndalien1](https://forums.unrealengine.com/u/ndalien1)\ **Post date:** [November 3, 2022, 6:09am UTC](https://forums.unrealengine.com/t/how-to-highlight-an-object-with-a-rectangle/649656/16 "2022-11-03T06:09:55Z")
Hi, I made a new thread for this question. Can you check this link and give me some suggestions? Thank you! > [@Disable component dislocation for a moving actor](https://forums.unrealengine.com/t/disable-component-dislocation-for-a-moving-actor/683059): > > Hi, I am writing a project of driving simulations. I attach box components to the cars to serve as “object detection boxes”. However, when cars make sudden brakes, there will be a dislocation of the box component from the car mesh. Some examples can be seen from the attached videos (red car to the right). Ideally, I want the box to be just lines staying still to the car mesh. I have tried to reset the location for the box component with event tick, but it didn’t make any difference. Please h…