Midgard, Grass Display
(2020-02-02)
Now that the grass can grow on the backend, it needs to be displayed on the browser-based front-end. This should be fairly straightforward, as the implementation was designed with ease of display in mind.
Each bitfield of grass defines a region, with smaller regions being used where further detail is needed. These smaller regions overlay on top of the previous ones, overriding their values. For displaying the full field, we can start by drawing the largest field, then draw any subfields overtop it. Since the fields on the backend are ordered according to a depth-first search, this same ordering works for drawing.
A dummy canvas is generated, and used to make an 8x8 image. This 8x8 image is then scaled to the region that it covers, and drawn.
And it works, though with some visual artifacts. The larger regions
are visible, where they shouldn’t be, and individual tiles have blurry
edges. This is an artifact of upscaling the 8x8 images. In my
browser, this defaults to using a bilinear interpolation, when I want
to use nearest neighbor instead. To change this, I need to set
ctx.imageSmoothingEnabled = false;
Lastly, the coordinate system. My background is primarily in math/physics, and so I tend to think of increasing the y coordinate as being “up”. In 2D computer graphics, y is usually “down”, being measured from the top of the screen. Being foolish, I like to adapt the world to myself, and therefore want to correct this.
