Endless Runner Games with FlutterFlow: Players & Obstacles Movement

Summary

In this tutorial, the creator demonstrates how to build a retro-inspired endless runner game in FlutterFlow, complete with a cute AI-generated dino on a skateboard. The game features dynamic obstacle movement, player jumps with gravity effects, and smooth periodic updates for fluid animations—all created without custom code. Through clear explanations, the video covers key concepts like positioning game elements using Stack widgets, setting up periodic actions for movement, and implementing basic game mechanics such as jumping and obstacle cycling. Stay tuned for future videos on collision detection and background elements to complete the game.

Takeaways

• 😀 The Chrome Dino game is a fun example of an endless runner, and its mechanics are used as inspiration for a custom version with a retro Mario twist.
• 😀 The game was built in FlutterFlow in just 24 hours without any custom code, showcasing its ease of use for rapid prototyping.
• 😀 AI-generated images, such as the retro dino on a skateboard, were created using the DALL·E 3 API to design game characters.
• 😀 A Stack widget is used in FlutterFlow to layer the game elements, offering control over the positioning of various objects using alignment properties.
• 😀 Understanding the X and Y axes in the context of the Stack widget is key for positioning game elements and moving them dynamically.
• 😀 In endless runner games like Chrome Dino, the illusion of the character running towards obstacles is achieved by moving the obstacles instead of the player.
• 😀 The player's jump is also a visual trick, with movement only occurring along the Y-axis, simulating a leap over obstacles.
• 😀 Page State variables are created to control dynamic movements, including `cactusXAlignment` for obstacle movement and `playerYAlignment` for jump control.
• 😀 The cactus moves from right to left using periodic actions, resetting its position once it moves off the screen to loop its movement.
• 😀 The jump mechanic is implemented using a periodic timer to simulate ascent and gravity, adjusting the player's Y position with respect to the jump height and gravity pull.

Q & A

What is the main goal of the game being created in the video?

The goal of the game is to create an experimental version of an endless runner game, inspired by the Chrome Dino game, with a fun retro Mario twist, using FlutterFlow and AI-generated assets.

How does the Stack widget work in FlutterFlow for positioning game elements?

The Stack widget in FlutterFlow allows precise positioning of child elements within a two-dimensional space, using the X and Y axes. This enables elements to be layered on top of each other and aligned at specific positions using alignment properties.

Why is the player character set at the origin of the screen in this game?

The player character is set at the origin of the screen (coordinates X = 0, Y = 0) to provide a reference point for positioning all other game elements, such as obstacles, and to make it easier to calculate movements and interactions.

What is the illusion created in endless runner games like Chrome Dino regarding character movement?

In endless runner games, there is an illusion that the character is moving towards obstacles, but in reality, it is the obstacles (like cacti) that move from right to left, while the character remains stationary horizontally.

How does the jump mechanic in the game work?

The jump mechanic is implemented by updating the player's Y-coordinate. When the jump begins, the Y-value decreases as the character rises, then increases as the character falls back down due to gravity, completing the jump cycle when the character returns to the starting Y position.

What are the Page State variables used to manage movement in the game?

The key Page State variables for managing movement are `cactusXAlignment` for the cactus’s X-axis movement and `playerYAlignment` for the player’s Y-axis movement during jumps. Additional variables like `cactusInitialX` and `playerInitialY` are used to set the starting positions of these elements.

How does the cactus's movement loop work in the game?

The cactus moves across the screen from right to left using a periodic action that updates its X-coordinate. Once the cactus moves past a certain point on the left side of the screen (e.g., -1.5), its X-coordinate is reset to the initial starting position, allowing the movement to loop.

What is the role of the `jumpIsAscending` variable in the jump logic?

The `jumpIsAscending` variable tracks whether the character is ascending or descending during the jump. If set to `true`, the Y-coordinate decreases, simulating upward movement. Once the peak height is reached, it is set to `false`, and the character begins descending.

What does the `peakJumpHeight` variable control in the game?

The `peakJumpHeight` variable controls the height of the jump. It determines when the character starts to descend after reaching the peak of the jump. The value is set to 0.5 by default, but it can be adjusted for longer or shorter jumps.

How can the jump mechanics be enhanced to feel more realistic?

To enhance the jump mechanics, you can adjust the peak height for longer or shorter jumps and change the descent speed. For example, reducing the descent increment from 0.05 to 0.03 can create a more physics-based jump, making it feel smoother and more natural.