UmbrotheUmbreon

Legendary Umbreon
Veteran
Joined
Jan 25, 2015
Messages
69
Reaction score
16
First Language
English
Primarily Uses
RMMV
This is gonna be a lot to unpack, so apologies if it's too much (I'll do my best to keep it short). This project is being done with RPG Maker MV

In my game, I want a custom status screen that shows the player's Alignment values. Alignment in my game is based on how many times an elemental skill is used by the player. I have one variable for each of the elements, and that variable increases upon victory in battle. I've coded in a way to make this system work (so far). I even managed to find a way to add in the Alignment button through research and going through the code. The button works almost as intended (it currently has you select the actor when it should just display the screen when the button is pressed), but for testing purposes is fine as is for now.
1664937455185.png
Now toying with the window JS I was able to duplicate the status screen on this. Messing around with a lot of the code, I managed to get a minor gist of how the code works with displaying the window (I'm not great with graphic designing stuff so a lot of things are still lost on me).
1664937625759.png
I want to replace the block that draws parameters with a string of each element (with the proper color and icon) and then display the variable that correlates with that element (So Fire's variable is 10, so I want the Fire section to display variable 10). Essentially it should look like this (using Fire and Lightning as an example):

(Fire Icon) (red text)FIRE: (Variable 10)
(Lightning Icon) (yellow text)LIGHTNING: (Variable 11)

If there's something I forgot to explain or wasn't understood please let me know. I appreciate the help
 

dopan

Veteran
Veteran
Joined
Mar 27, 2020
Messages
1,220
Reaction score
641
First Language
German
Primarily Uses
RMMV
code for variables:
$gameVariables.value(variable_ID);

change text color in windows:
(number depends on your window.png from system folder)
this.changeTextColor(this.textColor(10));
reset Color :
this.resetTextColor();

draw text:
(number define text position)
this.drawText('FIRE', 325, 10);
-> the numbers can also be replaced by variables if you know the correct names from basic code,, something like :
this.lineHeight() * 1
this.lineHeight() * 2
ect

example:
this.drawText('FIRE', 325, this.lineHeight() * 1);

draw text can also display numbers, just use the number instead of "Fire"
i guess this should work aswell:

(i'm not sure on this)

this.drawText($gameVariables.value(variable_ID), 325, 10);

sry i cant give more detailled info,..

And you could look into the rpg.windows plugin to look what basic code is used to draw/display stuff ect..
 
Last edited:

ct_bolt

Creator
Veteran
Joined
May 3, 2012
Messages
1,283
Reaction score
824
First Language
Javascript
Primarily Uses
RMMZ
In my game, I want a custom status screen that shows the player's Alignment values. Alignment in my game is based on how many times an elemental skill is used by the player. I have one variable for each of the elements, and that variable increases upon victory in battle.

I want to replace the block that draws parameters with a string of each element (with the proper color and icon) and then display the variable that correlates with that element (So Fire's variable is 10, so I want the Fire section to display variable 10). Essentially it should look like this (using Fire and Lightning as an example):

(Fire Icon) (red text)FIRE: (Variable 10)
(Lightning Icon) (yellow text)LIGHTNING: (Variable 11)

Here ya go ;)
Made a demo plugin for you. Take what you need from it :)

CTB_VariableWindowMV Plugin: Click here to Download

Example looks like this:
1664947674162.png

Code made for the window in the example:
JavaScript:
    //-----------------------------------------------------------------------------
    // Window_Variables
    //
    // The window for displaying variables

    function Window_Variables() {
        this.initialize.apply(this, arguments);
    }

    Window_Variables.prototype = Object.create(Window_Selectable.prototype);
    Window_Variables.prototype.constructor = Window_Variables;

    Window_Variables.prototype.initialize = function() {
        var width = Graphics.boxWidth;
        var height = Graphics.boxHeight;
        Window_Selectable.prototype.initialize.call(this, 0, 0, width, height);
        this._actor = null;
    
        this._bottomMessage = "'Alignment of ' + this._actor.name()";
    
        this._variableData = [{text:'FIRE: ', script: $gameVariables.value(10), color: '#FF0000', icon: 64},
                              {text:'LIGHTNING: ', script: $gameVariables.value(11), color: '#FFFF00', icon: 66}
                             ];
    
        this.refresh();
        this.activate();
    };

    Window_Variables.prototype.setActor = function(actor) {
        if (this._actor !== actor) {
            this._actor = actor;
            this.refresh();
        }
    };

    Window_Variables.prototype.refresh = function() {
        this.contents.clear();
        if (this._actor) {
            var lineHeight = this.lineHeight();
            this.drawBlock1(lineHeight * 0);
            this.drawHorzLine(lineHeight * 1);
            this.drawBlock2(lineHeight * 2);
            this.drawHorzLine(lineHeight * 6);
            this.drawCustomBlock(lineHeight * 7);
            this.drawHorzLine(lineHeight * 13);
            this.drawBlock4(lineHeight * 14);
        }
    };

    Window_Variables.prototype.drawBlock1 = function(y) {
        this.drawActorName(this._actor, 6, y);
    };

    Window_Variables.prototype.drawBlock2 = function(y) {
        this.drawActorFace(this._actor, 12, y);
    };

    Window_Variables.prototype.drawCustomBlock = function(y) {
        this.drawVariables(48, y);
    };

    Window_Variables.prototype.drawVariables = function(x, y) {
        var lineHeight = this.lineHeight();
        this._variableData.forEach(function(v, i){
            var paramId = i + 2;
            var y2 = y + lineHeight * i;
            this.drawExtraData(v.text, v.icon, eval(v.script), x, y2, v.color);
        }, this);
    };

    Window_Variables.prototype.drawBlock4 = function(y) {
        this.drawBottomMessage(6, y);
    };

    Window_Variables.prototype.drawHorzLine = function(y) {
        var lineY = y + this.lineHeight() / 2 - 1;
        this.contents.paintOpacity = 48;
        this.contents.fillRect(0, lineY, this.contentsWidth(), 2, this.lineColor());
        this.contents.paintOpacity = 255;
    };

    Window_Variables.prototype.lineColor = function() {
        return this.normalColor();
    };

    Window_Variables.prototype.drawBottomMessage= function(x, y) {
        this.drawTextEx(eval(this._bottomMessage), x, y);
    };
 
    Window_Base.prototype.drawExtraData = function(text, icon, script, x, y, color, width) {
        width = width || 312;
        var iconBoxWidth = Window_Base._iconWidth + 4;
        this.changeTextColor(color);
        this.drawIcon(icon, x + 2, y + 2);
        this.drawText(text, x + iconBoxWidth, y, width - iconBoxWidth);
        this.resetTextColor();
        this.drawText(eval(script), x + iconBoxWidth + this.textWidth(text), y, width - iconBoxWidth);
    };
 
Last edited:

UmbrotheUmbreon

Legendary Umbreon
Veteran
Joined
Jan 25, 2015
Messages
69
Reaction score
16
First Language
English
Primarily Uses
RMMV
code for variables:
$gameVariables.value(variable_ID);

change text color in windows:
(number depends on your window.png from system folder)
this.changeTextColor(this.textColor(10));
reset Color :
this.resetTextColor();

draw text:
(number define text position)
this.drawText('FIRE', 325, 10);
-> the numbers can also be replaced by variables if you know the correct names from basic code,, something like :
this.lineHeight() * 1
this.lineHeight() * 2
ect

example:
this.drawText('FIRE', 325, this.lineHeight() * 1);

draw text can also display numbers, just use the number instead of "Fire"
i guess this should work aswell:

(i'm not sure on this)

this.drawText($gameVariables.value(variable_ID), 325, 10);

sry i cant give more detailled info,..

And you could look into the rpg.windows plugin to look what basic code is used to draw/display stuff ect..

A lot of this was actually very helpful and I got most of what I wanted. Thank you!

Here ya go ;)
Made a demo plugin for you. Take what you need from it :)

CTB_VariableWindowMV Plugin: Click here to Download

I appreciate the effort you went through to make this, but there is a lot about this code that confuses me. I only have a grasp on certain aspects of coding (but always trying to learn more). It's also a bit harder to implement this particular code since I already have a set up for the Alignment window in place. I wouldn't mind the help to fully integrate that code, since it seems I can easily add the other elements in if I understand that part correctly.
 

ct_bolt

Creator
Veteran
Joined
May 3, 2012
Messages
1,283
Reaction score
824
First Language
Javascript
Primarily Uses
RMMZ
I appreciate the effort you went through to make this, but there is a lot about this code that confuses me. I only have a grasp on certain aspects of coding (but always trying to learn more). It's also a bit harder to implement this particular code since I already have a set up for the Alignment window in place. I wouldn't mind the help to fully integrate that code, since it seems I can easily add the other elements in if I understand that part correctly.
JavaScript:
// Main thing is to add something like this._variableData to your windows initialize function before calling refresh
// the variable "_variableData" is an array of data objects to be used to display the variable icon/text/script/color
    Window_Variables.prototype.initialize = function() {
        var width = Graphics.boxWidth;
        var height = Graphics.boxHeight;
        Window_Selectable.prototype.initialize.call(this, 0, 0, width, height);
        this._actor = null;
        this._bottomMessage = "'Alignment of ' + this._actor.name()";
        this._variableData = [{text:'FIRE: ', script: $gameVariables.value(10), color: '#FF0000', icon: 64},
                              {text:'LIGHTNING: ', script: $gameVariables.value(11), color: '#FFFF00', icon: 66}
                             ];
        this.refresh();
        this.activate();
    };

// In the refresh function call "drawCustomBlock" at whatever y location you want
    Window_Variables.prototype.refresh = function() {
        this.contents.clear();
        if (this._actor) {
            var lineHeight = this.lineHeight();
            this.drawBlock1(lineHeight * 0);
            this.drawHorzLine(lineHeight * 1);
            this.drawBlock2(lineHeight * 2);
            this.drawHorzLine(lineHeight * 6);
            this.drawCustomBlock(lineHeight * 7);
            this.drawHorzLine(lineHeight * 13);
            this.drawBlock4(lineHeight * 14);
        }
    };

// All this really does is calls the "drawVariables" function at x, y... (48, y)
    Window_Variables.prototype.drawCustomBlock = function(y) {
        this.drawVariables(48, y);
    };

// Cycles through each value of the "_variableData" array and draws the text/icon/script in the chosen color
    Window_Variables.prototype.drawVariables = function(x, y) {
        var lineHeight = this.lineHeight();
        this._variableData.forEach(function(v, i){
            var y2 = y + lineHeight * i;
            this.drawExtraData(v.text, v.icon, eval(v.script), x, y2, v.color);
        }, this);
    };

// You can use this as is with any other window to draw an icon with text and another javascipt as x & y location
    Window_Base.prototype.drawExtraData = function(text, icon, script, x, y, color, width) {
        width = width || 312;
        var iconBoxWidth = Window_Base._iconWidth + 4;
        this.changeTextColor(color);
        this.drawIcon(icon, x + 2, y + 2);
        this.drawText(text, x + iconBoxWidth, y, width - iconBoxWidth);
        this.resetTextColor();
        this.drawText(eval(script), x + iconBoxWidth + this.textWidth(text), y, width - iconBoxWidth);
    };
I tried to explain the process. Hope that helps?

If you post the code you have for your window I can show how to utilize this.
..or if you have questions about any particular part of that code, just let me know what you want to know more about & I can explain further
 
Last edited:

UmbrotheUmbreon

Legendary Umbreon
Veteran
Joined
Jan 25, 2015
Messages
69
Reaction score
16
First Language
English
Primarily Uses
RMMV
JavaScript:
// Main thing is to add something like this._variableData to your windows initialize function before calling refresh
// the variable "_variableData" is an array of data objects to be used to display the variable icon/text/script/color
    Window_Variables.prototype.initialize = function() {
        var width = Graphics.boxWidth;
        var height = Graphics.boxHeight;
        Window_Selectable.prototype.initialize.call(this, 0, 0, width, height);
        this._actor = null;
        this._bottomMessage = "'Alignment of ' + this._actor.name()";
        this._variableData = [{text:'FIRE: ', script: $gameVariables.value(10), color: '#FF0000', icon: 64},
                              {text:'LIGHTNING: ', script: $gameVariables.value(11), color: '#FFFF00', icon: 66}
                             ];
        this.refresh();
        this.activate();
    };

// In the refresh function call "drawCustomBlock" at whatever y location you want
    Window_Variables.prototype.refresh = function() {
        this.contents.clear();
        if (this._actor) {
            var lineHeight = this.lineHeight();
            this.drawBlock1(lineHeight * 0);
            this.drawHorzLine(lineHeight * 1);
            this.drawBlock2(lineHeight * 2);
            this.drawHorzLine(lineHeight * 6);
            this.drawCustomBlock(lineHeight * 7);
            this.drawHorzLine(lineHeight * 13);
            this.drawBlock4(lineHeight * 14);
        }
    };

// All this really does is calls the "drawVariables" function at x, y... (48, y)
    Window_Variables.prototype.drawCustomBlock = function(y) {
        this.drawVariables(48, y);
    };

// Cycles through each value of the "_variableData" array and draws the text/icon/script in the chosen color
    Window_Variables.prototype.drawVariables = function(x, y) {
        var lineHeight = this.lineHeight();
        this._variableData.forEach(function(v, i){
            var paramId = i + 2;
            var y2 = y + lineHeight * i;
            this.drawExtraData(v.text, v.icon, eval(v.script), x, y2, v.color);
        }, this);
    };

// You can use this as is with any other window to draw an icon with text and another javascipt as x & y location
    Window_Base.prototype.drawExtraData = function(text, icon, script, x, y, color, width) {
        width = width || 312;
        var iconBoxWidth = Window_Base._iconWidth + 4;
        this.changeTextColor(color);
        this.drawIcon(icon, x + 2, y + 2);
        this.drawText(text, x + iconBoxWidth, y, width - iconBoxWidth);
        this.resetTextColor();
        this.drawText(eval(script), x + iconBoxWidth + this.textWidth(text), y, width - iconBoxWidth);
    };
I tried to explain the process. Hope that helps?

If you post the code you have for your window I can show how to utilize this.
..or if you have questions about any particular part of that code, just let me know what you want to know more about & I can explain further
JavaScript:
function Window_Alignment() {
    this.initialize.apply(this, arguments);
}

Window_Alignment.prototype = Object.create(Window_Selectable.prototype);
Window_Alignment.prototype.constructor = Window_Alignment;

Window_Alignment.prototype.initialize = function() {
    var width = Graphics.boxWidth;
    var height = Graphics.boxHeight;
    Window_Selectable.prototype.initialize.call(this, 0, 0, width, height);
    this._actor = null;
    this.refresh();
    this.activate();
};

Window_Alignment.prototype.setActor = function(actor) {
    if (this._actor !== actor) {
        this._actor = actor;
        this.refresh();
    }
};

Window_Alignment.prototype.refresh = function() {
    this.contents.clear();
    if (this._actor) {
        var lineHeight = this.lineHeight();
        this.drawBlock1(lineHeight * 1);
        this.drawBlock2(lineHeight * 0);
        this.drawHorzLine(lineHeight * 4);
        this.drawBlock3(lineHeight * 5);
        this.drawBlock4(lineHeight * 14);
        this.drawBlock5(lineHeight * 6);
        this.drawBlock6(lineHeight * 7);
        this.drawBlock7(lineHeight * 8);
        this.drawBlock8(lineHeight * 9);
        this.drawBlock9(lineHeight * 10);
        this.drawBlock10(lineHeight * 11);
        this.drawBlock11(lineHeight * 12);
        this.drawBlock12(lineHeight * 13);
    }
};

Window_Alignment.prototype.drawBlock1 = function(y) {
    this.drawActorName(this._actor, 1, y);
};

Window_Alignment.prototype.drawBlock2 = function(y) {
    this.drawActorFace(this._actor, 300, y);
};

Window_Alignment.prototype.drawBlock3 = function(y) {
    this.drawText($dataSystem.skillTypes[64], 25, y);
    this.changeTextColor(this.textColor(10));
    this.drawText('FIRE', 25, y);
    this.resetTextColor();
    this.drawText($gameVariables.value(10), 100, y);
};

Window_Alignment.prototype.drawBlock4 = function(y) {
    this.drawProfile(6, y);
};

Window_Alignment.prototype.drawBlock5 = function(y) {
    this.changeTextColor(this.textColor(11));
    this.drawText('NATURE', 25, y);
    this.resetTextColor();
    this.drawText($gameVariables.value(11), 135, y);
};

Window_Alignment.prototype.drawBlock6 = function(y) {
    this.changeTextColor(this.textColor(14));
    this.drawText('LIGHTNING', 25, y);
    this.resetTextColor();
    this.drawText($gameVariables.value(12), 170, y);
};

Window_Alignment.prototype.drawBlock7 = function(y) {
    this.changeTextColor(this.textColor(9));
    this.drawText('AQUA', 25, y);
    this.resetTextColor();
    this.drawText($gameVariables.value(13), 100, y);
};

Window_Alignment.prototype.drawBlock8 = function(y) {
    this.changeTextColor(this.textColor(23));
    this.drawText('ICE', 25, y);
    this.resetTextColor();
    this.drawText($gameVariables.value(14), 90, y);
};

Window_Alignment.prototype.drawBlock9 = function(y) {
    this.changeTextColor(this.textColor(25));
    this.drawText('EARTH', 25, y);
    this.resetTextColor();
    this.drawText($gameVariables.value(15), 120, y);
};

Window_Alignment.prototype.drawBlock10 = function(y) {
    this.changeTextColor(this.textColor(24));
    this.drawText('WIND', 25, y);
    this.resetTextColor();
    this.drawText($gameVariables.value(16), 100, y);
};

Window_Alignment.prototype.drawBlock11 = function(y) {
    this.changeTextColor(this.textColor(17));
    this.drawText('HOLY', 25, y);
    this.resetTextColor();
    this.drawText($gameVariables.value(17), 100, y);
};

Window_Alignment.prototype.drawBlock12 = function(y) {
    this.changeTextColor(this.textColor(15));
    this.drawText('DARK', 25, y);
    this.resetTextColor();
    this.drawText($gameVariables.value(18), 100, y);
};

Window_Alignment.prototype.drawHorzLine = function(y) {
    var lineY = y + this.lineHeight() / 2 - 1;
    this.contents.paintOpacity = 175;
    this.contents.fillRect(0, lineY, this.contentsWidth(), 2, this.lineColor());
    this.contents.paintOpacity = 255;
};

Window_Alignment.prototype.lineColor = function() {
    return this.normalColor();
};

Window_Alignment.prototype.drawBasicInfo = function(x, y) {
    var lineHeight = this.lineHeight();
    this.drawActorLevel(this._actor, x, y + lineHeight * 0);
    this.drawActorIcons(this._actor, x, y + lineHeight * 1);
};

Window_Alignment.prototype.drawParameters = function(x, y) {
    var lineHeight = this.lineHeight();
    for (var i = 0; i < 6; i++) {
        var paramId = i + 2;
        var y2 = y + lineHeight * i;
        this.changeTextColor(this.systemColor());
        this.drawText(TextManager.param(paramId), x, y2, 90);
        this.resetTextColor();
        this.drawText(this._actor.param(paramId), x - 90, y2, 60, 'right');
    }
};

Window_Alignment.prototype.drawProfile = function(x, y) {
    this.drawTextEx(this._actor.profile(), x, y);
};
I know this code will shrink a significant amount if I implement your code, but this is what it currently looks like for the window. The code below is the Scene for handling it
JavaScript:
function Scene_Alignment() {
    this.initialize.apply(this, arguments);
}

Scene_Alignment.prototype = Object.create(Scene_MenuBase.prototype);
Scene_Alignment.prototype.constructor = Scene_Alignment;

Scene_Alignment.prototype.initialize = function() {
    Scene_MenuBase.prototype.initialize.call(this);
};

Scene_Alignment.prototype.create = function() {
    Scene_MenuBase.prototype.create.call(this);
    this._statusWindow = new Window_Alignment();
    this._statusWindow.setHandler('cancel',   this.popScene.bind(this));
    this.addWindow(this._statusWindow);
};

Scene_Alignment.prototype.start = function() {
    Scene_MenuBase.prototype.start.call(this);
    this.refreshActor();
};

Scene_Alignment.prototype.refreshActor = function() {
    var actor = this.actor();
    this._statusWindow.setActor(actor);
};

Scene_Alignment.prototype.onActorChange = function() {
    this.refreshActor();
    this._statusWindow.activate();
};
 

Latest Threads

Latest Posts

Latest Profile Posts

ScreenShot_11_28_2022_7_52_34.png
FINALLY, I figured out how to get the "tail" to appear IN the window and not directly below it lol. now it looks like it's part of the window and not hanging from the bottom of it.
Twitch! Stream is about to go live with some Dark Souls 2! Feel free to drop by!
Has anyone ever wanted to choose how they play? I've been working on Black Moon, a project where you can fight against ancient beasts by commanding an army of former gods and goddesses. But what makes it different is that there are different ways to give your choice heroes either Red, Green, or Blue weapons/armor, and each grants different abilities. More coming soon!
Can Elon crash Twitter faster? I want something as big to replace it so I can promote my game there. I also need to actually do promotion this time, heh.
Thinking of getting a mechanical keyboard, eventually! Would anyone be interested in a chill keycap-painting stream?

Forum statistics

Threads
126,911
Messages
1,182,286
Members
166,730
Latest member
Ryknight5
Top