Better HiDPI support in HTML5.

This commit is contained in:
Fabio Alessandrelli 2020-07-30 17:10:16 +02:00
parent afb81abae5
commit 40f73f74ce
2 changed files with 20 additions and 11 deletions

View file

@ -155,6 +155,9 @@ $GODOT_HEAD_INCLUDE
var initializing = true; var initializing = true;
var statusMode = 'hidden'; var statusMode = 'hidden';
var lastWidth = 0;
var lastHeight = 0;
var lastScale = 0;
var animationCallbacks = []; var animationCallbacks = [];
function animate(time) { function animate(time) {
@ -164,13 +167,16 @@ $GODOT_HEAD_INCLUDE
requestAnimationFrame(animate); requestAnimationFrame(animate);
function adjustCanvasDimensions() { function adjustCanvasDimensions() {
var scale = window.devicePixelRatio || 1; const scale = window.devicePixelRatio || 1;
var width = window.innerWidth; if (lastWidth != window.innerWidth || lastHeight != window.innerHeight || lastScale != scale) {
var height = window.innerHeight; lastScale = scale;
canvas.width = width * scale; lastWidth = window.innerWidth;
canvas.height = height * scale; lastHeight = window.innerHeight;
canvas.style.width = width + "px"; canvas.width = Math.floor(lastWidth * scale);
canvas.style.height = height + "px"; canvas.height = Math.floor(lastHeight * scale);
canvas.style.width = lastWidth + "px";
canvas.style.height = lastHeight + "px";
}
} }
animationCallbacks.push(adjustCanvasDimensions); animationCallbacks.push(adjustCanvasDimensions);
adjustCanvasDimensions(); adjustCanvasDimensions();

View file

@ -101,7 +101,7 @@ bool OS_JavaScript::check_size_force_redraw() {
if (last_width != canvas_width || last_height != canvas_height) { if (last_width != canvas_width || last_height != canvas_height) {
last_width = canvas_width; last_width = canvas_width;
last_height = canvas_height; last_height = canvas_height;
// Update the framebuffer size and for redraw. // Update the framebuffer size for redraw.
emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), canvas_width, canvas_height); emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), canvas_width, canvas_height);
return true; return true;
} }
@ -159,7 +159,11 @@ void OS_JavaScript::set_window_size(const Size2 p_size) {
emscripten_exit_soft_fullscreen(); emscripten_exit_soft_fullscreen();
window_maximized = false; window_maximized = false;
} }
emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), p_size.x, p_size.y); double scale = EM_ASM_DOUBLE({
return window.devicePixelRatio || 1;
});
emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), p_size.x * scale, p_size.y * scale);
emscripten_set_element_css_size(canvas_id.utf8().get_data(), p_size.x, p_size.y);
} }
} }
@ -1147,9 +1151,8 @@ bool OS_JavaScript::main_loop_iterate() {
strategy.canvasResizedCallback = NULL; strategy.canvasResizedCallback = NULL;
emscripten_enter_soft_fullscreen(canvas_id.utf8().get_data(), &strategy); emscripten_enter_soft_fullscreen(canvas_id.utf8().get_data(), &strategy);
} else { } else {
emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), windowed_size.width, windowed_size.height); set_window_size(Size2(windowed_size.width, windowed_size.height));
} }
emscripten_set_canvas_element_size(canvas_id.utf8().get_data(), windowed_size.width, windowed_size.height);
just_exited_fullscreen = false; just_exited_fullscreen = false;
} }