Godot game rendered in HTML => low resolution

stalex

Hi all !
I'm facing a pretty strange issue. I designed a game for HTML5 target.
This game runs in a browser, and is designed to a resolution of 1080p.
On a computer, it works very well. But I learnt that for mobile, the resolution used in a browser is not the actual resolution of the mobile phone. According to this link: https://www.webmobilefirst.com/devices/oneplus-6t/
For my mobile phone, there is a pixel device ratio set up to 2.625, so if my mobile has a resolution of 2340x1080, the actual resolution of the viewport is divided by 2.625, so it is 412*892.
When rendering such a Godot game in a browser, it looks very aliased, and the fonts render badly.
Do you know if there is a way to increase the aspect the game is rendered, on a HTML 5 target for mobile ?

It is an opened discussion but is there, here, someone that have more knowledge on that ?
Many thanks.
Bye.

stalex

Said differently, why Godot renders the game in "mobile browser" resolution in the Webgl Canvas, instead of rendering it to the native (1080p) resolution ? I think Unity renders in a native resolution.

cybereality

That is likely what you want, but you can edit the HTML to a different resolution. You can also set the viewport resolution in Godot to whatever you want.

cybereality

Here is a script to manually change to any resolution. You always want the window / canvas at native resolution.

extends Node2D

const RES_SD = Vector2(854, 480)
const RES_HD = Vector2(1280, 720)
const RES_FHD = Vector2(1920, 1080)
const RES_QHD = Vector2(2560, 1440)
const RES_UHD = Vector2(3840, 2160)
enum RESOLUTION {NATIVE, SD, HD, FHD, QHD, UHD}
export (RESOLUTION) var resolution = RESOLUTION.NATIVE setget update_resolution
var viewport
var viewport_size
var native_res

func _ready():
	viewport = get_viewport()
	viewport.connect("size_changed", self, "on_window_resize")
	var texture = viewport.get_texture()
	texture.flags = Texture.FLAG_FILTER
	texture.viewport_path = viewport.get_path()
	get_screen_size()
	set_viewport_size()
	on_window_resize()
	
func set_viewport_size():
	var view_res = RES_SD
	match resolution:
		RESOLUTION.NATIVE:
			view_res = native_res
		RESOLUTION.SD:
			view_res = RES_SD
		RESOLUTION.HD:
			view_res = RES_HD
		RESOLUTION.FHD:
			view_res = RES_FHD
		RESOLUTION.QHD:
			view_res = RES_QHD
		RESOLUTION.UHD:
			view_res = RES_UHD
	viewport_size = view_res
	
func update_resolution(res):
	resolution = res
	set_viewport_size()
	on_window_resize()

func on_window_resize():
	get_screen_size()
	set_viewport_size()
	resize_viewport()
	
func resize_viewport():
	if viewport:
		viewport.size = viewport_size

func get_screen_size():
	var window = OS.window_size
	native_res = window

stalex

Thanks for your answer. But I actually found the solution by setting "Allow Hidpi" in the project settings, in this case the resolution of the canvas is the one of the mobile device, not the one of the "browser".
Again thanks.