flame_camera_tools 1.1.0

Intuitive tools for creating immersive and dynamic camera behaviors in Flame-based games.

flame_camera_tools

flame_camera_tools is a Flutter package that enhances camera functionality for games built with Flame. It provides a intuitive way to manage camera behavior, making it easier to create dynamic and immersive experiences in 2D game worlds.

Features

• Smooth Follow: The camera smoothly follows a target component, adjusting the speed based on the distance.
• Area Follow: The camera follows a target component only after the target moves outside a specified rectangular area. This is useful for creating "dead zones" where the camera does not immediately follow the target.
• Shake Effect: Apply a shake effect to any PositionProvider.
• Zooming: Zoom in or out with customizable durations.
• Rotating: Rotate the camera by an angle.
• Focus Effects: Focus the camera on a position or component.
• Customizable Effects: Modify the duration and curve of each effect.
• Chaining Effects: Seamlessly chain multiple effects using Futures.

Usage

You can either instantiate your own CameraComponent directly or use the camera provided by the FlameGame class:

// Directly instantiate the CameraComponent
final camera = CameraComponent();

copied to clipboard

// Accessing the camera from FlameGame
final camera = game.camera;

copied to clipboard

Follow a Component

Use smoothFollow() to make the camera smoothly follow a component with adjustable stiffness:

camera.smoothFollow(component, stiffness: 1.5);

copied to clipboard

[Demo]

Use areaFollow() to make the camera follow a component only once it moves outside a defined rectangular area:

camera.areaFollow(component, areaBounds: const Rect.fromLTRB(100, 100, 100, 100));

copied to clipboard

[Demo]

The above code will create a 200x200 “dead zone” around the target, where the camera does not follow it.

Apply a Shake Effect

Create a shake effect with a specific duration, intensity, and curve:

camera.shake(intensity: 10, duration: 5, curve: Curves.linear);

copied to clipboard

[Demo]

The shaking effect is automatically weakened over time. If you do not want such behavior, set the weakenOverTime parameter to false.

Zooming in/out

Zoom in/out with optional duration and curve:

camera.zoomTo(0.5, duration: 3, curve: Curves.easeInOut);

copied to clipboard

[Demo]

Rotating

Rotate the camera by an angle with optional duration and curve:

// Rotates the camera by 45 degrees
camera.rotateBy(45, duration: 3, curve: Curves.easeInOut);

copied to clipboard

[Demo]

Focusing the Camera

Move the camera to focus on a position, with optional duration and curve:

camera.focusOn(Vector2(200, 200), duration: 3, curve: Curves.easeInOut);

copied to clipboard

[Demo]

Move the camera to focus on a component, with optional duration and curve:

camera.focusOnComponent(component, duration: 3, curve: Curves.easeInOut);

copied to clipboard

Chaining Multiple Effects

You can chain multiple effects together for a sequence of camera movements:

camera
    .shake(intensity: 10, duration: 4)
    .then((_) => camera.zoomTo(0.25, duration: 3))
    .then((_) => camera.focusOnComponent(component, duration: 3))
    .then((_) => camera.rotateBy(45, duration: 2));

copied to clipboard

Applying Multiple Effects at Once

You can also apply multiple effects simultaneously for more dynamic interactions:

camera
  ..shake(intensity: 7, duration: 4)
  ..zoomTo(0.75, duration: 2)
  ..rotateBy(90, duration: 2, curve: Curves.easeInOut);

copied to clipboard

Why Use This Package?

This package allows for easy and smooth camera transitions, such as when you want to zoom in on an action, create a shake effect for a hit or explosion, or follow a character smoothly as they move through a level. The effects are customizable and can be chained to create complex camera behaviors that enhance your game's dynamic visuals.