Hi,
I am new to playcanvas and I had been developing a 2d game and I am not sure how to adapt the background to device width and height. I have a race track as a background(not in the 2D screen.) and when I run the game for different device, the background doesn’t fit the screen and the game should be played in portrait mode. I am not sure how to do it. Any suggestions would be helpful.
Thank you
Hi @maheshnaik and welcome,
if you are using a 2D screen you can play with the Scale Blend property to stop your screen from resizing in relation to the window width:
Another option is to change the Fill Mode option in your rendering settings to Keep aspect ratio. This way the canvas will always be visible and fully fit the active window:
@Leonidas Thank you for your reply.
I have a 2D screen for UI elements and I have used Scale Blend as you said, it is working fine. I have a race track as a background which is not inside the 2D screen. I am not able to fit the background to the screen. I have attached the screenshot below.
Fill Mode set to Keep aspect ratio portrait mode
Fill Mode set to Keep aspect ratio landscape mode
As you can see in the portrait mode, the scene is in the middle and there is black screen on either side of the race track.
I have set Fill Mode set to Fill window and below is the screenshot.
in Fill window mode some portion on either side will be sliced and 2D screen elements doesn’t appear on top.
I don’t know whether I should change in game settings or add a script to adapt to the screen or change camera fov.
Do you want the background to be filled regardless if you are in portrait or landscape, or just portrait?
just portrait.
In which case, you would want:
Resolution Mode: Auto
Fill mode: Fill Window
The Flappy Bird game enforces a portrait view by adding borders on wider resolutions: https://developer.playcanvas.com/en/tutorials/flappy-bird/
The camera code is here where it changes the ortho height based on the screen’s aspect ratio: https://playcanvas.com/editor/code/375389?tabs=4554271
Ultimately, you have to make the background large enough to cope with a range of the devices portrait ratios.
This may mean using a 3:4 ratio screen as reference and ensuring the road is long enough to cope with tall displays.
If you can share your project link, that would be great too.
1 Like
Thank you for your reply.
I will try what you said and let you know.
Hi,
Now I am trying only for UI elements. I have 2 button back and next. I want these buttons to be placed at the top left and top right corners of the device. I am not sure how to do it. I am trying with changing the anchor and pivot values. I am attaching the screenshot below.
Change the anchor of the UI elements to be on the corners rather than from the center. There should be some presets that make it easy to change.
@yaustar Thank you for your suggestion.
I was able to place the UI elements properly.
I have a small doubt regarding split anchors like for some anchor values we can’t edit the width or height of the element.
Is the anchor split when the top and bottom anchor values or left and right anchor values are the same?
I have read the user manual but didn’t get a clear idea of how or when it can be used.
I don’t think you need split anchors in this use case.
In this use case, I don’t need it.
Just asked when that can be helpful.
Thank you.
I haven’t found a concrete use case for it myself to be honest. It’s generally when you want to use % based anchors to control the size based on the screen size.
Okay. Thank you for your response.