Decorating the black bars in Full Screen mode with a picture (Works with MV/MZ)

dragoonwys · Oct 31, 2020

Extra Contributions by other members:
Nolonar made a Plugin version, go to this POST
Tale made

Setting for picture frame around display at center position, this POST
Test Example for RPG Maker MZ, this POST
Another Plugin version, this POST

-------------------------------------
Full Disclaimer: I am a newbie when it comes to programing, but this method works for me so far. If there are plugin compatibility problems that come from this, I wouldn't know how to fix it. Sorry
-------------
Hi guys, this has been a nitpick that I seen all the time. So, you have your standard RPGmaker sized window, or any different sized window, and when you open it in full screen mode, it looks like this if the screen doesn't match your game size. Now, some of us don't really mind having black bars on the side, but sometimes it just doesn't look that nice with your game.

So how bout we decorate it with a picture?
As a programing noob, I can assure you its easy, follow these 4 steps, and you can replace the black box with something else!

First, you will need to put your picture in the same folder as your Index file. Like this:
(Important: remember the name of your image!)

Next, open up the Index file in your game folder with a text reader, like Notepad or Sublime Text. It should look something like this.
Can you see the highlighted 13th line? This is what controls what the black bars look like. If you change the 'black' into 'green' the bars with become green instead!

But we don't want to just change the color, we want to put Actor1_3's image in the black bar. So we will replace it with this code with the new one.

Code:

<body style="background-image: url('InsertPictureNameHere.png')">

Since our picture name is Actor1_3, we replace the name so it will become like the example below. Remember, the picture has to be in the same folder as the Index file.

Save, and enjoy your new NOT black bars on full screen mode, it works in both testplay and deployed. The image auto repeats as you can see from the first example, so you can use a small image no problem. I hope someone finds this useful!

For a non repeating background use this code instead and put the file name where it needs to be.

Code:

<body style="background-image: url('InsertPictureNameHere.png'); background-repeat: no-repeat;">

dragoonwys · Nov 4, 2020

As someone notified me, I added the code for a non repeating background as well!

One extra thing, I don't have MZ, but if the Index stays the same in that maker as well, perhaps this technique can work too since HTML is the same all around from what I found out. If someone can test it out it, please tell me if it works
Edit 22/11/2020 : Tested by Tale, it is shown to work in MZ, please look to the top post for Tale's example

Finnuval · Nov 4, 2020

As 'simple' as this May be it is actually really helpful! So thanks

Elhijei · Nov 4, 2020

Now that's something I didn't even know I wanted! That's so cool, thank you! :LZScat:

Nolonar · Nov 4, 2020

If I may give feedback: modifying the index.html has the disadvantage that people need to remember how it's done. Also, unlike with Javascript, you'll need to manually modify the index.html for each feature you want to include and for each project you want these features included in.

Fortunately, any and all changes you can do in HTML, you can do in Javascript too (via the DOM). This means you can make a plugin, which can be combined with other plugins that also modify the DOM. Simply copy the script to your plugins folder and enable it, and the change will be applied automatically.

Here's the simplest plugin you can make:

Code:

/*:
* @param image
* @type file
* @dir img/pictures/
* @require 1
*
* @param doRepeat
* @type boolean
* @default true
*/
(() => {
    const PLUGIN_NAME = "BlackBars";

    const parameters = PluginManager.parameters(PLUGIN_NAME);
    parameters.doRepeat = parameters.doRepeat !== "false";

    const body = document.getElementsByTagName("body")[0];

    body.style.backgroundImage = `url(img/pictures/${parameters.image})`;
    body.style.backgroundRepeat = parameters.doRepeat ? "repeat" : "no-repeat";
})();

Simply save the code in a file called "BlackBars.js"
If you want to name your file differently, make sure the PLUGIN_NAME matches the file name (without the ".js" part)

Remember to put your image in the img/pictures folder of your project.

There are no terms of use for this plugin. Use it as you see fit.

dragoonwys · Nov 4, 2020

@Finnuval Please mr clown, I swear I have been good this past Halloween

On less joking terms, thanks and your welcome! Thats a cool profile btw, clown pics sure bring the punch to a conversation XDDD

@Elhijei Thank you, I'm glad that it was useful!

@Nolonar You are right, having a plugin for this will make it easier for people to remember. Thank you very much for the feedback, I'll add a link to this post in the original one for anyone who wants to use it

tale · Nov 14, 2020

Found a way to add picture frame around display at center position. Based on default resolution: 816x624

Works on browser and testplay if not stretched passed default screen size. On browser, press F11 for full size.

I'm not familiar with plugin structure so I borrowed the code from thread as a proof of concept.

Code:

<body style="background-image: url('InsertPictureNameHere.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: center center">

Additions are- background-attachment: fixed; background-position: center center

It's optional to add background-color at the end of center if you want to.

Code:

; background-color: black

If anyone wants to try out, I have premade frames ready in the attachment or spoiler. They're made from clipart which is in public domain. No credit necessary. Also here's a template.
clipart source- http://clipart.nicubunu.ro/?gallery=borders

Template

dragoonwys · Nov 18, 2020

@tale Wow, this is nice! Thank you for adding to this. I'll add a link to this in the top post as well

Celestrium · Nov 18, 2020

I like how this started with dragoonwys showing everyone something really cool, to the community all working together to implement the cool idea in the best way. Thank you very much dragoonwys, as well as Nolonar for the plug in and tale for the borders. I know there are a lot of us that appreciate this knowledge!

tale · Nov 19, 2020

I tried out a game that's made with RPG Maker MZ Trial and Index HTML are the same format.

Tested out with MV default icon as decoration for repeated background.

Code:

<body style="background-image: url('Icon.png'); background-attachment: fixed; background-position: center center">

Note: Press F4 to go fullscreen mode- doesn't show picture decoration. (for both MV/ MZ games) F11 works in browser

tale · Nov 20, 2020

I made an alternate plugin. I couldn't get Nolonar's version to work on MV.

Icon X Background (IconXbg.js)
Replaces black bars with repeated icon/ picture in icon folder.

You would need to name your images with proper numbers inside icon folder.
Default: 1.png | For randomized on load, edit totalCount (line 19) to # used.

Features-
Picture already centered
Icon folder usage and proper numbering filename
Can be randomized on load by editing totalCount if more images are used

Download link:
https://www.dropbox.com/s/yffy12s2xgdb8ur/IconXbg.js?dl=1

Code:

var totalCount = 1;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'icon/'+num+'.png';
document.body.style.backgroundRepeat = "repeat";// Background repeat
document.body.style.backgroundAttachment = "fixed";
document.body.style.backgroundPosition = "center";
}

ChangeIt();

dragoonwys · Nov 22, 2020

@tale Thank you very much for testing it on MZ, its something I have been wondering about! Its good to know that this works on the new engine as well

I'll add your new plugin to the main post

Decorating the black bars in Full Screen mode with a picture (Works with MV/MZ)

dragoonwys

Freelance Illustrator

dragoonwys

Freelance Illustrator

Finnuval

World (his)story builder and barrel of ideas

Elhijei

Villager

Nolonar

Veteran

dragoonwys

Freelance Illustrator

tale

Volunteer

Attachments

dragoonwys

Freelance Illustrator

Celestrium

Adventurer

tale

Volunteer

tale

Volunteer

Attachments

dragoonwys

Freelance Illustrator

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

Latest Threads

Latest Posts

Latest Profile Posts

Tonbi's MZ material factory

Newest members

Forum statistics