For this first experiment, I made the squares in Figma and set the colors there, which was pretty laborious. Exported to SVG and added turbulence/displacement filters to get some variation. When exporting to PNG via Inkscape, I ran into the perennial issue where the filters sometimes only work on the top and left sides of the shape. (Someday I’ll figure out what’s going on there, since the filters look fine in Finder via Quick Look. In this case, from a distance, it still kind of looks okay.) Finally, I added some textures in Affinity Photo with opacity set to around 20% and blend mode set to soft light or overlay.

Second experiment: making things easier. I made a 48x48 image in Procreate Pocket on my phone and painted the scene using the oil paint brush. (Which is why the eyes are crazy and there isn’t a ton of definition on the characters. Like I said, not great pixel art.) I then wrote a quick command-line script (JS/Node) to take a PNG and export an SVG where each pixel of the PNG is a <rect> in SVG. Way faster than making the squares in Figma. The script shrinks each square a little and adds some jitter to the points as well. And I changed the background color to be more ground-like. Exported to PNG and textured as in the first experiment.

Some ideas for future exploration:

• More subdivision on the tiles, for a little more geometric variety
• Programmatically export masks from the SVG so that each tile can look more different from its neighbors, texturally (a masked tile would be next to an unmasked one, basically, with some randomness thrown in)
• Rounding the edges of the tiles a little
• Rendering the tiles in Blender (either with heightfields or by generating actual geometry with Python), ideally with some procedural texturing

Anyway, a fun afternoon diversion.

Reply via email

Colophon: I made these with JavaScript/Node, generating SVGs that I then converted into PDFs with Inkscape.

Reply via email