RMMV Change WindowSkin when it matches Color Index

[DorFenn]

Hello everyone! You see, I'm creating a visual interface for Skills in combat, and the cursor is Square (Normal), so I copied the original Window Skin, saved a duplicate (but edited it to be a circle), then it occurred to me that at select a Skill, the windowskin will change according to that circle but for the other choices it will remain the same as the original, I attach the code of what I have been trying to do and photos of what the comparison looks like.

I thank you in advance for your help.

Spoiler: Code

Window_SkillList.prototype.drawItem = function(index) {
    if (index < 4) var skill = this._data[index];
    if (skill) {
        //var costWidth = this.costWidth();
        var rect = this.itemRect(index);
        rect.width -= this.textPadding();
        switch (this._actor.getColorSkillSlot(index)) {
        case "R":
            var colorindex = 0;
            this.drawApCost(skill,rect.x + 14,rect.y + rect.height - 58,rect.width);
            this.drawSkillCost(skill, rect.x + 35, rect.y+rect.height / 2-26, rect.width, 'right');
            break;
        case "G":
            var colorindex = 1;
            this.drawApCost(skill,rect.x + 20,rect.y + rect.height - 66,rect.width);
            this.drawSkillCost(skill, rect.x + 24, rect.y+rect.height / 2-35, rect.width, 'right');
            break;
        case "B":
            var colorindex = 2;
            this.drawApCost(skill,rect.x + 15,rect.y + rect.height - 65,rect.width);
            this.drawSkillCost(skill, rect.x + 30, rect.y+rect.height / 2-34, rect.width, 'right');
            break;
        case "":
            var colorindex = 3;
            break;
      var color = this._actor.SlotColor(index);
      if (color = 1) {
      this.windowskin = ImageManager.loadSystem("Window - round");
      this._scene._windowLayer.refreshWindowskins();     
       } else {
      this.windowskin = ImageManager.loadSystem("Window");
      };
    };

Spoiler: Circle Windowskin

Spoiler: Box Windowskin

 

[ATT_Turan]

1 - It's best practice to make all of your file names adhere to HTML naming conventions. The file "Window - round" may produce loading errors on some systems after your game has been deployed.

2 - I think this method is more convoluted than you need it to be. Instead of trying to modify and redirect to different windowskins, why not just have a window with no visible background, show an image of what you want it to look like, and display any text on top of that?

 

[DorFenn]

Hello Turan!

2 - I think this method is more convoluted than you need it to be. Instead of trying to modify and redirect to different windowskins, why not just have a window with no visible background, show an image of what you want it to look like, and display any text on top of that?

My game has almost no backgrounds in combat, as you can see in the two photos I attached in the original post (There would be 3 counting the one I just added). I wanted to use this method of changing via script because I remember doing something similar in Rpg Maker VXA, which although the language is infinitely different, I assumed I could achieve something similar.
I didn't think it would be difficult to change the Window Skin in just the Selections.

 

[ATT_Turan]

Okay...so I don't understand what the question is.

What doesn't work? What happens instead? It looks from your screenshot like it is displaying the version with the extra circle in it.

 

[DorFenn]

Sorry, I'm pretty bad at explaining.
The backgrounds of the Skills are as you see them, the problem is that the original Windowskin draws a square or rectangle as a cursor (What shines), so I want to make that cursor change to the modified Windowskin (The circle).
I attached a photo to give you an idea of what I want to achieve.

Spoiler: Image

I can't get Windowskin to apply, I just need its cursor, but it is incorrectly "programmed" so I only get Case A no matter how many times I pass over the green option.

 

[ATT_Turan]

You can't easily change that shape because it has nothing to do with the windowskin graphic. It has to do with the fact that all MV windows are defined as rectangular canvases (you can see stuff like itemRect in the code in your first post).

So when it draws using the windowskin or draws cursors, it's filling the area of a rectangle.

Perhaps someone more knowledgeable about the low level JavaScript/HTML interactions will be able to give you a workaround.

(that being said, the Window._refreshCursor() method does reference this._windowskin so if you're correctly changing it for the window, that should be what gets referenced for the cursor)

 

[caethyril]

It sounds like you'd need an override for how the cursor is drawn. By default it is drawn in 9 parts: 4 corners, 4 edges, and the centre. The corners are tiny, the edges get stretched.

This might work?

Spoiler: plugin code

/*:
 * @target MV
 * @plugindesc Draw cursor as 4 quadrants instead of bordered area.
 * @author Caethyril
 * @url https://forums.rpgmakerweb.com/threads/161470/
 * @help Free to use and/or modify for any project, no credit required.
 */
// Override - quadrants instead of fenced area.
Window.prototype._refreshCursor = function() {
    var pad = this._padding;
    var x = this._cursorRect.x + pad - this.origin.x;
    var y = this._cursorRect.y + pad - this.origin.y;
    var w = this._cursorRect.width;
    var h = this._cursorRect.height;
    var x2 = Math.max(x, pad);
    var y2 = Math.max(y, pad);
    var ox = x - x2;
    var oy = y - y2;
    var w2 = Math.min(w, this._width - pad - x2);
    var h2 = Math.min(h, this._height - pad - y2);
    var bmp = new Bitmap(w2, h2);

    this._windowCursorSprite.bitmap = bmp;
    this._windowCursorSprite.setFrame(0, 0, w2, h2);
    this._windowCursorSprite.move(x2, y2);

    var skin = this._windowskin;
    if (w > 0 && h > 0 && skin) {
        var p = 96;
        var q = 48 / 2;
        var hw = w / 2;
        var hh = h / 2;
        bmp.blt(skin, p+q, p+0, q, q, ox+hw, oy+ 0, hw, hh);
        bmp.blt(skin, p+0, p+0, q, q, ox+ 0, oy+ 0, hw, hh);
        bmp.blt(skin, p+0, p+q, q, q, ox+ 0, oy+hh, hw, hh);
        bmp.blt(skin, p+q, p+q, q, q, ox+hw, oy+hh, hw, hh);
    }
};

 

[ShadowDragon]

as a sidnote, when using a switch statement, I would suggest to add a default
to return too:

like
default:
console.log("an error in the commands")

the message doesn't matter, but something to refer too in case something happen.
there are cases the default will never hitted or true, but its safe to add one just in case.