Jump to content

CocoonJS scaling problems


Recommended Posts

Hi Guys


I'm trying to port my game to devices using CocoonJS, but I'm having some problems with the scaling.


My base resolution is 480x320 and the scaling works correctly on the iPhone4s (same dimensions).


- On the iPad Air, the game always shows in the lower left corner of the screen, taking up about 2/3 of the screen space.

- On the Galaxy S3, it seems to be pushed to the left side, instead of sitting in the middle.


I've tried No Scaling to every possible combination of ...


idtkScale: 'resizeToFill', //COCOON JS

scaleToFit: true, // DESKTOP BROWSERS

resizeToFill: true, // MOBILE BROWSERS


but nothing works and I always get the same results.


Any help would be absolutely awesome!


Thank you in advance

Link to comment
Share on other sites

Hi @enpu


I've just tried turning off webGL: true, in my config and it seems to have fixed the scaling.


idtkScale: 'ScaleAspectFill', now seems to work as it should.


I'm using canvas+ but also test in webview+


In the Cocoon JS viewer there is also webGl option which is turned on by default. Maybe the 2 are conflicting?


Please take your time looking into this and have a break haha :)


Thanks again!

Link to comment
Share on other sites

Hi @enpu


Thank you! Without webGL: true, the scaling seems to work better, but I think something might have changed in Pixi 2, as I can't seem to ged rid off the letterbox again.


I remember asking before and the answer was to turn on ...

idtkScale: 'scaleAspectFit';

resizeToFill: true,


This way it would centre the screen + get rid off the letterbox and instead it would show extra background graphics to the left and right.


Right now if I use the same setting, the screen seem to get pushed to the left and either cut off some of the screen on the right (iPad) or show more to the right (Android).


Before the update, it would show extra content to the left and right (which is what I'm trying to achieve).


Right now I'm completely confused and I have 4 devices sitting in front of me trying different combinations to get my head around it haha.


Thanks again!

Link to comment
Share on other sites

Hi @enpu


Yup that's right ...


With 'scaleAspectFit' or 'scaleAspectFill' only, I get


iPad - Letterbox top and bottom

GalaxyS3 - Letterbox left and right


if I also enable 'resizeToFill' with 'scaleAspectFill'


The screen moves to the left side and on Galaxy s3, shows more to the right.

Link to comment
Share on other sites

Hi @enpu


Just tested this and it still seems to be pushed to the left. The loading bar shows in the centre, but not the game once its loaded.


PS. I can only test in Webview+ since my sounds won't load on the Galaxy, but I think the scaling is the same with Canvas+

Link to comment
Share on other sites

Hi @enpu


Thank you for that snippet! I had to modify it a little and put in a hard value ...


var originalWidth = 480 * game.scale; 


container.position.x = game.system.width / 2 - originalWidth / 2;


It seems that game.system.width doesn't take the value from the config file, but instead the value multiplied by game.scale + the width of the device?


if I hardcode original width value, it centres nicely, but if I use game.system.width, it a little off. 

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...