[SOLVED] Setup a background to fill window

The project i’m making is mainly focused on mobile but it is possible to also play it on PC.
If the user is playing it on a desktop i set the FILL MODE to keep aspect ratio to mimic a phone screen on the desktop browser.
With that said, is it possible to set a background or maybe make another ScreenComponent that fills the whole window? Because the leftover margins are in a default white and i’d like to have control over the color / image displayed in this case.

Thanks :slight_smile:

Hi @Elizeu159! Where is your default white color coming from? I don’t see a default white color in a new project. I can control the background color with the clear color of the camera component.

Thanks for the response! I tested the following steps on a new project:

In Settings > Rendering

  • Set fill mode to “fit aspect ratio”
  • Set Resolution width to 720 and height to 1080

In the Hierarchy

  • Create a 2DScreen entity
  • Create a child Image entity on the 2DScreen

After these steps i’m getting a different color than White on the background (now it’s the grey from the play canvas editor), but i still don’t know how to change it. I tried changing the clear color of the camera component but no results.

EDIT: These top and bottom white bars are the clear color of the camera, it is set to white. The red image is from the Element component of the entity.

I’m attaching my browser view below, in case it helps

hi im just checking in if you need any help?

I don’t know if it is possible for your use case, but maybe you can set the resolution to for example 1920x1080 and resize the element to 720x1080. After that you can also change the scale blend of the 2D screen.

I also get the right result if I use your resolution settings. I set fill mode to ‘fill mode’ and scale blend to 1. On the image below the black color is the clear color of the camera and the white color is a full screen element.

Thanks for your responses again!

I managed to reproduce what you did and it worked in the new project. But i fear that in my original one this won’t be the best solution. Since the “keep aspect ratio” part is really important to me.

After some digging i found out that what i want to change is the margin’s color. From researching i saw that it is not possible to do that, but it is possible to set a padding using the margin values and then give the padding a background color.
I don’t know exactly how to do that but now i know where to go from here, it would be perfect if you could help me with this, but no problem if you can’t. Thanks a lot :smiley:

i would love to help! what are you doing at the moment?

What happens if you don’t use this setting? Can you share a link to your project so I can see the result on mobile and desktop?

Hi @hellaga_ra! Do you have any idea to solve this problem?

The problem of using the “fill window” option is the anchoring of the UI elements. Currently, the anchoring is set in a way that resizes the UI elements to fit the user’s screen size, this works great on mobile but on desktop i’d prefer to have a fixed aspect ratio because of the width being greater than the height.
I could make one version of the UI for mobile and another for Desktop with different anchoring settings, but i feel this would be a lot more troublesome.

I cant send you the project link in a private message if that’s ok.

There are a couple of ways to do this.

You can use JS to change the background colour of the HTML body to the colour you want.

Or do what is done in Flappy Bird here which is adding borders on the left/right of the screen is it’s too wide Flappy Bird | Learn PlayCanvas

1 Like

Thanks! I’ll take a look at it

It would be nice if you could base the anchor on the resolution of the 2d screen or something like that. Personally I made the concession by making the setup so that it looks good on most devices, but that means you’ll see this setup on desktop as well.

2 Likes

Hi @Albertos and @yaustar, thanks for the help and for the different approaches you guys presented to solve my problem!

I managed to achieve what i wanted by changing the document.body.style.backgroundColor / document.body.style.backgroundImage. It worked just right for what i needed :smiley:

2 Likes

If you want something that’s a bit less performant, but dynamic to what’s on the screen, this is also an option: Render to Texture Background - #8 by eproasim

1 Like