How to scale and center Pixi.js stage in the maximized canvas element?

[Alexander Farber]

Hello and good evening!

I am trying to develop a board game and would like to:

• Use HTML elements like buttons etc.
• Give Pixi.js max possible space and fit + center-align the game board inside the canvas element

Ivan had suggested to scale the stage and the children will be scaled automatically.

I have tried it in the attached file (and here is a jsfiddle), but just cannot figure out the math for scaling. Also, my dragging code breaks.

Regards
Alex

 

test-pixi-stage-scale.html

[ozgun]

Try this :

var ratio;

resize()
{
   ratio = Math.min(window.innerWidth / your_default_screen_width, window.innerHeight /  
 your_default_screen_height);
}

_applyRatio(displayObj: PIXI.DisplayObject, ratio: number)
{
     if (ratio == 1) return;
     var obj: any = displayObj;
     obj.position.x = obj.position.x * ratio;
     obj.position.y = obj.position.y * ratio;
     obj.scale.x = obj.scale.x * ratio;
     obj.scale.y = obj.scale.y * ratio;
}

_applyRatio(bunny, 1 / ratio);

 

Edited October 21, 2020 by ozgun

[Alexander Farber]

Thanks for you suggestion ozgun, but I didn't want to go through all the children of app.stage and apply some transforms to all of them.

At the end I have solved my problem with the attached file.

I have also posted my answer at Stackoverflow: https://stackoverflow.com/a/64528244/165071

test-pixi-stage-scale-bunny.html