Flutter轻量级渲染插件mini_sprite的使用

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

Flutter轻量级渲染插件mini_sprite的使用

mini_sprite

A simplified sprite format meant for 1bit styled games.

style: very good analysis License: MIT

如何使用

在你的项目中添加mini_sprite到pubspec.yaml文件：

dart pub add mini_sprite

MiniSprite

MiniSprite 持有一个单一精灵的信息，它可以在运行时生成或从其原始格式加载。

运行时生成

List<List<int>> _generatePixels() {
  // 生成像素矩阵
  return [
    [0, 1, -1],
    [1, 0, 1],
    [-1, 1, 0]
  ];
}

final miniSprite = MiniSprite(_generatePixels());
print(miniSprite.pixels); // 打印生成的像素矩阵

从原始格式读取

const spriteData = '...';
final miniSprite = MiniSprite.fromDataString(spriteData);
print(miniSprite.pixels); // 打印从数据字符串生成的像素矩阵

每个矩阵中的值代表调色板上的颜色索引，其中 -1 表示未填充的像素。

MiniLibrary

MiniLibrary 是一个表示一组 MiniSprite 的类。它是一个帮助类，使存储和加载一组精灵变得容易。

就像 MiniSprite 一样，它可以在运行时生成或从其原始格式加载。

运行时生成

List<List<int>> _generatePixels() {
  // 生成像素矩阵
  return [
    [0, 1, -1],
    [1, 0, 1],
    [-1, 1, 0]
  ];
}

final miniLibrary = MiniLibrary({
  'player': MiniSprite(_generatePixels()),
  'tile': MiniSprite(_generatePixels()),
});
print(miniLibrary.sprites); // 打印生成的精灵集合

从原始格式读取

const libraryData = '...';
final miniLibrary = MiniLibrary.fromDataString(libraryData);
print(miniLibrary.sprite); // 打印从数据字符串生成的精灵

MiniMap

MiniMap 是一个包含游戏地图（或舞台）信息的类。它的坐标系统基于网格，并包含对象的集合。

对象存储在一个 Map 中，键是一个 MapPosition（一个简单的对象，包含 x 和 y 以及对象在地图网格中的索引），值是对象属性的映射。

除了属性中的 sprite 键，它持有来自 MiniLibrary 的精灵名称外，所有其他属性都是在编辑器中设置的自定义值。

就像其他类一样，它可以在运行时生成或从其原始格式加载。

运行时生成

final miniMap = MiniMap({
  MapPosition(2, 2): {
    'sprite': 'player',
  },
  MapPosition(2, 3): {
    'sprite': 'ground',
  },
  MapPosition(4, 3): {
    'sprite': 'spikes',
    'damage': 'fatal',
  },
});

从原始格式读取

const mapData = '...';
final miniMap = MiniMap.fromDataString(mapData);

更多关于Flutter轻量级渲染插件mini_sprite的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter轻量级渲染插件mini_sprite的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用轻量级渲染插件mini_sprite的示例代码。mini_sprite是一个用于Flutter的高性能2D渲染引擎，适用于游戏开发和需要高效图形渲染的应用。

首先，确保你已经在pubspec.yaml文件中添加了mini_sprite依赖：

dependencies:
  flutter:
    sdk: flutter
  mini_sprite: ^最新版本号  # 请替换为实际可用的最新版本号

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

接下来是一个简单的示例，展示如何使用mini_sprite进行基本的渲染：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mini Sprite Demo'),
        ),
        body: SpriteWidget(child: MySpriteScene()),
      ),
    );
  }
}

class MySpriteScene extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SpriteSceneBuilder(
      builder: (context, scene) {
        // 创建一个精灵批次
        final SpriteBatch batch = SpriteBatch();

        // 创建一个纹理（这里假设你有一个名为'example.png'的图片资源）
        final SpriteTexture texture = SpriteTexture.fromAsset('example.png');

        // 加载纹理到精灵批次中
        batch.add(Sprite(texture: texture)
          ..position = Vector2(100, 100)  // 设置精灵位置
          ..size = Vector2(texture.width, texture.height));  // 设置精灵大小

        // 返回批次以进行渲染
        return batch;
      },
    );
  }
}

在这个示例中：

  1. MyApp是一个基本的Flutter应用，它使用MaterialApp和Scaffold来创建一个带有标题栏的主页面。
  2. SpriteWidget是mini_sprite提供的一个用于渲染精灵场景的Widget。
  3. MySpriteScene是一个自定义的StatelessWidget，它使用SpriteSceneBuilder来构建精灵场景。
  4. 在SpriteSceneBuilder的builder回调中，我们创建了一个SpriteBatch对象，这是用于批量渲染精灵的高效方式。
  5. 我们加载了一个纹理（从资源文件example.png），并创建了一个Sprite对象，设置了它的位置和大小。
  6. 最后，我们将Sprite对象添加到批次中，并返回批次以供渲染。

这个示例展示了如何使用mini_sprite进行基本的2D渲染。你可以根据需要扩展这个示例，添加更多的精灵、动画和交互功能。请确保你的项目资源文件夹中包含example.png图片，或者替换为其他有效的纹理资源路径。

回到顶部