Hello,
I am trying to create good camera/render settings for a mobile game.
When I started the game looked good on mobile and on desktop when I used msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })
Then I introduced a camera object to follow the player around and started using msg.post("@render:", "use_camera_projection")
the game still looks good on desktop but now the game looks too small my mobile phone. How can I use the “use_fixed_fit_projection” together with a camera object to follow the player around?
The “use_fixed_fit_projection” projection will use the size of the screen and the display size in game.project to calculate the optimal zoom to always show the area defined by the size in game.project with extra content above/below or left/right depending on how the aspect ratio differs.
When you do “use_camera_projection” you tell the render script to always use exactly the projection produced by the camera. As you’ve probably seen the camera has a fixed zoom value. This is why your game will render in different ways depending on the actual screen size.
The solution? You need to calculate the zoom on the camera component at runtime based on the actual window size vs the display size set in game.project. Something like this:
local display_width = sys.get_config_int("display.width")
local display_height = sys.get_config_int("display.height")
local window_width,window_height = window.get_size()
local zoom = math.min(window_width / display_width, window_height / display_height)
go.set("#mycamera", "zoom", zoom)
Thank you very much. It works and I think that I understand it.
I have one more question regarding the rendering. How would I achieve a fixed resolution and aspect ratio that resizes to the current display size but with black borders at top/bottom or the sides. let’s say in the game.project settings I set the resolution to width 720 and height 1280. and then I render this game on a modern mobile device there should be black borders at to top and bottom because the screen is taller.
You can change the dimensions in render.set_viewport(), but that will also impact things such as gui.pick_node() and screen to world coordinate conversion. A much simpler solution, which may seem “hacky” is to have a gui component with black box nodes which cover the area outside of the 720 by 1280 rect.
