Window Background Designer

Help spread the word!Share on FacebookShare on TumblrTweet about this on TwitterShare on Google+Share on LinkedInShare on RedditFlattr the author

WindowBackgroundDesigner2

Tired of the same old windows? Want to use your own custom image to create your menus and user interfaces?

This plugin allows you to assign images to your windows and use them as the window backgrounds. It also allows you to remove the window frame so that all the player will see is your custom image.

Being able to decorate your window is important, as windows can be dynamically created and animated.
For example, if you had a window that slides in from the side of the screen, you would want the window images to follow the window.

Images are drawn under the contents of the window, so text and other images drawn on the window will be displayed above the image.

This plugin supports any window, as long as you add them to the supplied configuration file, so if you’re using custom menus or custom interfaces, you can add images to them as well.

Note that this plugin is not meant to change the layout of your menus, so the menu I show above will require you to first create the layout before adding the images. However, once the layout is provided, you can easily add images to turn interfaces like this:

WindowBackgroundDesigner3

Into interfaces like this, by using pictures for the windows:

WindowBackgroundDesigner1

Download

Plugin: download here (right-click, save as)
You will also need this configuration file.

Installation

Download the plugin and place it in the “plugins” folder in your project’s “js” folder. Then open your Plugin Manager (F10), double-click an empty row, and select the HIME_WindowImageDesigner plugin.

Once it is in your list of plugins, turn the plugin on.

Download the configuration file and place it in your data folder.

Usage

Configuration File

In the data folder, create a configuration file called “window_config.csv”.
This file will store all of the backgrounds that will be used for your windows. You can edit it using a text editor or spreadsheet software, as such:

windowBackgroundDesigner

The format of the file is

Window Name,Image Name (in System folder),Window Opacity,Scene Name
Window_MenuStatus,bg_menuStatus,0,
Window_MenuCommand,bg_menuCommand,0

You can start by copying this into your csv file, or just download a template that I have provided.

All images will be stored in the img/system folder. You can then determine which image will be used for which windows, depending on which scene you’re in.

Assigning Images to Windows

This plugin assigns images based on the class name of the window as it is defined in the code.

In the template configuration file, I have written down a list of windows that exist in the default codebase, so you just need to figure out which one is the window you want.

The names are somewhat intuitive most of the time. For example,

“Window_Gold” refers to the window that is used to display how much gold you have.
“Window_MenuStatus” refers to the window that displays all of the actors in the menu
“Window_EquipList” refers to the window that shows all of the equips you can choose to equip, in the equip menu

If you are using plugins that provide custom windows, you will have to figure out the name of the window and add it to the configuration file. This is typically done by opening up the plugin and looking for something of the form

function WINDOW_SOMETHING()

Where WINDOW_SOMETHING is the name of the window you’re interested in. It doesn’t always follow this pattern, but if you’re lucky they will be. You can always have something tell you what the window names are.

Setting Window Opacity

By default, all windows have an opacity of 255. If you would like to make the window transparent, you can set that to 0.

Help spread the word!Share on FacebookShare on TumblrTweet about this on TwitterShare on Google+Share on LinkedInShare on RedditFlattr the author

You may also like...

16 Responses

  1. Wavelength says:

    What a fantastic idea!! I hope lots of people use this to make their menus look stylish and unique. To be honest, it’s something that RPG Maker should include in some form by default.

    And it’s especially cool that you made it to be compatbile with other scripts that create their own Windows.

    I noticed that Acquire-chan’s picture is “highlighted” in your final menu screenshot. Does your script allow for changing the highlight to different characters as you’re selecting them (for a command that requires Actor selection, such as ‘Skill’ or ‘Equip’)?

  2. cekobico says:

    Does this work for Battle Status Window as well?

  3. Can this be used to create character message boxes (dialog windows)? I’m new and trying to figure out how to best go about altering dialog boxes. I have a script that will let me change the position, but I’m still looking into how best to redesign them graphically. Changing the window.png is sort of a wildcard as it affects ALL windows – and it’s proportions are really constrained.

  4. Lilian says:

    some how i dont get it to work for different Scenes…. Could you tell me if i do some thing wrong ?

    Window_Help,Mist,125,,
    Window_Help,MistX2,125,Scene_Item,
    Window_Help,Fall,125,Scene_Class,

    • Hime says:

      There was a bug with scene-specific entries. I’ve updated the plugin to address the issue.
      The way it works is, it will try to find an entry with both the scene and window names, and if it can’t find it, it will try to find an entry with just the window name, and then give up.

      Download the plugin again and see if it works!

  5. jon says:

    Need more help !
    Hard to understand.
    Maybe a small video ?
    Tank you friends

  6. Val says:

    Wow this seem really useful and great I should give it a try soon.

  7. Antedegemon Tri says:

    Sorry, but… Was that a 1st april joke? :v

Leave a Reply

Your email address will not be published.

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax