Looking for a plugin that will allow me to overlay an image on the black borders

Gabbypie64 · Mar 17, 2020

Looking for a plugin that will allow me to overlay an image on the black borders on the sides of the screen that appear when in fullscreen. I'm trying to achieve something similar to what the Super Game Boy and a lot of modern arcade ports do. So kinda like this

If you do make it give me your tos please thank you very much!

pasunna · Mar 17, 2020

I don't think there will be one
because it is very specific and rarely someone want it
and instead of background
you can just show image on top of the game like a mask
well... it's not the same...I know

Andar · Mar 17, 2020

Nice idea, but extremely unlikely due to the reason for the black borders.
Those borders aren't there for fun or because someone said "Let's reduce the playing area of the game"...

The problem is the screen size compared to windows standards and the "cheapness" of the display manufacturer.
Look at the default screen size of MV, 816x624 pixel. That is not a known windows screen size.
Unfortunately the display card manufacturer are usually cheap and don't want to pay too much for the programming of their drivers, so they limit their programming only to the more common screen sizes - the next one of which is 1024x768 pixel.
Unfortunately if their driver switche to 1024x768 pixels, then there is data missing because the program only gives 816x624 pixel of data. There is no way for the driver to get data for the difference - and THAT are your black borders.

It is possible to program a driver to allow for any screen size - that is just more work, although it will also slow down the driver a bit. Twenty years ago (at the time of CRT monitors instead of TFT monitors) this was even common because it was easier to do with the difference in handling data, but it has much more problems doing this with TFTs.

Now you can go the other way around however - you can increase the screen size of your game to almost a known windows screen size (1008x768 is 21x16 tiles) and thereby reduce the black border to almost invisibility (1024-1008 is 16, resulting in a very small 8-pixel-border to the left and right of the screen).
And then it's your choice to place a picture frame with a show picture command to reduce the visible size of the map again.
But to try to send the missing data to the driver directly when the screen size remains at 816x624? Forget it, every display driver would have a different data structure and most of them wouldn't even be able to handle such data.

What you see on your example picture is done for another reason instead:
When you convert a game from an older device with less display capacity, you can't simply add to the maps that had been used on the smaller device. That would change the game after all and require the conversion to create those new maps.
But since you are already programming a conversion for the display, you can simply add that frame picture I mentioned above to hide that the map was smaller and had no data to fill the screen.

caethyril · Mar 17, 2020

This can be easily achieved for windowed mode (e.g. if the user resizes or maximises the window) by editing the following line of your project's index.html file (right-click > Open With). Do make a copy of the file beforehand, as a backup in case something goes wrong!

HTML:

<body style="background-color: black">

To replace the solid black colour with an image, you can replace the above line with something like:

HTML:

<body style="background-image: url('./img/faces/Actor1.png')">

I've chosen a face image just as an example, edit the file path as needed~

If you want it to apply in full-screen (either stretched or bordered mode, via F3) then that'll be more tricky. By default full-screen (F4) invokes the native requestFullScreen method, which seems to make the game canvas cover the screen (blotting out any page background). I believe you'd need a plugin that changes the rendering or full-screen behaviour somehow. I did a quick search online and through the game code, but didn't find anything promising in that regard.

In case you're interested, you can find more technical details on page backgrounds HTML/CSS here:

background

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

developer.mozilla.org

Looking for a plugin that will allow me to overlay an image on the black borders

Gabbypie64

Aster World Developer

pasunna

Veteran

Andar

Veteran

caethyril

^_^

background

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

Newest members

Forum statistics