view/game content independent of screen resolution

[prokopst]

Is it possible to create view where game content is independent of screen resolution in pixi.js? I mean that game content is scaled, so game appears the same on lower and higher resolution (yeah, there is an aspect ration that needs to be solved too).

 

I have found this tutorial:

http://www.html5gamedevs.com/topic/620-tutorial-handling-game-scenes-and-screen-scaling-with-pixi/

But I think it's just silly to apply scaling on all objects before render and after render to reset it.

 

I checked the demos and Run Pixie Run appears to have change size of the game content to fit the screen (maybe I didn't dig in the code deep enough, but it doesn't appear to be... self describing).

[k0rs4r]

You can try something like that in your index.html:

function resize() {            var screen_height = window.innerHeight;            var screen_width = window.innerWidth;            var width = screen_width;            var height = screen_height;            if(screen_height > screen_width){                var ratio = stage.canvas.height/stage.canvas.width;                height = ratio * screen_width;            }else{                var ratio = stage.canvas.width/stage.canvas.height;                var width = screen_height * ratio;            }                        canvas.style.width = width+'px';            canvas.style.height = height+'px'; } window.addEventListener('resize', resize, false);

Also call resize() after you initialization function.