Alt Menu Status

[jackken123]

Hi,

I'm now creating my own menu status.
And I know script like this could make it 3 * 2

Window_MenuStatus.prototype.numVisibleRows = function() {
        return 3;
};
Window_MenuStatus.prototype.maxCols = function() {
        return 2;
};

But if I want column 1 to have just 1 actor,
and column 2 to have 5 actors, then how should I do?
Just like a pokemon style.

Thanks.

 

[Poryg]

Don't rely on these generic functions, build it on your own.
print first party member's face etc. on certain coordinates, for example 90, 200. Then:
for (var i = 1; i < $gameParty.members.length; i++) {
print face of party member i on coordinates 300, 40*i.
}
Just an illustration of the idea, I'll let you construct it yourself.

 

[jackken123]

Don't rely on these generic functions, build it on your own.
print first party member's face etc. on certain coordinates, for example 90, 200. Then:
for (var i = 1; i < $gameParty.members.length; i++) {
print face of party member i on coordinates 300, 40*i.
}
Just an illustration of the idea, I'll let you construct it yourself.

Thanks for the idea.
But I have to say I don't know how to exactly do this.
I use these kind of generic functions because I just start to learn this, so if it's ok, an would be great to help me learn this.
Thank you so much.

 

[Poryg]

I'll take it simply and just copy and edit two fnctions from the status window.

Window_MenuStatus.prototype.drawItemBackground = function(index) {
    if (index === this._pendingIndex) {
        var rect = this.itemRect(index);
        var color = this.pendingColor();
        this.changePaintOpacity(false);
000if (index == 0) {
000this.contents.fillRect (rect.x - 250, rect.y + 150, rect.width, rect.height, color)
000}else {
        this.contents.fillRect(rect.x, rect.y, rect.width, rect.height, color);
000}
        this.changePaintOpacity(true);
    }
};

Window_MenuStatus.prototype.drawItemImage = function(index) {
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
    this.changePaintOpacity(actor.isBattleMember());
000if (index == 0) {
000this.drawActorFace (actor, rect.x - 249, rect.y + 151, Window_Base._faceWidth, Window_Base._faceHeight)
000}else {
    this.drawActorFace(actor, rect.x + 1, rect.y + 1, Window_Base._faceWidth, Window_Base._faceHeight);
000}
    this.changePaintOpacity(true);
};
Window_MenuStatus.prototype.drawItemStatus = function(index) {
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
000if (index == 0) {
000var x = rect.x - 88
000var y = rect.y + rect.height / 2 - this.lineHeight () * 1.5 + 150
000var width = rect.width - x - this.textPadding ();
000this.drawActorSimpleStatus (actor, x, y, width)
000}else {
    var x = rect.x + 162;
    var y = rect.y + rect.height / 2 - this.lineHeight() * 1.5;
    var width = rect.width - x - this.textPadding();
    this.drawActorSimpleStatus(actor, x, y, width);
000}
};

I made all changes visible by adding 000 in front of them.
The first function is responsible for actor's background. What you need is to relocate it if the party member is first ($gameParty.members()[0]).
drawItemImage is actor's face. You need to do the same, if the actor is first party member, move it. Else it stays the same.
And the last one draws actor's HP, MP and the rest. Again, if the actor is first party member, move it. Else it stays the same.
Of course this is not a fully fledged menu, just a demonstration of what you need to do to move actor in the menu.

 

[jackken123]

I'll take it simply and just copy and edit two fnctions from the status window.

Window_MenuStatus.prototype.drawItemBackground = function(index) {
    if (index === this._pendingIndex) {
        var rect = this.itemRect(index);
        var color = this.pendingColor();
        this.changePaintOpacity(false);
000if (index == 0) {
000this.contents.fillRect (rect.x - 250, rect.y + 150, rect.width, rect.height, color)
000}else {
        this.contents.fillRect(rect.x, rect.y, rect.width, rect.height, color);
000}
        this.changePaintOpacity(true);
    }
};

Window_MenuStatus.prototype.drawItemImage = function(index) {
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
    this.changePaintOpacity(actor.isBattleMember());
000if (index == 0) {
000this.drawActorFace (actor, rect.x - 249, rect.y + 151, Window_Base._faceWidth, Window_Base._faceHeight)
000}else {
    this.drawActorFace(actor, rect.x + 1, rect.y + 1, Window_Base._faceWidth, Window_Base._faceHeight);
000}
    this.changePaintOpacity(true);
};
Window_MenuStatus.prototype.drawItemStatus = function(index) {
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
000if (index == 0) {
000var x = rect.x - 88
000var y = rect.y + rect.height / 2 - this.lineHeight () * 1.5 + 150
000var width = rect.width - x - this.textPadding ();
000this.drawActorSimpleStatus (actor, x, y, width)
000}else {
    var x = rect.x + 162;
    var y = rect.y + rect.height / 2 - this.lineHeight() * 1.5;
    var width = rect.width - x - this.textPadding();
    this.drawActorSimpleStatus(actor, x, y, width);
000}
};

I made all changes visible by adding 000 in front of them.
The first function is responsible for actor's background. What you need is to relocate it if the party member is first ($gameParty.members()[0]).
drawItemImage is actor's face. You need to do the same, if the actor is first party member, move it. Else it stays the same.
And the last one draws actor's HP, MP and the rest. Again, if the actor is first party member, move it. Else it stays the same.
Of course this is not a fully fledged menu, just a demonstration of what you need to do to move actor in the menu.

It's great!
Now my picture and HP MP is at where I want.
However, the itemRect is at pretty strange position.
Can you help me to solve this?
Thank you very much.

 

[Poryg]

Simply insert this code:
this.itemRect(index).position.strange = false

Just kidding of course.
It is not itemRect what is in a weird place, but these things you just moved. If you read the code carefully, you'll find that every position is derived from the position of itemRect. So that means if you move itemRect, everything will move naturally. If you move everything else, itemRect will stay in place.
So instead of moving actor window etc, this is actually the correct solution.

Window_MenuStatus.prototype.drawItemBackground = function(index) {
    if (index === this._pendingIndex) {
        var rect = this.itemRect(index);
000if (index == 0) {
000rect.x -= 200
000rect.y += 150
000}
        var color = this.pendingColor();
        this.changePaintOpacity(false);
        this.contents.fillRect(rect.x, rect.y, rect.width, rect.height, color);
        this.changePaintOpacity(true);
    }
};

Window_MenuStatus.prototype.drawItemImage = function(index) {
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
    this.changePaintOpacity(actor.isBattleMember());
    this.drawActorFace(actor, rect.x + 1, rect.y + 1, Window_Base._faceWidth, Window_Base._faceHeight);
    this.changePaintOpacity(true);
};

Window_MenuStatus.prototype.drawItemStatus = function(index) {
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
    var x = rect.x + 162;
    var y = rect.y + rect.height / 2 - this.lineHeight() * 1.5;
    var width = rect.width - x - this.textPadding();
    this.drawActorSimpleStatus(actor, x, y, width);
};//with the remaining code native as you can see :D

Be prepared though, this will contain several funny bugs. For example you'll have to adress when the player is trying to select an actor by changing formation or status - the cursor will go up by default, not to the left. But I will leave that to you and your studying of the code, because if you delve into the code and try to figure out what function is responsible for what, it is not that hard to figure out.

 

[jackken123]

Simply insert this code:
this.itemRect(index).position.strange = false

Just kidding of course.
It is not itemRect what is in a weird place, but these things you just moved. If you read the code carefully, you'll find that every position is derived from the position of itemRect. So that means if you move itemRect, everything will move naturally. If you move everything else, itemRect will stay in place.
So instead of moving actor window etc, this is actually the correct solution.

Window_MenuStatus.prototype.drawItemBackground = function(index) {
    if (index === this._pendingIndex) {
        var rect = this.itemRect(index);
000if (index == 0) {
000rect.x -= 200
000rect.y += 150
000}
        var color = this.pendingColor();
        this.changePaintOpacity(false);
        this.contents.fillRect(rect.x, rect.y, rect.width, rect.height, color);
        this.changePaintOpacity(true);
    }
};

Window_MenuStatus.prototype.drawItemImage = function(index) {
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
    this.changePaintOpacity(actor.isBattleMember());
    this.drawActorFace(actor, rect.x + 1, rect.y + 1, Window_Base._faceWidth, Window_Base._faceHeight);
    this.changePaintOpacity(true);
};

Window_MenuStatus.prototype.drawItemStatus = function(index) {
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
    var x = rect.x + 162;
    var y = rect.y + rect.height / 2 - this.lineHeight() * 1.5;
    var width = rect.width - x - this.textPadding();
    this.drawActorSimpleStatus(actor, x, y, width);
};//with the remaining code native as you can see :D

Be prepared though, this will contain several funny bugs. For example you'll have to adress when the player is trying to select an actor by changing formation or status - the cursor will go up by default, not to the left. But I will leave that to you and your studying of the code, because if you delve into the code and try to figure out what function is responsible for what, it is not that hard to figure out.

Thanks for all your help.
Now I know how to solve this.
This helps me to learn.
And it helps me a lot.
Thank you very very much.

 

[jackken123]

Simply insert this code:
this.itemRect(index).position.strange = false

Just kidding of course.
It is not itemRect what is in a weird place, but these things you just moved. If you read the code carefully, you'll find that every position is derived from the position of itemRect. So that means if you move itemRect, everything will move naturally. If you move everything else, itemRect will stay in place.
So instead of moving actor window etc, this is actually the correct solution.

Window_MenuStatus.prototype.drawItemBackground = function(index) {
    if (index === this._pendingIndex) {
        var rect = this.itemRect(index);
000if (index == 0) {
000rect.x -= 200
000rect.y += 150
000}
        var color = this.pendingColor();
        this.changePaintOpacity(false);
        this.contents.fillRect(rect.x, rect.y, rect.width, rect.height, color);
        this.changePaintOpacity(true);
    }
};

Window_MenuStatus.prototype.drawItemImage = function(index) {
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
    this.changePaintOpacity(actor.isBattleMember());
    this.drawActorFace(actor, rect.x + 1, rect.y + 1, Window_Base._faceWidth, Window_Base._faceHeight);
    this.changePaintOpacity(true);
};

Window_MenuStatus.prototype.drawItemStatus = function(index) {
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
    var x = rect.x + 162;
    var y = rect.y + rect.height / 2 - this.lineHeight() * 1.5;
    var width = rect.width - x - this.textPadding();
    this.drawActorSimpleStatus(actor, x, y, width);
};//with the remaining code native as you can see :D

Be prepared though, this will contain several funny bugs. For example you'll have to adress when the player is trying to select an actor by changing formation or status - the cursor will go up by default, not to the left. But I will leave that to you and your studying of the code, because if you delve into the code and try to figure out what function is responsible for what, it is not that hard to figure out.

May I ask some question?

Can I change the style of the box.
I mean the one below Harold.
The one when I choose it will change opacity like shining.
I wonder if I can change this box.
But I don't know which script to use.
Thank you very much.

 

[Poryg]

I can't see the image
Apparently I don't have the permission to see the image.

 

[jackken123]

I can't see the image
Apparently I don't have the permission to see the image.

Sorry about that.
https://drive.google.com/open?id=1mGTDUMmUkjmveeUCA7oVWTX6adO4Pbmm
How about this?

 

[Poryg]

Window_Selectable.prototype.updateCursor = function() {
if (this._cursorAll) {
var allRowsHeight = this.maxRows() * this.itemHeight();
this.setCursorRect(0, 0, this.contents.width, allRowsHeight);
this.setTopRow(0);
} else if (this.isCursorVisible()) {
var rect = this.itemRect(this.index());
this.setCursorRect(rect.x, rect.y, rect.width, rect.height);
} else {
this.setCursorRect(0, 0, 0, 0);
}
};

This should be the function. Wasn't the easiest one to find, since it's not prototype of MenuStatus.

 

[jackken123]

Window_Selectable.prototype.updateCursor = function() {
if (this._cursorAll) {
var allRowsHeight = this.maxRows() * this.itemHeight();
this.setCursorRect(0, 0, this.contents.width, allRowsHeight);
this.setTopRow(0);
} else if (this.isCursorVisible()) {
var rect = this.itemRect(this.index());
this.setCursorRect(rect.x, rect.y, rect.width, rect.height);
} else {
this.setCursorRect(0, 0, 0, 0);
}
};

This should be the function. Wasn't the easiest one to find, since it's not prototype of MenuStatus.

Any way to change the color of the cursor?
And priority? (Maybe make the cursor on the top of the drawItemStatus)
Beside, can I set a blank option just right under the actor?(Maybe a menu option but it's right after the actor so I don't need to hit esc just use up or down then I could circle from actor to option)
By the way, may I ask how do you learn javascript?
I just don't know the proper way to learn.
Thank you.

 

[Poryg]

If you want to change its' color, you can do it through tint.

For example in function
Window_Selectable.prototype.updateCursor = function() {
if (this._cursorAll) {
var allRowsHeight = this.maxRows() * this.itemHeight();
this.setCursorRect(0, 0, this.contents.width, allRowsHeight);
this.setTopRow(0);
} else if (this.isCursorVisible()) {
var rect = this.itemRect(this.index());
this.setCursorRect(rect.x, rect.y, rect.width, rect.height);
} else {
this.setCursorRect(0, 0, 0, 0);
}
000this._windowCursorSprite._tint = "AA0000"
};
If it doesn't work, then instead of that line use SceneManager._scene.children[2]._windowCursorSprite._tint = "AA0000". This changes the tint to red. If you don't want red, then change it according to your wish, middle two are green and last two are blue.
And you can use any numbers from 0 to F (hexadecimal stuff).

You cannot set its' priority, because it's not a child inside a children container.
You'd have to define and create the blank option yourself. But it's not impossible.

As for where I learn javascript... I don't actually learn javascript. I took a beginner's free course in sololearn.com. The rest is experience and spending time delving in the code, in the console and experimenting with things. Where others ask questions, I try to figure out solutions when I have a problem. I look at a code and try to understand the connections. That is how I gained experience.

 

[jackken123]

If you want to change its' color, you can do it through tint.

For example in function
Window_Selectable.prototype.updateCursor = function() {
if (this._cursorAll) {
var allRowsHeight = this.maxRows() * this.itemHeight();
this.setCursorRect(0, 0, this.contents.width, allRowsHeight);
this.setTopRow(0);
} else if (this.isCursorVisible()) {
var rect = this.itemRect(this.index());
this.setCursorRect(rect.x, rect.y, rect.width, rect.height);
} else {
this.setCursorRect(0, 0, 0, 0);
}
000this._windowCursorSprite._tint = "AA0000"
};
If it doesn't work, then instead of that line use SceneManager._scene.children[2]._windowCursorSprite._tint = "AA0000". This changes the tint to red. If you don't want red, then change it according to your wish, middle two are green and last two are blue.
And you can use any numbers from 0 to F (hexadecimal stuff).

You cannot set its' priority, because it's not a child inside a children container.
You'd have to define and create the blank option yourself. But it's not impossible.

As for where I learn javascript... I don't actually learn javascript. I took a beginner's free course in sololearn.com. The rest is experience and spending time delving in the code, in the console and experimenting with things. Where others ask questions, I try to figure out solutions when I have a problem. I look at a code and try to understand the connections. That is how I gained experience.

Both script is not working.
Finally,

this._windowCursorSprite.tint = '#FFFF00';

I use this and the color change.
Thank you very much.
However, I still don't know how to create a option wright below actor.

 

[Poryg]

I'll leave the cursor movement to you and only demonstrate how to create a new thing.

Window_MenuStatus.prototype.drawItemStatus = function(index) {
   var actor = $gameParty.members()[index];
   var rect = this.itemRect(index);
   var x = rect.x + 162;
   var y = rect.y + rect.height / 2 - this.lineHeight() * 1.5;
   var width = rect.width - x - this.textPadding();
   this.drawActorSimpleStatus(actor, x, y, width);
000if (index == 0) {
000var back = new PIXI.Text ("Back")
000back.y = y + 150
000SceneManager._scene.children[2].addChild (back)
}
};

This is a small demonstration as to how to do it. I used PIXI to demonstrate it, because it was the fastest (since I don't use default RMMV functions) and because I believe you can customize it according to your wish.
If you want to learn something about PIXI, the 2D graphics rendering interface RMMV uses, I've got some tutorials in my signature.

 

[jackken123]

I'll leave the cursor movement to you and only demonstrate how to create a new thing.

Window_MenuStatus.prototype.drawItemStatus = function(index) {
   var actor = $gameParty.members()[index];
   var rect = this.itemRect(index);
   var x = rect.x + 162;
   var y = rect.y + rect.height / 2 - this.lineHeight() * 1.5;
   var width = rect.width - x - this.textPadding();
   this.drawActorSimpleStatus(actor, x, y, width);
000if (index == 0) {
000var back = new PIXI.Text ("Back")
000back.y = y + 150
000SceneManager._scene.children[2].addChild (back)
}
};

This is a small demonstration as to how to do it. I used PIXI to demonstrate it, because it was the fastest (since I don't use default RMMV functions) and because I believe you can customize it according to your wish.
If you want to learn something about PIXI, the 2D graphics rendering interface RMMV uses, I've got some tutorials in my signature.

Excuse me.
When an option shown, let's say in formation window.
When I first click on an actor, the cursor will show on the actor and "blinking".
When I second click on the same actor, the cursor will shown on the actor and stop blinking, so now I "select" the actor.
I know the order of the actor is base on "index".
And when I select an actor is call "_pendingIndex".
Then how do we call the one when cursor is blinking?

 

[Poryg]

Cursor itself is defined in Window prototype stuff in rpg._core and managed in Window_Selectable.prototype functions.
Since Window_Selectable is Window.prototype and Window_MenuStatus is Window_Selectable prototype, the functions that Window_Selectable has are inherited from it by Window_MenuStatus.
Calling the function that makes cursor blink is the Window_Selectable.prototype.updateCursor.

 

[jackken123]

Cursor itself is defined in Window prototype stuff in rpg._core and managed in Window_Selectable.prototype functions.
Since Window_Selectable is Window.prototype and Window_MenuStatus is Window_Selectable prototype, the functions that Window_Selectable has are inherited from it by Window_MenuStatus.
Calling the function that makes cursor blink is the Window_Selectable.prototype.updateCursor.

Well
I still don't know how it works.
If I want to show a picture when the actor is beening choose but not select yet.
How can I do?

Now I got a background.
And I also got background under actor in drawItemBackground.
And the purple arrow is my cursor.
Now is at Lucius.
Right now I just choose Lucius not select yet.

When I click on Lucius again, then I select Lucius.
Then the background become green.

My question is at first picture.
I want to show different background when I choose Lucius(not select yet)
But I can't use cursor, because Now my cursor is on the top of _windowContentsSprite
So if I let my cursor become a picture then I can't see my actor anymore.

I can't set the cursor under the _windowContentsSprite.
Because the background in the drawItemBackground will cover the cursor.

Window_MenuStatus.prototype.drawItemBackground = function(index) {      
    var rect = this.itemRect(index);
    var S_ratio = Graphics.width / 816;
     
    if(index !== 0) {
        if (index === this._pendingIndex) {
            var bitmap = ImageManager.loadPicture('follower- background select');
            var pw = bitmap.width;
            var ph = bitmap.height;
            this.Ken_drawBackground('follower- background select', rect.x - rect.width / 11 - 2 * S_ratio, rect.y - (ph - rect.height) / 2);          
           
        } else {
            this.Ken_drawBackground('follower- background', rect.x - rect.width / 11, rect.y);                      
            var x = this._cursorRect.x;
            var y = this._cursorRect.y;
            var w = this._cursorRect.width;
            var h = this._cursorRect.height;
            this.Ken_drawBackground('follower- background select', x - rect.width / 11 - 2 * S_ratio, y - (ph - rect.height) / 2);          
           

        };
       
    };
     
   
};

The code is how I change the background.
follower- background select is the green one.
follower- background is the gray one.
And I also got a scene background, that is the one below the whole picture.

Now I can think of a way, and I'm not sure whether it's possible or not.

Find the code define whitch actor is been choose(not select yet).
And put one more condition, like

if (index === this._pendingIndex) {
            var bitmap = ImageManager.loadPicture('follower- background select');
            var pw = bitmap.width;
            var ph = bitmap.height;
            this.Ken_drawBackground('follower- background select', rect.x - rect.width / 11 - 2 * S_ratio, rect.y - (ph - rect.height) / 2);          
} else if (now the actor is under choose, but not activate yet) {
            show another background
} else {
            this.Ken_drawBackground('follower- background', rect.x - rect.width / 11, rect.y);                      
            var x = this._cursorRect.x;
            var y = this._cursorRect.y;
            var w = this._cursorRect.width;
            var h = this._cursorRect.height;
            this.Ken_drawBackground('follower- background select', x - rect.width / 11 - 2 * S_ratio, y - (ph - rect.height) / 2);          
};

But I don't know the correct code to use.
Do you know the code I'm looking for or different solution?
Thank you.

 

[Poryg]

Both images are invisible for me, however I'll try to answer.

Window_Selectable.prototype.select = function(index) {
this._index = index;
this._stayCount = 0;
this.ensureCursorVisible();
this.updateCursor();
this.callUpdateHelp();
};
This is the code that handles selection. To redefine a function for Window_MenuStatus you would do something like this.
Window_MenuStatus.prototype.select = function(index) {
Window_Selectable.prototype.select.call (this, index)
this._selected = 1
this.drawItemBackground();
}
Window_MenuStatus.prototype.drawItemBackground = function(index) {
if (index === this._pendingIndex) {
var rect = this.itemRect(index);
var color = this.pendingColor();
this.changePaintOpacity(false);
this.contents.fillRect(rect.x, rect.y, rect.width, rect.height, color);
if (this._selected) {
this.contents._tint = "#00FF00"
}
this.changePaintOpacity(true);
}
};
Then of course you mustn't forget to set the _selected back to 0 on the deselect function.

 

[jackken123]

Both images are invisible for me, however I'll try to answer.

Window_Selectable.prototype.select = function(index) {
this._index = index;
this._stayCount = 0;
this.ensureCursorVisible();
this.updateCursor();
this.callUpdateHelp();
};
This is the code that handles selection. To redefine a function for Window_MenuStatus you would do something like this.
Window_MenuStatus.prototype.select = function(index) {
Window_Selectable.prototype.select.call (this, index)
this._selected = 1
this.drawItemBackground();
}
Window_MenuStatus.prototype.drawItemBackground = function(index) {
if (index === this._pendingIndex) {
var rect = this.itemRect(index);
var color = this.pendingColor();
this.changePaintOpacity(false);
this.contents.fillRect(rect.x, rect.y, rect.width, rect.height, color);
if (this._selected) {
this.contents._tint = "#00FF00"
}
this.changePaintOpacity(true);
}
};
Then of course you mustn't forget to set the _selected back to 0 on the deselect function.

https://drive.google.com/open?id=1Syit3tpd9v4CMhDJqd7YLFwmasbeMD70
https://drive.google.com/open?id=1XhLNJmSKvWI9-IseTahXlHcWUuZpJf-M
These 2 are the picture.
So google drive is not working. (I set it to be public)
Any suggest way to post a picture?