Where can I find amazing Windowskins like these?

Quimey

Veteran
Veteran
Joined
Jul 9, 2020
Messages
72
Reaction score
25
First Language
Spanish
Primarily Uses
RMMV
I was earlier on the web and saw some VisuStella pictures with some BEAUTIFUL Windowskins. I was wondering where would I be able to find some like those:

NEVpdN.png
YpO2W2.png

I'm certain that instead of Windowskins, they're images. Is there a place where I can get them? They look so nice! Either for free or paid. Or is there anyone who can make something similar? I'd really appreciate it. Thanks!
 

noctiluca

Veteran
Veteran
Joined
Jan 9, 2015
Messages
190
Reaction score
175
First Language
English
Primarily Uses
I think windowskins like this are usually made with pictures, and not made with the RPG Maker windowskin format, because the default windowskin format doesn’t allow complex frame shapes. In most cases it's probably better or easier to simply use pre-made, pre-sized UI graphics as a backdrop for scenes like shops or menus and have the window itself set to transparent. And for those, I think you'd really need to commission a graphics artist who can get the dimensions and coordinates of your menus and scenes so they can make window graphics in the proper size. There are too many different ways to do menu layouts for there to be readily available resources like that, whether free or paid.

But it is possible to change how RPG maker loads windowskin graphics by writing a plug-in, but then it’ll break the default windowskin graphics so you’ll *have* to use custom graphics made to the new specifications you set.

I made a script like that so I could have more aesthetically pleasing frame edges (rounded/diagonal corners, jagged edges to imply shouting dialogue etc) for auto-resized message windows, and it was a surprisingly simple change, but the way I made it breaks(!) the tiling pattern backdrop part. Not a big deal for my personal use since I wasn't planning on using them, but yeah. I would like to do some more work on it to allow for more flexible customization and tiling pattern compatibility and then eventually release it as a nice polished plugin, but even then it wouldn’t exactly be plug-and-play because of the custom graphics requirement.

If that's ok to you, you can copy+paste this code into a new plugin file named AdvancedWindowskin.js
JavaScript:
//=============================================================================
// RPG Maker MZ - Advanced Windowskin
//=============================================================================

/*:
 * @target MZ
 * @plugindesc Changes the back sprite of the windowskin so that it's sliced up
 * the same way that windowskin frames are. Allows for a 24px wide frame area by default.
 * Overwrites some Window functions, BREAKS tiling patterns, and can make standard windowskins look weird, so use w/care.
 * @author noctiluca
 *
 * @help AdvancedWindowskin.js
 *
 */

Window.prototype._createBackSprite = function() {
    this._backSprite = new Sprite();
    for (let i = 0; i < 9; i++) {
        this._backSprite.addChild(new Sprite());
    }
    // this._backSprite.addChild(new TilingSprite());
    this._container.addChild(this._backSprite);
};

Window.prototype._refreshBack = function() {
    const drect = { x: 0, y: 0, width: this._width, height: this._height };
    const srect = { x: 0, y: 0, width: 96, height: 96};
    const m = 24;
    for (const child of this._backSprite.children) {
        child.bitmap = this._windowskin;
    }
    this._setRectPartsGeometry(this._backSprite, srect, drect, m);
    // const m = this._margin;
    // const w = Math.max(0, this._width - m * 2);
    // const h = Math.max(0, this._height - m * 2);
     const sprite = this._backSprite;
    // const tilingSprite = sprite.children[0];
    // [Note] We use 95 instead of 96 here to avoid blurring edges.
    // sprite.bitmap = this._windowskin;
    // sprite.setFrame(0, 0, 95, 95);
    // sprite.move(m, m);
    // sprite.scale.x = w / 95;
    // sprite.scale.y = h / 95;
    // tilingSprite.bitmap = this._windowskin;
    // tilingSprite.setFrame(0, 96, 96, 96);
    // tilingSprite.move(0, 0, w, h);
    // tilingSprite.scale.x = 96 / w;
    // tilingSprite.scale.y = 96 / h;
     sprite.setColorTone(this._colorTone);
};

I attached a couple example windowskins that need this script to work.. nothing fancy, I didn't want to copy VisuStella's, but you're free to use them if you want to.

Screen Shot 2021-07-25 at 3.32.19 PM.png
^ WindowA looks like this in-game

Screen Shot 2021-07-25 at 3.33.09 PM.png
^ and WindowB looks like this in-game
 

Attachments

  • WindowA.png
    WindowA.png
    2.6 KB · Views: 5
  • WindowB.png
    WindowB.png
    2.2 KB · Views: 7

Quimey

Veteran
Veteran
Joined
Jul 9, 2020
Messages
72
Reaction score
25
First Language
Spanish
Primarily Uses
RMMV
I think windowskins like this are usually made with pictures, and not made with the RPG Maker windowskin format, because the default windowskin format doesn’t allow complex frame shapes. In most cases it's probably better or easier to simply use pre-made, pre-sized UI graphics as a backdrop for scenes like shops or menus and have the window itself set to transparent. And for those, I think you'd really need to commission a graphics artist who can get the dimensions and coordinates of your menus and scenes so they can make window graphics in the proper size. There are too many different ways to do menu layouts for there to be readily available resources like that, whether free or paid.

But it is possible to change how RPG maker loads windowskin graphics by writing a plug-in, but then it’ll break the default windowskin graphics so you’ll *have* to use custom graphics made to the new specifications you set.

I made a script like that so I could have more aesthetically pleasing frame edges (rounded/diagonal corners, jagged edges to imply shouting dialogue etc) for auto-resized message windows, and it was a surprisingly simple change, but the way I made it breaks(!) the tiling pattern backdrop part. Not a big deal for my personal use since I wasn't planning on using them, but yeah. I would like to do some more work on it to allow for more flexible customization and tiling pattern compatibility and then eventually release it as a nice polished plugin, but even then it wouldn’t exactly be plug-and-play because of the custom graphics requirement.

If that's ok to you, you can copy+paste this code into a new plugin file named AdvancedWindowskin.js
JavaScript:
//=============================================================================
// RPG Maker MZ - Advanced Windowskin
//=============================================================================

/*:
 * @target MZ
 * @plugindesc Changes the back sprite of the windowskin so that it's sliced up
 * the same way that windowskin frames are. Allows for a 24px wide frame area by default.
 * Overwrites some Window functions, BREAKS tiling patterns, and can make standard windowskins look weird, so use w/care.
 * @author noctiluca
 *
 * @help AdvancedWindowskin.js
 *
 */

Window.prototype._createBackSprite = function() {
    this._backSprite = new Sprite();
    for (let i = 0; i < 9; i++) {
        this._backSprite.addChild(new Sprite());
    }
    // this._backSprite.addChild(new TilingSprite());
    this._container.addChild(this._backSprite);
};

Window.prototype._refreshBack = function() {
    const drect = { x: 0, y: 0, width: this._width, height: this._height };
    const srect = { x: 0, y: 0, width: 96, height: 96};
    const m = 24;
    for (const child of this._backSprite.children) {
        child.bitmap = this._windowskin;
    }
    this._setRectPartsGeometry(this._backSprite, srect, drect, m);
    // const m = this._margin;
    // const w = Math.max(0, this._width - m * 2);
    // const h = Math.max(0, this._height - m * 2);
     const sprite = this._backSprite;
    // const tilingSprite = sprite.children[0];
    // [Note] We use 95 instead of 96 here to avoid blurring edges.
    // sprite.bitmap = this._windowskin;
    // sprite.setFrame(0, 0, 95, 95);
    // sprite.move(m, m);
    // sprite.scale.x = w / 95;
    // sprite.scale.y = h / 95;
    // tilingSprite.bitmap = this._windowskin;
    // tilingSprite.setFrame(0, 96, 96, 96);
    // tilingSprite.move(0, 0, w, h);
    // tilingSprite.scale.x = 96 / w;
    // tilingSprite.scale.y = 96 / h;
     sprite.setColorTone(this._colorTone);
};

I attached a couple example windowskins that need this script to work.. nothing fancy, I didn't want to copy VisuStella's, but you're free to use them if you want to.

View attachment 196870
^ WindowA looks like this in-game

View attachment 196871
^ and WindowB looks like this in-game
I really appreciate you took the time to write and make all this to help me out. You are very nice!

Thanks for that, it looks great! By the way, which font did you use there? Looks nice!
 

Latest Threads

Latest Posts

Latest Profile Posts

Another comic with Backstage Malak...
If you want to ask him anything, you can ask on my DeviantArt page! I'm not sure if you're allowed to do it here.
Forum tip of the day ...
If you get a temporary suspension for being a jerk to people who are trying to help you, and arguing with mods and admins, don't go making new accounts. Chances are, if you p**s us off enough to suspend you for a week, we're not going to hesitate giving you a permanent ban when you give us a reason.
E_6fAErVkAQILXu.png
I'm so close to releasing my game on steam! :blush::blush::blush:
Us:
"This game is awesome! I wish there are more games like this in the future."
Also us:
"I hate how games stopped being original and start copying other successful games."
Should've done this a few days ago but...
PRI_200136808.jpg
Rest in Peace, Sir Clive Sinclair
1940 - 2021
Entrepreneur, Technologist, Father of the Modern British Computing Industry, and protagonist of Legend of ZUN.

Without you, England's games and tech industry wouldn't be where it is.

Forum statistics

Threads
115,288
Messages
1,088,669
Members
149,919
Latest member
CORYGOD
Top