fix: preserve viewport aspect ratio in fullscreen, fix touch pos, and inspect resolution

[imaginarny]

It follows up on the changes from #1096 and its canvasToViewport() calculation.

Before that, touch coords were way off in fullscreen, when canvas is set to fixed size and letterbox disabled. Although, fullscreen is aspect-fit resized so letterboxing is still present there and onResize() and updateViewport() don't account for that.

Mouse pos was correct because it scaled the viewport back to the correct ratio on each mouse move. After the mentioned PR, touch coords were only off because it calculated with as if stretched viewport instead (since mentioned functions skipped it).

The mouse correction code was removed and viewport code was updated instead to scale and recalculate the ratio in that case as well which happens only when resize happens. So both mouse and touch are calculated with the viewport already updated with the correct ratio and scale.

🔥 Unexpected bonus: fixed the inspect resolution along at last, since the correctly updated viewport now allows that

Summary

• Debug inspect is now really drawn unscaled as it was always meant to
• Fixed touch pos for the remaining kaplay() opt setup where width & height are defined, and letterbox disabled. Other options are basically unaffected/behave the same.

There are many playtests for those, which start with mouseXY. I added two more:

• mouseSizeFixed - with kaplay opts mentioned
• mouseSizeAligned - same, but when canvas is not in the original pos

Will mention how to test touch here as well, that is also included in those two files:

To test touch, enable touch simulation in dev tools responsive design mode, then press and hold mouse down and move around. Ensure that the red dot follows correctly in fullscreen (F).

• Changeloged

[imaginarny]

Sidenote, I trigger resize event on init if canvas dimensions don't match the options set as it usually happens with letterbox (but not only) and resizeObserver wouldn't catch these cases since no need for that anymore, gl now has correct initial dimensions, same as the initial size is already canvas offsetWidth/Height (has to). I removed updateCanvasScale() call in init and resizeObserver, since it would be called thrice at times, where the ultimate one was always in the onResize() that now works as should. @Stanko, can you confirm your use case still works?

[Stanko]

Hey, from looking at the changes I think they do, but I won't be able to test in next day or a two. As soon as I can, I'll send my findings here.

[Stanko]

Actually there are two things that I found. The first one is a bug, because removing it on init assumes the initial scale is always 1, which is not the case if the canvas is already resized using CSS (like in my game).

The second thing is that the resize observer schedules the resize on the next input tick (similar to our discussion in the PR for releasing input on blur) which leaves stale state. After a canvas size change (triggered by changing CSS without resizing the window), the first mouse move can run canvasToViewport() before resize handler updates the canvas scale.

Please bear in mind that I probably don't have the same understanding of the engine as you do, but from my experience it is good to be very careful about clearing up stale state. If you don't think this will have a huge performance impact I would keep it.