Blog - GTT Dev : Positioning the Text

1st October 2024

Blending is a nightmare!!!

-=-=-

Much like the issues I had with JSE and other engines, trying to line up text can be an absolute nightmare, across all the different systems/browsers/etc.
Yesterday I experimented with getting HTML Text elements overlaid on top of Canvas elements in such a way that they'd line up.

In JSE, trying to get things lined up on just a canvas was hard enough, but here I was trying to merge one set of elements with another set of elements, as well as get objects moving around in sync and things of that sort.
Honestly, it felt like it should've gone MUCH better than it did, but when you add in the scaling factors for both the canvas and the html elements, it all went far more awry than it should've.

Here it is in Safari.
You can see the HTML element in green slightly misaligned, and so looks oddly wonky next to the canvas text.
This is after about an hour of tweaking the maths, endlessly, to get things to look "This" good! And it's still not quite right.
Grrr.

Here it is in Firefox.
In Firefox, the misalignment is more evident, but also is the fact that the text is at an ever so slightly different scale, meaning it all gets worse the longer the text is.
.. Presumably because I'd worked so hard on getting the Safari version as exact as I could.

If you've ever heard anyone swear at CSS, it's because of things like this!

I had to make a decision yesterday. Do I carry on trying to blend HTML and Canvas flawlessly, or do I just go "OK, Canvas it is."
Could I do the entire game in "just" HTML? Possibly, but it'd severely limit what I can do on the screen. I couldn't, for example, draw a Missile Command style game with letters or words falling down that you have to shoot at.
Or, rather, it'd look a bit pants if all I could use were HTML elements, and goodness knows how different browsers would cope with that.

No, I think I'm better off sticking with just Canvas.
I'll add an overscan safe-area, so that text doesn't end up offscreen, but will work with the canvas to make things as worthwhile as possible.

Ugh..
I feel like I'm way behind, already, having to faff about with this stuff now!

A.I. Corner

> Reveal 🔎

: Download | Suno Link

Alternative version

: Download | Suno Link
Sung by Suno

"Cartoon @Derek moves the colourful magnetic letters around on his fridge" by ArtFlow.ai

> Reveal 🔎

Views 28, Upvotes 3

Daily Blog

New games every week!