GMS 2 Replace black borders by a GUI background

Christop777

Member
Hello, I need your help because I don't know what to do now:
I've just finished my first game for Android and iOS smartphones.
The resolution of my game is fixed : 720x1280 (portrait mode).
"Keep Aspect Ratio" option is on in GameMaker Studio 2.
The game display is fine when running on iPhones devices but on iPad devices, there is black borders on the left and the right of the game area.
I don't want to modify the game area, the aspect ratio is fine, it must not change.
So I would like to display a big background image (like a .png or .jpg) behind my game area which inludes the black borders too ( to replace the black borders with my image).
I've read tips about the GUI layer but it seems the GUI layer displays above the game area. But I would like a GUI layer which displays beneath the game area. How to do that?
Other ideas:
Is it possible to display only a color instead of an image on the GUI layer? To have lighter ressources. Because if I want to display a background image for iPad Pro screen for example, I need a 2732 x 2048 pixels image, this is huge.
And the problem is that GMS2 does not accept sprites more than 2048 x 2048 pixels. How can I resolve this? Can I have a background bigger than 2048 x 2048 pixels?
If not, how do you deal with the 2732 x 2048 iPad Pro screen?

Sorry for so much questions, I'm trying to find an answer looking in all directions. Maybe you can help me..
Thank You
christop777
 

Slyddar

Member
Some options...
1/ You can split the image into segments, and draw each one so they look like one image.
2/ You can use a lower res file and scale it 2x. The loss of quality will be unnoticable at that size.

Whichever you use, you can set it on an asset layer that is under the rest of your layers so it draws under everything, but you should note there is no way to draw outside of the room. You will need to change your room size in order to draw in the black areas.
 

Bart

WiseBart
Whichever you use, you can set it on an asset layer that is under the rest of your layers so it draws under everything, but you should note there is no way to draw outside of the room. You will need to change your room size in order to draw in the black areas.
Layers aren't the solution in this case. There's no way to force something to draw directly to the back buffer just by changing the layer or depth.
The drawing needs to be performed in an entirely different Draw event.

So I would like to display a big background image (like a .png or .jpg) behind my game area which inludes the black borders too ( to replace the black borders with my image).
I've read tips about the GUI layer but it seems the GUI layer displays above the game area. But I would like a GUI layer which displays beneath the game area. How to do that?
Other ideas:
Is it possible to display only a color instead of an image on the GUI layer? To have lighter ressources. Because if I want to display a background image for iPad Pro screen for example, I need a 2732 x 2048 pixels image, this is huge.
And the problem is that GMS2 does not accept sprites more than 2048 x 2048 pixels. How can I resolve this? Can I have a background bigger than 2048 x 2048 pixels?
If not, how do you deal with the 2732 x 2048 iPad Pro screen?
The GUI layer is indeed drawn last as is shown in the image in the manual under Draw Events (this image is really one to know by heart when dealing with GM's graphics ;) )
You could draw sprites or different colored rectangles on top of the black bars in the Draw GUI event but there's a better way to "fix" your issue sooner. And a much cleaner one, too :)
That "GUI layer which displays beneath the game area" is the back buffer. It's the final image that ends up on the screen.
You get to see it in this case because the viewport doesn't cover it entirely.
By default, it gets filled with nothing more than a solid black colour. The reason that happens is because the option Clear Display Buffer is enabled under Room Settings.
That default colour is black but it can be changed in the Game Options, under General > Default colour outside the room region.

If you do want more to be shown in that area of the window than just a colour then you should use the Pre Draw event for that.
In that case you can also untick Clear Display Buffer since you'll just draw over it anyways.

Not entirely sure about the sprite sizes on Android although it does seem that you can increase the texture page size to 4096x4096.

Hopefully this can help clear things up a bit!
 

Christop777

Member
Thanks you all for your answers :)
Changing the color outside the room region maybe a good option. I'll try that but I'm note sure Apple will accept it (the iOS version of my game has been rejected because of the black borders on iPAD).
I hope blue borders will do the job better :)

The other solution which is using the Pre Draw event is not clear for me. How can I address the black borders (outside the Application Surface)? I need to use GUI Layer for that. But the GUI Layer will display at the end of the display process. How can I use GUI Layer into a Pre Draw event?
Or can I address the black border directly from the Pre Draw event, without the GUI layer? I don't know how to do that.

Last important thing: The color outside the room option is simple to change, I like it. But the other solution seems very complicated. My game is finished. I have more than 100 rooms designed. If I want to display something on the black borders into all the rooms of my game, is it possible to program that only once, in the first room of my game and don't change anything to the other rooms? I can't imagine modify all my 100 rooms :-(

(The ideal solution should be a new option in the Game Options like : Choose the default image (.jpg) outside the room region :)

christop777
 

Nocturne

Friendly Tyrant
Forum Staff
Admin
Moderator
Last important thing: The color outside the room option is simple to change, I like it. But the other solution seems very complicated. My game is finished. I have more than 100 rooms designed. If I want to display something on the black borders into all the rooms of my game, is it possible to program that only once, in the first room of my game and don't change anything to the other rooms? I can't imagine modify all my 100 rooms :-(
You can do this quite easily using the pre-draw event. Create a controller object, add a pre-draw event, and then use the draw_sprite_tiled function (or whatever) to draw directly to the display buffer before anything else is drawn. This will cover the black-bar area with whatever you have drawn (you can make the object persistent and create it in the first room of the game so it's always present too). :)
 

Yal

šŸ§ *penguin noises*
GMC Elder
You can just draw a decoration sprite in the Draw GUI event at the edges of the GUI layer, this could be the easiest solution if you already draw your HUD in the Draw GUI event. If you're resizing it so it matches the application surface and has a static size, 0,0 in the GUI layer is the top-left pixel of the "interesting area" but it keeps going until the edges of the physical screen regardless. I'm using that solution in this game, since it has a lot of wasted space due to the portrait resolution.
 

Christop777

Member
Hello, thanks for your help. I keep all your advices for a next version. Apple finally has validated yesterday the current version when I told them that the extra space on the iPad can be use to control the 2 cursors of the game. It's an extra space where the player may touch too. So they accept it because it's not a useless space :)
My game name is ButtonKiss:

Thanks again :)
 
Top