Coffee & Code — Fixing Collision Detection in Super Mario Bros Flutter

Coffee & Code — Fixing Collision Detection in Super Mario Bros Flutter

Fixing Mario's boundary and collision detection issues in the Super Mario Bros Flutter app using rect-based hitboxes.


Sample Image
Black Coffee from The Ugly Duckling in Dayton, OH.

In one of my previous Coffee & Code segments, I was dealing with some boundary issues for Mario, (read more todo-here).

Luckily I was able to circumvent those issues.

In order to do this, I’m no longer using the HitBox on Mario (the circle inside Mario) to determine if he’s standing on something, but instead his actual boundaries, (the box wrapped around Mario).

Sample Image
Video Demo.

This approach also solved my issue of Mario being able to walk smoothly on top of Gameblocks because I’m using a flat side instead of a circle for collision detection.

Sample Image
Chat GPT research about overlapping Rects in Flutter.
/// Mario's top has collided with solid object.
bool hitTop = marioRect.top <= objRect.bottom && mario Rect.bottom >= objRect.bottom;
/// Mario's bottom has collided with solid object.
bool hitBottom = marioRect.bottom >= objRect.top && marioRect.top <= objRect.top;
/// Mario's left has collided with solid object.
bool hitLeft = marioRect. left <= objRect. right && marioRect.right >= objRect.right;
/// Mario's right has collided with solid object.
bool hitRight = marioRect.right >= objRect. left && mario Rect. left <= objRect. left;

Related posts
Coffee & Code: Building Mario Power-Ups and Debugging Hitboxes in Flutter

Coffee & Code: Building Mario Power-Ups and Debugging Hitboxes in Flutter

Read more
Coffee & Code - Crafting Mario-style Game Blocks with OOP

Coffee & Code - Crafting Mario-style Game Blocks with OOP

Read more
Coffee & Code - Building Mario Animations with Flutter and Flame Engine

Coffee & Code - Building Mario Animations with Flutter and Flame Engine

Read more
Coffee & Code - Building Mario Game with Flutter Flame

Coffee & Code - Building Mario Game with Flutter Flame

Read more