Editor viewport aspect ratio

Hi Something that has been bothering me for a while.

We are making a portrait style game for mobile phones. so the camera is set to portrait, as well as the size of the HUD widget.

But when I preview the game, by clicking the play button, the editor viewport stays in the same size and aspect ratio, and it stretches the HUD, which makes it useless.

How can I set it so that it will show the aspect ratio of the camera when previewing the game? Or at least make sure that the HUD will get stretched out that far?

Thanks for any information!

1 Like

Hi

I’m not sure I completely understand your answer completely either, let’s first make sure you understand my problem.

The game is ONLY supposed to work in portrait mode, so I design my HUD to fit well wihtin this portrait view.
When I run the game on my mobile, it works fine, because the game is running in portrait mode and the hud looks good on that.

The problem is when I use the editor to preview my game, when you click the play button in the editor and it just starts the current level in the editor viewport.
The viewport doesn’t change to a portrait view then, but just stays wide. The buttons that I designed in the HUD will be stretched out in the horizontal direction because of that.

basically I just want to preview my game in portrait mode when I click on the play button, so that the HUD looks normal and not all streched out.
Is that possible? Or maybe if the editor viewport is not able to switch to a portrait aspect ration, at least can I make sure the hud stays exactly as I designed when I preview the level in the editor viewport, and not get strechted to the full viewport?

thanks!

Uhm your question is a little un-organized + I have little mobile experiance.

Are you HUD widgets set to anchor in the center of the screen with the upper pivot point (not the transform one) changed to 0.5,0.5 from 0.0,0.0 and then location x,y set to 0,0 and size set to whatever the size would be?

You can then test your widgets in a variety of resolutions including a bunch of stock anodroid and iphones as well as computer resolutions by clickign the arrow in the top right hand corner of the widget designer you can also choose “custom” to enter in your devices resolution in both portroit LxW and landscape WxH mode to see if they work properly.

With everything setup to anchors when it asks you in the details panel properly it should scale to any screen perfectly.

One way to get the aspect ratio directly is to create a hud class (content browser → right click → blueprint class → all classes → search HUD) and then on DrawHUD event (search for it in the content menu) it will give you and X and Y float output pin for your viewports resolution every single frame. You could take those and divide them and then set that to a currentAR float variable and do math based on that.

Shouldnt be needed though. Anchors will take care of that. If the center anchor doesnt work on your device, try anchoring it to hte corners of the screen.

Let me know if this fixed your issue!

Don’t forget to accept an answer that best clears your question up or answers it so when the community finds your question in the future via search/google they know exactly what you did to fix it/get it going.

  1. In the editor there is a drop-down menu next to the Play button. From this menu, choose “Advanced Settings…”.

233127-preview1.png

  1. Under the “Play in New Window” section set the “New Window Size” to the size and aspect ratio you would like.

233128-preview2.png

  1. From that Play context menu, instead of “Selected Viewport” mode, choose “New Editor Window (PIE)”.

233129-preview3.png

From now on, when you click on “Play”, it will launch a window that is the size and aspect ratio you want.

Answer is based on Unreal Editor v4.18.3; the interface may change in the future.

2 Likes

Thank you!

1 Like