Can a different 'Scaling Mode' be used depending on device?

[Ninjadoodle]

Hi guys

 

I have a bit of an issue. I am almost done preparing my CocoonJS project, but here is something I've stubbled upon.

 

My base game res. is 480x320

 

For the iPad I get the desired scaling by using ...

idtkScale: 'scaleAspectFill',

But for screens wider than 4:3, like the iPhone 5, Galaxy S3 etc. I need to use ...

idtkScale: 'scaleAspectFit',resizeToFill: true, // To get rid of the letterbox effect

Is there a way I can check the dimension of the device in the config file, in order to setup the correct scaling?

 

Thank you heaps in advance for any help!

[enpu]

Unfortunately no, but you can use device-specific config, like this:

system: {    resizeToFill: true},iPad: {    system: {        resizeToFill: false    }}

Are you sure you want use scaleAspectFill on iPad? That will make some of your content hidden?

[Ninjadoodle]

Hi @enpu

 

Yup, I know that will happen and its the effect I'm going for

 

I've designed my game at a base of 480x320, but made sure that I use a 'safe zone' area - which ends up being about 427x320

 

All the important stuff gets place in this 'safe zone'.

 

Now on top of this, I make my backgrounds 640x320 so they go far beyond the edges.

 

I now have a stage at 480x320, with the important stuff being placed in 427x320 and the background at 640x420.

 

- On the iPad I want it to cut of the left and right edges a little bit (to essentially show the 427x320 area).

 

- On any device that has dimensions wider than 480x320, I want it to display more of the background instead of a letterbox.

 

Hope this explains what I'm trying to do ( I know I made it sound kinda confusing ).

 

I'm gonna try the iPad mode you've suggested

 

I'm sure there are other devices out there with the same dimensions as the iPad, but I guess they'll just have to live with the 'letterbox'.

 

I take it there is no way to test for let's say Android tablets?

 

Thank you!

 

PS. I've tried the iPad specific config and it works well. I'm gonna have a think about on how to approach Android Tablets.

[enpu]

Yeah that sounds a bit complicated, but if that works for you, then go for it

 

I think i would design my game so that the full 480x320 would be always fully visible, and then

if there is letterbox left/right or top/bottom, i would then manually fill that space with sprites etc.

(this would use same config for all devices)

 

Something like this:

if (game.system.width > game.system.originalWidth) {    // Letterbox left/right    // Fill letterbox area with something    }else if (game.system.height > game.system.originalHeight) {    // Letterbox top/down}

or then i would just fill my whole screen with for example TilingSprite (below game container), but only when there is letterbox:

if (game.system.width > game.system.originalWidth || game.system.height > game.system.originalHeight) {    // Letterbox found    var background = new game.TilingSprite('bg.jpg', game.system.width, game.system.height);    background.addTo(this.stage);}