Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

Zoom Tools (in development)

Scale Map to Game Size

This is a plugin in development, while I work out if this is the best way to about it. Nonetheless at the moment it seems to work, thus consider this some kind of Alpha. Needless to say, not recommended for a live game yet.

Description

When combined with my Fit to Browser Window Plugin, this plugin makes the game map scale based on the size of the browser window.

There are a few variables you can set, such as:

- The basic size of the game window. The game scales based on this. So, if you set it as 640x480, then at this size the zoom level will be 1.0, but at 320x240 the zoom level will be 0.5, etc.

- Maintain Aspect Ratio, which keeps the square tile shapes if set to true. Otherwise it will set the tile size based on the size of the game window (stretchiness). True recommended.

Basically lets the player choose how big to play their game in. If done right they can even use F12 to play a browser game in full screen.

Dependencies

This is a complimentary plugin to Fit to Browser Window and doesn't make much sense without it:

https://forums.rpgmakerweb.com/index.ph ... dow.75199/

Further, it requires the plugin MBS - Map Zoom:

https://forums.rpgmakerweb.com/index.ph ... oom.48267/

You will need to setup the MBS - Map Zoom plugin with "Reset on Map Change" as false.

Screenshots

Default size set to 640x480, shown in various different browser windows.

6oMDOUI.png

Script - Alpha

Code:
 

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

// ScaleMapToGameResolution.js

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

 /*:

 * @plugindesc Scale Map to Game Resolution, Alpha v 0.01

 * @author Afar Build 2

 *

 * @param Default Width

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

 * Default: 640

 * @default 640

 *

 * @param Default Height

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

 * Default: 480

 * @default 480

 *

 * @param Maintain Aspect Ratio

 * @desc If this is set the tile size will be kept square. Otherwise the map will resize based on both vertices.                      

 * Default: true

 * @default true

 *

 */

 

var AmyPond = AmyPond || {};

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

 

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

AmyPond.defWidth = Number(AmyPond.parameters['Default Width'] || 640);

AmyPond.defHeight = Number(AmyPond.parameters['Default Height'] || 480);

AmyPond.maintainRatio = Number(AmyPond.parameters['Maintain Aspect Ratio'] || true);

 

AmyPond.gameMap_update = Game_Map.prototype.update;

 

Game_Map.prototype.update = function () {

    var scale_x = (AmyPond.w / AmyPond.defWidth);

    var scale_y = (AmyPond.h / AmyPond.defHeight);

      

    if (AmyPond.maintainRatio == true) {

        if (scale_y > scale_x) {

            scale_x = scale_y;

        } else {

            scale_y = scale_x;

        }

    }

    this._zoom = new PIXI.Point(scale_x, scale_y);

    AmyPond.gameMap_update.call(this);

};

    

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

// End of File

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

 

 
 
Demonstration #2: Zoom on Scroll

Not packaged together nicely as a plugin yet, but the next thing I am testing is letting the player change the zoom level of their game using the scroll wheel.

I think when I release this plugin it will be as a package together with others, as that is what makes sense for my game.

Again not recommended for public use but hopefully this lends you some ideas.

Code:
 

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

// ScaleMapToGameResolution.js

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

 /*:

 * @plugindesc v1

 * @author Amy

 *

 * @param Default Width

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

 * Default: 640

 * @default 640

 *

 * @param Default Height

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

 * Default: 480

 * @default 480

 *

 * @param Maintain Aspect Ratio

 * @desc If this is set the tile size will be kept square. Otherwise the map will resize based on both vertices.                      

 * Default: true

 * @default true

 *

 */

 

var AmyPond = AmyPond || {};

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

 

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

AmyPond.defWidth = Number(AmyPond.parameters['Default Width'] || 640);

AmyPond.defHeight = Number(AmyPond.parameters['Default Height'] || 480);

AmyPond.maintainRatio = Number(AmyPond.parameters['Maintain Aspect Ratio'] || true);

AmyPond.offsetZoom = 0.0;

 

AmyPond.gameMap_update = Game_Map.prototype.update;

 

Game_Map.prototype.update = function () {

    var scale_x = (AmyPond.w / AmyPond.defWidth);

    var scale_y = (AmyPond.h / AmyPond.defHeight);

      

    if (AmyPond.maintainRatio == true) {

        if (scale_y > scale_x) {

            scale_x = scale_y;

        } else {

            scale_y = scale_x;

        }

    }

 

    scale_x = scale_x + AmyPond.offsetZoom;

    scale_y = scale_y + AmyPond.offsetZoom;

  

    this._zoom = new PIXI.Point(scale_x, scale_y);

    AmyPond.gameMap_update.call(this);

};

 

mouseWheelScroll = function (e) {

    if (!$gameMap) {

        return;

    }

 

    var e = window.event || e;

    var delta = e.deltaY;

 

    AmyPond.offsetZoom = AmyPond.offsetZoom - (delta / 100);

};

 

document.addEventListener("wheel", mouseWheelScroll, false);

    

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

// End of File

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

 

 
 
Updated. The player now won't be able to zoom out so far that the map doesn't fit on the screen.

Code:
//=============================================================================

// ScaleMapToGameResolution.js

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

 /*:

 * @plugindesc Zoom Tools v 0.02

 * @author Amy

 *

 * @param Default Width

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

 * Default: 640

 * @default 640

 *

 * @param Default Height

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

 * Default: 480

 * @default 480

 *

 * @param Maintain Aspect Ratio

 * @desc If this is set the tile size will be kept square. Otherwise the map will resize based on both vertices.                        

 * Default: true

 * @default true

 *

 * @param Max Zoom

 * @desc The most the player will be able to zoom in by.

 * Default: 3

 * @default 3

 *

 */

 

var AmyPond = AmyPond || {};

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

 

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

AmyPond.defWidth = Number(AmyPond.parameters['Default Width'] || 640);

AmyPond.defHeight = Number(AmyPond.parameters['Default Height'] || 480);

AmyPond.maintainRatio = Number(AmyPond.parameters['Maintain Aspect Ratio'] || true);

AmyPond.maxZoom = Number(AmyPond.parameters['Max Zoom'] || 10);

AmyPond.offsetZoom = 0.0;

 

AmyPond.gameMap_update = Game_Map.prototype.update;

 

Game_Map.prototype.update = function () {

    var scale_x = (AmyPond.w / AmyPond.defWidth);

    var scale_y = (AmyPond.h / AmyPond.defHeight);

        

    if (AmyPond.maintainRatio == true) {

        if (scale_y > scale_x) {

            scale_x = scale_y;

        } else {

            scale_y = scale_x;

        }

    }

 

    scale_x = scale_x + AmyPond.offsetZoom;

    scale_y = scale_y + AmyPond.offsetZoom;

    

    this._zoom = new PIXI.Point(scale_x, scale_y);

    AmyPond.gameMap_update.call(this);

};

 

mouseWheelScroll = function (e) {

    if (!$gameMap) {

        return;

    }

 

    var e = window.event || e;

    var delta = e.deltaY;

 

    var mapWidth = $gameMap.width() * 48;

    var mapHeight = $gameMap.height() * 48;

 

    var newWidth = mapWidth * ((AmyPond.w <span style="color: #0066FF;">/ AmyPond.defWidth) + AmyPond.offsetZoom - (delta / 100));

    var newHeight = mapHeight * ((AmyPond.h <span style="color: #0066FF;">/ AmyPond.defHeight) + AmyPond.offsetZoom - (delta / 100));

 

    if (  (delta > 0)   && (  ((newWidth - AmyPond.w) < 0) || ((newHeight - AmyPond.h) < 0)  )  ) {

        

    } else {

        if ((AmyPond.offsetZoom - (delta / 100)) <= AmyPond.maxZoom) {

            AmyPond.offsetZoom = AmyPond.offsetZoom - (delta / 100);

        }

    }

};

 

document.addEventListener("wheel", mouseWheelScroll, false);

      

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

// End of File

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

 
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top