The UI Module contains "Interactables," which are things on the screen the player can point at, like tilemaps and grids. Interactables can be drawn on their own with MDog.Draw.interactable(), or grouped together into a Page.
The UI Module's classes can be accessed with new MDog.UI.ClassName().
A Page holds a list of interactables, so they can all be updated and drawn at once. Make one with new MDog.UI.Page(MDog.Draw).
Interactable is the class every other interactable is built on. To make your own, extend MDog.UI.Interactable and give it a _draw(Draw) method, and an _update() method if it needs one. Every interactable has these methods.
A TextInteractable is pixel font text that can be added to a Page, like a label or a title. It's drawn with MDog.Draw.textImage(), so it uses the same fonts and settings.
It has the same getX(), getY(), setX(), and setY() as every interactable. Its text, color, and font can be changed directly, like label.text = "Score: 10".
A TilemapInteractable draws a grid of tiles from a sprite sheet, and can tell which tile the mouse is over.
The tilemap is a string of comma separated tile numbers, with one row per line. Tile 0 is the top left of the sprite sheet, and the numbers go left to right, then top to bottom. -1 is an empty tile. Tilemaps can be loaded from a .csv file with the Asset Manager.
const tilemap = new MDog.UI.TilemapInteractable(0, 0,
"0, 0, 0, 0\n" +
"1, 1, 1, 1\n" +
"2, 2, 2, 2",
16, "tiles.png", 4, {scale: 2});
MDog.Draw.interactable(tilemap);A RectangleGridInteractable is a grid of same size cells, used to turn screen positions into grid positions and back. Drawing it puts a red dot on every grid corner on the screen.
A VectorGridInteractable is a grid where each step across and each step down can be any direction, like for isometric games. Drawing it puts a red dot on every grid point.