5 ms·
I've been prototyping an isometric browser game, and the approach I took was to draw an explicit interactive grid of divs on top of the isometric tiles with CSS
by bob1029 2y ago
I've been prototyping an isometric browser game, and the approach I took was to draw an explicit interactive grid of divs on top of the isometric tiles with CSS affine transforms to get each to fit its respective tile surface dimensions. OnHover, et. al. follow this transform perfectly.
It took me a while to get the transform figured out, but once you do you are basically done for an entire tile set. This is also robust to vertical/horizontal overflow of tile art. The browser gives you reasonable ways to get at the various coordinate systems. You can either take the screen space coords directly or inverse transform them to get the orthographic (i.e. purely top-down) tile coords.
Modern web browser tech is really something to behold. It's maybe the best game engine if you hold it right. There are some crazy things you can do in the browser in 5 minutes that are completely infeasible everywhere else. For example, what if some of the tiles are x264 video files and not just static PNGs? What if we also mix in tiles that are drawn using webgl/canvas at each frame update? We could have the client itself handle rendering of tiles using scene descriptions received from the server.
- ChiperSoft 2y agoTheres so many abandonware isometric games from the 90s and 00s that I’d love to see ported into browser based games. I had a pet project for a while where I was extracting all the assets from Lineage 1 so I could try to recreate it.