Fit to Browser

[Ellie]

Fit to Browser Window
v1.00

Description

Designed for browser deployed games, this automatically fits the game screen to the width and height of the client's browser window.

Instructions

Plug and play, though it is up to you to create appropriately sized maps and graphics, and to understand how and why this script should or should not be used.

The creator can specify a maximum size and minimum size for their game; the game will not go beyond these boundaries. Leave blank or 0 and the game will just fill the available space.

When testing this plugin please note that the size of the game's title screen and first map are for a small screen, so you won't initially notice that the plugin is working! As I said it is up to you to tailor your game to the plugin.

Credits

Credit to YanFly for a few lines from the resolution changing script. I have just plugged my own variables into these lines.

Notes

I am not used to releasing my plugins publicly so I apologise if I have broken any unwritten rules in my plugin; I've tried to keep to the standards set in the plugins I've seen.

I want to do a new version eventually which will resize the game when the client resizes their browser window, but I am not sure if this is possible. Currently the player will have to reload the game if they change their window size.

The plugin has no benefit whatsoever to a standalone release.

Plugin

 

//=============================================================================

// FitToBrowser.js

//=============================================================================

 /*:

 * @plugindesc Fit to Browser v1.00

 * @author Afar Build 2 / Credit to YanFly for a couple of lines from ScreenResolution.js

 *

 * @param Minimum Width

 * @desc Makes the game not go below this size. 0 = doesn't matter.

 * Default: 640

 * @default 640

 *

 * @param Minimum Height

 * @desc Makes the game not go below this size.  0 = doesn't matter.                      

 * Default: 480

 * @default 480

 *

 * @param Maximum Width

 * @desc Makes the game not go above this size. 0 = doesn't matter.

 * Default: 1024

 * @default 1024

 *

 * @param Maximum Height

 * @desc Makes the game not go above this size. 0 = doesn't matter.                      

 * Default: 768

 * @default 768

 */

 

var AmyPond = AmyPond || {};

AmyPond.resolution = AmyPond.resolution || {};

 

AmyPond.parameters = PluginManager.parameters('FitToBrowser');

AmyPond.minWidth = Number(AmyPond.parameters['Minimum Width'] || 0);

AmyPond.minHeight = Number(AmyPond.parameters['Minimum Height'] || 0);

AmyPond.maxWidth = Number(AmyPond.parameters['Maximum Width'] || 0);

AmyPond.maxHeight = Number(AmyPond.parameters['Maximum Height'] || 0);

 

AmyPond.resize = function() {

 

    var w = window.innerWidth

    || document.documentElement.clientWidth

    || document.body.clientWidth;

 

    var h = window.innerHeight

    || document.documentElement.clientHeight

    || document.body.clientHeight;

 

    if (AmyPond.minWidth != 0) {

        if (w < AmyPond.minWidth) {

            w = AmyPond.minWidth;

        }

    }

    if (AmyPond.maxWidth != 0) {

        if (w > AmyPond.maxWidth) {

            w = AmyPond.maxWidth;

        }

    }

    if (AmyPond.minHeight != 0) {

        if (h < AmyPond.minHeight) {

            h = AmyPond.minHeight;

        }

    }

    if (AmyPond.maxHeight != 0) {

        if (h > AmyPond.maxHeight) {

            h = AmyPond.maxHeight;

        }

    }

 

    SceneManager._screenWidth = w;

    SceneManager._screenHeight = h;

    SceneManager._boxWidth = w;

    SceneManager._boxHeight = h;

 

   window.resizeBy(w, h);

};

 

AmyPond.resize();

 

//=============================================================================

// End of File

//=============================================================================

 

 

[Xilef]

Oh man this is mega useful. I was precisely thinking about this issue yesterday.

Dynamic canvas resizing is something I've implemented for the website I'm working on right now (hence why I was thinking about it for MV).

You can set up an window "resize" detection event thusly;

<div class="javascript" id="{CB}" style="font-family: monospace;"><ol>window.addEventListener('resize', AmyPond.resize, false);

As for your JS styling, generally Plugins are encapsulated to prevent weird leakiness;

span style="color: #66cc66;">(function() {

    // Any code here is encapsulated

})();

This kind of practise with declaring a Plugin namespace exists for other Plugins to check if your one is in effect;

<div class="javascript" id="{CB}" style="font-family: monospace;"><ol>var AmyPond = AmyPond || {};

AmyPond.resolution = AmyPond.resolution || {};

I consider this mostly pointless. Seems that most people do it because YanFly does it.

It could be used to prevent a Plugin from loading twice, but it doesn't look like you're using it for that. I'm personally on the fence about double-loaded protection. It seems needed, but it's only triggered if the user does something wrong (load a Plugin twice), which I'm not sure is even possible unless you have two copies of the same Plugin.

There is one thing I'd do differently, and this is sort of a software practise thing than a Plugin thing;

<div class="javascript" id="{CB}" style="font-family: monospace;"><ol>if (AmyPond.minWidth != 0) {} // minWidth is only valid when not zero

if (AmyPond.minWidth > 0) {} // This check is probably better, user can safely enter "-32.55" or "big poo poo" and it is ignored

If you were to call AmyPond.resize whenever the window is resized there is a slight optimisation available where the parameters can select a clamping function, which would remove the four "if (AmyPond.minWidth != 0)" statements from the AmyPond.resize function at the cost of 1 function call.

But you'd have to run these if statements whenever the parameters change (AmyPond.minWidth would need a setter function).


What would be good is an API for changing the min/max during run-time. Plugin commands would do this, but you could also sneak into ConfigManager to give the possibility of selecting min/max window size in the game options menu.
At the moment it's available to other Plugin authors by changing the values inside the AmyPond object, but the more friendly way to do this would be to add a function to ConfigManager (that would allow other Plugins to write "onWindowMaxChange" detectors or implement special behaviour like resizing UI content).

 

[Ellie]

Thanks I'll work on it when I get back.

Yeah I used some lines from YanFly's script so I used his as a template for how to do mine. I figured the first declarations were to stop the stacking errors you get in RMXP but wasn't even sure if they'd apply to MV.