Endless Runner Games with FlutterFlow: Collision Detection & Moving Backgrounds

Summary

This video provides a step-by-step guide to creating an engaging Endless Runner game with dynamic features. It covers how to implement collision detection between the Dino and cactus, adjust character positioning for a more natural appearance, and create seamless ground movement using animations. Viewers will also learn how to set up a game restart function and ensure smooth, continuous background animations to enhance the gaming experience. By the end of the video, users will understand how to bring their game to life with responsive mechanics and visually appealing effects.

Takeaways

• 😀 Add a ground beneath characters to enhance depth and positioning in the game.
• 😀 Adjust character alignment using Y values to create the illusion they are standing on the ground.
• 😀 Experiment with the Y values for the cactus and Dino to get the optimal positioning.
• 😀 Modify the maxJumpHeight to -0.5 for better jump dynamics, and use onPageLoad to reset this value.
• 😀 Set up collision detection by checking the X alignment of the cactus and the Y alignment of the Dino.
• 😀 Use conditions with AND operators to detect a collision and stop both playerJump and cactusMovement actions.
• 😀 Create a restart button to reset game values and stop cactus movement after a collision.
• 😀 Enhance the illusion of movement by animating the ground with a sliding effect across the screen.
• 😀 Use two ground images that loop by resetting their positions when one image moves off-screen.
• 😀 Apply widget animations for continuous movement of the ground and clouds, ensuring the animation is non-blocking.
• 😀 Adjust cloud animations independently from the ground, allowing for variable speeds and visual diversity.

Q & A

How do I add a ground beneath the characters in the Endless Runner game?

To add a ground beneath the characters, create a new image child for your Stack, set it to infinite width and height, and set the image source to an asset. Make sure to align the ground image to the bottom of the stack so it does not hide the characters, and use `BoxFit` set to `Contain` with `X=0` and `Y=1` for alignment.

Why do the characters need to be slightly raised above the ground?

The characters need to be raised above the ground to create the visual illusion that they are actually standing on the ground. Adjusting the Y alignment slightly for the cactus and Dino (e.g., 0.45 for cactus, 0.5 for Dino) achieves this effect.

What should I do if my Dino doesn't jump as high after adjusting the ground position?

If the Dino doesn't jump as high after adjusting the ground, set the `maxJumpHeight` to -0.5 instead of 0. Since negative values aren't allowed in Page State variables, you will need to add an `onPageLoad` action to reset the `maxJumpHeight` to -0.5.

How can I implement collision detection between the Dino and cactus?

To detect collisions, monitor the X alignment of the cactus and the Y alignment of the Dino. When the cactus's X alignment is between -0.9 and -1.2, and the Dino's Y alignment equals its initial Y position (not jumping), this indicates a collision. Stop both the `playerJump` and `cactusMovement` periodic actions when the collision is detected.

What happens after the collision is detected?

Once a collision is detected, you should stop the `playerJump` and `cactusMovement` periodic actions. This effectively pauses the game, and you could show a 'Game Over' dialog. However, this step is just the beginning, and further improvements can be made, like adding a restart functionality.

How can I add a restart button after a collision?

To add a restart button, create a new button below the Start button. On tap, reset the `cactusX` and `DinoY` values to their initial states and stop the `cactusMovement` periodic action to bring the cactus back to its idle state.

How can I make the ground appear to move continuously?

To create a moving ground effect, duplicate the ground image and place the second one immediately after the first. Then, use a sliding animation where the first ground image moves horizontally from 0 to -1440 and the second one moves from 1440 to 0. Loop both animations to create a continuous movement effect.

Why should the animation for the ground be non-blocking?

The animation should be non-blocking so that it doesn’t delay other actions from occurring. By making it non-blocking, the game can continue with other animations or logic (like cactus movement) while the ground is moving.

What can I do if the animation isn’t responsive to different screen sizes?

The current setup uses fixed values (like 1440 for screen width), which may not be responsive to different screen sizes. To make it responsive, you could calculate the screen width dynamically and adjust the animation values accordingly.

Can I apply similar animation logic to other elements in the game, like clouds?

Yes, you can apply similar animation logic to other elements like clouds. Feel free to adjust the duration and speed of the cloud animations for variety, as clouds don't need to move at a consistent speed, giving you creative flexibility.