### Start a Cutscene with Camera and Movement Actions (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/scene_builder.md

Demonstrates how to initiate a cutscene using `gameRef.startScene()`. It includes actions to control the camera (positioning, targeting, zooming), introduce delays, and move game components. This example requires the `Vector2` class for position and the `Duration` class for delays.

```dart
final enemy = gameRef.enemies().first;
gameRef.startScene(
  [
    CameraSceneAction.position(Vector2(800, 800)),
    CameraSceneAction.target(gameRef.player!),
    CameraSceneAction.target(enemy, zoom: 2),
    DelaySceneAction(Duration(seconds: 1)),
    MoveComponentSceneAction(
      component: enemy,
      newPosition: enemy.position.clone()..add(Vector2(-40, -10)),
      speed: 20,
    ),
    CameraSceneAction.target(gameRef.player!, zoom: 1),
  ],
);

```

--------------------------------

### Start a Cutscene with Camera and Movement Actions

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/scene_builder.md

This snippet demonstrates how to start a cutscene using `gameRef.startScene`. It includes actions to position the camera, follow targets (player and an enemy), introduce a delay, move a component, and reset the camera zoom. Dependencies include `gameRef`, `CameraSceneAction`, `DelaySceneAction`, `MoveComponentSceneAction`, and `Vector2`.

```dart
final enemy = gameRef.visibleEnemies().first;
gameRef.startScene(
  [
    CameraSceneAction.position(Vector2(800, 800)),
    CameraSceneAction.target(gameRef.player!),
    CameraSceneAction.target(enemy, zoom: 2),
    DelaySceneAction(Duration(seconds: 1)),
    MoveComponentSceneAction(
      component: enemy,
      newPosition: enemy.position.clone()..add(Vector2(-40, -10)),
      speed: 20,
    ),
    CameraSceneAction.target(gameRef.player!, zoom: 1),
  ],
);
```

--------------------------------

### Initialize BonfireWidget with Player, Map, and Joystick

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/getting-started.md

This code snippet shows the complete initialization of the BonfireWidget, including the player character. It sets up the joystick, loads the Tiled map, and places the 'Knight' player at a specified starting position (Vector2(40,40)).

```dart
@override
  Widget build(BuildContext context) {
    return BonfireWidget(
      playerControllers: [
        Joystick(
          directional: JoystickDirectional(),
        )
      ], 
      map: WorldMapByTiled(
        WorldMapReader.fromAsset('tile/map.json')
      ),
      player: Knight(Vector2(40,40))
    );
  }
```

--------------------------------

### UseLifeBar Mixin Setup Method (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/mixins.md

Illustrates the `setupBarLife` method provided by the `UseLifeBar` mixin, allowing customization of the visual appearance and behavior of a component's life bar.

```dart
void setupBarLife({
    Vector2? size,
    Color? backgroundColor,
    Color? borderColor,
    double borderWidth = 2,
    List<Color>? colors,
    BorderRadius? borderRadius,
    BarLifeDrawPorition barLifeDrawPosition = BarLifeDrawPorition.top,
    Vector2? offset,
    Vector2? textOffset,
    TextStyle? textStyle,
    bool showLifeText = true,
    BarLifeTextBuilder? barLifetextBuilder,
  })
```

--------------------------------

### Setup Component Vision with Dart

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/mixins.md

Demonstrates how to enable and visualize the vision of a component using the setupVision method. When vision is enabled, methods like `seeComponent` will visually represent the component's detection range.

```dart
setupVision(
        drawVision:true,
    );
```

--------------------------------

### Initialize BonfireWidget with Map and Joystick

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/getting-started.md

This code snippet demonstrates how to initialize the BonfireWidget, which is the main component for your game. It includes setting up a Joystick for player control and loading a game map from a JSON file exported by Tiled.

```dart
@override
  Widget build(BuildContext context) {
    return BonfireWidget(
      playerControllers: [
        Joystick(
          directional: JoystickDirectional(),
        )
      ],
      map: WorldMapByTiled(
        WorldMapReader.fromAsset('tile/map.json')
      ),
    );
  }
```

--------------------------------

### DirectionAnimation Mixin Setup (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/mixins.md

Demonstrates how to integrate the DirectionAnimation mixin into a component, requiring the Movement mixin and initializing SimpleDirectionAnimation.

```dart
class MyComponent extends GameComponent with Movement, DirectionAnimation{
    MyComponent(){
        animation = SimpleDirectionAnimation();
    }
}
```

--------------------------------

### Google Analytics Setup (JavaScript)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/index-kr.html

This snippet configures Google Analytics for the website. It initializes the dataLayer and sets up the tracking ID 'G-XW6XTLBWR6'. This is crucial for tracking website traffic and user behavior.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
} gtag('js', new Date());
gtag('config', 'G-XW6XTLBWR6');
```

--------------------------------

### Listen to StateController with Widget in Dart

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/state_controller.md

Provides an example of how to use StateControllerConsumer to listen to a StateController from a widget, often used in UI overlays. This enables widgets to react to state changes managed by the controller.

```dart
     StateControllerConsumer<BarLifeController>(
        builder: (BuildContext context, BarLifeController controller) {
          return MyWidget(controller);
        },
      );

```

--------------------------------

### Implement Click-to-Move Controller with Dart

Source: https://context7.com/bonfire-engine/bonfire-engine.github.io/llms.txt

This example demonstrates how to set up a click-to-move controller for player movement and camera control using JoystickMoveToPosition. It configures which mouse buttons trigger movement and camera actions within the BonfireWidget. Dependencies include the 'bonfire' package and Flutter's BuildContext.

```dart
import 'package:bonfire/bonfire.dart';

@override
Widget build(BuildContext context) {
  return BonfireWidget(
    joystick: JoystickMoveToPosition(
      enabledMoveCameraWithClick: true,
      mouseButtonUsedToMoveCamera: MouseButton.primary,
      mouseButtonUsedToMoveToPosition: MouseButton.secondary,
    ),
    map: WorldMapByTiled('tile/map.json', forceTileSize: Size(32, 32)),
    player: Knight(Vector2(100, 100)),
  );
}

```

--------------------------------

### Initialize BonfireWidget with Manual Map

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/bonfire_tiled_widget.md

Shows how to initialize the BonfireWidget with a manually created map represented by a list of Tiles. This example includes the core components like game controller, joystick, player, and interface, with options for decorations, enemies, and camera configuration.

```dart
 @override
  Widget build(BuildContext context) {
    return BonfireWidget(
      gameController: GameController(), // with the controller you can listen to all components of the game, control them and or add new ones.
      joystick: MyJoystick(), // required
      map: WorldMap(<Tile>[]), // required
      player: Knight(), // If player is omitted, the joystick directional will control the map view, being very useful in the process of building maps
      interface: KnightInterface(),
      decorations: <GameDecoration>[],
      enemies: <Enemy>[],
      background: GameComponent(), // to color you can use `BackgroundColorGame(Colors.blue)` or create your own background (to use parallax for example) extending from `GameComponent`
      constructionMode: false, // If true, activates hot reload to ease the map constructions and draws the grid
      showCollisionArea: false, // If true, show collision area of the elements
      constructionModeColor: Colors.blue, // If you wan customize the grid color.
      collisionAreaColor: Colors.blue, // If you wan customize the collision area color.
      lightingColorGame: Colors.black.withOpacity(0.4), // if you want to add general lighting for the game
      cameraConfig: CameraConfig(
        sizeMovementWindow: Size(50,50),
        moveOnlyMapArea: false,
        zoom: 1.0, // here you can set the default zoom for the camera. You can still zoom directly on the camera
        target: GameComponent(),
      ),
      showFPS: false,
      colorFilter: GameColorFilter(),
    );
  }

```

--------------------------------

### Initialize BonfireWidget with Tiled Map

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/bonfire_tiled_widget.md

Demonstrates how to initialize the BonfireWidget using a map loaded from a Tiled JSON file. This setup includes essential components like the game controller, joystick, map, player, and interface, along with optional configurations for camera, lighting, and construction mode.

```dart
 @override
  Widget build(BuildContext context) {
    return BonfireWidget(
      gameController: GameController(), // with the controller you can listen to all components of the game, control them and or add new ones.
      joystick: Joystick(), // required
      map: WorldMapByTiled('tile/map.json', forceTileSize: tileSize), // required
      player: Knight(), // If player is omitted, the joystick directional will control the map view, being very useful in the process of building maps
      components: <GameComponent>[],
      interface: KnightInterface(),
      background: GameComponent(), // to color you can use `BackgroundColorGame(Colors.blue)` or create your own background (to use parallax for example) extending from `GameComponent`
      constructionMode: false, // If true, activates hot reload to ease the map constructions and draws the grid
      showCollisionArea: false, // If true, show collision area of the elements
      constructionModeColor: Colors.blue, // If you wan customize the grid color.
      collisionAreaColor: Colors.blue, // If you wan customize the collision area color.
      lightingColorGame: Colors.black.withOpacity(0.4), // if you want to add general lighting for the game
      cameraConfig: CameraConfig(
        sizeMovementWindow: Size(50,50),
        moveOnlyMapArea: false,
        zoom: 1.0, // here you can set the default zoom for the camera. You can still zoom directly on the camera
        smoothCameraEnable: false, // default = false
        setZoomLimitToFitMap: false, // default = false | Set zoom automatically to fit map in the screen.
        smoothCameraSpeed: 1.0,
        target: GameComponent(),
      ),
      showFPS: false,
      progress: Widget(), //progress that show while loading map.
      colorFilter: GameColorFilter(),
      overlayBuilderMap: {
        'buttons':  (BonfireGame game, BuildContext context) {
          return MyWidget();
        }
      }
      initialActiveOverlays: [
        'buttons'
      ],
    );
  }

```

--------------------------------

### Create Custom PlatformPlayer (MarioPlayer)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/player.md

Example of creating a custom player class, MarioPlayer, that extends PlatformPlayer. It shows initialization with required parameters like position, animation configuration, and size.

```dart
class MarioPlayer extends PlatformPlayer {

    MarioPlayer(Vector2 position)
      : super(
        position: position, //required
        animation: PlatformAnimations(), //required
        size: Vector.all(32), //required
        life: 100,
        speed: 100,
        countJumps: 1,
      );
}
```

--------------------------------

### Create Custom RotationPlayer (PlayerTank)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/player.md

Example of creating a custom player class, PlayerTank, that extends RotationPlayer. It demonstrates how to initialize the player with required parameters like idle and run animations, size, and life.

```dart
class PlayerTank extends RotationPlayer {

    PlayerTank(vector2 position)
      : super(
        position: position, //required
        animIdle: Future<SpriteAnimation>(), //required
        animRun: Future<SpriteAnimation>(), //required
        size: Vector.all(32), //required
        life: 100,
        speed: 100,
        currentRadAngle: -1.55,
      );
}
```

--------------------------------

### Configure PlatformEnemy Class

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/enemy.md

Demonstrates the creation of a custom `PlatformEnemy` class, `BowserEnemy`. It initializes with required parameters such as position, animation configuration, size, life, speed, and jump count. This setup is suitable for platformer game scenarios.

```dart
class BowserEnemy extends PlatformEnemy {

    BowserEnemy(vector2 position)
      : super(
        position: position, // required
        animation: PlatformAnimations(), // required
        size: Vector.all(32), // required
        life: 100,
        speed: 100,
        countJumps: 1,
      );
}
```

--------------------------------

### Configure RotationEnemy Class

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/enemy.md

Example of creating a custom `RotationEnemy` class, named `Tank`. It initializes with required parameters like position, idle and run animations, size, life, speed, and initial angle. It also shows the override points for `update` and `render` methods.

```dart
class Tank extends RotationEnemy {

    Tank(Vector2 position)
      : super(
          position: position, // required
          animIdle: Future<SpriteAnimation>(), // required
          animRun: Future<SpriteAnimation>(), // required
          size: Vector2(32.0,32.0), // required
          life: 100,
          speed: 100,
          currentRadAngle: -1.55, 
      );

    @override
    void update(double dt) {
      // do anything
      super.update(dt);
    }

    @override
    void render(Canvas canvas) {
      // do anything
      super.render(canvas);
    }
}
```

--------------------------------

### Manage Game Overlays Programmatically in Dart

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/game_interface.md

Provides code examples for programmatically showing and hiding game overlays using the `overlayManager` in Bonfire Engine. This is useful for dynamic UI changes during gameplay.

```dart
  /// Show overlay
  gameRef.overlayManager.add('overlayName');

  /// Hide overlay
  gameRef.overlayManager.remove('overlayName');

```

--------------------------------

### UseLifeBar Mixin: Setup Life Bar Configuration (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/mixins.md

The UseLifeBar mixin adds a life bar to an Attackable component. The `setupLifeBar` method allows for extensive customization of the life bar's appearance, including size, colors, borders, margins, border radius, position, offsets, text display, and text styling.

```dart
void setupLifeBar({
    Vector2? size,
    Color? backgroundColor,
    Color? borderColor,
    double borderWidth = 2,
    double margin = 4,
    List<Color>? colors,
    BorderRadius? borderRadius,
    BarLifePorition barLifePosition = BarLifePorition.top,
    Vector2? offset,
    Vector2? textOffset,
    TextStyle? textStyle,
    bool showLifeText = true,
    BarLifeTextBuilder? barLifetextBuilder,
  })
```

--------------------------------

### Create a SimpleAlly in Dart

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/ally.md

Defines a 'Human' ally by extending the SimpleAlly class. This example demonstrates required parameters like position, size, life, and speed, along with configuring directional animations for idle and run states. It also shows where to implement custom update and render logic.

```dart
class Human extends SimpleAlly {

    Human(Vector2 position)
      : super(
          position: position, // required
          size: Vector2(32.0,32.0), // required
          life: 100,
          speed: 100,
          initDirection: Direction.right,
          animation: SimpleDirectionAnimation(
            idleLeft: Future<SpriteAnimation>(), 
            idleRight: Future<SpriteAnimation>(), // required
            runLeft: Future<SpriteAnimation>(), 
            runRight: Future<SpriteAnimation>(), // required
            idleUp: Future<SpriteAnimation>(),
            idleDown: Future<SpriteAnimation>(),
            idleUpLeft: Future<SpriteAnimation>(),
            idleUpRight: Future<SpriteAnimation>(),
            idleDownLeft: Future<SpriteAnimation>(),
            idleDownRight: Future<SpriteAnimation>(),
            runUp: Future<SpriteAnimation>(),
            runDown: Future<SpriteAnimation>(),
            runUpLeft: Future<SpriteAnimation>(),
            runUpRight: Future<SpriteAnimation>(),
            runDownLeft: Future<SpriteAnimation>(),
            runDownRight: Future<SpriteAnimation>(),
          ),
      );

    @override
    void update(double dt) {
      // do anything
      super.update(dt);
    }

    @override
    void render(Canvas canvas) {
      // do anything
      super.render(canvas);
    }
}
```

--------------------------------

### Access Scene Builder Status and Current Action

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/scene_builder.md

This example illustrates how to retrieve the current status of the scene builder, including whether a scene is running and the action currently being executed. It accesses `gameRef.sceneBuilderStatus` and its properties `isRuning` and `currentAction`. This is useful for monitoring or reacting to the scene's progress.

```dart
SceneBuilderStatus status = gameRef.sceneBuilderStatus;
status.isRuning;
status.currentAction;
```

--------------------------------

### Add Bonfire Dependency to pubspec.yaml

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/getting-started.md

This command adds the Bonfire engine as a dependency to your Flutter project's pubspec.yaml file. Ensure you have Flutter and Dart SDKs installed and configured.

```console
flutter pub add bonfire
```

--------------------------------

### Bonfire Initialization and Version Selection (JavaScript)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/index.html

Initializes Bonfire's documentation configuration, including setting the base path from sessionStorage, defining available versions, and configuring Docsify with properties like name, repository, and loading options.

```javascript
let versions = [
  { folder: '/', label: 'v2.x', default: false },
  { folder: 'v3.0/', label: 'v3.x', default: true }
];

let basePath = sessionStorage.getItem('basePath');
if (basePath == null) {
  let defaultVersion = versions.find((v) => v.default).folder;
  sessionStorage.setItem('basePath', defaultVersion);
}

window.$docsify = {
  name: 'Bonfire',
  repo: 'https://github.com/bonfire-engine/bonfire-engine.github.io',
  loadSidebar: true,
  coverpage: true,
  // auto2top: true,
  loadNavbar: true,
  maxLevel: 4,
  subMaxLevel: 2,
  basePath: sessionStorage.getItem('basePath'),
  versions: versions,
  versionSelectorLabel: 'Version',
};
```

--------------------------------

### Integrate Player into BonfireWidget

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/get-started.md

This Dart code snippet shows how to add the custom player ('Knight') to the Bonfire game. The player is instantiated with a starting position and passed as the 'player' argument to the BonfireWidget.

```dart
@override
  Widget build(BuildContext context) {
    return BonfireWidget(
      joystick: Joystick(
        directional: JoystickDirectional(),
      ), 
      map: WorldMapByTiled('tile/map.json', forceTileSize: 32),
      player: Knight(Vector2(40,40))
    );
  }
```

--------------------------------

### Configure Follower Component with Dart

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/mixins.md

Shows how to set up a component to follow a target using the setupFollower method. This involves specifying the target component and an optional offset. If a follower component is a child of another, it will also follow the parent's position.

```dart
setupFollower(target: myPLayer, offset: Vector2());
```

--------------------------------

### Add Bonfire Dependency to pubspec.yaml

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/get-started.md

This snippet shows how to add the Bonfire engine as a dependency in your Flutter project's pubspec.yaml file. Ensure you use the latest version available.

```yaml
dependencies:
  bonfire: ^LATEST_VERSION
```

--------------------------------

### Import Bonfire in Dart Code

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/get-started.md

This code demonstrates how to import the necessary Bonfire library into your Dart files after adding it as a dependency. This import statement is required to use Bonfire's features.

```dart
import 'package:bonfire/bonfire.dart';
```

--------------------------------

### Render Map with BonfireWidget and Tiled

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/get-started.md

This Dart code snippet shows how to create a basic Bonfire game interface by rendering a map exported from Tiled. It initializes the BonfireWidget with a joystick and the Tiled map.

```dart
@override
  Widget build(BuildContext context) {
    return BonfireWidget(
      joystick: Joystick(
        directional: JoystickDirectional(),
      ), // required
      map: WorldMapByTiled('tile/map.json', forceTileSize: 32),
    );
  }
```

--------------------------------

### Extend SimplePlayer for Custom Enemy - Dart

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/player.md

Demonstrates how to create a custom enemy class 'Kinght' by extending the SimplePlayer class. It shows the required parameters for initialization, including position, size, life, speed, initial direction, and animations for various states. It also overrides methods for update, render, joystick interaction, receiving damage, and handling death.

```dart
class Kinght extends SimplePlayer {

    Kinght(Vector2 position)
      : super(
          position: position, //required
          size: Vector2(32.0,32.0), //required
          life: 100,
          speed: 100,
          initDirection: Direction.right,
          animation: SimpleDirectionAnimation(
            idleLeft: Future<SpriteAnimation>(), 
            idleRight: Future<SpriteAnimation>(), //required
            runLeft: Future<SpriteAnimation>(), 
            runRight: Future<SpriteAnimation>(), //required
            idleUp: Future<SpriteAnimation>(),
            idleDown: Future<SpriteAnimation>(),
            idleUpLeft: Future<SpriteAnimation>(),
            idleUpRight: Future<SpriteAnimation>(),
            idleDownLeft: Future<SpriteAnimation>(),
            idleDownRight: Future<SpriteAnimation>(),
            runUp: Future<SpriteAnimation>(),
            runDown: Future<SpriteAnimation>(),
            runUpLeft: Future<SpriteAnimation>(),
            runUpRight: Future<SpriteAnimation>(),
            runDownLeft: Future<SpriteAnimation>(),
            runDowntRight: Future<SpriteAnimation>(),
          ), //required
      );

    @override
    void update(double dt) {
      // do anything
      super.update(dt);
    }

    @override
    void render(Canvas canvas) {
      // do anything
      super.render(canvas);
    }

    @override
    void joystickChangeDirectional(JoystickDirectionalEvent event) {
      // do anything with event of the joystick
      super.joystickChangeDirectional(event);
    }

    @override
    void joystickAction(JoystickActionEvent event) {
      // do anything with event of the joystick
      super.joystickAction(event);
    }

    @override
    void receiveDamage(double damage, int from) {
      super.receiveDamage(damage, from);
    }

    @override
    void die() {
      super.die();
    }
}

```

--------------------------------

### Create a Simple Player Class

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/get-started.md

This Dart code defines a player class named 'Knight' that extends Bonfire's SimplePlayer. It configures the player's initial position, size, and sprite animations using the PlayerSpriteSheet.

```dart
class Knight extends SimplePlayer {

    Knight(Vector2 position)
      : super(
          position: position, 
          size: Vector2(32,32),
          animation: PlayerSpriteSheet.simpleDirectionAnimation,
      );
}
```

--------------------------------

### SimplePlayer Actions

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/player.md

This section describes the various action methods available to a SimplePlayer instance, allowing for combat, visual feedback, and enemy detection.

```APIDOC
## SimplePlayer Actions

### `simpleAttackMelee`

Executes a physical attack to the player, making the configured damage with the configured frequency. You can add animations to represent this attack.

- **Parameters**:
  - `damage` (double): The amount of damage to deal.
  - `animationRight` (Future<SpriteAnimation>): Animation for the right attack direction.
  - `animationDown` (Future<SpriteAnimation>): Animation for the down attack direction.
  - `animationLeft` (Future<SpriteAnimation>): Animation for the left attack direction.
  - `animationUp` (Future<SpriteAnimation>): Animation for the up attack direction.
  - `id` (dynamic): An identifier for the attack.
  - `direction` (Direction): The direction of the attack.
  - `size` (Vector2): The size of the attack hitbox.
  - `withPush` (bool): Whether the attack should push the target.

### `simpleAttackRange`

Executes a distance attack. Will add a `FlyingAttackObject` to the game and will be send in the configures direction and will make some damage to whomever it hits, or be destroyed as it hits barriers (collision defined tiles).

- **Parameters**:
  - `animationRight` (Future<SpriteAnimation>): Animation for the right attack direction.
  - `animationLeft` (Future<SpriteAnimation>): Animation for the left attack direction.
  - `animationUp` (Future<SpriteAnimation>): Animation for the up attack direction.
  - `animationDown` (Future<SpriteAnimation>): Animation for the down attack direction.
  - `animationDestroy` (Future<SpriteAnimation>): Animation played when the projectile is destroyed.
  - `size` (Vector2): The size of the projectile.
  - `id` (int): An identifier for the projectile.
  - `speed` (double): The speed of the projectile.
  - `damage` (double): The damage dealt by the projectile.
  - `direction` (Direction): The direction of the projectile.
  - `interval` (int): The interval between projectile firings.
  - `withCollision` (bool): Whether the projectile should collide with the environment.
  - `collision` (CollisionConfig): Collision configuration for the projectile.
  - `destroy` (VoidCallback): Callback function when the projectile is destroyed.
  - `execute` (VoidCallback): Callback function when the projectile hits a target.
  - `lightingConfig` (LightingConfig): Lighting configuration for the projectile.

### `showDamage`

Shows the damage value as an animation on the game.

- **Parameters**:
  - `damage` (double): The amount of damage to display.
  - `config` (TextConfig): Configuration for the damage text.
  - `initVelocityTop` (double): Initial upward velocity of the damage text.
  - `gravity` (double): Gravity applied to the damage text.
  - `maxDownSize` (double): Maximum downward size of the damage text.
  - `direction` (DirectionTextDamage): Direction of the damage text movement.
  - `onlyUp` (bool): Whether the damage text should only move upwards.

### `seeEnemy`

Observes enemies when they are within the specified radius.

- **Parameters**:
  - `observed` (Function(List<Enemy>)): Callback function that receives a list of observed enemies.
  - `notObserved` (VoidCallback): Callback function when no enemies are observed.
  - `radiusVision` (double): The radius within which to detect enemies.
  - `visionAngle` (double): The angle of vision (defaults to 360 degrees).

### `animation.playOnce`

Executes an animation once.

- **Parameters**:
  - `animation` (Future<SpriteAnimation>): The animation to play.
  - `position` (Vector2Rect): The position and size where the animation will be played.
  - `onFinish` (VoidCallback): Callback function when the animation finishes.
  - `runToTheEnd` (bool): Whether the animation should run to completion.

### `receiveDamage`

Applies damage to the player.

- **Parameters**:
  - `damage` (double): The amount of damage to receive.
```

--------------------------------

### Define Player Sprite Animations

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/get-started.md

This Dart code defines sprite animations for a player character, specifically idle and run animations for the right direction. It uses Flame's SpriteAnimation.load method, requiring image files and animation data.

```dart
class PlayerSpriteSheet {
 
  static Future<SpriteAnimation> get idleRight => SpriteAnimation.load(
        "player/knight_idle.png",
        SpriteAnimationData.sequenced(
          amount: 6,
          stepTime: 0.1,
          textureSize: Vector2(16, 16),
        ),
      );

  static Future<SpriteAnimation> get runRight => SpriteAnimation.load(
        "player/knight_run.png",
        SpriteAnimationData.sequenced(
          amount: 6,
          stepTime: 0.1,
          textureSize: Vector2(16, 16),
        ),
      );

  static SimpleDirectionAnimation get simpleDirectionAnimation =>
      SimpleDirectionAnimation(
        idleRight: idleRight,
        runRight: runRight,
      );
}
```

--------------------------------

### Configure PathFinding with MoveToPositionAlongThePath Mixin in Dart

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/path_finding.md

Demonstrates how to configure pathfinding for a player character by using the `setupMoveToPositionAlongThePath` method. This method allows customization of path line color, barrier colors, stroke width, and debugging options. It requires the `Movement` Mixin to be present on the component.

```dart
class Kinght extends SimplePlayer {

    Kinght(Vector2 position)
    : super(
        ...
    ), //required
    ){

        setupMoveToPositionAlongThePath(
            pathLineColor: Colors.lightBlueAccent.withOpacity(0.5),
            barriersCalculatedColor: Colors.blue.withOpacity(0.5),
            pathLineStrokeWidth: 4,
            showBarriersCalculated: false, // uses this to debug. This enable show in the map the tiles considered collision by algorithm.
            tileSizeIsSizeCollision: false,
        )
        
    }
}
```

--------------------------------

### Extending SimpleEnemy for Custom Enemies (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/enemy.md

Demonstrates how to create a custom enemy class like 'Goblin' by extending 'SimpleEnemy'. It shows the required parameters for the constructor, including position, size, life, speed, initial direction, and animation configurations using SimpleDirectionAnimation. It also includes placeholders for overriding update and render methods.

```dart
class Goblin extends SimpleEnemy {

    Goblin(Vector2 position)
      : super(
          position: position, // required
          size: Vector2(32.0,32.0), // required
          life: 100,
          speed: 100,
          initDirection: Direction.right,
          animation: SimpleDirectionAnimation(
            idleLeft: Future<SpriteAnimation>(), 
            idleRight: Future<SpriteAnimation>(), // required
            runLeft: Future<SpriteAnimation>(), 
            runRight: Future<SpriteAnimation>(), // required
            idleUp: Future<SpriteAnimation>(),
            idleDown: Future<SpriteAnimation>(),
            idleUpLeft: Future<SpriteAnimation>(),
            idleUpRight: Future<SpriteAnimation>(),
            idleDownLeft: Future<SpriteAnimation>(),
            idleDownRight: Future<SpriteAnimation>(),
            runUp: Future<SpriteAnimation>(),
            runDown: Future<SpriteAnimation>(),
            runUpLeft: Future<SpriteAnimation>(),
            runUpRight: Future<SpriteAnimation>(),
            runDownLeft: Future<SpriteAnimation>(),
            runDownRight: Future<SpriteAnimation>(),
          ),
      );

    @override
    void update(double dt) {
      // do anything
      super.update(dt);
    }

    @override
    void render(Canvas canvas) {
      // do anything
      super.render(canvas);
    }
}
```

--------------------------------

### Get Direction to Player (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/enemy.md

This function returns the current direction of the player relative to the enemy.

```dart
Direction directionThatPlayerIs()
```

--------------------------------

### Initialize Docsify Configuration with Version Selection

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/index-cn.html

This JavaScript code initializes the Docsify configuration, including setting the website name, repository link, and enabling features like sidebar and navbar. It also implements version selection logic using sessionStorage and defines available versions.

```javascript
let versions = [
  // {folder: '', label: 'v2.x', default: false},
  { folder: 'v3.0-cn/', label: 'v3.x', default: true }
];
let basePath = sessionStorage.getItem('basePath');
if (basePath == null) {
  let defaultVersion = versions.find((v) => v.default).folder;
  sessionStorage.setItem('basePath', defaultVersion);
}
window.$docsify = {
  name: 'Bonfire',
  repo: 'https://github.com/bonfire-engine/bonfire-engine.github.io',
  loadSidebar: true,
  coverpage: true,
  // auto2top: true,
  loadNavbar: true,
  maxLevel: 4,
  subMaxLevel: 2,
  basePath: sessionStorage.getItem('basePath'),
  versions: versions,
  versionSelectorLabel: 'Version',
};
```

--------------------------------

### Movement Mixin Event Listener (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/mixins.md

An example of how to implement the onMove callback within a component that uses the Movement mixin to react to movement changes.

```dart
@override
void onMove(
    double speed,
    Vector2 displacement,
    Direction direction,
    double angle,
  ) {}
```

--------------------------------

### Add Lighting to Custom Decoration (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/lighting.md

Demonstrates how to add a `Lighting` mixin to a custom game decoration and configure its lighting properties using `setupLighting`. This allows objects to emit light within the game environment.

```dart
class MyCustomDecoration extends GameDecoration with Lighting {
  MyCustomDecoration(Position position)
      : super.withAnimation(
          Future<SpriteAnimation>(),
          size: Vector2(32,32),
          position: position,
        ){
          setupLighting(
            LightingConfig(
              radius: width * 1.5,
              color: Colors.transparent,
              // blurBorder: 20, // this is a default value
              // type: LightingType.circle, // this is a default value
              // useComponentAngle: false, // this is a default value. When true, light rotates together when a component changes its `angle` param.
            ),
          );
        }

}
```

--------------------------------

### SimpleDirectionAnimation Control Methods (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/mixins.md

Provides examples of utility methods available on the SimpleDirectionAnimation class for controlling sprite animations, such as playing specific animations, pausing, and resuming.

```dart
// Method used to play animation one time using `other` map
animation.playOnceOther()
```

```dart
// Method used to play animation one time
animation.playOnce(
    FutureOr<SpriteAnimation> animation, {
        VoidCallback? onFinish,
        VoidCallback? onStart,
        bool runToTheEnd = false,
        bool flipX = false,
        bool flipY = false,
        bool useCompFlip = false,
        Vector2? size,
        Vector2? offset,
    },
  );
```

```dart
// Method used to play specific animation registred in `others`
animation.playOther(String key, {bool flipX = false, bool flipY = false});
```

```dart
// Method used to register new animation in others
animation.addOtherAnimation(
    String key,
    FutureOr<SpriteAnimation> animation,
);
```

```dart
animation.pause();
```

```dart
animation.resume();
```

--------------------------------

### Configure RotationEnemy in Bonfire Engine

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/enemy.md

Example of creating a Tank enemy extending RotationEnemy. This demonstrates how to set required properties like animations, size, life, and speed, and override update and render methods.

```dart
class Tank extends RotationEnemy {

    Tank(Vector2 position)
      : super(
          position: position, //required
          animIdle: Future<SpriteAnimation>(), //required
          animRun: Future<SpriteAnimation>(), //required
          size: Vector2(32.0,32.0), //required
          life: 100,
          speed: 100,
          currentRadAngle: -1.55, 
      );

    @override
    void update(double dt) {
      // do anything
      super.update(dt);
    }

    @override
    void render(Canvas canvas) {
      // do anything
      super.render(canvas);
    }

    @override
    void receiveDamage(double damage, int from) {
      super.receiveDamage(damage, from);
    }

    @override
    void die() {
      super.die();
    }
}
```

--------------------------------

### SimpleNpc Creation and Configuration (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/npc.md

Demonstrates how to create a custom enemy class extending SimpleNpc. It includes setting up essential properties like position, size, life, speed, initial direction, and detailed animation configurations for various states and directions. This class is suitable for 45º and 67.5º perspectives.

```dart
class Wizard extends SimpleNpc {

    Wizard(Vector2 position)
      : super(
          position: position, //required
          size: Vector2(32.0,32.0), //required
          life: 100,
          speed: 100,
          initDirection: Direction.right,
          animation: SimpleDirectionAnimation(
            idleLeft: Future<SpriteAnimation>(), 
            idleRight: Future<SpriteAnimation>(), //required
            runLeft: Future<SpriteAnimation>(), 
            runRight: Future<SpriteAnimation>(), //required
            idleUp: Future<SpriteAnimation>(),
            idleDown: Future<SpriteAnimation>(),
            idleUpLeft: Future<SpriteAnimation>(),
            idleUpRight: Future<SpriteAnimation>(),
            idleDownLeft: Future<SpriteAnimation>(),
            idleDownRight: Future<SpriteAnimation>(),
            runUp: Future<SpriteAnimation>(),
            runDown: Future<SpriteAnimation>(),
            runUpLeft: Future<SpriteAnimation>(),
            runUpRight: Future<SpriteAnimation>(),
            runDownLeft: Future<SpriteAnimation>(),
            runDownRight: Future<SpriteAnimation>(),
          ),
      );

    @override
    void update(double dt) {
      // Do anything
      super.update(dt);
    }

    @override
    void render(Canvas canvas) {
      // Do anything
      super.render(canvas);
    }

}
```

--------------------------------

### Docsify Initialization and Version Management (JavaScript)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/index-kr.html

This JavaScript code initializes the Docsify documentation generator and manages version selection. It defines available versions, retrieves the base path from session storage, and configures Docsify options such as the name, repository link, sidebar, coverpage, and navbar.

```javascript
let versions = [
  // {folder: '', label: 'v2.x', default: false},
  { folder: 'v3.0-kr/', label: 'v3.x', default: true }
];
let basePath = sessionStorage.getItem('basePath');
if (basePath == null) {
  let defaultVersion = versions.find((v) => v.default).folder;
  sessionStorage.setItem('basePath', defaultVersion);
}
window.$docsify = {
  name: 'Bonfire',
  repo: 'https://github.com/bonfire-engine/bonfire-engine.github.io',
  loadSidebar: true,
  coverpage: true,
  // auto2top: true,
  loadNavbar: true,
  maxLevel: 4,
  subMaxLevel: 2,
  basePath: sessionStorage.getItem('basePath'),
  versions: versions,
  versionSelectorLabel: 'Version',
};
```

--------------------------------

### AnimatedObjectOnce Constructor (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/objects.md

Constructs an AnimatedObjectOnce, which plays an animation once before destroying itself. It requires position, size, and an optional animation. Callbacks for animation start and finish, rotation, and lighting configuration are also supported.

```dart
AnimatedObjectOnce(
   {
      required Vector2 position,
      required Vector2 size,
      Future<SpriteAnimation>? animation,
      VoidCallback? onFinish,
      VoidCallback? onStartAnimation,
      double? rotateRadAngle,
      LightingConfig? lightingConfig,
   }
)
```

--------------------------------

### Create a Custom SimplePlayer Enemy - Dart

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/player.md

Demonstrates how to create a custom enemy class 'Knight' extending 'SimplePlayer'. This involves initializing the player with essential properties like position, size, life, speed, direction, and animations. It also shows how to override methods for update, render, and handling joystick events.

```dart
class Knight extends SimplePlayer {

    Knight(Vector2 position)
      : super(
          position: position, //required
          size: Vector2(32.0,32.0), //required
          life: 100,
          speed: 100,
          initDirection: Direction.right,
          animation: SimpleDirectionAnimation(
            idleLeft: Future<SpriteAnimation>(), 
            idleRight: Future<SpriteAnimation>(), //required
            runLeft: Future<SpriteAnimation>(), 
            runRight: Future<SpriteAnimation>(), //required
            idleUp: Future<SpriteAnimation>(),
            idleDown: Future<SpriteAnimation>(),
            idleUpLeft: Future<SpriteAnimation>(),
            idleUpRight: Future<SpriteAnimation>(),
            idleDownLeft: Future<SpriteAnimation>(),
            idleDownRight: Future<SpriteAnimation>(),
            runUp: Future<SpriteAnimation>(),
            runDown: Future<SpriteAnimation>(),
            runUpLeft: Future<SpriteAnimation>(),
            runUpRight: Future<SpriteAnimation>(),
            runDownLeft: Future<SpriteAnimation>(),
            runDowntRight: Future<SpriteAnimation>(),
          ), //required
      );

    @override
    void update(double dt) {
      // do anything
      super.update(dt);
    }

    @override
    void render(Canvas canvas) {
      // do anything
      super.render(canvas);
    }

    @override
    void joystickChangeDirectional(JoystickDirectionalEvent event) {
      // do anything with event of the joystick
      super.joystickChangeDirectional(event);
    }

    @override
    void joystickAction(JoystickActionEvent event) {
      // do anything with event of the joystick
      super.joystickAction(event);
    }

}
```

--------------------------------

### Bonfire AutomaticRandomMovement Mixin Example

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/mixins.md

Enables random movement for components, suitable for AI or enemy behavior. Requires the Movement mixin. The `runRandomMovement` method is called within the `update` loop.

```dart
class MyComponent extends GameComponent with Movement, AutomaticRandomMovement{
    
    @override
    void update(double dt) {
        this.runRandomMovement(
            dt,
            speed: 20,
            maxDistance: 100,
        );
        super.update(dt);
    }
}
```

--------------------------------

### Listen to Collisions with onCollision and onCollisionEnd in Dart

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/collision_system.md

Shows how to override `onCollision` and `onCollisionEnd` methods in a Dart component to react to collision events. This allows for custom logic when components start or stop colliding.

```dart
class MyCollidable extends SimplePlayer {
  // ...
  @override
  void onCollision(Set<Vector2> points, PositionComponent other) {
    if (other is ScreenHitbox) {
      // ...
    } else if (other is YourOtherComponent) {
      // ...
    }
  }

  @override
  void onCollisionEnd(PositionComponent other) {
    if (other is ScreenHitbox) {
      // ...
    } else if (other is YourOtherComponent) {
      // ...
    }
  }
}
```

--------------------------------

### Extend SimpleEnemy to Create a Goblin Class (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/enemy.md

This snippet demonstrates how to create a custom enemy class, Goblin, by extending the SimpleEnemy class. It shows the required parameters for initialization, including position, size, life, speed, initial direction, and animations. It also includes overrides for receiving damage and handling the enemy's death.

```dart
class Goblin extends SimpleEnemy {

    Goblin(Vector2 position)
      : super(
          position: position, //required
          size: Vector2(32.0,32.0), //required
          life: 100,
          speed: 100,
          initDirection: Direction.right,
          animation: SimpleDirectionAnimation(
            idleLeft: Future<SpriteAnimation>(), 
            idleRight: Future<SpriteAnimation>(), //required
            runLeft: Future<SpriteAnimation>(), 
            runRight: Future<SpriteAnimation>(), //required
            idleUp: Future<SpriteAnimation>(),
            idleDown: Future<SpriteAnimation>(),
            idleUpLeft: Future<SpriteAnimation>(),
            idleUpRight: Future<SpriteAnimation>(),
            idleDownLeft: Future<SpriteAnimation>(),
            idleDownRight: Future<SpriteAnimation>(),
            runUp: Future<SpriteAnimation>(),
            runDown: Future<SpriteAnimation>(),
            runUpLeft: Future<SpriteAnimation>(),
            runUpRight: Future<SpriteAnimation>(),
            runDownLeft: Future<SpriteAnimation>(),
            runDownRight: Future<SpriteAnimation>(),
          ),
      );

    @override
    void receiveDamage(double damage, int from) {
      /// Called when the enemy receive damage
      super.receiveDamage(damage, from);
    }

    @override
    void die() {
      /// Called when the enemy die
      super.die();
    }
}

```

--------------------------------

### Configure Terrain Corners with MapTerrainCorners in Dart

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/map.md

Illustrates how to define terrain transitions using MapTerrainCorners. This setup specifies the source terrain value, the destination terrain value, and a sprite sheet for rendering the transition between them.

```dart
MapTerrainCorners(
    value: TILE_SAND, // number origin
    to: TILE_WATER, // number destine
    type: 'water',
    collisions: [],
    properties: Map<String, dynamic>(),
    spriteSheet: TerrainSpriteSheet.create(
        path: 'sand_to_water.png',
        tileSize: Vector2.all(16), // tileSize in the image
    ),
)
```

--------------------------------

### Configure Ranged Attack for Enemy (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/enemy.md

This extension enables the enemy to perform ranged attacks. It configures the projectile's animation, speed, damage, and interval. Collision detection and lighting effects can also be set. Callbacks for `execute` (when the attack is launched) and `destroy` (when the projectile is destroyed) are available.

```dart
void simpleAttackRange({
    required Future<SpriteAnimation> animationRight,
    required Future<SpriteAnimation> animationLeft,
    required Future<SpriteAnimation> animationUp,
    required Future<SpriteAnimation> animationDown,
    required Future<SpriteAnimation> animationDestroy,
    required Vector2 size,
    int? id,
    double speed = 150,
    double damage = 1,
    Direction? direction,
    int interval = 1000,
    bool withCollision = true,
    CollisionConfig? collision,
    VoidCallback? destroy,
    VoidCallback? execute,
    LightingConfig? lightingConfig,
  })
```

--------------------------------

### Configure Melee Attack for Enemy (Dart)

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/enemy.md

This extension implements a melee attack for the enemy. It allows configuration of damage, attack size, interval, and whether the attack includes a push effect. Animations for different attack directions can also be provided. The `execute` callback is called when the attack is performed.

```dart
void simpleAttackMelee({
    required double damage,
    required Vector2 size,
    int? id,
    int interval = 1000,
    bool withPush = false,
    double? sizePush,
    Direction? direction,
    Future<SpriteAnimation>? animationRight,
    Future<SpriteAnimation>? animationDown,
    Future<SpriteAnimation>? animationLeft,
    Future<SpriteAnimation>? animationUp,
    VoidCallback? execute,
  })
```

--------------------------------

### UseSprite Mixin - Sprite Assignment Example

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/mixins.md

The UseSprite mixin simplifies the integration of Sprites into a component. It adds a `sprite` property that can be directly assigned after loading the sprite asset, typically within the `onLoad` method.

```dart
class MyComponent extends GameComponent with UseSprite {
    MyComponent(Vector2 position){
        this.position = position;
    }

    @override
    Future onLoad() async {
        sprite = await MySpriteSheetLoader.geSprite();
        return super.onLoad();
    }
}
```

--------------------------------

### RotationEnemy Player Detection Methods

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/v3.0/doc/enemy.md

Provides utility methods for `RotationEnemy` to detect the player. Includes `seePlayer` for basic observation, `seeAndMoveToPlayer` for navigation towards the player, and `seeAndMoveToAttackRange` for approaching within attack distance.

```dart
void seePlayer({
    required Function(Player) observed,
    VoidCallback? notObserved,
    double radiusVision = 32,
    double? visionAngle, // default 6,28319 (360 degrees)
    double? angle,
  })
```

```dart
void seeAndMoveToPlayer({
    required Function(Player) closePlayer,
    VoidCallback? notObserved,
    double radiusVision = 32,
    double margin = 10,
    bool runOnlyVisibleInScreen = true,
  })
```

```dart
void seeAndMoveToAttackRange({
    required Function(Player) positioned,
    VoidCallback? notObserved,
    double radiusVision = 32,
    double? minDistanceCellsFromPlayer,
    bool runOnlyVisibleInScreen = true,
  })
```

--------------------------------

### Register Dependencies with BonfireInjector in Dart

Source: https://github.com/bonfire-engine/bonfire-engine.github.io/blob/master/state_controller.md

Shows how to register controllers with the BonfireInjector. It supports both single instance creation and factory-based creation, allowing for flexible dependency management.

```dart
BonfireInjector().put((i) => KnightController());
 // or
 // BonfireInjector().putFactory(
  //   (i) => KnightController(),
  // );

```