scale manager in game using pixi

[rossi46]

how to create a scale manager when resize parent div or window like ScaleManager in Phaser.io. In phaser, it has many method to scale:

• EXACT_FIT: A scale mode that stretches content to fill all available space.

• NO_SCALE:  A scale mode that prevents any scaling .
• RESIZE: A scale mode that causes the Game size to change.
• SHOW_ALL: A scale mode that shows the entire game while maintaining proportions.
• USE_SCALE: A scale mode that allows a custom scale factor

 Thanks

[xerver]

Have you looked at the scale manager in Phaser? I would start there.

[rossi46]

17 hours ago, xerver said:

Have you looked at the scale manager in Phaser? I would start there.

here is the class of phaser. http://phaser.io/docs/2.6.2/Phaser.ScaleManager.html

[xerver]

I'm aware. Your asking "How would I implement this", and I am asking "Have you looked at how that one is implemented".

[megmut]

It depends on your requirements. As far as I know, the reason the devs at PIXI left scaling out, is because it really does belong in User-Land, that is it's almost impossible to build a scaling method that fits for 100% of users, devices, rotations, DPR's etc etc. It's really not that hard to implement, at least the way I do it.

Break it down into the following: 

1. Take care of DPR (shrink stage / canvas by a multiplying factor of window.devicePixelRatio)

2. Calculate differential in scale between art design and current window.innerHeight / window.availHeight / window.clientHeight and apply the smaller of the two point values, the x or the y.

3. Listen out for resize events or device orientation. I tend not to listen for both and calculate the inner width / height as some browsers won't report a device orientation change but rather as a resize.

And that's all there is too it. Your stage, and all of it's children will scale to fit correctly. Do not get confused with the way that Phaser does this. Whilst it's very easy to setup, it also causes some issues issues when trying to fit 100% x 100% because of things like the letterbox.

It's probably also worth mentioning, that all SVG's and Graphics generated in PIXI take into account of things like DPR. And the resource loader will attempt to load the 2x, 3x etc assets if they are prefixed with this. ([email protected])