Devlog #57 - Dynamic Windows

One of the biggest challenges in porting a game to mobile from desktop is dealing with varying screen sizes that are relatively small and can rotate to a new screen size at any time. Since we've already designed and implemented a GUI (Graphical User Interface) targeting a minimum size of 1024x768 we're now going to have to take a step back and redesign the whole GUI for the screens in our pockets.

Let's start with our base GUIWindow class and look at what it currently looks like on mobile.

 Oh boy, that doesn't fit at all.

Portrait cuts off the width and landscape cuts off the height.

The default width and height for a GUIWindow in FO2 is currently 544x520. Hard coding dimensions just doesn't work on mobile screens so we need to develop a new GUIWindow that can adapt to changing screen sizes gracefully. Let's call it GUIWindowDynamic.

So then what does GUIWindowDynamic need? It needs to take everything that works in GUIWindow and add in auto-scaling. It needs the properties minWidth, maxWidth, minHeight, maxHeight and it needs to use those to adapt.

 Ahh, that's so much better. The window now forces itself to stay within the bounds of the screen. Don't worry, I'll put the exit button back in.

And there we go, it works perfectly. We now have a GUIWindow that dynamically changes based on screen size and even updates if the screen size changes.

This means all the windows will just work on smart phones now right? No. We now have to go through all the windows in the game and convert the windows' contents to resize dynamically. Not all window contents are equal and some are much more difficult to port than others. I started with the mail window as it's contents are relatively simple and the layout was already designed to be dynamic. The only major change is that item names are no longer spelled out in text as it would overflow on small screens. As a bonus, the mail window now uses our newer GUIScrollList, which makes scrolling big mail boxes much faster.

 There we go. Welcome back window exit button!

Uh oh. I'm now realizing the BabylonJS onPointerEnterObservable and onPointerOutObservable are really buggy. They treat a mouse and a finger as the same thing, but fingers can't hover over a GUI control! So in order to not have the exit button highlight when we touch it we'll need to turn off all BabylonJS pointer enter and out events when we're on a touch only screen. How annoying. And with a few lines of code they are now turned off when then need to be turned off.

On to the next window! Let's see how the shop looks on an iPhone 12.

Oh boy, looks like we're going to need to implement a grid that adapts. BabylonJS has a grid class but it's garbage and slower than a snail so we'll definitely need to implement our own.

So close, yet so far. It looks like we'll need to also put the shop contents into a scroll view possibly. This window is going to be quite challenging but it will force us to create some classes that will be used by other windows in this conversion, so let's get to it.

First we comment out all the old shop window content code and change it to a GUIWindowDynamic.

And now we're off to the races. For the content we need to now layout the item for sale containers based on the size of the adjusted window.

Look at that, our dynamic grid adjustment code is working great for the content. Now we just need to adjust the window width/height after the grid layout in order to better fit the content. We also need to figure out where the drag/drop to sell container is going to go.

There we go, everything is working nicely except for the window title overflowing. And also, where are we going to put the drag/drop to sell container? This adaptive GUI stuff is not easy.

After adding a measureText function to our GUIFont and a setTextWithMaxWidth to our TextGlyphGUIContainer we now have window titles that get truncated based on window width. As for the drag/drop to sell I think we're going to move selling somewhere else in the GUI for mobile. For now I will only add it if the screen height can handle it.

Looking great in mobile Safari on my iPhone.

Oh my, portrait mode was long enough for the drag/drop. Too bad there's no room on screen for bags to actually drag and drop from. Figuring out how to have bags and windows open at the same time and actually being able to use them easily is going to be a tough nut to crack.

And look at that, back on the laptop/desktop front you would have never guessed the code underneath changed. That's the magic of GUIWindowDynamic!

The mail window is insanely fast now and yet just like the shop you wouldn't know any code changed. Pure magic! Both the new shop window and mail window are now live. If you'd like to see the dynamic window in action be sure to login to your account on your phone, walk to a shop, and open it up. As always, please post any and all bugs you find.

FO2 has a lot of windows so this dynamic window conversion will happen over the rest of the year most likely. Now to figure out how do deal with bags and where to put the bag slots...

Until next time...

Have Fun & Keep Gaming!

See you next patch notes!