Hi guys. I’m new here. I created a simple game, another infinite runner with Phaser 3 and then uploaded to the PlayStore. The problem I have is, I don’t know how to scale the game for the ultrawide aspect ratio of newer android phones.
I just changed some Manifest activity config options, to ensure the screen orientation is on landscape mode. Then I have followed some google docs to implement the fullscreen mode, that is more immersive. But I cannot solve the issue, there is a black bar on the top of the screen and the game does not occupy the full height of the device’s screen.
i havent tried to pack phaser with android nor having experience with android.
only made a game that integrated with android through webview.
in my case that would be making sure. that the webview occupy the entire screen firsthand.
after that try check phaser scale setting. if you want a game that scale based on screen size without preserving any ratio. you could set the game size based on window.innerwidth.
hope it could helps
P.S. i’m also curious how do you pack phaser 3 game into an android app ?
Hi. I used Capacitor and ionic 5. I used a scaling strategy that I have seen also used in this forum. The only issue is that I already produced all the assets before testing the scaling strategy, so I ended up with stretched walls in ultrawide screens.
I will update the game to reduce its size. There are several improvements to be made. I also want to fix this issue that I am discussing here.
The game I have created is a clone of the “getting started” guide produced by ourcade. I am a beginner and this is my first game.
Maybe I will post some screenshots, because the game is OK on an old Android Phone 16/9 aspect ratio. But the newer ultrawide screens give me the problem that I discussed here. I tested the game on some android devices and my assets are optimized for a 16/9 resolution.
I created a snake clone following the guide I have found in the examples section of Phaser3. I implemented swipe controls and everything is fine. Only problem, the blackBar is there. I don’t know how to go fullScreen on the ultrawide screens of new Android Phones.
Things I already have done in order to solve this issue:
Edited Manifest.XML file.
Followed Google docs and changed stuff in the MainActivity file.
I am not an expert on the subject of android development. I am just following docs and guides I find online. I am going to ask this same question to ionic devs, maybe they know the answer and faced the same issue. If I will find a solution I will update this post.
Started learning Kotlin. Learned how to wrap Phaser games using a webview.
I understand that this issue is caused by the notch, so somehow I have to go fullscreen, hide navibar and statusbar, stuff that I have already done. At first I thought that the issue was caused by the 2400 px resolution of the phone. Instead it’s just due to the notch.
I have tried everything. This week has been spent learning Kotlin and how to remove this damn black bar. But the black bar is still there, very annoying.
The positive side is that I really enjoy using Kotlin, so I will probably learn more about this language. But right now I really want the black bar to disappear.
