Flutter地图瓦片加载插件tiled的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter地图瓦片加载插件tiled的使用

安装

要将此包作为依赖项添加到您的 pubspec.yaml 文件中，请运行以下命令（或手动添加）：

dart pub add tiled

使用

导入包如下：

import 'package:tiled/tiled.dart';

加载 TMX 文件

通过任何方式加载一个 TMX 文件，并将其字符串传递给 TileMapParser.parseXml() 方法：

final String tmxBody = /* ... */;
final TiledMap mapTmx = TileMapParser.parseTmx(tmxBody);

如果您的 TMX 文件包含外部 tsx 参考，您需要添加一个自定义解析器：

class CustomTsxProvider extends TsxProvider {
  @override
  Parser getSource(String fileName) {
    final xml = File(fileName).readAsStringSync();
    final node = XmlDocument.parse(xml).rootElement;
    return XmlParser(node);
  }
}

并在 parseTmx 方法中使用它：

final String tmxBody = /* ... */;
final TiledMap mapTmx = TileMapParser.parseTmx(tmxBody, tsx: CustomTsxProvider());

加载 JSON 文件

也可以通过加载一个 JSON 文件：

final String jsonBody = /* ... */;
final TiledMap mapTmx = TileMapParser.parseJson(jsonBody);

实现

有关更多信息和更多使用示例，请查看 GitHub 上的 flame_tiled 示例库：

https://github.com/flame-engine/flame_tiled


---

### 示例代码

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

void main() async {
  // 示例 TMX 文件内容
  final String tmxBody = r"""
  <map version="1.4">
    <tilemap>
      <tileset name="tileset" firstgid="0" tilewidth="32" tileheight="32">
        <image width="32" height="32" source="tileset.png"/>
      </tileset>
      <layer id="ground" name="Ground" tileable="true">
        <tile id="0" columns="8" rows="8" image-source="tileset.png" image-x="0" image-y="0"/>
      </layer>
    </tilemap>
  </map>
  """;

  // 加载 TMX 文件
  final TilededMap mapTmx = TileMapParser.parseTmx(tmxBody);

  // 显示地图
  print(mapTmx);
}

更多关于Flutter地图瓦片加载插件tiled的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter地图瓦片加载插件tiled的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter应用中，使用tiled插件加载地图瓦片（Tile Maps）通常涉及几个关键步骤：安装插件、加载地图资源、在Flutter界面中渲染地图。以下是一个简单的示例，展示了如何使用flutter_tiled（一个流行的Flutter插件，用于加载和渲染Tiled地图编辑器创建的地图）来实现这些功能。

1. 安装插件

首先，在你的pubspec.yaml文件中添加flutter_tiled依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_tiled: ^x.y.z  # 请替换为最新版本号

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

2. 准备地图资源

使用Tiled地图编辑器创建一个地图文件（.tmx），并确保相关的瓦片集图像文件（如.png）也在项目的资源目录中。

3. 加载和渲染地图

下面是一个完整的Flutter应用示例，展示了如何加载和渲染一个Tiled地图：

import 'package:flutter/material.dart';
import 'package:flutter_tiled/flutter_tiled.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tiled Map Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  TiledMap? _map;

  @override
  void initState() {
    super.initState();
    // 加载Tiled地图
    loadMap('assets/maps/my_map.tmx');
  }

  Future<void> loadMap(String mapAssetPath) async {
    final mapData = await rootBundle.loadString(mapAssetPath);
    final map = TiledMap.fromJson(mapData);
    setState(() {
      _map = map;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tiled Map Example'),
      ),
      body: Center(
        child: _map == null
            ? CircularProgressIndicator()  // 加载中显示进度指示器
            : TiledMapWidget(map: _map!), // 加载完成后显示地图
      ),
    );
  }
}

4. 添加地图资源到pubspec.yaml

确保你的pubspec.yaml文件中包含了地图资源文件的路径：

flutter:
  assets:
    - assets/maps/my_map.tmx
    - assets/tiles/my_tileset.png  # 如果你的瓦片集图像文件位于不同路径，也需添加

5. 运行应用

现在，你可以运行你的Flutter应用，应该能够看到加载并渲染的Tiled地图。

注意事项

  • 确保Tiled地图文件（.tmx）和相关的瓦片集图像文件（如.png）已经正确放置在项目的assets目录下，并且在pubspec.yaml中正确声明。
  • flutter_tiled插件可能随着版本更新而有所变化，请参考最新的文档和示例代码以确保兼容性。

通过上述步骤，你应该能够在Flutter应用中成功加载和渲染一个Tiled地图。

回到顶部