How do I Center Layout on Cocoon JS?

Hi!

I've succesfully exported my game to run on Android using Cocoon JS, but I have a problem. The game runs in portrait mode and the width is smaller than the device's width. The problem is that I can see the content outside the game screen. I want to hide this content by adding a black canvas or something like that and center the game. How can I do this?

Thank you

I just want to chip in and say that I have the exact same problem and would love anyone to show me the way. I have tried a couple of different things and searched around the forums but so far I'm stuck

Yep, I'm in the same boat as you two. Hopefully someone knows the answer?

It seems to be a rather specific problem, but I would guess Ashley has an idea on what to do.

So I had this problem earlier this week.

What you do is select 'scale outer' in the project settings for fullscreen in browser. This is what cocoonjs defaults to if if you use a letterbox view (as its unsupported by cocoonjs). However If you designed your game for widescreen you'll find that when previewing it in cocoonJS you'll get a white strip along the right edge of the screen.

So what you need to do is make the layout width larger than the window size width. My windows size was 900x1600. So I increased each of my layouts to 1200x1600. It will add the extra space to the right side of the screen. Which means if you have centered things based on your original layout size you will have to rejig things to your new center on all your layouts (yeah it was a pain). Then if you want to center the layout use the 'Scroll To' behavior on something that is in the horizontal center of your screen.

kapeesh?

Also just to note you could leave it on a letterbox knowing full well that it drops down to scale outer in cocoonjs. This allows your project to look nice in browser with letterbox as well as in cocoonJS with scale outer.

Also just to note you could leave it on a letterbox knowing full well that it drops down to scale outer in cocoonjs. This allows your project to look nice in browser with letterbox as well as in cocoonJS with scale outer.

Thanks a lot, I managed to center the layout now, but I have a new, different problem:

I have to set "Fullscreen scaling: Low quality" because my game is 32x32 px and in order to display correctly it needs to render first, then scale. Unfortunately, depending on the final resolution this screws up the rendering. For example one line of pixels doesnt even show up, screwing up the complete layout.

I drew up a quick explanation of the problem.

Choosing "Fullscreen scaling: High quality" seems to fix the problem, but then some objects render like this

instead of this

And I need all objects to be pixellated like shown in the second image.

Can anyone help me out here?

I am not sure but some people seem to have a similar problem when exporting with Cocoon JS? But maybe I am confusing two different issues here..

Anyways, is there any way to get low-res games to properly display with "Fullscreen scaling: Low Quality" and "Fullscreen mode: Scaling outer" ?

EDIT: This is really weird: I just disabled WebGL and the rendering problems seem to be gone completely. However, there is a caveat When before there was no visible anti-aliasing now it is really strong. Is there any way to disable anti-aliasing completely without WebGL?

There are other combinations of things you could try:

Fullscreen scaling: High or Low

Use high DPI display: Yes or no

Sampling: Linear or point

I would recommend trying it with low, no, point. Then see what happens.

Note: I have never tried what you're trying so this is a shot in the dark

So I had this problem earlier this week.

What you do is select 'scale outer' in the project settings for fullscreen in browser. This is what cocoonjs defaults to if if you use a letterbox view (as its unsupported by cocoonjs). However If you designed your game for widescreen you'll find that when previewing it in cocoonJS you'll get a white strip along the right edge of the screen.

So what you need to do is make the layout width larger than the window size width. My windows size was 900x1600. So I increased each of my layouts to 1200x1600. It will add the extra space to the right side of the screen. Which means if you have centered things based on your original layout size you will have to rejig things to your new center on all your layouts (yeah it was a pain). Then if you want to center the layout use the 'Scroll To' behavior on something that is in the horizontal center of your screen.

kapeesh?

Does anyone know another solution than this? For my game I have objects wrapping around the layout and this ruins the game mechanic since the wrap around will happen somewhere out in the scale outer. I have tried both wrap to layout and viewport but both cause problems.

I could go in and recode my own wraparound code but that would require a lot of effort this far into the games development.

Thanks

Has anyone found another solution? I would really appreciate some help.

Figured it out, use scroll to on an object in the middle of screen, create a black outline for your project and then make sure the layout allows unlimited scrolling. Changing layout size only made things worse for wraparound so if you are like me and need that function then do not do it.