Skip to main content

Command Palette

Search for a command to run...

I'm creating an Isometric TileSet editor app with React and HTML5 Canvas because why not

Published
1 min read
I'm creating an Isometric TileSet editor app with React and HTML5 Canvas because why not
J

Senior Full Stack Developer in the ☁️

Creator of supereffective.gg, a Pokémon community running on Next.js and @vercel

Isometric TileSet Studio is a 3D-like tool for quickly prototyping isometric pixel-art worlds and tile sets.

g1kP7H.png

With this tool you will be able to work in an isometric grid and create mock-ups of your isometric tiles, that you can later edit in your favorite pixel art editor.

The expected workflow will be: you create a shape (or a composition of them) in this editor and then you copy-paste it in your favorite pixel-art editor, e.g. Aseprite.

You will be able to compose them in multiple layers, resize, change colors, stroke, rotation, tile size, etc.

kS190i.gif

If you are familiar with 3D editors, this tool will be very intuitive to use.

I spent a whole week working on this project but at least now it is a little usable.

I hope to make it more useful in the future, adding more features, making it more usable and efficient, but that depends on the expectation and interest I see in your comments :)

You can find this project on my Github:

Editor home page: https://itsjavi.com/isometric-tileset-studio

WebDev

Part 10 of 10

Articles about frontend and backend developemnt in JavaScript, TypeScript, NodeJS, ReactJS, ExpressJS, Babel, NextJS, etc...

Start from the beginning

Styling a sticky element when it gets pinned using React

In this case, using the scroll event offers more flexibility than using the IntersectionObserver API