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!
Int. Corridor outside Dave's apartment
[Green approaches Dave's door, looking concerned. A white rabbit is sitting outside, twitching its nose.]
Green: Oh no, not again.
[Green cautiously approaches the door, eyeing the rabbit suspiciously]
Green: [to the rabbit] You're not going to start talking about mathematical cells or word processors are you?
[The rabbit just stares blankly]
Green: [sighs] OK.. Here we go..
[Green knocks on Dave's door]
Green: Dave? Are you in there? Please tell me you haven't turned yourself into a rabbit!
[Scene Two]
Int. Dave's apartment - Moments later
[The door creaks open, revealing Dave surrounded by various electronic parts and empty cola cans]
Dave: [looking confused] Greenie? Why are you talking about rabbits?
Green: [pointing to the hallway] There's a white rabbit outside your door. I thought maybe you'd... well, you know.
Dave: [laughs] Time traveled? Turned myself into a rabbit? Resurrected Burrow Office? Come on, Greenie, I'm not that daft.
Green: [skeptically] I mean.. You do have history with this sort of thing.
Dave: [defensively] I've been building a robotic pet.
Green: [alarmed] A robotic pet? Dave, that's a real rabbit out there!
Dave: [surprised] It is? Blimey, I must've ordered the wrong parts online. I was wondering why the circuit board looked so furry.
[Scene Three]
Int. Dave's apartment - A few minutes later
[Dave and Green are sitting on the couch, the white rabbit now hopping around the room]
Green: So, let me get this straight. You accidentally ordered a real rabbit instead of robot parts?
Dave: That's autocorrect for you. Robot, Rabbit. They're a bit similar.
Green: A bit? Dave, this is right up there with the time you tried to build a phone out of an old GameBoy!
Dave: [holds up the melted phone he made yesterday] Hey, it works. Just because you can't make out that it's supposed to be a GameBoy.
Green: [sighs] So what are you going to do with a real rabbit? .. again..
Dave: It should be ok with only one rabbit, right? I suppose I could train it to fetch cola cans for me.
Green: [facepalms] Dave, rabbits don't fetch things. They're not dogs.
Dave: Not yet, they're not. But with a bit of coke-based training...
Green: No! Absolutely not. We are not giving cola to a rabbit.
Dave: You're no fun, Greenie. Fine, I'll just have to come up with another brilliant idea.
Green: [muttering] That's exactly what I'm afraid of.
[End credits roll]
Views 50, Upvotes 8
Daily Blog
New games every week!
Places
Archives
Site credits : If you can see it, Jayenkai did it.
(c) Jayenkai 2023 and onwards, RSS feed
6
Blog - GTT Dev : Positioning the Text - AGameAWeek