Calinou
commented
4 years ago You can achieve this with a custom viewport solution. It might not be trivial to setup, but it should be feasible:
- Set the stretch mode to
2dand stretch aspect toexpandin the Project Settings. - Change Default Clear Color to a pure black color in the Project Settings (or any other color you'd like).
- Add a Viewport node for the game. Make sure it keeps a 16:9 ratio and is centered at all times. Also make sure its height resizes to match the window height (to avoid pixelated results).
- Add your TouchscreenButtons outside the Viewport node, so that it's part of the default viewport.
PS: In general, the expand stretch mode is preferable to using keep as it gives you more control on what you can do outside the game area.
Bleuzen
Describe the project you are working on: 2D jump n run
Describe the problem or limitation you are having in your project: I want to place touch controls in the black bars which appear by scaling.
Long version: My game is in fixed 16:9 aspect ratio and scaled in 2D keep mode, so if the aspect ratio of the screen or window is something like 21:9, there apper black bars at the left and right. Now I want to place touch buttons in my game, but these should be on the left/right of the screen, but not limited to the games scaled area.
Limitation: I can not place touch controls in the black bars when the game is scaled. Outside of the aspect ratio of the game, no elements are displayed, there are just the black bars. This makes it really uncomfortable to play on current 'widescreen' mobile devices (with crazy aspect ratios like 21:9).
So my game is in 16:9, but I want to place the touchscreen buttons in the black bars, to make it more comfortable to play on devices with high aspect ratio.
Describe how this feature / enhancement will help you overcome this problem or limitation: It would definitely improve the users experience and make things much easier.
(Currently I have to search for a hacky workaround to get this working, still haven't found anything good, which is frustrating.)
Show a mock up screenshots/video or a flow diagram explaining how your proposal will work: Example image, so you can see how the games screen looks. I drew in where I want to place the touch controls. https://imgur.com/a/UEQCyTb
Describe implementation detail for your proposal (in code), if possible: Well, I don't know much about Godots code currently. Sorry, not much of an idea.
As of how it could be implemented, here is my first idea (but maybe someone comes up with a better one):
In project settings, add an option to select a scene as an overlay. The selected scene should then be drawn on top of everything else, also the black bars when scaled. With this it would be possible to place the touch controls on the overlay scene.
If this enhancement will not be used often, can it be worked around with a few lines of script?: I really tried. Haven't got a working solution yet. Don't know if it is even possible currently.
I tried it with my own scaled up Viewport, but this makes other problems. (not sure if this is a godot bug? I will possibly open another issue for this)
Is there a reason why this should be core and not an add-on in the asset library?: I don't think this is something that an add-on could do(?)
Also, many games could use this. It just makes sense with these mobile phones getting even crazier screen ratios these days.