CocoonJS scaling problems

[Ninjadoodle]

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

[enpu]

I will take a look at this tomorrow, have you tried other idtkScale options?

idtkScale  'ScaleToFill' // Default  'ScaleAspectFit'  'ScaleAspectFill'

[Ninjadoodle]

Hi @enpu

 

Just gave it a go and still the same results. The game always sits in the bottom left of the screen.

 

Thank you heaps for checking it out!

[enpu]

Are you using Canvas+ or WebView+ ?

 

Canvas or WebGL renderer?

[Ninjadoodle]

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!

[enpu]

That might be also issue with WebGL rendering on CocoonJS Canvas+.

 

You can turn WebGL off only on CocoonJS with this config:

cocoonJS: {    system: {        webGL: false    }}

[Ninjadoodle]

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!

[enpu]

Ok so i think the problem is with Panda's resizeToFill not working correctly.

 

If you turn it off, there should be letterbox on left/right or up/down depending on your devices screen ratio, correct?

[Ninjadoodle]

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.

[enpu]

Ok can you try now with latest develop branch. Leave idtkScale as default (ScaleAspectFit)

[Ninjadoodle]

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+

[enpu]

Ok well if loading bar is centered, then resizing is working correctly.

Sounds like you are positioning things wrong in your game code.

 

Can you give me example code from your game where you are positioning sprite or something?

[Ninjadoodle]

Hmmm ok, I basically create 4 containers ...

 

bg

mg

fg

ui

 

I don't set the positions of these at all and I think it defaults to 0, 0.

 

My guess is, I have to go and centre the containers?

[enpu]

Yep that's correct!

 

You see resizeToFill is only resizing your canvas, not repositioning anything.

So if you place container into top left corner, then resize canvas, container will stay top left.

[enpu]

One way to center your containers would be:

var originalWidth = game.System.width; // get your game's original widthcontainer.position.x = game.system.width / 2 - originalWidth / 2;

[Ninjadoodle]

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. 

[enpu]

game.System.width // original widthgame.system.width // current (resized) width

That's a bit confusing i know, maybe i should add new variables to system, like:

game.system.originalWidthgame.system.originalHeight

[Ninjadoodle]

Ahhhh! haha sorry, I should have copy pasted!!

 

Thank you heaps for the help here!!!

 

And seriously ... you should setup up a Paypal donate or something similar (unless you have one and I can't find it), so people could reward you for being so awesome!

[enpu]

Just added new properties to system:

game.system.originalWidthgame.system.originalHeight

So those are width and height without scale or resize

[Ninjadoodle]

Awesome, thank you!