Jump to content
Sign in to follow this  
Takeo212

Menu Plugin Alignment Help

Recommended Posts

Hey everyone~

 

I was browsing the MV Workshop and came across a menu plugin that I was actually really wanting for my main game. It's similar to the older Final Fantasy series menu and I was eager to try it out~

 

I got the plugin to work easily enough, but I instantly realised I had a problem.

The Plugin only seems to support the default MV resolution, whereas I use 1024x768.

I considered changing my resolution to match the plugin, but I remembered I have parallaxing light/shadow images and to be honest, I don't really fel like spending forever redoing them for my map (maybe 12+ rooms so far...)

 

So what I need is some help to allow this plugin to support my resloution if possible.

 

Plugin by Ventiqu on Steam Workshop

 

 

//=============================================================================
//                      VE_FinalFantasyMenu.js - 1.00
//=============================================================================
/*:
 * @plugindesc VE_FinalFantasyMenu
 * @author Ventiqu - 2016.
 *
 * @param textFont
 * @desc Change text font here. 
 * @default Calibri
 *
 * @help None.
 */
(function() {

 	var parametri = PluginManager.parameters('VE_FinalFantasyMenu');
 	var changeTextFont = String(parametri['textFont'] || "String");

/////////////////////////////////
//Create Windows
////////////////////////////////

var _Scene_Menu_create = Scene_Menu.prototype.create;
Scene_Menu.prototype.create = function() {
	_Scene_Menu_create.call(this);
    Scene_MenuBase.prototype.create.call(this);
    this.createStepsWindow();
    this.createLocationWindow();
};

/////////////////////////////////
//Menu Section
////////////////////////////////

	var _Scene_Menu_createe = Scene_Menu.prototype.create;
    Scene_Menu.prototype.create = function() {
        _Scene_Menu_createe.call(this);
        this._statusWindow.x = 0;
        this._statusWindow.y = 0;
        this._commandWindow.x = 575;
        this._commandWindow.y = 0;
        this._goldWindow.x = Graphics.boxWidth - this._goldWindow.width;
    };

Bitmap.prototype.blur = function() {
    for (var i = 0; i < 2; i++) {
        var w = this.width;
        var h = this.height;
        var canvas = this._canvas;
        var context = this._context;
        var tempCanvas = document.createElement('canvas');
        var tempContext = tempCanvas.getContext('2d');
        tempCanvas.width = w + 2;
        tempCanvas.height = h + 2;
        tempContext.drawImage(canvas, 0, 0, w, h, 1, 1, w, h);
        tempContext.drawImage(canvas, 0, 0, w, 1, 1, 0, w, 1);
        tempContext.drawImage(canvas, 0, 0, 1, h, 0, 1, 1, h);
        tempContext.drawImage(canvas, 0, h - 1, w, 1, 1, h + 1, w, 1);
        tempContext.drawImage(canvas, w - 1, 0, 1, h, w + 1, 1, 1, h);
        context.save();
        context.fillStyle = 'black';
        context.fillRect(0, 0, w, h);
        context.globalCompositeOperation = 'copy';
        context.globalAlpha = 1 / 9;
        for (var y = 0; y < 3; y++) {
            for (var x = 0; x < 3; x++) {
                context.drawImage(tempCanvas, x, y, w, h, 0, 0, w, h);
            }
        }
        context.restore();
    }
    this._setDirty();
};

/////////////////////////////////
//Font Section
////////////////////////////////
Window_Base.prototype.standardFontFace = function() {
    return changeTextFont;
};

Window_Message.prototype.standardFontFace = function() {
    return changeTextFont;
};

Window_ChoiceList.prototype.standardFontFace = function() {
    return changeTextFont;
};

Window_ChoiceList.prototype.standardFontSize = function() {
    return changeTextFont;
};

/////////////////////////////////
//Step Window Section
////////////////////////////////

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

Scene_Menu.prototype.createStepsWindow = function() {
    this._stepsWindow = new Window_Steps(575, 470);
    this.addWindow(this._stepsWindow);
};

Window_Steps.prototype = Object.create(Window_Base.prototype);
Window_Steps.prototype.constructor = Window_Steps;

Window_Steps.prototype.initialize = function(x, y) {
    var width = this.windowWidth();
    var height = this.windowHeight();
    Window_Base.prototype.initialize.call(this, x, y, width, height);
    this.refresh();
};

Window_Steps.prototype.windowWidth = function() {
    return 240;
};

Window_Steps.prototype.windowHeight = function() {
    return 80;
};

Window_Base.prototype.custom2DrawCurrencyValue = function(value, unit, x, y, width) {
    var unitWidth = Math.min(80, this.textWidth(unit));
    this.resetTextColor();
    this.drawText(value, x, y, width, 'right');
    this.changeTextColor(this.systemColor());
    this.drawText(unit, x, y, unitWidth, 'left');
};


Window_Steps.prototype.refresh = function() {
    var x = this.textPadding();
    var width = this.contents.width - this.textPadding() * 2;
    this.contents.clear();
    this.custom2DrawCurrencyValue(this.value(), this.textUnit(), x, 0, width);
};

Window_Steps.prototype.value = function() {
    return $gameParty.steps();
};

TextManager.stepMessage = function(messageId) {
    return 'Steps';
};

Window_Steps.prototype.textUnit = function() {
    return TextManager.stepMessage();
};

Window_Steps.prototype.open = function() {
    this.refresh();
    Window_Base.prototype.open.call(this);
};


/////////////////////////////////
//Location Window Section
////////////////////////////////

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

Scene_Menu.prototype.createLocationWindow = function() {
    this._locationWindow = new Window_Location(575, 388);
    this.addWindow(this._locationWindow);
};

Window_Location.prototype = Object.create(Window_Base.prototype);
Window_Location.prototype.constructor = Window_Steps;

Window_Location.prototype.initialize = function(x, y) {
    var width = this.windowWidth();
    var height = this.windowHeight();
    Window_Base.prototype.initialize.call(this, x, y, width, height);
    this.refresh();
};

Window_Location.prototype.windowWidth = function() {
    return 240;
};

Window_Location.prototype.windowHeight = function() {
    return 80;
};

Window_Base.prototype.customDrawCurrencyValue = function(value, unit, x, y, width) {
    var unitWidth = Math.min(80, this.textWidth(unit));
    this.resetTextColor();
    this.drawText(value, x, y, width - unitWidth - 6, 'center');
    this.changeTextColor(this.systemColor());
    this.drawText(unit, x + width - unitWidth, y, unitWidth, 'center');
};

Window_Location.prototype.refresh = function() {
    var x = this.textPadding();
    var width = this.contents.width - this.textPadding() * 2;
    this.contents.clear();
    this.customDrawCurrencyValue(this.value(), this.textUnit(), x, 0, width);
};

Window_Location.prototype.value = function() {
    return $gameMap.displayName();
};

TextManager.locationMessage = function(messageId) {
    return '';
};

Window_Location.prototype.textUnit = function() {
    return TextManager.locationMessage();
};

Window_Location.prototype.open = function() {
    this.refresh();
    Window_Base.prototype.open.call(this);
};


Window_Base.prototype.drawCurrencyValue = function(value, unit, x, y, width) {
    var unitWidth = Math.min(80, this.textWidth(unit));
    this.resetTextColor();
    this.drawText(value, x, y, width, 'right');
    this.changeTextColor(this.systemColor());
    this.drawText(unit, x, y, unitWidth, 'left');
};

/////////////////////////////////////////////

Window_Base.prototype.drawActorSimpleStatus = function(actor, x, y, width) {
    var lineHeight = this.lineHeight();
    var x2 = x + 180;
    var width2 = Math.min(200, width - 180 - this.textPadding());
    this.drawActorName(actor, x, y);
    this.drawActorLevel(actor, x, y + lineHeight * 1);
    this.drawActorIcons(actor, x, y + lineHeight * 2);
    this.drawActorClass(actor, x2, y);
    this.customDrawActorHp(actor, x2, y + lineHeight * 1, width2);
    this.customDrawActorMp(actor, x2, y + lineHeight * 2, width2);
};

Window_Base.prototype.customDrawActorHp = function(actor, x, y, width) {
    width = width || 186;
    this.changeTextColor(this.systemColor());
    this.drawText(TextManager.hpA, x, y, 44);
    this.drawCurrentAndMax(actor.hp, actor.mhp, x, y, width,
                           this.hpColor(actor), this.normalColor());
};

Window_Base.prototype.customDrawActorMp = function(actor, x, y, width) {
    width = width || 186;
    this.changeTextColor(this.systemColor());
    this.drawText(TextManager.mpA, x, y, 44);
    this.drawCurrentAndMax(actor.mp, actor.mmp, x, y, width,
                           this.mpColor(actor), this.normalColor());
};

})(); 

 

 

 

This is my current problem;

 

 

problem_by_takeo212-da6bmz9.png

 

 

and this is how it's supposed to look; Final Fantasy Menu

 

 

Thanks for reading and any help in advance~

- Takeo

Share this post


Link to post
Share on other sites

Yeezus. Everything except the gold window's position got hard-baked into the plugin. Now that's... not a way of designing a plugin I would recommend anyone to learn from.

 

You're gonna need to change their starting X-positions from that hardcoded value of 575 to, ideally, the width of your screen minus the width of your window (or you could manually work it out, but if you decide to change your resolution again, you'll have to go back and edit). If you want the steps and location windows to line up with the gold window, you'll need to edit the Y-positions too.

 

You'll need to look for lines like:

this._commandWindow.x = 575;

and

this._stepsWindow = new Window_Steps(575, 470);

which set the X and Y positions of the windows and edit them by hand. There's no way around it. The coder set those values by hand, so the only way to change them is to re-code them by hand.

 

....Just out of interest, apart from the location/step-count windows and the fact that the party status window is on the left of the screen instead of the right, what difference is there between the default menu and the one in the picture? Because if those are the only differences, you might wanna consider just editing the default menu/window scripts yourself instead of relying on... not-so-well-designed plugins that you then have to go over and edit when you inevitably run into problems.

Share this post


Link to post
Share on other sites

It's mainly just a re-organization of the default window to be honest, with the addition of the "steps" counter and location window. I had always preferred my information being on the right hand side (maybe a right handed thing haha, and why I always preferred the old final fantasy windows).

 

I figured it was hard coded, but when I looked over the code and saw all the "math" I got confused (big words and maths are my weakpoint - especially combined.)

My biggest problem is I am not familiar with the "classes/scenes" to understand what window is what.

 

 

I'll go have a tinker with the code then now that I know roughly what lines to look for.

Thanks very much Traverse!

 

To be honest, I originally requested a similar layout (I think) a long time ago but never got a response - so this is is the closest I could get :P

I also wish MV didn't have a constant transparency on it's window backs as well -.-

 

 

EDIT

Thank you so much Traverse!

I managed to manually edit the values to suit my resolution now thanks to you poitning out what areas to edit (when I read over it, I wasn't sure exactly what areas to edit without breaking everything)

 

Thank you very much :D I got everything placed correctly now~

(now if only I could get rid of that darn black background...)

 

This can be closed now thanks to Traverse's help~

 

EDIT2

Actually, any help on removing the black background would be appreciated!

I'm tampering with the code and I can get rid of the black itself by removing the bitmap/blur function part but it also removes majority of the menu also.

I'm cutting and editing parts of it and I feel like I'm almost there, but missing something.

Any ideas?

Edited by Takeo212

Share this post


Link to post
Share on other sites

I haven't actually. Whenever I mess with the code, it removes the black background - but it also removes some windows for whatever reason. So I can't remove the black without messing up the menu all together :/

 

I also never got another response on steam from the creator (they said they'd update, but never have).

 

How do you set up a background? I'm scared to touch the code itself due to not being 100% code savvy and I have no idea where to put it.

Share this post


Link to post
Share on other sites

Is it possible to remove the black all together or add an image at all?

I see a hex code area to change the colour, so changing the colour is fine enough, but the background in general is kinda eh. 

 

To be honest, I've gotten used to it - but having the ability to either it or add an image (so I can add a texture image instead of a solic colour) would be nice so it can atleast spice the menu up.

 

Would any of those be possible?

Share this post


Link to post
Share on other sites

Yeah. This is easy to be solved. Install this new version:

 

 

 

//=============================================================================
//                      VE_FinalFantasyMenu.js - 1.00
//=============================================================================
/*:
 * @plugindesc VE_FinalFantasyMenu
 * @author Ventiqu - 2016.
 *
 * @param textFont
 * @desc Change text font here. 
 * @default Calibri
 *
 * @param Wallpaper
 * @desc A wallpaper used for the menu as a background, bec. whoever wrote this plugin left it this plugin unfinished, lol.
 * @default Background
 *
 * @help None.
 */
(function() {

 	var parametri = PluginManager.parameters('VE_FinalFantasyMenu');
 	var changeTextFont = String(parametri['textFont'] || "String");
    var background = parametri['Wallpaper'];

/////////////////////////////////
//Create Windows
////////////////////////////////

var _Scene_Menu_create = Scene_Menu.prototype.create;
Scene_Menu.prototype.create = function() {
	_Scene_Menu_create.call(this);
    Scene_MenuBase.prototype.create.call(this);
    this.createStepsWindow();
    this.createLocationWindow();
};

/////////////////////////////////
//Menu Section
////////////////////////////////

	var _Scene_Menu_createe = Scene_Menu.prototype.create;
    Scene_Menu.prototype.create = function() {
        _Scene_Menu_createe.call(this);
        this._statusWindow.x = 0;
        this._statusWindow.y = 0;
        this._commandWindow.x = 575;
        this._commandWindow.y = 0;
        this._goldWindow.x = Graphics.boxWidth - this._goldWindow.width;
    };

Bitmap.prototype.blur = function() {
    for (var i = 0; i < 2; i++) {
        var w = this.width;
        var h = this.height;
        var canvas = this._canvas;
        var context = this._context;
        var tempCanvas = document.createElement('canvas');
        var tempContext = tempCanvas.getContext('2d');
        tempCanvas.width = w + 2;
        tempCanvas.height = h + 2;
        tempContext.drawImage(canvas, 0, 0, w, h, 1, 1, w, h);
        tempContext.drawImage(canvas, 0, 0, w, 1, 1, 0, w, 1);
        tempContext.drawImage(canvas, 0, 0, 1, h, 0, 1, 1, h);
        tempContext.drawImage(canvas, 0, h - 1, w, 1, 1, h + 1, w, 1);
        tempContext.drawImage(canvas, w - 1, 0, 1, h, w + 1, 1, 1, h);
        context.save();
        context.fillStyle = 'black';
        context.fillRect(0, 0, w, h);
        context.globalCompositeOperation = 'copy';
        context.globalAlpha = 1 / 9;
        for (var y = 0; y < 3; y++) {
            for (var x = 0; x < 3; x++) {
                context.drawImage(tempCanvas, x, y, w, h, 0, 0, w, h);
            }
        }
        context.restore();
    }
    this._setDirty();
};

/////////////////////////////////
//Font Section
////////////////////////////////
Window_Base.prototype.standardFontFace = function() {
    return changeTextFont;
};

Window_Message.prototype.standardFontFace = function() {
    return changeTextFont;
};

Window_ChoiceList.prototype.standardFontFace = function() {
    return changeTextFont;
};

Window_ChoiceList.prototype.standardFontSize = function() {
    return changeTextFont;
};

/////////////////////////////////
//Step Window Section
////////////////////////////////

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

Scene_Menu.prototype.createStepsWindow = function() {
    this._stepsWindow = new Window_Steps(575, 470);
    this.addWindow(this._stepsWindow);
};

Window_Steps.prototype = Object.create(Window_Base.prototype);
Window_Steps.prototype.constructor = Window_Steps;

Window_Steps.prototype.initialize = function(x, y) {
    var width = this.windowWidth();
    var height = this.windowHeight();
    Window_Base.prototype.initialize.call(this, x, y, width, height);
    this.refresh();
};

Window_Steps.prototype.windowWidth = function() {
    return 240;
};

Window_Steps.prototype.windowHeight = function() {
    return 80;
};

Window_Base.prototype.custom2DrawCurrencyValue = function(value, unit, x, y, width) {
    var unitWidth = Math.min(80, this.textWidth(unit));
    this.resetTextColor();
    this.drawText(value, x, y, width, 'right');
    this.changeTextColor(this.systemColor());
    this.drawText(unit, x, y, unitWidth, 'left');
};


Window_Steps.prototype.refresh = function() {
    var x = this.textPadding();
    var width = this.contents.width - this.textPadding() * 2;
    this.contents.clear();
    this.custom2DrawCurrencyValue(this.value(), this.textUnit(), x, 0, width);
};

Window_Steps.prototype.value = function() {
    return $gameParty.steps();
};

TextManager.stepMessage = function(messageId) {
    return 'Steps';
};

Window_Steps.prototype.textUnit = function() {
    return TextManager.stepMessage();
};

Window_Steps.prototype.open = function() {
    this.refresh();
    Window_Base.prototype.open.call(this);
};

Scene_Menu.prototype.createBackground = function() {
    this._backSprite = new Sprite();
    this._backSprite.bitmap = ImageManager.loadSystem(background);
    this.addChildAt(this._backSprite, 0);
}

/////////////////////////////////
//Location Window Section
////////////////////////////////

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

Scene_Menu.prototype.createLocationWindow = function() {
    this._locationWindow = new Window_Location(575, 388);
    this.addWindow(this._locationWindow);
};

Window_Location.prototype = Object.create(Window_Base.prototype);
Window_Location.prototype.constructor = Window_Steps;

Window_Location.prototype.initialize = function(x, y) {
    var width = this.windowWidth();
    var height = this.windowHeight();
    Window_Base.prototype.initialize.call(this, x, y, width, height);
    this.refresh();
};

Window_Location.prototype.windowWidth = function() {
    return 240;
};

Window_Location.prototype.windowHeight = function() {
    return 80;
};

Window_Base.prototype.customDrawCurrencyValue = function(value, unit, x, y, width) {
    var unitWidth = Math.min(80, this.textWidth(unit));
    this.resetTextColor();
    this.drawText(value, x, y, width - unitWidth - 6, 'center');
    this.changeTextColor(this.systemColor());
    this.drawText(unit, x + width - unitWidth, y, unitWidth, 'center');
};

Window_Location.prototype.refresh = function() {
    var x = this.textPadding();
    var width = this.contents.width - this.textPadding() * 2;
    this.contents.clear();
    this.customDrawCurrencyValue(this.value(), this.textUnit(), x, 0, width);
};

Window_Location.prototype.value = function() {
    return $gameMap.displayName();
};

TextManager.locationMessage = function(messageId) {
    return '';
};

Window_Location.prototype.textUnit = function() {
    return TextManager.locationMessage();
};

Window_Location.prototype.open = function() {
    this.refresh();
    Window_Base.prototype.open.call(this);
};


Window_Base.prototype.drawCurrencyValue = function(value, unit, x, y, width) {
    var unitWidth = Math.min(80, this.textWidth(unit));
    this.resetTextColor();
    this.drawText(value, x, y, width, 'right');
    this.changeTextColor(this.systemColor());
    this.drawText(unit, x, y, unitWidth, 'left');
};

/////////////////////////////////////////////

Window_Base.prototype.drawActorSimpleStatus = function(actor, x, y, width) {
    var lineHeight = this.lineHeight();
    var x2 = x + 180;
    var width2 = Math.min(200, width - 180 - this.textPadding());
    this.drawActorName(actor, x, y);
    this.drawActorLevel(actor, x, y + lineHeight * 1);
    this.drawActorIcons(actor, x, y + lineHeight * 2);
    this.drawActorClass(actor, x2, y);
    this.customDrawActorHp(actor, x2, y + lineHeight * 1, width2);
    this.customDrawActorMp(actor, x2, y + lineHeight * 2, width2);
};

Window_Base.prototype.customDrawActorHp = function(actor, x, y, width) {
    width = width || 186;
    this.changeTextColor(this.systemColor());
    this.drawText(TextManager.hpA, x, y, 44);
    this.drawCurrentAndMax(actor.hp, actor.mhp, x, y, width,
                           this.hpColor(actor), this.normalColor());
};

Window_Base.prototype.customDrawActorMp = function(actor, x, y, width) {
    width = width || 186;
    this.changeTextColor(this.systemColor());
    this.drawText(TextManager.mpA, x, y, 44);
    this.drawCurrentAndMax(actor.mp, actor.mmp, x, y, width,
                           this.mpColor(actor), this.normalColor());
};

})();  

 

 

 

If there were errors on the placement of the window, just change it by hand. As for the background, you can set it up in the parameters. The image should be in img / systems folder.

 

I agree with Traverse that this plugin is roughly coded and there are a lot of in-hand assignments rather than changing it from the parameters though :(

 

Anyway, enjoy the images as background.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×