Add an image around the game to replace the black border frame?

How do I...?
1

When making a game with a set resolution your game has black borders as expected, my feature request is being able to edit these to display textures or anything else of the sort, this can be faked via zooming in but I’d rather have it be a baked in feature to avoid unintended issues showing up in the future

This is probably most commonly seen with the Super Game Boy or ports onto modern consoles, i.e Undertale, Omori

Here’s some examples;
image

image
image1920×1080 254 KB

Not sure if this would require engine work or if it could be more easily done via an extension

2 Likes
2

Hello! For some context: The black “borders” you see when setting a specific resolution smaller than the display are portions of the screen not actually rendered by the engine (PixiJS). Nothing can be displayed there as it’s not part of the rendered area.

What you’re describing is possible today, but you’re instead going to set your game resolution to either be adaptive, or a fixed widescreen resolution. Then you just make an image that has the center part cut out (transparent) for the “real” rendered area that you want, and you place that image on it’s own layer above everything else.

If you want finer control of this, you can set up some zoom events with math to do an inverse zoom based off the resolution of the display. But you’re going to have to work out the math to make it specifically how you want.

3 Likes
3

Nothing can be displayed there as it’s not part of the rendered area.

I wouldn’t go as far as to say nothing can be displayed. You can still modify that area with JS.

3 Likes
4

Valid, buta at that point you are messing with the electron scene and not pixijs as far as I know.

Edit: or are you just extending the pixibscene? (Which would basically be the same as the adjusting resolution mentioned above?)

3 Likes
5

Honestly I haven’t looked to much into this, but for the above example I just set the documents body (where the canvas is held) to an image.
image

Works for web and electron builds.

4 Likes
6

That’s super smart. While it’s outside of the PIxiJS renderer itself, it is having electron read it as part of the HTML5 code.

I’m not 100% sure you could do that same method via events as I’m not sure whether the engine could preface the actual game logic(upon being built by electron builder). Worth someone investigating.

Otherwise, the method I mention above would work for people not wanting to modify their source code/exported code.

3 Likes
7

That’s super smart.

I am gonna have to get that printed and framed at some point :grin:

I’m not 100% sure you could do that same method via events as I’m not sure whether the engine could preface the actual game logic(upon being built by electron builder). Worth someone investigating.

I have the above working from just a single line in a JS event box within the editor. I am sure it could be ported over to have it as an actual event if there was a request for it, however saying that I am not sure what type of issue(s) it could cause down the line.
Someone much smarter then myself would have to comment / look into that. :joy:

2 Likes
8

Hmmm, just realized that means it doesn’t dynamically move with the center of the canvas, right? It’s just a tiled image?

Do you think it’d work for more “static” decorations like in the OP?

2 Likes
9

Do you think it’d work for more “static” decorations like in the OP?

To get exactly what OP wants it’s probably gonna require a bit of work and / or forcing the size of the window / resolution.

We can update the size of the image to something like cover (stretch), but even then it’s not perfect as the canvas is either 100% of the width or height.

I reckon a good way to tackle it would be create either the background art at the maximum resolution (or make multiple versions for each resolution supported) and then have the borders in gdevelop it’s self.

Another way similar to the above is set margins of the window to match up with the image and then lock the window from resizing. Below is an example of setting the window x2.

2 Likes
10

I know my input isn’t needed at this point, but I would honestly be happy with either just tiling the unrendered border away or full on backgrounds being supported officially whether via extensions or straight up engine support

It would add a pretty big aesthetic upgrade to games that require a locked resolution for gameplay or graphical reasons without the extra hassle.

Nice work by the way :+1:

3 Likes
11

You’re input is more then welcome!

I think this would be more of an extension then added by default to the engine as it’s a pretty niche request.

I’ve not made any official extensions yet (only things for my projects) I can give it a crack this weekend or pass it over to someone who is more experienced with the current requirements and conventions.

Otherwise, I am more then happy to give you a copy of the project and you can tinker what I have to suit your needs.

3 Likes