hiresRatio question

[Stephan]

Hi there,

 

I'm currently intergration some panda games in my webapp. In order to scale the canvas nicely, I am working on some custom adaptions to regulate the canvas size and resolution an bit more fine grained than with autoscale.

I am having some trouble however understanding the game.System.hiresRatio property that is described in the documentation. This is what it says:

 

Quote

hiresRatio Number (Default: 2)

Ratio value, when HiRes mode is used.

When I have a look at the source code op Panda2 it comes down to the following bit of code:

 

for (var i = 2; i <= game.System.hires; i += 2) {
    var ratio = game.System.hiresRatio * (i / 2);
    var width = game.System.hiresDeviceSize ? game.device.screen.width : this._windowWidth;
    var height = game.System.hiresDeviceSize ? game.device.screen.height : this._windowHeight;
    if (width >= realWidth * ratio && height >= realHeight * ratio) {
        this.hires = true;
        game.scale = i;
    }
}

 

The default value of hiresRatio=2 makes perfect sense. However, any other value appears to give a difference between game.scale ending up a different value than ratio. For example, have a look at the following settings:

game.config = {
    system: {
        hires: 8,
        hiresRatio: 3
    }
};

gives at a certain screen size the following values:

ratio=9
game.scale=6

 

@enpu: Is this intentional? Shouldn't the values ratio and game.scale always be the same?

And on a wider scope: What is hiresRatio used for (in other cases than the default value = 2)?

 

Hope you can help me out a bit.

Stephan

[Stephan]

no one?

Let me provide a little context here. I am working on a small engine adaption that improves crisp rendering at the most common monitor resolutions.

Currently, most of my end users are using resolutions like:

• 1024x768
• 1280x920
• 1600x1200
• 1920x(1080/1200)

Now I want Panda to scale to the maximum screen size from the list above that still fits on the monitor. For this purpose, I made a few alterations to system.js.

With the alterations, Panda now chooses the largest scale that fully fits to the screen and renders the game at that resolution. For example: When a game is projected on a screen size of 1100pxx851px, the game is rendered at 1024x768 pixels). 

 

I have extended the hiresRatio property in system.js like so it accepts the following config settings:

game.config = {
    system: {
        width: 1024,
        height: 768,
        scale: false,
        center: true,
        hires: 8,
        hiresRatio: [1, 1.25, 1.5625] //NEW! the property now accepts an array with custom values for ratio
    },
    ...
};

 

the altered code of system.js:

if(game.System.hiresRatio instanceof Array){
   //in case of new custom array, iterate the array and use these specific ratio's
    for (var i = 0; i < game.System.hiresRatio.length; i++) {
        var ratio = game.System.hiresRatio[i];
        var width = game.System.hiresDeviceSize ? game.device.screen.width : this._windowWidth;
        var height = game.System.hiresDeviceSize ? game.device.screen.height : this._windowHeight;
        if (width >= realWidth * ratio && height >= realHeight * ratio) {
            this.hires = true;
            game.scale = ratio;
        }
    }
}
else{
    //otherwise the usual code with a few adaptions
    for (var i = 2; i <= game.System.hires; i += 2) {
        var ratio = game.System.hiresRatio * (i / 2);
        var width = game.System.hiresDeviceSize ? game.device.screen.width : this._windowWidth;
        var height = game.System.hiresDeviceSize ? game.device.screen.height : this._windowHeight;
        if (width >= realWidth * ratio && height >= realHeight * ratio) {
            this.hires = true;
            game.scale = i;
        }
    }
}

 

It really works like a charm so far, just want to be sure I don't mess up anything vital in panda.. ?

 

[enpu]

Hi @Stephan

Sorry for the late reply.

HiRes mode is used only when you want to use multi-resolution assets (the name HiRes mode is actually a bit misleading, should be something like multiresAssets).

Multi-resolution assets mean that you would have multiple versions of each asset that you use in your game. For example:

player.png
[email protected]
[email protected]

hiresRatio is a value that is used to detect which of those assets should the game engine use.

For example if your project's base resolution is 200x200 and you have set HiRes mode to 4 with ratio of 2, that would mean that the window size (where the game is running) would have to be at least 2 times bigger than the base resolution (200x200 base resolution, so it has to be 400x400) for the engine to start using @2x asset files.
For @4x assets, the window size would have to be at least 2 times bigger than the resolution used for @2x assets (which in this case would be 800x800).

So this has really nothing to do with scaling. If you just want to scale the canvas to fit any screen resolution (scaling just scales the size of the pixels in the canvas, doesn't actually change the amount of pixels in the canvas), then using game.System.scale property is enough. 

If you also want to resize the canvas, so that it fills the whole screen no matter what aspect ratio the screen is, then you should use game.System.resize property together with the scaling.

Does that make sense?

[Stephan]

Hi @enpu

Thanks for your extended explanation. ?

About your reply:

Quote

hiresRatio is a value that is used to detect which of those assets should the game engine use.

For example if your project's base resolution is 200x200 and you have set HiRes mode to 4 with ratio of 2, that would mean that the window size (where the game is running) would have to be at least 2 times bigger than the base resolution (200x200 base resolution, so it has to be 400x400) for the engine to start using @2x asset files.
For @4x assets, the window size would have to be at least 2 times bigger than the resolution used for @2x assets (which in this case would be 800x800).

This bit is perfectly clear now. I have tested it thoroughly and it works exactly as expected. Great mechanism!

 

Quote

So this has really nothing to do with scaling. If you just want to scale the canvas to fit any screen resolution (scaling just scales the size of the pixels in the canvas, doesn't actually change the amount of pixels in the canvas), then using game.System.scale property is enough. 

Is it correct to say that the game.System.scale property is used as a means to make hires working? In system.js I find the following code fragment:

for (var i = 2; i <= game.System.hires; i += 2) {
    var ratio = game.System.hiresRatio * (i / 2);
    var width = game.System.hiresDeviceSize ? game.device.screen.width : this._windowWidth;
    var height = game.System.hiresDeviceSize ? game.device.screen.height : this._windowHeight;
    if (width >= this.originalWidth * ratio && height >= this.originalHeight * ratio) {
        this.hires = true;
        game.scale = i;
    }
}

 

Quote

If you also want to resize the canvas, so that it fills the whole screen no matter what aspect ratio the screen is, then you should use game.System.resize property together with the scaling.

Good to know. For now I think I stick to a singls easpect ratio to keep things simple. 

 

Thanks,

Stephan

[enpu]

9 minutes ago, Stephan said:

Is it correct to say that the game.System.scale property is used as a means to make hires working? In system.js I find the following code fragment:

No exactly sure what you mean. That code is used to detect if the engine should use hires assets or not (if hires mode is enabled).

game.System.scale is used to enable scaling, which just scales the canvas element to fit the window size.

[Stephan]

Yes, that is exaclty what I suspected!

Thanks for confirming. Now I am sure that I have got things set up correctly. ?