Changing the projects Scale Mode VIA Actions/JS

How do I...?
1

Is it possible to set the scale mode (properties) via an action or JS? (Even if it requires restarting the game)

I know this sounds like an odd idea as you would either want it one way or another, but last night I noticed something interesting with setting scaling to Liner for a project.

I have a project set as 1280x720 (Scale Mode Nearest/Pixel Perfect) which displays the following spites correctly when in window mode (1280x720)
image

Then when setting the project to full screen (1920x1080) there is some distortion of the lines/letter (which is 100% expected)
image

However if I enable Scale Mode to Liner, donā€™t smooth any of the images in resources I get a more accurate image at full screen AND still keep the sharpness at the native window size.

My hope is to allow players the option to choose full screen with either Nearest/Pixel Perfect (with possible pixel squishing/clipping depending on the resolution) OR the more accurate Liner mode with the slight blurring due to antialiasing)

1 Like
2

Unfortunately from what I can tell, it is currently not possible to change the scale mode / smoothing using actions or JS. I scrubbed through the JS docs and couldnā€™t find anything of the sort, and no actions exist that can modify these settings.

1 Like
3

Yea I had a look through the docs as well and wasnā€™t able to see anything as well :frowning:

Doing a quick google it does seem like it might be possible to change the scale mode on the fly/runtime for pixi.js but not 100% sure how it could be implemented.

I know I can close the game, go into the data.js and change ā€œscaleModeā€:ā€œnearestā€ to ā€œscaleModeā€:ā€œlinearā€ and start the game again to change the scaling, however once you compile the game with electron you no longer have access to data.js.

4

Itā€™s probably possible. From what I can see, you should be able to do it like this (note that it uses a non-public API, it may not be 100% future proof, use at your own risks):

const newScaleMode = PIXI.SCALE_MODES["LINEAR"] // or ["NEAREST"];

// Set the scale mode for future new Textures, although those are unlikely in most games
PIXI.settings.SCALE_MODE = newScaleMode;

// Get all the textures GDevelop has loaded
const textures = [];
scene.getGame().getImageManager()._loadedTextures.values(textures);

// Set the new scale mode on each texture
for (const texture of textures) {
  texture.baseTexture.setStyle(newScaleMode);
};
1 Like
5

Thank you for the snippet. I had a quick test and it doesnā€™t seem to work. I tried running it manually through a keypress and then as onFirstSceneLoaded and no changes to the scaling mode/assets.

Am I suppose to be calling this in a specific way?

1 Like
6

Ah damn. I did not really see any effects either but I blamed that on my poor eyesight. I guess the textures need to be reloaded with the new scale mode :thinking:

It took me an embarrassingly long amount of time (and hundreds of lines of code written) to find my mistake - I was headed completely the wrong way! The scale mode is actually not a PIXI feature, but a browser setting modifiable by setting a CSS property on the canvas (as you can observe here)!

So all you actually need to do is:

// Obtain the canvas
const canvas = runtimeScene.getGame().getRenderer().getCanvas();

// To enable nearest scaling:
canvas.style['image-rendering'] = "pixelated";

// To enable linear scaling:
canvas.style['image-rendering'] = null;
1 Like
7

Thank you again. I just came here to say I think I solved it as well. I saw that the cavas has a ā€˜image-renderingā€™ property set to pixelated that when removed set the scene to be smoothed and when re-added sets back to pixelated.

Your method seems way nicer then my nasty version so I will default to that. I owe you a coffee!

const gdCavas = document.getElementsByTagName('canvas')[0];
//gdCavas.style.removeProperty("image-rendering");
//gdCavas.style.setProperty("image-rendering", "pixelated");
1 Like