Graphics: width/height vs boxWidth/boxHeight

[Willrune]

What is the "game screen" and what is the "window display area"? They are both set to the same values:


// rpg_managers.js
SceneManager._screenWidth = 816;
SceneManager._screenHeight = 624;
SceneManager._boxWidth = 816;
SceneManager._boxHeight = 624;






The code (and documentation) is as follows:


// rpg_core.js
/**
* The width of the game screen.
*
* @static
* @property width
* @type Number
*/
Object.defineProperty(Graphics, 'width', {
get: function() {
return this._width;
},
set: function(value) {
if (this._width !== value) {
this._width = value;
this._updateAllElements();
}
},
configurable: true
});

/**
* The height of the game screen.
*
* @static
* @property height
* @type Number
*/
Object.defineProperty(Graphics, 'height', {
get: function() {
return this._height;
},
set: function(value) {
if (this._height !== value) {
this._height = value;
this._updateAllElements();
}
},
configurable: true
});

/**
* The width of the window display area.
*
* @static
* @property boxWidth
* @type Number
*/
Object.defineProperty(Graphics, 'boxWidth', {
get: function() {
return this._boxWidth;
},
set: function(value) {
this._boxWidth = value;
},
configurable: true
});

/**
* The height of the window display area.
*
* @static
* @property boxHeight
* @type Number
*/
Object.defineProperty(Graphics, 'boxHeight', {
get: function() {
return this._boxHeight;
},
set: function(value) {
this._boxHeight = value;
},
configurable: true
});




"Window" is an overloaded term. Neither appear to be a reference to the web browser viewport window nor the size of the canvas element that everything gets rendered to.


An example of both being used:


// rpg_scenes.js
Scene_Base.prototype.createWindowLayer = function() {
var width = Graphics.boxWidth;
var height = Graphics.boxHeight;
var x = (Graphics.width - width) / 2;
var y = (Graphics.height - height) / 2;
this._windowLayer = new WindowLayer();
this._windowLayer.move(x, y, width, height);
this.addChild(this._windowLayer);
};


Can anyone provide more information and details on all 4 properties? What could cause them to have different values?

 

[Hudell]

The width and height is the resolution in which the game is drawn, while boxWidth and boxHeight is the displayed window size. 


For example: if your window size is 2x your resolution, the game will be stretched and you'll have a 200% zoom. 

 

[Willrune]

Thanks @Hudell!


I tried play testing the game and have the console log during Scene_Base.prototype.updateFade. While running a play test I get the following:


console.log('width', Graphics.width, 'height', Graphics.height, 'boxWidth', Graphics.boxWidth, 'boxHeight', Graphics.boxHeight);

// => width 816 height 624 boxWidth 816 boxHeight 624


I get the same result even after I drag the frame of the the application around to resize it. The game itself does scale and "zoom", but the numbers don't seem to change. By your description, I was expecting width and height to stay the same while boxWidth and boxHeight should have change. What am I missing / not understanding?


For reference, this is a new project with the only modification being the console log statement (so as to rule out any other kind of influence.) It has 2 simple maps with transfer events.

 

[Hudell]

I may have it wrong then. I changed this on my game so long ago that it might be different from an empty project.

 

[Willrune]

OVERVIEW


I've found myself with some more free time and done some more digging. I'll start of by once more thanking @Hudell and @Archeia for their help in trying to get me to understand through different communication channels.


My background worked against me as I was looking for something more complex than what is actually going on.


The dimensions given by the Graphics class have nothing to do with the browser window or any given HTML element, though it does affect what gets rendered inside the canvas elements. Looking at the math in some methods, there appears to be an expectation that boxWidth and boxHeight will be less than or equal to (but never greater than) width and height.


DETAILS


I was wrong in some of my expectation of what a window might be. It has nothing to do with the browser's window object, the body element, or the canvas element. As far as I have been able to learn both boxWidth and width act on the same scale / resolution / set of coordinates. There is a script that ensures both canvas elements and the video element take up the full viewport whenever the window is resized.


When the window size changes, RPGMV updates scales behind the scenes to keep what is on screen the same no matter what the size of the canvas element is, but while maintaining the aspect ratio. The general series of events that renders the game is driven by a combined effort between the SceneManager class and the Graphics class.


boxWidth/boxHeight seems to be used mostly to render user interface components, such as graphic windows.


By default, both widths are set to 816 and both heights are set to 624. A quick test might look like this:


/*:
* @plugindesc Testing
* @author ThisIsOnlyATest
*/
;(function() {
'use strict';

SceneManager._boxWidth = 756;

})();


The SceneManager uses its own values to update the Graphics class when the game loads.


Boxes that once took up the full screen now have 30 units of empty space on each side, which adds up to the difference of 60. Resizing your UI isn't as simple as just setting box dimensions. A number of different windows now get cut off abruptly, so math / numbers elsewhere would need to be updated.


Unless, I start working with user interface components, (which I probably will, eventually!), Graphics.width and Graphics.height is what I will want to work with.


DISCLAIMER


I am still new enough that I can't state all this with absolute certainty, so please take it with a grain of salt. It is not the job of the community nor the devs to explain every little thing to me about their core scripts, the pixi.js library, or canvas development. I'm sharing the above in hopes it might help someone else who might have struggled with it the same as I have. If I don't have the right answer, maybe it will save someone time who will have the right answer.