I'm making a top-down Javascript canvas game using the Entity Component System architecture.

For an entity to be drawn on the screen every frame, it needs a PositionComponent and a SpriteComponent. The rendering system looks like this:

for (let entity of scene.query(CT.Sprite, CT.Position)) {      

This works well, but I'm not sure how to modify this to give the player the ability to hide behind objects. For example, in Stardew Valley, you can stand in front of, and behind, objects, as demonstrated in this screenshot: https://i.imgur.com/B90jGS7.png

How can this be implemented in an ECS? Because currently my rendering system just iterates through every object and draws them.

Also, currently, for drawing the map (scenery and whatnot), it renders the map to a texture and then just redraws that single texture every frame (for performance reasons, instead of redrawing 10,000 tiles every frame). I'd imagine this makes it even more difficult to integrate.

My assumption is that I have to take into account the entity's position in some way? That is, an entity with { x: 0, y: 400 } will be drawn before an entity with position { x: 0, y: 500 }, but I'm also unsure of how to integrate this with an ECS.

Thanks for reading.

  • 1
    \$\begingroup\$ This looks similar to another question that was asked recently, which already has answers here. Did you encounter any specific difficulty in applying those answers to your situation? \$\endgroup\$
    – DMGregory
    Feb 23 at 18:56
  • \$\begingroup\$ @DMGregory Yeah, that doesn't seem to apply to the situation I mentioned in the beginning, where, depending on the sprite's position, it's either rendered before or after. I'm not sure how to integrate that sort of thing into this. \$\endgroup\$ Feb 23 at 20:00
  • \$\begingroup\$ Depth sorting is also a change in rendering order depending on the object's position, so it's not clear to me what obstacle prevents applying those answers to this context. Can you elaborate? \$\endgroup\$
    – DMGregory
    Feb 23 at 20:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.