RMMV Listing Skills or Items from Top to Bottom (instead Left to Right) in Window with 2+ Columns

[MikeMakes]

Hi,

How do I go about listing window items from top to bottom, left to right instead of left to right, top to bottom? This is for windows with 2 or more columns

Also looking for an option to lock scrolling in left/right in certain cases.

Spoiler: Code

//-----------------------------------------------------------------------------
// Window_SkillList
//
// The window for selecting a skill on the skill screen.

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

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

Window_SkillList.prototype.initialize = function(x, y, width, height) {
Window_Selectable.prototype.initialize.call(this, x, y, width, height);
this._actor = null;
this._stypeId = 0;
this._data = [];
};

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

Window_SkillList.prototype.setStypeId = function(stypeId) {
if (this._stypeId !== stypeId) {
this._stypeId = stypeId;
this.refresh();
this.resetScroll();
}
};

Window_SkillList.prototype.maxCols = function() {
return 2;
};

Window_SkillList.prototype.spacing = function() {
return 48;
};

Window_SkillList.prototype.maxItems = function() {
return this._data ? this._data.length : 1;
};

Window_SkillList.prototype.item = function() {
return this._data && this.index() >= 0 ? this._data[this.index()] : null;
};

Window_SkillList.prototype.isCurrentItemEnabled = function() {
return this.isEnabled(this._data[this.index()]);
};

Window_SkillList.prototype.includes = function(item) {
return item && item.stypeId === this._stypeId;
};

Window_SkillList.prototype.isEnabled = function(item) {
return this._actor && this._actor.canUse(item);
};

Window_SkillList.prototype.makeItemList = function() {
if (this._actor) {
this._data = this._actor.skills().filter(function(item) {
return this.includes(item);
}, this);
} else {
this._data = [];
}
};

Window_SkillList.prototype.selectLast = function() {
var skill;
if ($gameParty.inBattle()) {
skill = this._actor.lastBattleSkill();
} else {
skill = this._actor.lastMenuSkill();
}
var index = this._data.indexOf(skill);
this.select(index >= 0 ? index : 0);
};

Window_SkillList.prototype.drawItem = function(index) {
var skill = this._data[index];
if (skill) {
var costWidth = this.costWidth();
var rect = this.itemRect(index);
rect.width -= this.textPadding();
this.changePaintOpacity(this.isEnabled(skill));
this.drawItemName(skill, rect.x, rect.y, rect.width - costWidth);
this.drawSkillCost(skill, rect.x, rect.y, rect.width);
this.changePaintOpacity(1);
}
};

Window_SkillList.prototype.costWidth = function() {
return this.textWidth('000');
};

Window_SkillList.prototype.drawSkillCost = function(skill, x, y, width) {
if (this._actor.skillTpCost(skill) > 0) {
this.changeTextColor(this.tpCostColor());
this.drawText(this._actor.skillTpCost(skill), x, y, width, 'right');
} else if (this._actor.skillMpCost(skill) > 0) {
this.changeTextColor(this.mpCostColor());
this.drawText(this._actor.skillMpCost(skill), x, y, width, 'right');
}
};

Window_SkillList.prototype.updateHelp = function() {
this.setHelpWindowItem(this.item());
};

Window_SkillList.prototype.refresh = function() {
this.makeItemList();
this.createContents();
this.drawAllItems();
};

 

[Wavelength]

Moved this topic to Learning JavaScript. (Plugin Support is for issues using a specific plugin.)

 

[NotADev]

Window_SkillList inherits its behaviour from Window_Selectable. In there you'll find the itemRect function which dictates where the items in a window will be drawn (the function is called for each item in the window.) Look at how that function chooses the x and y position of each item and try to adjust to your liking. It will involve a bit of math.

You'll also need to look at the functions cursorDown, cursorUp, cursorRight, and cursorLeft. These look at the number of items and columns in the window to decide how the cursor is moved. Again, you'll have to use some math to calculate the proper movement.

It would be a good idea to overwrite these functions in the window you want to change so you don't end up changing the logic for all windows that inherit from Window_Selectable.