Isometric Tile Level Editor
This is a small demo of the work I've been playing with recently. Works best in full screen since scrolling the mouse to zoom in and out also scrolls the page.
Controls:
WASD to move camera.
Press middle mouse button to center camera at mouse location.
Middle mouse scroll to zoom in and out.
Check out the code at GitHub:
Development log
- Updated to pixi.jsMay 17, 2023
Comments
Log in with itch.io to leave a comment.
Runs slow
Yeah, the top right is the framerate. This is all vanilla javascript with canvas.
I get about 12 fps on my relatively nice desktop. Seems like CPU usage percentage is low though, like 10%, and I assume since you're using canvas that's what it's using. I feel like it should be able to run much faster.
Thought about it a bit more. If you've got a 100x100 grid there, and if you're actually calling drawImage on the backend, then maybe low fps is to be expected kind of. Perhaps now is the time to dip your toes into WebGL? Have you seen my tool ArrowBench? :)
I'm not using drawImage. You're right - it's way too slow. I copy the canvas buffer array and put on pixel by pixel to that array. It's only using a low amount of percentage of your CPU because it's single threaded and probably using 100% of one core. I need to look into WebGL for sure. I just like working out the math for these myself, but I gotta stop doing that and start using at least a graphics library or maybe even a game library. I'll check out ArrowBench, thanks!
Oh don't worry, if you like a challenge then you'll really like WebGL