How do I Center Layout on Cocoon JS?

Get help using Construct 2

Post » Thu Mar 27, 2014 12:30 pm

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
B
10
S
2
G
3
Posts: 24
Reputation: 1,565

Post » Fri May 23, 2014 3:18 pm

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 :(
B
5
S
2
Posts: 29
Reputation: 483

Post » Fri May 23, 2014 3:57 pm

Yep, I'm in the same boat as you two. Hopefully someone knows the answer?
B
13
S
6
Posts: 130
Reputation: 1,553

Post » Fri May 23, 2014 4:02 pm

It seems to be a rather specific problem, but I would guess @Ashley has an idea on what to do.
B
5
S
2
Posts: 29
Reputation: 483

Post » Fri May 23, 2014 4:28 pm

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?
ImageImageImageImageImage
B
19
S
5
G
1
Posts: 614
Reputation: 2,542

Post » Fri May 23, 2014 4:33 pm

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.
ImageImageImageImageImage
B
19
S
5
G
1
Posts: 614
Reputation: 2,542

Post » Sat May 24, 2014 2:43 pm

TheWyrm wrote: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.

Image

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

Image

instead of this

Image


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

Can anyone help me out here?
B
5
S
2
Posts: 29
Reputation: 483

Post » Sat May 24, 2014 3:43 pm

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?
B
5
S
2
Posts: 29
Reputation: 483

Post » Thu May 29, 2014 5:48 pm

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 ;)
ImageImageImageImageImage
B
19
S
5
G
1
Posts: 614
Reputation: 2,542

Post » Fri May 30, 2014 5:31 pm

TheWyrm wrote: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
B
8
S
2
G
1
Posts: 39
Reputation: 671

Next

Return to How do I....?

Who is online

Users browsing this forum: Fenix18 and 9 guests