Jagged fonts in HTML5 (DEF-2396)(SOLVED)

gianmichele · August 19, 2019, 12:55pm

I’m getting an extremely jagged font render in HTML5 compared to a normal desktop build. Any suggestion?

jagged_font

For reference, in the font properties antialias is on and I’m using the label material.

britzl · May 13, 2019, 8:08pm

Hmm, is it a bitmap or distance field font?

@AGulev, any idea?

AGulev · May 13, 2019, 8:12pm

Could you please upload a project with minimal repo case?

AGulev · May 14, 2019, 7:49pm

Thanks for the repo case (in PM).

This is DEF-2396 issue:

I fixed this bug in your repository by adding logic that takes into account devicePixelRatio (method resize_game_canvas):

	function resize_game_canvas() {
		var app_container = document.getElementById('app-container');
		var game_canvas = document.getElementById('canvas');

		var dpi = window.devicePixelRatio || 1;

		var width = {{display.width}};
		var height = {{display.height}};

		app_container.style.width = width+"px";
		app_container.style.height = height+"px";
		game_canvas.width = width*dpi;
		game_canvas.height = height*dpi;
	}

	function load_engine() {
		resize_game_canvas();
         ...

Also, this issue solved in FBInstant games template:

github.com

defold/extension-fbinstant/blob/0806844fdeaafce0b925d3901c7d7bd16b7d33bb/fbinstant/index.html#L120


    if (Module['isWASMSupported']) {
        engineJS.src = '{{exe-name}}_wasm.js';
    } else {
        engineJS.src = '{{exe-name}}_asmjs.js';
    }
    document.head.appendChild(engineJS);
}


// Make sure to resize the canvas to cover entire available area
// Resize on init, screen resize and orientation change
function resize_game_canvas() {
    var app_container = document.getElementById('app-container');
    var game_canvas = document.getElementById('canvas');


    var dpi = window.devicePixelRatio || 1;
    var width = window.innerWidth;
    var height = window.innerHeight;
    var targetRatio = {{display.width}} / {{display.height}};
    var actualRatio = width / height;


    var isStretchCanvas = {{fb_instant.stretch_canvas}} + 0;

gianmichele · May 14, 2019, 9:52pm

Thanks a lot! This is why this community is awesome.

totebo · June 14, 2019, 12:32pm

Any chance of also adding this to the main HTML5 template? When I do a copy paste botch, there is a border and you don’t see all of the game area for some reason.

britzl · June 14, 2019, 1:38pm

We will update the default template soon and this will be included.

AGulev · August 19, 2019, 12:55pm

Solved in Defold 1.2.160 has been released