Ellie Jane

Veteran
Veteran
Joined
Mar 17, 2012
Messages
762
Reaction score
1,512
First Language
English (UK)
Primarily Uses
RMMV
I am attempting to create a powerful system for the client to control the zoom level of their game when played in a browser. This includes the game client resizing to the size of the browser, amongst other things.

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.php?threads/fit-to-browser-window.75199/

Further, it requires the plugin MBS - Map Zoom:

https://forums.rpgmakerweb.com/index.php?threads/mbs-map-zoom.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
//=============================================================================
 
Last edited:

Kes

Veteran
Veteran
Joined
Aug 3, 2012
Messages
22,305
Reaction score
11,732
First Language
English
Primarily Uses
RMVXA
@TenTranVN It doesn't need a download. Copy it from the post - directly under the heading Script - Alpha. Make sure you scroll down the code to the end.
 

mogwai

1984
Veteran
Joined
Jun 10, 2014
Messages
875
Reaction score
595
First Language
English
Primarily Uses
RMMV
With your experience with screen zoom, what is the text like?

I'm losing thrusters with my DOM plugin, because even if I get it complete, I know it won't play at all with any other menu/message plugins because rewriting Window_Base... And I'm mostly doing it just to make the text scale prettier in full screen, which is starting to feel like a lost cause because I know people will want their menu/message plugins.

If you have any good looking text on scale (pixel perfect for pixel fonts is the goal) I may scrap the DOM plugin and go at the scaling text angle.
 

Latest Threads

Latest Profile Posts

oddly enough, at this point... 3 major things have kept me from porting my project to MZ... animations, and that's mainly because they don't match the artstyle of my game. and two... I NEED a YED Sideview Battler like plugin and I have yet to see one. 3rd, I don't have the money for all the stuff I need plugin wise. and I already have it on MV... lol
Generally speaking, would there be interest in some form of tutorial regarding general project management? I see there are a lot of indie/self-taught devs around here, and looking back i feel like there was a lack of resources on how to properly manage a project that might take several years to finish
I've been working on some ABS team A.I. for 'A New Suburbia', and thought I'd share.

I'm generally quite please although the AI is a little grenade heavy right now :rolleyes: - Sneaking and stalking next! Please excuse the terrible map... it was just for ease of viewing!
Voting for the second round of the Map Madness Tournament is now live! Vote for your favorite in each matchup! https://forums.rpgmakerweb.com/index.php?forums/map-madness-2021-polls.187/
Just bought the Visustella All Waves bundle... Time to go IN!!

Forum statistics

Threads
110,577
Messages
1,054,356
Members
143,693
Latest member
speedylmao
Top