How do I fix a game size but allow fluid scaling to fit within the container

[wiseguy12851]

Im wanting to fix a game to a certain size, say for example, to 640 x 480, but allow the game to proportionally scale to any width and height smaller or bigger. Upon scaling up it more or less proportionally stretches the 640x480 game size, and same for scaling down. In other words I intentionally want it to get more pixelated when scaling up and more clear when scaling down just like stretching an image will do and I dont want it to lose proportion or reveal more of the camera (What the user sees as far as camera goes should be exactly the same)

 

Is this possible?

 

Thanks

[wiseguy12851]

I figured it out, For this effect you have to have 2 canvases, one of the fixed size that Phaser renders to, its not rendered with display: none. Then another one that is scaled by css into a special container monitored by Javascript. When the container changes size it resizes the canvas proportionally into that container. Then theres an outer container that controls the sizing and placement of the inner container.

 

Upon each render call the non-visible canvas controlled by phaser is copied and pasted to the size of the main canvas.

 

By doing it this way a phaser game can have a fixed size but be scaled to any size smaller or bigger, its stretched and shrunk depending on scale but the contents remain the same. Its also kept proportional and placed and sized wherever desired always remaining proportional and at a fixed base size.

 

Code I used is below, base article on how to do this I referenced is here. I modified the code from the article and ran into a few glitches with it resizing smaller but not bigger but the answer to the question I had has been answered.

 

http://pastebin.com/0HmsgNrM

[JUL]

Hm.

 

What about

 

 

            game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
            game.scale.minWidth = 640;
            game.scale.minHeight = 480;
            game.scale.maxWidth  = screen.width*2;
            game.scale.maxHeight = screen.height*2;

 

            game.scale.pageAlignHorizontally = true;
            game.scale.pageAlignVertically = true;
            game.scale.setScreenSize(true);

 

?

[wiseguy12851]

Wow I didnt see the game.scale, still new to Phaser

 

But I need it to be flexible to any size whether it's very tiny or very large, I need to give it a container and it scale fluidly in the container but always scaling up or down from the base size. So If I pick 320x240 I want it to always proportionally stretch bigger and smaller from 320x240.

 

I couldn't get the example you gave to scale within a given container, it seemed to prefer the entire page or no scaling at all