# How to make floating widgets?

**URL:** <https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286>\
**Category:** UI\
**Tags:** floating, unreal-engine, Widget, Blueprint, question\
**Created:** [September 23, 2017, 3:17pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286 "2017-09-23T15:17:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shaaw9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Shaaw9](https://forums.unrealengine.com/u/Shaaw9)\
**Post date:** [September 23, 2017, 3:17pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/1 "2017-09-23T15:17:07Z")

</div>

Hi, I want to make a floating widget or something above my objects, if I press them, so my game is a tower wars and the map is built from cubes(static mesh actors),when I click one of them, i want a widget to pop up above THAT cube, with a selection of turrets or something like that.

Here is a part of the map, the orange cubes are the map(there are 288 of them) so if I click on one of them a widget appears above it, I don’t want to copy the blueprints 288x for each object, if possible with one blueprint.

 ![214382-screenshot-4.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/e/d/e/ede1377af4928038565dcd5a73226ca287713873.jpeg)

---

<div class="post-metadata">

**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\
**Post date:** [September 23, 2017, 3:31pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/2 "2017-09-23T15:31:15Z")

</div>

It’s pretty straightforward. Is every cube a separate actor?

---

<div class="post-metadata">

**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\
**Post date:** [September 23, 2017, 3:48pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/3 "2017-09-23T15:48:23Z")

</div>

The most straightforward way to do this:

Here, I create some objects and a single widget:

 ![214384-spawn-objects.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/f/4/d/f4dd0601acaddf7c9bf03d7ff181561eaac7eb52.png)

Clicking an object produces its world coordinates, these are converted into screen coordinates. Position the widget there and make it visible.

 ![214385-positionwidget.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/4/1/1/411d4a6f3b55ec5814a97375a4a7a6ad860e4dcc.png)

Currently the widget will appear with its upper left corner centred on the click location. You can add an offset to the convert node to shift the widget around.

---

<div class="post-metadata">

**Author:** ![Shaaw9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Shaaw9](https://forums.unrealengine.com/u/Shaaw9)\
**Post date:** [September 23, 2017, 4:01pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/4 "2017-09-23T16:01:15Z")

</div>

And it will be a phone game, so is it possible to do the same with finger?

---

<div class="post-metadata">

**Author:** ![Shaaw9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Shaaw9](https://forums.unrealengine.com/u/Shaaw9)\
**Post date:** [September 23, 2017, 4:06pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/5 "2017-09-23T16:06:40Z")

</div>

also , I don’t get what is the “card widget” in your blueprint and the comp click, I only have the widget blueprint that should pop up

---

<div class="post-metadata">

**Author:** ![Shaaw9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Shaaw9](https://forums.unrealengine.com/u/Shaaw9)\
**Post date:** [September 23, 2017, 4:14pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/6 "2017-09-23T16:14:15Z")

</div>

I don’t understand these :

![214388-card.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/7/f/2/7f2be2c009314b24e0ff445a987637b50a02335b.jpeg)

![214389-spawnactor.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/e/d/3/ed30ca4480bc20431b134620dbd84c29efdd722c.jpeg)

also, both your blueprints in level blueprint?

and I get this in mine :

![214389-spawnactor.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/e/d/3/ed30ca4480bc20431b134620dbd84c29efdd722c.jpeg)

---

<div class="post-metadata">

**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\
**Post date:** [September 23, 2017, 4:44pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/7 "2017-09-23T16:44:25Z")

</div>

_Card_ is the name of my widget, so just put your widget there. I needed something to click on so I spawned some objects (CompClick) at random locations to test it out. If you already have something to click on (your squares), you obviously do not need to spawn anything extra.

I did both in the _PlayerController_ for convenience. Can be done anywhere really.

> And it will be a phone game, so is it  
> possible to do the same with finger?

Yup:

![214393-mobile.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/0/9/4/0942c87cfbf9fb948ed06d1d5de0ec108df1cb40.png)

---

<div class="post-metadata">

**Author:** ![Shaaw9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Shaaw9](https://forums.unrealengine.com/u/Shaaw9)\
**Post date:** [September 23, 2017, 4:51pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/8 "2017-09-23T16:51:13Z")

</div>

And how can I refer to the squares?

---

<div class="post-metadata">

**Author:** ![Shaaw9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Shaaw9](https://forums.unrealengine.com/u/Shaaw9)\
**Post date:** [September 23, 2017, 4:52pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/9 "2017-09-23T16:52:30Z")

</div>

I don’t need then 1 from the sequence?

---

<div class="post-metadata">

**Author:** ![Shaaw9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Shaaw9](https://forums.unrealengine.com/u/Shaaw9)\
**Post date:** [September 23, 2017, 5:00pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/10 "2017-09-23T17:00:00Z")

</div>

I still have nothing to connect to this

 ![214402-screenshot-4.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/b/d/2/bd257dc000d4005281013937bb26f2457c2364f8.jpeg)

---

<div class="post-metadata">

**Author:** ![Shaaw9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Shaaw9](https://forums.unrealengine.com/u/Shaaw9)\
**Post date:** [September 23, 2017, 5:07pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/11 "2017-09-23T17:07:56Z")

</div>

Okay i made it work, but the problem is (my event activator is the key “U”) so when i activate the event it prints the string(my widget) at my mouse location, it should work when i click on the object

---

<div class="post-metadata">

**Author:** ![Shaaw9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Shaaw9](https://forums.unrealengine.com/u/Shaaw9)\
**Post date:** [September 23, 2017, 5:11pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/12 "2017-09-23T17:11:35Z")

</div>

It not gets my objects locations, it only gets my cursors.

---

<div class="post-metadata">

**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\
**Post date:** [September 23, 2017, 9:30pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/13 "2017-09-23T21:30:23Z")

</div>

> It not gets my objects locations, it  
> only gets my cursors.

Well, you click on the object, the widget appears where you clicked, that’s where the cursor is, right?. Your objects need to have collision set up for this to work, naturally. Print _HitActor_ → _GetObjectName_ to see what you are hitting.

Or perhaps you missed the paragraph under the second image I posted, about adding the offset. If you want the widget to appear dead centre, you’d have to subtract half its size before you push the coordinates back to the viewport.

This is a very simplified version with several drawbacks. When you pan your screen, for example, the widget will stay in place, it will not track the object you initially clicked on. This is easy to sort out, though.

Are your squares separate objects or just _StaticMeshes_ you dropped in the map?

There are several methods of doing what you want, this one gives you a direct access to the actor you clicked on, too. (_Hit Actor_)

Alternatively, you could cover the screen with a _Widget Canvas_, detect where you click, deproject to world or trace. But that’s somewhat unnecessary more convoluted.

Did you manage to get the widget to show up at all?

---

<div class="post-metadata">

**Author:** ![Shaaw9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Shaaw9](https://forums.unrealengine.com/u/Shaaw9)\
**Post date:** [September 23, 2017, 9:32pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/14 "2017-09-23T21:32:18Z")

</div>

Yea but I want to select the object and that opens the widget

---

<div class="post-metadata">

**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\
**Post date:** [September 23, 2017, 10:01pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/15 "2017-09-23T22:01:18Z")

</div>

That’s exactly what the code above is doing:

[https://i.gyazo.com/c9be7504b71f265725b99ba36241003b.mp4](https://i.gyazo.com/c9be7504b71f265725b99ba36241003b.mp4)

---

<div class="post-metadata">

**Author:** ![Shaaw9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Shaaw9](https://forums.unrealengine.com/u/Shaaw9)\
**Post date:** [September 23, 2017, 10:03pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/16 "2017-09-23T22:03:55Z")

</div>

Yea but on my level the widget pops up everywhere on the map not only where thd objcets are(the ground is a big cube also)

---

<div class="post-metadata">

**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\
**Post date:** [September 23, 2017, 10:16pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/17 "2017-09-23T22:16:48Z")

</div>

That’s expected - the reason is that we check on the 2 most common collision channels. The array you connected to ObjectTypes indicates which ones.

- you can either create a new object channel in your project settings and test for those only
- you can filter the results of Hit by object class
- you can use objects tags

Pick you poison, I’ll try to help where I can.

Also, most importantly, is every square a separate actor or you just dropped StaticMeshes in you level?

In addition, when you do break the hit, you can use object or component location instead of hit location:

![214414-capture.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/3/d/23dba71911b6f0267d6f57808c250906766833f0.png)

---

<div class="post-metadata">

**Author:** ![Shaaw9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Shaaw9](https://forums.unrealengine.com/u/Shaaw9)\
**Post date:** [September 23, 2017, 10:20pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/18 "2017-09-23T22:20:37Z")

</div>

I put a cube ont he map and duplicated it many times, the ones that supposed to open widget have tags

---

<div class="post-metadata">

**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\
**Post date:** [September 23, 2017, 10:25pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/19 "2017-09-23T22:25:09Z")

</div>

Tags could work, try it like so:

 ![214415-capture.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/6/d/6/6d652db3711bbb1370bc78fb49034064d03ea554.png)

---

<div class="post-metadata">

**Author:** ![Shaaw9](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Shaaw9](https://forums.unrealengine.com/u/Shaaw9)\
**Post date:** [September 23, 2017, 10:38pm UTC](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286/20 "2017-09-23T22:38:56Z")

</div>

I made this, now nothing happens.

 ![214398-screenshot-5.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/9/1/b/91b3ab422ac8c4307fd2e6e434d997cb041c0d41.jpeg)

[Next page](https://forums.unrealengine.com/t/how-to-make-floating-widgets/405286.md?page=2)
