Proper way to scale game with Pixi v4?

[soul]

I've got a low res pixel art game, and my desired resolution of the game is 320x180. I then want to take that 320x180 and scale it up to fit whatever the browser size is, and of course it can black bar whatever doesn't match 16:9 ratio.

Currently I set the resolution option to 4, and when I try to use other examples of resizing I've seen online, none of them seem to do what I want. Either they scale the game so big I have scroll bars, or it made the in game resolution the size of the window which is for sure not what I want, the game needs to maintain that 320x180 viewport but just scaled up.

Any chance I could get some small example code on how to just take my ingame 320x180 resolution and scale it to the browser window?

 

[Taz]

Here's a little demo for Pixi version 4.5.0 that I think does what you're after. The demo uses a blue background so you can see the "black bars" and there's a red square at the center of the demo.

 

[soul]

19 hours ago, Taz said:

Here's a little demo for Pixi version 4.5.0 that I think does what you're after. The demo uses a blue background so you can see the "black bars" and there's a red square at the center of the demo.

I got this to work, but it dropped my FPS to about 15, vs where if I just up the resolution setting I easily maintain 60 FPS.

Not sure why it's dropping my fps?

I'm wondering if I should somehow calculate the page size then set the resolution setting according to the page size or something?

 

Thanks for your reply by the way!

[Taz]

Typically resolution is set to window.devicePixelRatio, which is 2 for retina 2X devices and 1 for 1X devices, and is 4 for a 2X device that is zoomed in 200%, for instance.

Stage scaling is what's typically used to fit content to the window. You can also create small, medium, and large versions of your assets to reduce the amount of scaling needed.

I added a frame rate monitor to the demo I posted and it stays at 60 fps except when the window is resized, etc., as expected, but it's just a couple of squares created with PIXI.Graphics. What images are you using?

IDK what's dropping your frame rate to 15, but if you post more info/code I can try to help more.