Flutter插件singh_engine的介绍与使用

Flutter插件singh_engine的介绍与使用

singh_engine

singh_engine 是一个用于游戏开发的 Flutter 插件，它可以帮助开发者快速构建基于 2D 游戏引擎的应用程序。通过该插件，你可以轻松实现诸如地图加载、角色控制等功能。

Getting started

要开始使用 singh_engine，你需要确保已经安装了 Flutter 和 Dart 环境。如果你还没有配置好这些环境，请先按照官方文档完成安装。

安装插件

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  singh_engine: ^0.1.0

然后运行 flutter pub get 来获取依赖。

Add your files

为了测试 singh_engine 的功能，我们需要创建一些基本的文件结构。例如，可以创建一个简单的主界面来展示不同的游戏示例。

主界面代码示例

// example/lib/main.dart
import 'package:singh_engine/singh_engine.dart'; // 引入核心插件
import 'package:example/manual_map/game_manual_map.dart'; // 手动地图示例
import 'package:example/simple_example/simple_example_game.dart'; // 简单示例
import 'package:example/tiled_map/game_tiled_map.dart'; // Tiled 地图示例
import 'package:flutter/foundation.dart'; // Flutter 基础库
import 'package:flutter/material.dart'; // Flutter UI 库
import 'package:flutter/rendering.dart'; // 渲染层支持

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 初始化 Flutter 绑定
  if (!kIsWeb) { // 非 Web 平台时设置为横屏全屏
    await Flame.device.setLandscape();
    await Flame.device.fullScreen();
  }
  runApp(
    MaterialApp(
      home: Menu(), // 启动主菜单
    ),
  );
}

class Menu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan[900], // 背景色
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min, // 最小化列的高度
          children: [
            Text(
              'Bonfire', // 显示标题
              style: TextStyle(fontSize: 30, color: Colors.white),
            ),
            SizedBox(height: 30), // 添加间距
            SizedBox(
              width: 200, // 按钮宽度
              child: ElevatedButton(
                style: ButtonStyle(
                  shape: MaterialStateProperty.all(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20), // 圆角按钮
                    ),
                  ),
                ),
                child: Text('Simple example'), // 按钮文字
                onPressed: () {
                  Navigator.push( // 导航到简单示例页面
                    context,
                    MaterialPageRoute(
                      builder: (context) => SimpleExampleGame(),
                    ),
                  );
                },
              ),
            ),
            SizedBox(height: 10), // 添加间距
            SizedBox(
              width: 200,
              child: ElevatedButton(
                style: ButtonStyle(
                  shape: MaterialStateProperty.all(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                  ),
                ),
                child: Text('Manual Map'), // 按钮文字
                onPressed: () {
                  Navigator.push( // 导航到手动地图示例页面
                    context,
                    MaterialPageRoute(builder: (context) => GameManualMap()),
                  );
                },
              ),
            ),
            SizedBox(height: 10), // 添加间距
            SizedBox(
              width: 200,
              child: ElevatedButton(
                style: ButtonStyle(
                  shape: MaterialStateProperty.all(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                  ),
                ),
                child: Text('Tiled Map'), // 按钮文字
                onPressed: () {
                  Navigator.push( // 导航到 Tiled 地图示例页面
                    context,
                    MaterialPageRoute(
                      builder: (context) => GameTiledMap(),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: Container(
        height: 40, // 底部导航栏高度
        child: Center(
          child: Text(
            'Keyboard: directional and Space Bar to attack', // 提示信息
            style: TextStyle(fontSize: 18),
          ),
        ),
      ),
    );
  }
}

使用示例

简单示例

在 simple_example/simple_example_game.dart 中，我们可以创建一个简单的游戏示例：

// example/lib/simple_example/simple_example_game.dart
import 'package:flutter/material.dart';
import 'package:singh_engine/singh_engine.dart';

class SimpleExampleGame extends BaseGame {
  SimpleExampleGame() {
    // 初始化游戏逻辑
  }

  @override
  void update(double dt) {
    super.update(dt);
    // 更新游戏状态
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    // 渲染游戏画面
  }
}

手动地图示例

在 manual_map/game_manual_map.dart 中，我们可以通过手动定义地图来实现更复杂的游戏场景：

// example/lib/manual_map/game_manual_map.dart
import 'package:flutter/material.dart';
import 'package:singh_engine/singh_engine.dart';

class GameManualMap extends BaseGame {
  GameManualMap() {
    // 手动加载地图
  }

  @override
  void update(double dt) {
    super.update(dt);
    // 更新地图逻辑
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    // 渲染地图
  }
}

Tiled 地图示例

在 tiled_map/game_tiled_map.dart 中，我们可以通过 Tiled 工具加载地图数据：

// example/lib/tiled_map/game_tiled_map.dart
import 'package:flutter/material.dart';
import 'package:singh_engine/singh_engine.dart';

class GameTiledMap extends BaseGame {
  GameTiledMap() {
    // 加载 Tiled 地图
  }

  @override
  void update(double dt) {
    super.update(dt);
    // 更新地图逻辑
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    // 渲染地图
  }
}

Test and Deploy

在完成开发后，你可以使用 Flutter 提供的工具进行测试和部署。例如，运行以下命令启动模拟器或真机调试：

flutter run