Multiple screen resolutions

[RetardVeverca]

Hi

 

What is the best way to support multiple screen resolutions and different aspect ratios on Android devices? (I am developing 2d game with CocoonJS)

 

I know you can scale it with idtkScale when working with CocoonJS, but that is not the perfect solution. 

 

Do you make highest resolution sprites and scale them down with game.scene.stage.scale.set ? And where can I find more about this function and others which might be useful like, hiresFactor, hires, retina and other properties of game.System class? 

 

Is maybe this the best solution? And how would I implement it properly in Panda.js?

 

Regards

[RetardVeverca]

And do you define positions in % so the items will be positioned corectly? Is it maybe the solution in SVG graphics? Or do you develop in fixed resolution (1024 x 768 for instance) and scale based on detected resolution? I know many many questions .. I know there is millions of solutions (I've read many articles about this problem including android developers guidelines), but my main question is, what is the prefered way with Panda.js (with CocoonJS)?

[angelkom]

The best way is to make higher resolution game and cocoonjs will scale it down see the flying dog demo, BTW using vector is baf idea for game development

[RetardVeverca]

Ok, so this is done automatically by CocoonJS, thats great So basically I set it up with lets say 768 x 1024 for portrait mode and set game.System.idtkScale = 'ScaleAspectFill'; like the way it is done in flying dog demo, but this still leads to some part of the game not being visible on certain screens? If I set to 'ScaleAspectFit'  some parts are out of canvas (letterboxing) and 'ScaleToFill' stretches content of course. And if the fixed higher resolution is actually the solution, what is the most appropriate resolution for portrait and landscape mode respectively? And thanks for answer

[enpu]

You can set your canvas to fit screen dimensions:

var width = window.innerWidth * game.device.pixelRatio;var height = window.innerHeight * game.device.pixelRatio;

[enpu]

Then i would position objects like this:

sprite.position.x = game.system.width / 2;sprite.position.y = game.system.height - 200;

[angelkom]

Enpu is right cocoonjs uses innerwidth and height so to get the device resolution you need to multiple the innerwidth or the innerheight with the device density

[angelkom]

Enpu if we do that does the engine scale the objects in the scene or we need to apply the same code to every object

[enpu]

No it would not scale the objects

[RetardVeverca]

Thanks enpu So if I set canvas and position elements like you suggested, is it best to set few different sprite dimensions for every object and select them with respect to game.device.pixelRatio or use max. dimension sprite and scale it down with resepect to game.device.pixelRatio?