Canvas Elements and Trying To Get The Word Out There

Intro

Alright, it's been another long while (4 months) since I posted an update about how this plugin is going. Been busy (with everything except working on the damned flexbox support).

Canvas elements!

Canvas elements are basically images, that you can draw whatever you want on to. I thought these would be good for people wanting to implement more complex features for their menus, and would also be cool for potential providing a basis for an <img> element in the future.

Now, basically, a canvas element is an array of pixels. You can configure the size of the canvas with the width and height attributes. These will change the pixel resolution of the canvas, but if you override the width or height CSS properties, then the canvas will use that for it's size (pixel resolution will not change, pixels will just have different sizes than normal)

With it just being an array of pixels there comes an issue, however. A 16x16 image is 256 pixels. How can you draw 256 different pixels with just Display Entities? Well, you use a separate display entity for each pixel. This obviously presents a problem, how the hell do you render any canvas with a significant size without using literally thousands of entities?

Greedy Meshing pixels... or whatever you call this

In order to minimize the amount of entities used, we need group pixels of the same color value into one entity when possible. To do this, I implemented what I think is called a greedy mesher? I've only seen that applied to voxels, so I don't know what the correct term is.

The algorithm is really simple (See algorithm here.) It works by iterating over each pixel, and then expanding horizontally until it encounters a pixel with a different value, then it tries to expand vertically. If it managed to expand in any direction, the grouped size is a mesh! If not, who cares, move on.

This grouping can help save on the amount of entities used, especially for images where lots of repetitive colors are used, like, a color selection thing, which is exactly what I used as a test bench for canvases:

You may also notice a bit of a flicker between the pixels of the canvas, I have since fixed this by implementing the absolutely genius solution of just increasing the size of the pixels by a very tiny amount so they overlap.

Other Canvas features

I also added support for the alpha channel, so you can have parts of the canvas with opacity, or just straight up not be visible.

Moving from Arcadius to my personal account

Yeah, ArcadiusMC, that server I tried to set up with my friends, failed miserably around a year ago now. And I decided that it's not worth it keeping things on the ArcadiusMC domain or packages, as such, I've moved over a lot of things to my own personal GitHub account.

A new scripting library!

I'm writing a scripting library for PaperMC, and I've moved a lot of the annotation-based script interop system over to that. For now, the repository for that project is private while I work on getting it to a usable state.

And of course, continuing in my fangirling of Ancient Greek things, the library will be called "Hephaestus".

A new XML parser!

I moved from the default SAX parser implemention to TagSoup's SAX XML Parser. This was because I wanted a more lax parser (And also because I wanted attributes without needing to specify a value for them).

Other small things

• Fixed plugin messages being broken after I switched to using the MiniMessage Translator
• Fixed a visual error that happened when changing an element's text content. (This was fixed by forcing a re-render of the DOM, instead of just re-rerendering one entity. This worked because the method call I replaced was right after a triggerRealign call, the realignment is applied later, so it's better to also respawn the element later)
• Fixed a dumb issue that originates from me trying to prevent unnecessary array construction when calling event listeners.
• Add support for the defer attribute on script elements
• Fix another stupid mistake that existed because I didn't test anything in the API module. (Calling Color.hsv would always return black)
• Update to 1.21.7
• Fixed an issue where background colors on elements didn't change correctly.
• Created an official logo for the project :D (It's an edited version of the HTML5 Logo)
• Added /delphi devtools for opening devtools for the menu you're currently looking at and /delphi devtools <instance name> for opening devtools for a specific page.

Future plans

At present, I feel like I should focus on getting a better layout system set up, fix up the issues with the Flow layout and then implement FlexBox layout.

But good lord, reading the FlexBox W3C Specification is nigh on impossible, it's so verbose and unreadable. Luckily I have another website that speaks about the FlexBox algorithm more clearly here.

Besides the layout and rendering side, I'd also like to focus on finishing the devtools and making it possible to debug and screw around with page elements using it. (Maybe integrate a web based version that lets you see the Delphi XML code in a browser and apply changes in game when you make changes in the browser)