# Changing ZOrder of virtual joysticks.

**URL:** <https://forums.unrealengine.com/t/changing-zorder-of-virtual-joysticks/353432>\
**Category:** UI\
**Tags:** Mobile, virtual-joystick, unreal-engine, Blueprint, question, UMG\
**Created:** [April 8, 2016, 2:30pm UTC](https://forums.unrealengine.com/t/changing-zorder-of-virtual-joysticks/353432 "2016-04-08T14:30:33Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Robinson\_Company](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Robinson\_Company](https://forums.unrealengine.com/u/Robinson_Company)\
**Post date:** [April 8, 2016, 2:30pm UTC](https://forums.unrealengine.com/t/changing-zorder-of-virtual-joysticks/353432/1 "2016-04-08T14:30:33Z")

</div>

How can I change the ZOrder of the default virtual joysticks? I have a UMG Image that is full screen and it’s ZOrder is 1 but I have to put the ZOrder to -12 to have control over the virtual joysticks. So I just want to move the virtual joysticks above 10.

---

<div class="post-metadata">

**Author:** ![anonymous\_user\_48f2118e](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_48f2118e](https://forums.unrealengine.com/u/anonymous_user_48f2118e)\
**Post date:** [April 8, 2016, 10:51pm UTC](https://forums.unrealengine.com/t/changing-zorder-of-virtual-joysticks/353432/2 "2016-04-08T22:51:07Z")

</div>

I think you would have to change the source.

I poked around in the source and found the spot where the viewport widget is added.

Assuming you are on the 4.11.1-release tag, in the file Engine/Source/Runtime/Engine/Private/PlayerController.cpp on change line 1078 from:

```
			LocalPlayer->ViewportClient->AddViewportWidgetContent(VirtualJoystick.ToSharedRef());

```

to

```
		LocalPlayer->ViewportClient->AddViewportWidgetContent(VirtualJoystick.ToSharedRef(), 11);

```

(11 is the arbitrary number above 10 that I chose)

---

<div class="post-metadata">

**Author:** ![Robinson\_Company](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Robinson\_Company](https://forums.unrealengine.com/u/Robinson_Company)\
**Post date:** [April 9, 2016, 2:58pm UTC](https://forums.unrealengine.com/t/changing-zorder-of-virtual-joysticks/353432/3 "2016-04-09T14:58:25Z")

</div>

Thanks! Going to try this now.

---

<div class="post-metadata">

**Author:** ![Robinson\_Company](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Robinson\_Company](https://forums.unrealengine.com/u/Robinson_Company)\
**Post date:** [April 9, 2016, 5:53pm UTC](https://forums.unrealengine.com/t/changing-zorder-of-virtual-joysticks/353432/4 "2016-04-09T17:53:39Z")

</div>

Question, do I have to built UE4 from source for this to work?

---

<div class="post-metadata">

**Author:** ![Robinson\_Company](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Robinson\_Company](https://forums.unrealengine.com/u/Robinson_Company)\
**Post date:** [April 9, 2016, 8:02pm UTC](https://forums.unrealengine.com/t/changing-zorder-of-virtual-joysticks/353432/5 "2016-04-09T20:02:47Z")

</div>

I did what you said but the ZOrder didn’t change. I install you UE by the launcher if that means anything.

---

<div class="post-metadata">

**Author:** ![anonymous\_user\_48f2118e](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_48f2118e](https://forums.unrealengine.com/u/anonymous_user_48f2118e)\
**Post date:** [April 10, 2016, 5:58am UTC](https://forums.unrealengine.com/t/changing-zorder-of-virtual-joysticks/353432/6 "2016-04-10T05:58:31Z")

</div>

Yes, you would need to actually compile the engine from the source you modified for this to be able to have any effect.

---

<div class="post-metadata">

**Author:** ![Robinson\_Company](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Robinson\_Company](https://forums.unrealengine.com/u/Robinson_Company)\
**Post date:** [April 11, 2016, 12:15pm UTC](https://forums.unrealengine.com/t/changing-zorder-of-virtual-joysticks/353432/7 "2016-04-11T12:15:20Z")

</div>

Darn. Ok. Thanks for your help. Wish I didn’t have to compile.

---

<div class="post-metadata">

**Author:** ![anonymous\_user\_0d62770f](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_0d62770f](https://forums.unrealengine.com/u/anonymous_user_0d62770f)\
**Post date:** [July 3, 2018, 11:10pm UTC](https://forums.unrealengine.com/t/changing-zorder-of-virtual-joysticks/353432/8 "2018-07-03T23:10:02Z")

</div>

Just hint: you don’t need change engine cpp if you just override virtual void CreateTouchInterface() in your own PlayerController class

---

<div class="post-metadata">

**Author:** ![Anoberia](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/anoberia/32/590142_2.png) [@Anoberia](https://forums.unrealengine.com/u/Anoberia)\
**Post date:** [June 4, 2020, 12:48am UTC](https://forums.unrealengine.com/t/changing-zorder-of-virtual-joysticks/353432/9 "2020-06-04T00:48:08Z")

</div>

I found another solution. When you add HUD, just make their ZOrder -1. That way, our joystick is always on top. You don’t need to change source code.

---

<div class="post-metadata">

**Author:** ![Wir3d](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Wir3d](https://forums.unrealengine.com/u/Wir3d)\
**Post date:** [July 18, 2025, 5:30am UTC](https://forums.unrealengine.com/t/changing-zorder-of-virtual-joysticks/353432/10 "2025-07-18T05:30:05Z")

</div>

How do you do that?