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 Profile Posts

Just finished eventing a couple simple puzzles in RMMV, for my very first game "Sample Quest." Just messing around, throwing things together, and calling it a story XD On a non-RM note, got my hair cut today!
I feel the need to inform everyone on the forums NOT to go with Web Hosting Canada for your hosting needs. It is by far the worst customer service and just overall experience I have ever had with hosting and I am Canadian...
BCj
Got another eye surgery monday. Hope I'll recover quick and all's well. A bit tired of surgeries. On a happy note, working on the next chapter of Escalia so hope I can continue soon :)
Celebrating the arrival of autumn in the Northern Hemisphere :)

Forum statistics

Threads
115,367
Messages
1,089,310
Members
150,056
Latest member
Bigmem
Top