Flutter游戏开发插件bonfire_bloc的使用

Flutter游戏开发插件bonfire_bloc的使用

bonfire_bloc 是一个受 flame_bloc 启发的插件，它提供了在 Bonfire 游戏中使用 bloc 和 cubit 的简单且自然的方式，类似于 flutter_bloc。

安装

只需运行以下命令：

flutter pub add bonfire_bloc
flutter pub add bonfire
flutter pub add flutter_bloc

或者在你的 pubspec.yaml 文件中添加自定义版本：

bonfire: ^3...
flutter_bloc: ^8...

如何使用

假设我们有一个处理玩家库存的 bloc。首先，我们需要在整个游戏中使其可用。

我们可以通过使用 flutter_bloc 的 BlocProvider 或 MultiBlocProvider 来实现这一点：

return BlocProvider(
    create: (context) => InventoryBloc(),
    child: BonfireWidget(
        ...
    )
);

在组件级别使用 bloc 可以通过两种方法实现：

  1. 使用 BonfireBlocListenable 混入来监听状态变化：
class Player extends SimplePlayer
  with BonfireBlocListenable<PlayerInventoryBloc, PlayerInventoryState> {

  [@override](/user/override)
  void onNewState(state) {
    updateGear(state);
  }
}
  1. 使用 BonfireBlocReader 混入来读取值：
class Coin extends GameDecoration
  with BonfireBlocReader<PlayerInventoryBloc> {

  void takeHit() {
    bloc.add(const IncrementCoin());
  }
}

或者使用 context.read：

class Coin extends GameDecoration{

  void takeHit() {
    context.read<PlayerInventoryBloc>().add(const IncrementCoin());
  }
}

请注意，混入的一个限制是它只能访问一个 bloc。

完整示例

以下是完整的示例代码，你可以从 GitHub 上找到该示例的完整代码 这里。

import 'package:bonfire_bloc_example/bloc/inventory_bloc.dart';
import 'package:bonfire_bloc_example/game/game.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => InventoryBloc(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const GameWidget(),
      ),
    );
  }
}

更多关于Flutter游戏开发插件bonfire_bloc的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter游戏开发插件bonfire_bloc的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


bonfire_bloc 是一个用于 Flutter 游戏开发的插件，它结合了 bonfire 游戏引擎和 bloc 状态管理库，帮助开发者更高效地管理游戏中的状态和逻辑。bonfire 是一个基于 Flame 引擎的 2D RPG 游戏框架，而 bloc 是一种状态管理模式，能够帮助开发者分离业务逻辑和 UI。

安装 bonfire_bloc

首先，你需要在 pubspec.yaml 文件中添加 bonfire_bloc 依赖：

dependencies:
  flutter:
    sdk: flutter
  bonfire: ^3.0.0
  bonfire_bloc: ^1.0.0
  flutter_bloc: ^8.0.0

然后运行 flutter pub get 来安装依赖。

使用 bonfire_bloc

1. 创建 Bloc

首先，你需要创建一个 Bloc 来管理游戏中的状态。例如，假设我们要管理游戏中的玩家生命值：

import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';

part 'player_state.dart';

class PlayerCubit extends Cubit<PlayerState> {
  PlayerCubit() : super(const PlayerState(health: 100));

  void takeDamage(int damage) {
    emit(state.copyWith(health: state.health - damage));
  }

  void heal(int amount) {
    emit(state.copyWith(health: state.health + amount));
  }
}

PlayerState 可能如下所示：

part of 'player_cubit.dart';

class PlayerState extends Equatable {
  final int health;

  const PlayerState({required this.health});

  PlayerState copyWith({int? health}) {
    return PlayerState(health: health ?? this.health);
  }

  [@override](/user/override)
  List<Object?> get props => [health];
}

2. 在游戏中使用 Bloc

在 bonfire 游戏中，你可以通过 BonfireWidget 来启动游戏。你可以在游戏中使用 BlocProvider 来提供 PlayerCubit：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:bonfire/bonfire.dart';
import 'player_cubit.dart';

void main() {
  runApp(
    MaterialApp(
      home: BlocProvider(
        create: (context) => PlayerCubit(),
        child: const GameScreen(),
      ),
    ),
  );
}

class GameScreen extends StatelessWidget {
  const GameScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BonfireWidget(
      gameController: GameController(),
      player: Player(),
    );
  }
}

3. 在游戏逻辑中使用 Bloc

你可以在游戏逻辑中访问 Bloc 并更新状态。例如，当玩家受到伤害时：

class Player extends SimplePlayer {
  Player()
      : super(
          position: Vector2(100, 100),
          size: Vector2(32, 32),
          animation: SimpleDirectionAnimation(),
        );

  [@override](/user/override)
  void update(double dt) {
    super.update(dt);
    // 假设玩家受到伤害
    if (shouldTakeDamage()) {
      context.read<PlayerCubit>().takeDamage(10);
    }
  }
}

4. 监听 Bloc 状态

你可以在 UI 中监听 Bloc 的状态并更新 UI。例如，显示玩家当前的生命值：

class GameScreen extends StatelessWidget {
  const GameScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          BonfireWidget(
            gameController: GameController(),
            player: Player(),
          ),
          Positioned(
            top: 20,
            left: 20,
            child: BlocBuilder<PlayerCubit, PlayerState>(
              builder: (context, state) {
                return Text('Health: ${state.health}');
              },
            ),
          ),
        ],
      ),
    );
  }
}
回到顶部