Flutter游戏关卡滚动地图插件game_levels_scrolling_map的使用

Flutter游戏关卡滚动地图插件game_levels_scrolling_map的使用

介绍

game_levels_scrolling_map 是一个用于在Flutter中创建类似糖果传奇（Candy Crush）的游戏关卡地图的插件。该插件支持水平和垂直滚动的地图，并提供了多种自定义选项，如反转滚动方向、添加点位、从SVG文件中提取点位等。

功能特点

• 水平或垂直地图：可以根据需求选择地图的滚动方向。
• 反转滚动方向：可以选择是否反转滚动的起始方向。
• 添加点位：可以通过 PointModel 类添加自定义的点位。
• 从SVG文件提取点位：可以从本地或在线的SVG文件中提取点位坐标。

平台支持

该插件支持以下平台：

• Android ✔️
• iOS ✔️
• macOS ✔️
• Web ✔️
• Linux ✔️
• Windows ✔️

使用方法

Step 1: 导入必要的包

首先，在 pubspec.yaml 文件中添加 game_levels_scrolling_map 依赖项，然后在 Dart 文件中导入以下两个包：

import 'package:game_levels_scrolling_map/game_levels_scrolling_map.dart';
import 'package:game_levels_scrolling_map/model/point_model.dart';

Step 2: 创建点位列表

接下来，创建一个 PointModel 的列表，并为每个点位添加自定义的小部件。你可以通过设置 isCurrent 属性来指定地图初始化时滚动到的特定点位。

List<PointModel> points = [];

for (int i = 0; i < 50; i++) {
  PointModel point = PointModel(
    100, // 点位的Y轴坐标（对于垂直地图）或X轴坐标（对于水平地图）
    Container(
      width: 40,
      height: 40,
      color: Colors.red,
      child: Text("$i"),
    ),
  );

  // 设置当前点位，地图会自动滚动到该点位
  if (i == 20) {
    point.isCurrent = true;
  }

  points.add(point);
}

Step 3: 构建地图

1. 创建垂直地图

要创建一个垂直滚动的地图，可以使用 GameLevelsScrollingMap.scrollable 小部件，并设置 direction 为 Axis.vertical。你还可以通过 reverseScrolling 参数来反转滚动方向。

Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      child: GameLevelsScrollingMap.scrollable(
        imageUrl: "assets/drawable/map_vertical.png", // 地图背景图片路径
        direction: Axis.vertical, // 设置为垂直滚动
        reverseScrolling: true, // 反转滚动方向
        svgUrl: 'assets/svg/map_vertical.svg', // SVG文件路径，用于提取点位
        points: points, // 点位列表
      ),
    ),
  );
}

2. 创建水平地图

要创建一个水平滚动的地图，只需将 direction 设置为 Axis.horizontal。

Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      child: GameLevelsScrollingMap.scrollable(
        imageUrl: "assets/drawable/map_horizontal.png", // 地图背景图片路径
        direction: Axis.horizontal, // 设置为水平滚动
        svgUrl: 'assets/svg/map_horizontal.svg', // SVG文件路径，用于提取点位
        points: points, // 点位列表
      ),
    ),
  );
}

完整示例代码

以下是一个完整的示例代码，展示了如何使用 game_levels_scrolling_map 插件创建一个水平和垂直滚动的地图。你可以根据需要切换 home 属性来显示不同的地图类型。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:game_levels_scrolling_map/game_levels_scrolling_map.dart';
import 'package:game_levels_scrolling_map/model/point_model.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 设置屏幕方向为横向
  await SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
  await SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);

  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapHorizontalExample(), // 切换为 MapVerticalExample() 以显示垂直地图
    );
  }
}

class MapHorizontalExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    List<PointModel> points = [];

    for (int i = 0; i < 50; i++) {
      PointModel point = PointModel(
        100,
        Container(
          width: 40,
          height: 40,
          color: Colors.red,
          child: Text("$i"),
        ),
      );

      if (i == 20) {
        point.isCurrent = true;
      }

      points.add(point);
    }

    return Scaffold(
      body: Container(
        child: GameLevelsScrollingMap.scrollable(
          imageUrl: "assets/drawable/map_horizontal.png",
          direction: Axis.horizontal,
          svgUrl: 'assets/svg/map_horizontal.svg',
          points: points,
        ),
      ),
    );
  }
}

class MapVerticalExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    List<PointModel> points = [];

    for (int i = 0; i < 50; i++) {
      PointModel point = PointModel(
        100,
        Container(
          width: 40,
          height: 40,
          color: Colors.red,
          child: Text("$i"),
        ),
      );

      if (i == 20) {
        point.isCurrent = true;
      }

      points.add(point);
    }

    return Scaffold(
      body: Container(
        child: GameLevelsScrollingMap.scrollable(
          imageUrl: "assets/drawable/map_vertical.png",
          direction: Axis.vertical,
          reverseScrolling: true,
          svgUrl: 'assets/svg/map_vertical.svg',
          points: points,
        ),
      ),
    );
  }
}