Wall tile: (112 x 134 px)
Floor tile: (48 x 48 px)
Skew floor?
Preview:
Instructions
Select local files for your floor and wall. (They do not have to be the right sizes.)
Right-click to save as a PNG file!
You can also show a preview.
(FRUA (Forgotten Realms Unlimited Adventures) users can try resizing the output to 50%, and pasting to a template file. Number of colors need to be reduced after that.)
Updates
2019/04/13: Preview function added, plus some bugs (wrong shapes, etc.) fixed.
Parameters
Final image: 608 x 176 px
Wall basic image: 112 x 134 px → to 85 x 68 px, 48 x 114 px (67 px high each side)
Learning Notes
The general idea was creating resized/skewed versions of the wall below, adding to them, and then cutting and pasting to the areas above.
Challenges were automatic anti-aliasing, etc.
Resizing a canvas clears it! Thus, I needed to "save" the art to another variable, resize the canvas, and then put the data back.
Anti-aliasing: automated and problematic for pixel art. Various methods to try to stop it.
One is to variously try to move the pixels .5 pixels vertically or horizontally. This is very manual, and required a lot of visual checking. It also seemed to work in one way randomly sometimes and another other times (straight and diagonal lines behaved differently).
ctx.imageSmoothingEnabled = false is supposed to turn off anti-aliasing for some functions, but it doesn't seem to work for me. It may only work for ctx.drawImage.
One option I can try is to just go through the pixels and change alpha to 255 or 0 depending on its level, combined with the half-pixel moving trick.
Transform makes little sense.
Default parameters for the ctx.transform function are (1,0,0,1,0,0).
