How to work a GUI frame/mask around a smaller playable area and moving resources on room

Axl Trauts


I've been doing a shoot-em up game on a 640x720 window. I've been wanting to adapt my game on different screens so I decided to make it on a regular resolution size (640x480, 1024x768, etc.). In order to make this, I decided to use the rest of the screen to put a GUI, like a mask such as the new versions of old Game Boy games for instance, which have a frame that increases the screen size without compromising the proportions. I attach what I mean.

So, I have to widen the rooms, from 640 to let's say 1440, so I'll start with a standard 1440x900px. Because of that, I also widened the visible central play area, which now has a 672x772px area, and divisible by 32px, my usual sprite size. for comfort :)

My first issue is: How can I move all resources on the room 384px to the right? I can't see that. I can select all resources from any layer but move by hand which is annoying, but manageable.

My other issue, that can leave me more issues in the future is how to deal with a frame so big and a smaller play area? I had to modify some scripts, like the one that deactivates enemies if they are off the playable area and not the view. I had to set global variables for those dimensions.

Good thing is I can put more things on the frame, which is drawn as a GUI, such as the life bar, score, ship status and other game information. You can see on the in-game screenshot the former GUI which was a small information bar, on the previouse "bottom" of the screen.

P.S.: Most resources are borrowed from the internet as this is still a draft and I am a BAD artist.



If you just want to fill up the black bars created by playing the game in full screen then there's no need to make any changes to the room or gameplay. You can simply draw the application surface scaled and centered in the window and draw your GUI to fill up the sides.


If you're not familiar with the application surface, that's the render target everything in the regular draw events get drawn to by default which is then automatically drawn to the screen sometime before the Draw GUI event. You can disable the automatic drawing and hence draw it yourself wherever in the window you'd like. I suggest looking at these functions as they are what you'll need: