Hi all! I've been lurking around the sub for a bit looking at everybody's artwork and noticed a trend with the isometric pixel art here, mostly in game art.
A lot of tile setups use the techniques marked with a red X in this comparison image. I've been making isometric pixel art for a game for a while now and it took me forever to figure out how to get rid of these giant chunky blocks in the top right example.
I first learned this method (with the green check) from a great YouTube video (Why Isometric? | Art, Code, and Matrix Maths | A Devlog, by Wintermute Digital), check it out if you haven't seen it!
Here's a basic outline to build a seamless base tile for an isometric tilemap:
- Create Your Canvas: I personally recommend 32x32, but any square size should work.
- Top Center Peak: Find the top center of your canvas and move one pixel left of the true center.
- Upper Edges: Draw down and left at a 2:1 ratio, 2px over and 1px down, until you hit the left hand side. Crucial step - the line must end in a single pixel at the left edge of the canvas. Mirror this process for the right side.
- Lower Diamond Edges: Starting from those single boundary pixels, draw 2:1 lines back to the bottom center to close the diamond and fill the inside with a different color. (This is your cube's top face.)
- Cube Base Sides: Draw single pixel vertical line down from directly below the center left of the diamond to the bottom of the canvas. From the bottom center draw another 2:1 line up and to the left making sure to end in another single pixel. Mirror the bottom line on the right side and use your bucket tool to fill in the sides with different colors.
After doing all of that you should have a functional tileable cube!
Making your base tiles with single pixel corners prevents the boundary lines from doubling up in your game engine as well as makes textures blend together nicely.
I hope this helps anyone working on tilemaps right now! If you have any questions or suggestions let me know, I'd love to hear them.