Flutter插件flim的介绍与使用方法

Flutter插件flim的介绍与使用方法

flim介绍 ✨

flim 是一个轻量级的数据驱动精灵渲染库，专为Flutter设计。它提供了以下特性：

• 精灵和精灵动画：支持带有变换（如旋转、缩放等）的精灵和精灵动画。
• 高效的精灵渲染：使用 Canvas.drawAtlas 进行缓冲渲染，性能优越。
• 数据驱动：可以通过 JSON 文件加载精灵和动画。
• 抽象层：提供了游戏、渲染循环、小部件等的抽象层。
• 资源缓存：使用 asset_cache 缓存图像、JSON 等资源。

Flutter插件flim使用方法

flim 的使用方法非常简单，下面是一个完整的示例 Demo，展示了如何在 Flutter 项目中使用 flim 来创建一个简单的游戏场景。

示例代码

import 'package:flutter/material.dart';
import 'package:flim/flim.dart';
import 'package:asset_cache/asset_cache.dart';

// 创建图像和 JSON 资源缓存
final imageAssetCache = ImageAssetCache(basePath: "assets/images/");
final jsonAssetCache = JsonAssetCache(basePath: "assets/json/");

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
        appBarTheme: AppBarTheme(
          elevation: 0,
          color: Colors.black26,
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('flim example'),
      ),
      body: buildGameAndWidgets(),
    );
  }

  // 构建包含多个游戏场景的小部件
  Widget buildGameAndWidgets() {
    return Stack(
      children: [
        // 游戏场景1：Playground 游戏
        FutureBuilder<Game>(
          future: MyPlaygroundGame().initialize(
            imageAssetCache,
            jsonAssetCache,
          ),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return GameWidget(
                snapshot.data!,
              );
            } else {
              return Container();
            }
          },
        ),
        
        // 游戏场景2：单个精灵
        FutureBuilder<Sprite>(
          future: Sprite(
            imagePath: 'AngelBrown.PNG', // 精灵图像路径
            transform: Transform2D(
              translate: Offset(100, 200), // 位置偏移
              scale: 2.0, // 缩放比例
              rotation: 3.14 / 4.0, // 旋转角度（弧度）
            ),
          ).loadImage(imageAssetCache),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return SpriteWidget(
                snapshot.data!,
              );
            } else {
              return Container();
            }
          },
        ),
        
        // 游戏场景3：动画精灵
        FutureBuilder<AnimatedSprite>(
          future: AnimatedSprite.fromUniformSpriteSheet(
            imagePath: 'boom3.png', // 动画精灵图集路径
            spriteSize: IntSize(width: 128, height: 128), // 单个精灵的尺寸
            atlasBounds: IntRect(left: 0, top: 0, width: 8, height: 8), // 图集边界
            frameDuration: 0.03, // 每帧持续时间
            color: Colors.transparent, // 颜色（透明）
            transform: Transform2D(
              translate: Offset(0.0, 128 * 2.0), // 位置偏移
            ),
          ).loadImages(imageAssetCache),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return GameWidget(
                AnimatedSpriteGame(snapshot.data!),
              );
            } else {
              return Container();
            }
          },
        ),
      ],
    );
  }
}