In games, we usually separate visuals from physics interactions. WHY?

Please explain why you make some decisions and why you usually do something. I think it's important, so we can avoid mistakes when creating our own games!

  • godoterfr replied

    I don't fully understand your question.
    Are you asking why CollisionShape2D is sometimes bigger than Sprite and sometimes smaller than Sprite?
    If so, it is to simulate a 3D space in a 2D plane. If Godot's character had a collision on his head, it would be annoying because his head, which is up, would hit the rocks, which are on the ground. So only the lower body has a physical collision.
    I hope I have been able to answer your question.

    Splitting the difficulty into smaller chunks makes it easier to create. One piece will be the visual, another the collision, another the sound, etc.
    Each small piece is easy to learn and you combine them together to make a deeper and deeper game.

  • Nathan Lovato replied

    The first part of godoterfr's answer is correct. We made the collisions smaller than sprites so there wouldn't be too many frustrating collisions happening. But that's about it.

    I think it's something that'd best be learned interactively rather than with words: with the controller in hand, you can feel the difference between different collider sizes. With words we may satisfy your immediate curiosity but you're not really learning what collision sizes and shapes feel good, which is the essential part. But it's a bit beyond the scope of this course which focuses on teaching you game coding foundations, while this is a game design and feel thing.

  • ph-cross replied

    Generally, basing your physics interactions just on the visual sprites leads to extremely awkward interactions. Let's take a look at a sprite from a popular game:

    Notice how the top of his head is made of jagged spikes? We don't want these extra details to get caught on scenery, and in an action game the player would consider it extremely unfair if they got hurt because their character's hair got hit. Notice also that when the character faces away from the camera, his hair changes positions – this means that when a sprite animates, its collision would also change significantly with every frame. Look at how different the shape of the running sprite is!

    By restricting collision to a rectangle or capsule shape from the character's feet to his waist or so, we can maintain a consistent collision shape regardless of what animation he's going through, which leads to the character feeling more real and solid in the player's hands.

    Another thing you can test out using the scenes from the practice would be to change Godot.tscn's CollisionShape2D to something that covers more of the sprite vertically:

    Test out how this collides with the walls and rocks! Feels pretty bad, right? Collision boxes are invisible to the players but they're the main thing that governs how characters, levels, and attacks feel. A big part of the "fairness" of platforming, action, and fighting games comes from these collision shapes.

    In this fighting game sprite, for example, the actual collision box is the teal one from the character's feet to their knees (The green and red ones are hurtboxes and hitboxes, which do not physically collide with each other). This stays roughly in place and determines where the characters can and cannot move. In games like this, the characters' sprites change size and shape dramatically as they animate, so to avoid pushing the characters around the screen in unintended ways, we keep a static collision box.

    As a bonus: take a note how the character's hair and tail are left out of the green Hurt Box (the vulnerable part of the character). This is part of that same sense of fairness that I mentioned above. Say there was a wall of fire behind you when you go to use the attack on the right; If you got hit because the tail entered the wall of fire, even though you're attacking forward, you'd find that massively unfair!

    5 loves
  • godoterfr replied

    Wonderful images! Thanks for sharing.

    1 love