Jump to content

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


Recommended Posts

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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


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);}
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...