Jump to content

scale manager in game using pixi


Recommended Posts

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


Link to comment
Share on other sites

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])

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...