Skip to main content

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

Updated 1 min readMarkdown
Part of seriesWebDev
I'm creating an Isometric TileSet editor app with React and HTML5 Canvas because why not

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

About the author

  • Senior Full Stack Developer in the ☁️

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

No comments yet. Be the first to comment.

WebDev

Part 10 of 10

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

Start from the beginningStyling a sticky element when it gets pinned using ReactIn this case, using the scroll event offers more flexibility than using the IntersectionObserver API