I made a little extension called Depth By Y and thought I’d throw it out here in case it helps anyone.
It automatically sorts your sprites based on their Y position, so stuff that’s lower on the screen appears “in front” — like you see in adventure games and RPGs.
I was building a little top-down project and needed my player and objects to properly layer over each other as they move around. Didn’t see an easy way to do it, so I cooked this up.
No manual sorting, no hacks — just plug it in and go!
Add the extension from here:
Example:
I haven’t dug super deep into MakeCode’s internals, so if there’s actually a built-in better way to handle sprite layers…
Please let me know! I’d love to learn about it.
Oh wow, this is very cool! Do you think you could add a block that adds the sprite based on, like, “sort by sprite [bottom]” that would add the sprite’s offset based on the width/height of the sprite, so it doesn’t have to be added manually? Keep in mind that you would have to use the hitbox of the sprite, not the image height. An option for depth sorting in directions other than down would also be neat, though it would need a bit of refactoring, so I understand if it’s not something you want to do. Anyways, this extension is pretty neat, and welcome to the Makecode Forum!
Hi, thanks a lot for the feedback and the warm welcome!
I really like the idea of calculating the offset automatically based on the hitbox — that would make things a lot easier. I’ll definitely look into it!
Sorting in different directions sounds awesome too. It might take a bit more work, but I’ll keep it in mind for future updates.
Thanks again for the suggestions and for checking out the extension!
Hi, @WoofWoof. I’ve just added a new block based on your suggestion:
sort sprite by bottom — it automatically calculates the offset using the sprite’s hitbox (not just the image height). It’s already in the GitHub repo and available in the latest version.
As for supporting other sorting directions (like horizontal or diagonal), I explored that too, but in the end I decided to keep it focused on vertical (Y) sorting. In my experience teaching younger students, multiple axes can become confusing very quickly — especially when they’re just getting comfortable with how sprites move and interact.
But I totally agree it would be a cool feature for more advanced projects. Maybe I’ll revisit it in a future version when I build a “pro mode”
Thanks again for the awesome feedback — I really appreciate it!
I’d love to learn about it.
