Flutter空间网格管理插件flame_spatial_grid的使用

Flutter空间网格管理插件flame_spatial_grid的使用

概述

该库是一个用于处理无限游戏区域的框架和工具集。它支持加载无限地图，创建无限数量的游戏对象和活跃玩家/NPC，并且与Flame完全兼容，对游戏结构没有严格要求。即使是现有的游戏也可以迁移到这个框架。

该库目前仍在测试阶段，API和整体架构可能会随时更改，包括破坏性更改。

特性

该库提供了许多实用功能，这里只列举一些顶级特性：

• 构建无尽的游戏关卡：无需改变屏幕即可渲染另一个地图。系统允许你创建大型开放世界，并在玩家接近新地图时无缝加载。
• 构建具有可破坏环境的游戏关卡：每个Tiled图块都可以转换为单独的游戏组件，并单独处理与其他游戏元素的交互。
• 动态生成地图：在玩家接近时动态生成地图的一部分或整个地图。
• 明智的资源管理：系统不会贪婪地消耗资源，它会负责适当的分配和释放，使你可以在浏览器或低端手机上享受游戏。
• 新的视觉效果：轻量级的资源管理系统允许为多个玩家创建轨迹，并在长时间的游戏会话中持续存在，与地面等其他游戏元素融合。

核心概念

该框架的核心是一个空间网格，它会在运行时动态构建，并控制组件的可见性和活动性，按块加载和卸载地图。这允许通过预渲染静态组件到图像来优化渲染，但保持图像大小足够小，并在未使用时从内存中卸载。

使用：最小设置

以下是使用flame_spatial_grid的基本步骤：

1. 将HasSpatialGridFramework混合到你的游戏中。
2. 将HasGridSupport混合到每个游戏组件。
3. 在游戏的onLoad函数中调用initializeSpatialGrid，并在添加任何组件之前进行初始化。
4. 开始享受！

详细入门教程见此处。

完整的代码示例见此处。

未来使用说明

以下是一些未来的使用指南：

1. 入门指南，如果你还没有阅读过。
2. 与Tiled地图一起工作。
3. 与Tiled世界一起工作。
4. 使用CellLayers优化静态对象的渲染和碰撞检测。
5. 与Flame的相机互动。
6. 创建轨迹和其他临时标记（待完成）。

高级部分

以下是一些高级主题：

1. 如何自定义碰撞检测系统（待完成）。
2. 如何使用CellLayers优化碰撞检测（待完成）。

完整示例代码

import 'dart:ui';

import 'package:flame/game.dart';
import 'package:flame_spatial_grid/flame_spatial_grid.dart';
import 'package:flame_spatial_grid_example/game.dart';
import 'package:flutter/material.dart';

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

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

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: GameWidget.controlled(
        gameFactory: SpatialGridExample.new,
        overlayBuilderMap: {
          'loading': (BuildContext ctx, SpatialGridExample game) {
            return Material(
              type: MaterialType.transparency,
              child: BackdropFilter(
                filter: ImageFilter.blur(
                  sigmaX: 5.0,
                  sigmaY: 5.0,
                ),
                child: StreamBuilder<LoadingProgressMessage<String>>(
                  stream: game.loadingStream,
                  builder: (context, snapshot) {
                    final progress = snapshot.data?.progress ?? 0;
                    return Center(
                      child: Text(
                        'Loading: $progress% ',
                        style: const TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 24,
                        ),
                      ),
                    );
                  },
                ),
              ),
            );
          },
        },
      ),
    );
  }
}