Flutter精灵图处理插件spritexp的使用

安装 💻

要开始使用SpritExp，您必须在您的机器上安装Flutter SDK。

在pubspec.yaml文件中添加spritexp依赖：

dependencies:
  spritexp:

然后运行以下命令来安装它：

flutter packages get

使用它

SpritExp的基本语法结构如下所示：

{SPRITE COORDINATES AND SIZE}[ * MULTIPLIERS]

分解来看，精灵的坐标和大小由逗号分隔的数字表示，并接受几种格式：

// {Size} - 坐标默认为0,0
{16}
// {X 和 Y, 宽度和高度}
{16, 32}
// {X, Y, 宽度, 高度}
{0, 16, 32, 32}

乘数用于根据上述定义生成一系列精灵。例如，为了生成一个包含两个精灵的水平列表，可以使用以下示例：

{0, 16} * 2x

这将生成两个精灵，第一个从X0 Y0开始，尺寸为正方形16，第二个从X16 Y0开始，同样也是正方形16。

另一方面，下面的示例：

{0, 16} * 2y

将生成两个精灵，第一个从X0 Y0开始，尺寸为正方形16，第二个从X0 Y16开始，同样也是正方形16。

您还可以通过在表达式中添加x和y来获取精灵网格：

{0, 16} * 2xy

默认情况下，SpritExp假定乘数是水平的，因此可以省略x，即{0, 16} * 2和{0, 16} * 2x是相同的表达式。

示例代码

以下是完整的示例代码，展示了如何使用SpritExp插件来处理精灵图。

// ignore_for_file: public_member_api_docs

import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:file_selector/file_selector.dart';
import 'package:flame/flame.dart';
import 'package:flame/widgets.dart';
import 'package:flutter/material.dart';
import 'package:nes_ui/nes_ui.dart';
import 'package:spritexp/spritexp.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: flutterNesTheme(),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final _expressionController = TextEditingController();

  bool _onError = false;
  ui.Image? _image;
  late Uint8List? _imageBytes;
  List<Sprite> _sprites = [];

  [@override](/user/override)
  void dispose() {
    _expressionController.dispose();
    super.dispose();
  }

  void _onChangeExpression() {
    if (_expressionController.text.isEmpty) {
      setState(() {
        _sprites = [];
      });
      return;
    }

    final expression = _expressionController.text;

    try {
      final spriteExp = SpritExp(expression: expression);

      setState(() {
        _onError = false;
      });

      if (_image == null) return;

      final sprites = spriteExp / _image!;
      setState(() {
        _sprites = sprites;
      });
    } catch (_) {
      setState(() {
        _onError = true;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            NesContainer(
              label: 'Expression',
              child: TextFormField(
                controller: _expressionController,
                onChanged: (_) => _onChangeExpression(),
                decoration: InputDecoration(
                  errorText: _onError ? '无效表达式' : null,
                ),
              ),
            ),
            const SizedBox(height: 16),
            if (_image == null)
              Expanded(
                child: NesContainer(
                  label: '未选择图像',
                  width: double.infinity,
                  child: Center(
                    child: NesButton(
                      type: NesButtonType.primary,
                      child: const Text('选择图像'),
                      onPressed: () async {
                        const typeGroup = XTypeGroup(
                          label: 'images',
                          extensions: ['jpg', 'png'],
                        );
                        final file = await openFile(
                          acceptedTypeGroups: [typeGroup],
                        );

                        if (file == null) return;

                        final bytes = await file.readAsBytes();
                        final image = await Flame.images.fetchOrGenerate(
                          file.path,
                          () => decodeImageFromList(bytes),
                        );

                        setState(() {
                          _image = image;
                          _imageBytes = bytes;
                        });

                        _onChangeExpression();
                      },
                    ),
                  ),
                ),
              )
            else
              Expanded(
                child: NesContainer(
                  width: double.infinity,
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: Row(
                      children: [
                        Expanded(
                          child: NesContainer(
                            label: '原始图像',
                            child: Image.memory(
                              _imageBytes!,
                              fit: BoxFit.contain,
                              filterQuality: FilterQuality.none,
                            ),
                          ),
                        ),
                        const SizedBox(width: 16),
                        Expanded(
                          child: NesContainer(
                            label: '精灵',
                            height: double.infinity,
                            child: Wrap(
                              children: [
                                for (final sprite in _sprites)
                                  Padding(
                                    padding: const EdgeInsets.all(8),
                                    child: SpriteWidget(sprite: sprite),
                                  ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}