Preload image bug of HTML5 version with DPI != 1

Help
#1

Hey everyone who is still alive in here and use Mac computers. :slight_smile:

I’ve got a comment from one of Mac users about strange bug in my HTML5 games where preload image is somewhat half size while the game is still loading fine. Everything is fine in other browsers.
It seems like the bug is with the latest Safari 15.5.

safari_preload
safari_preload792×515 67.6 KB

When I’ve tried it myself on virtual machine, the web page with the game crashes and stuck in infinite reload loop, again on Safari 15.5 only. :slight_smile:

Can anyone check the bug on their Safari?
My preloader code:

@:bitmap("assets/preload.jpg") class Back extends BitmapData {}
...
public function new()
	{
		super();
		
		var bmpd:BitmapData = new Back(Lib.current.stage.stageWidth, Lib.current.stage.stageHeight);
		var back:Bitmap = new Bitmap(bmpd, PixelSnapping.AUTO, true);
		addChild(back);
}

Thank you!

#2

This doesn’t seem right to me. Shouldn’t you pass the original width and height of the image file to the constructor?

// assumes that the image's original size is 200x100
var bmpd:BitmapData = new Back(200, 100);
var back:Bitmap = new Bitmap(bmpd, PixelSnapping.AUTO, true);
back.width = Lib.current.stage.stageWidth;
back.height = Lib.current.stage.stageHeight;
addChild(back);
#3

That’s the code I have for several years and it works ok everywhere except the latest version of Safari.
Seems right to me, cause I might have 200x100 image, but screen of any size, especially with mobile version.

Anyway, I can’t test your variant myself, cause on my virtual mac os it just crashes the page with any width and height.

Forgot to mention, openfl 9.1.0, lime 7.9.0.

#4

Can you post a link to the game? I’ll see if I have the same problem.

Edit: I found your site. Will check soon!

#5

<window width="0" height="0" if="html5" /> in project.xml and work with Lib.current.stage after get event addedToStage

#6

This is not working for preloader, at leat in Chrome it incorrectly resize preload image.

#7

As it seems your preloader image is exactly one fourth of the available screen space, I assume you set
<window allow-high-dpi="true" />
in project.xml and the actual device the screenshot is taken from has a devicePixelRatio of 2, right?
Usually Lib.current.stage.stageWidth is the result of multiplying the window’s width by the window’s scale. So if the browser window is 800 and the dpi is 2, it would result in 1600 pixels. Maybe this calculation isn’t available in the preloader.
Try doing it on your own like:
stage.window.scale * Lib.application.window.width

#8

Thank you @obscure, I think you are right!
I guess, that is the reason why Lib.current.stage.window.height and Lib.current.stage.stageHeight are different sometimes.

#9

Just to provide some more details on the problem.
I have a fixed size of the game screen for HTML5 and a background image of the same size.
So, everything works fine, except when DPI is not 1, which happens a lot on Mac screens, I guess.
In this case, my game screen might be 200x200, instead of 100x100 and background image stay 100x100 and I have the problem as on a screenshot.

Doing var bmpd:BitmapData = new Back(WIDTH, HEIGHT); has no effect on the size of background image.

For not HTML5 version of the game I do the following:

back.width = WIDTH;
back.height = HEIGHT;

And it stretches the image as needed.
But!
This is NOT working for HTML5 since OpenFL 7, which I have a little comment somewhere in my code about.
I’ve “fixed” this long time ago (by not settings WIDTH and HIEGHT) and completely forgot and now the problem came back again.

TL;DR: The problem is setting WIDTH and HEIGHT for background image in Preloader is not working for HTML5 since OpenFL 7.

#10

My solution to this problem is to set WIDTH and HEIGHT when preload image is finally loaded, which apparently happens very fast.
I do it on ProgressEvent.PROGRESS event:

private function onProgress(pe:ProgressEvent):Void
{
	if(back.width != 0)
	{
		back.width = Lib.current.stage.stageWidth;
		back.height = Lib.current.stage.stageHeight;
	}
}