Hi everyone,
I’m currently developing a 3D game in portrait mode, and I’m encountering an issue with the background alignment on mobile and tablet devices. In the project settings, I’ve set the resolution width and height to 720x1280, and I’ve enabled Fill Mode with Keep Aspect Ratio to maintain the portrait orientation.
However, I’m finding that the background fits only to the adjusted aspect ratio, leaving black borders on the other sides of the screen. I’ve attached a screenshot and provided a repository link for reference.
Could someone please advise on alternative methods to achieve the desired outcome, or suggest if there might be a mistake in my project settings for portrait mode? Your insights and advice would be greatly appreciated.
Thank you!
Repository Link : PlayCanvas | HTML5 Game Engine
Hi @gouthamamin!
I’m not exactly sure what the desired result is, but I would suggest to use Fill Mode Fill window and set the Scale Blend of the 2D screen to 1.
@Albertos , Enabling fill mode to Fill Window makes the game scene to span entire screen in landscape mode. I want to have game in portrait mode itself even in desktops.As per below image
Setting your background image from Strech to Center Anchor & Pivot will fix this.
@Albertos , I did not find any difference in mobile device… I can find gap at the top & bottom in some of the device which are having height.
With all changes I suggested above I get the result below.
Yes that is correct but what about the game play scene ? will it be in portrait mode ? if we keep fill mode as fill -window
If possible can you share me that forked updated repo link in this thread
Ah I see, I don’t know how to solve that.
@Albertos 
Can I expect solution to my query here…
I personally don’t know what could be the solution unfortunately.
Using a 3D screen seems to have no effect, so no idea what is the use case for that component.
Maybe you can do something like rendering your camera into a texture so you can use the same setup as your menu scene.
I tried changing the size of the canvas and the fill mode when the window ‘resize’ event occurs, eg when moving between portrait and landscape. It might do something like what you want. See here
var Test = pc.createScript('test');
Test.prototype.initialize = function() {
window.addEventListener('resize', this.resize.bind(this));
this.resize();
};
Test.prototype.resize = function() {
// https://api.playcanvas.com/classes/Engine.Application.html#setCanvasFillMode
// https://api.playcanvas.com/classes/Engine.Application.html#resizeCanvas
this.app.setCanvasFillMode('FILL_NONE');
if (window.innerWidth < window.innerHeight) {
console.log('Portrait');
// Portrait
this.app.resizeCanvas(window.innerWidth, window.innerHeight);
this.app.setCanvasFillMode('FILL_WINDOW');
} else {
console.log('Landscape');
// Landscape
this.app.resizeCanvas(window.innerHeight, window.innerWidth);
this.app.setCanvasFillMode('KEEP_ASPECT');
}
};
1 Like
Hi @Kulodo133 , @Albertos
For the above code I am getting screen like this for mobile device.
Repo :
PlayCanvas | HTML5 Game Engine
Hi @gouthamamin. Did you attach the script in the game play scene also? My fork seems to work
I got the same result on mobile and laptop.
I noticed in my own fork that when I forgot to attach the script to the game play scene, that a webgl error occured. Therefore I would try to attach the script to your game play scene, and also close down your browser completely to get rid any webgl errors.
Actually the result on my mobile is different.
