精灵 Sprite

Flame提供了一个Sprite类,代表图片(或图片的一部分)。

你可以通过fromImage构造函数创建一个Sprite,并为其提供预加载的图片,也可以使匿名函数传入文件名,异步加载。

下面的例子会创建一个精灵,传入的文件名作为图片,自动加载:

Sprite player = Sprite('player.png');

你也可以在精灵所在的原始图像中指定坐标。这样我们可以使用精灵清单,减少内存中的图片数量。比如:

Sprite playerFrame = Sprite('player.png', x = 32.0, width = 16.0);

xy的默认值为0.0,宽度和高度的默认值为null(默认值会使其使用图片的原本尺寸)。

Sprite类还有一个loaded函数,该函数返回图片是否加载完毕,还有一个render函数,我们可以通过它将图像渲染在Canvas上:

Sprite block = Sprite('block.png');

// 在render函数中
block.render(canvas, 16.0, 16.0); //canvas, 宽度, 高度

render函数中,尺寸是必选参数,图片将会相应调整其大小。

精灵尚未加载完成时,render不会执行任何操作,不需要担心。该图像缓存至Images类中,因此你可以安全的创建多个重名的精灵。

Sprite类中的所有render函数都可以接收Paint实例,它有一个可选参数overridePaint,该参数将重写该Sprite的paint实例。

精灵们可以当作widget使用,只需使用Flame.util.spriteAsWidget

点此查看一个使用sprite和widget的完整案例。

精灵清单 SpriteBatch

如果你有一个Sprite清单(也称为图集,它是一个图像,并包含较小图像),并且希望对其进行有效渲染,你可以通过使用SpriteBatch完成该操作。

传入图片的文件名,然后添加一个对图像进行描述(位置、缩放、旋转和可选颜色)的矩形。

您可以使用Canvas和可选的PaintBlendModeCullRect对其进行渲染。

为方便操作,Flame还提供了SpriteBatchComponent

点此查看示例。

Svg

Flame提供了一个简单的API,用于渲染游戏中的SVG图像。

只需导入package:flame/svg.dart中的Svg类,使用以下代码块将其渲染在画布上:

Svg svgInstance = Svg('android.svg');

final position = Position(100, 100);
final width = 300;
final height = 300;

svgInstance.renderPosition(canvas, position, width, height);

Flame.images

Flame.images是优先级较低的,用于加载图像的应用程序,与Flame.audio十分类似。

在Flutter中,将所有内容从本地转为在Canvas上绘制的图片比较麻烦。此类允许你使用drawImageRect函数获得可在Canvas上绘制的图像。

它会自动缓存使用文件名加载的任何图片,所以你可以安全的多次调用。

若要加载/绘制图片,你可以像这样使用load函数:

import 'package:flame/flame.dart';

// 在异步context中
Image image = await Flame.images.load('player.png');

// 或者
Flame.images.load('player.png').then((Image image) {
  var paint = Paint()..color = Color(0xffffffff);
  var rect = Rect.fromLTWH(0.0, 0.0, image.width.toDouble(), image.height.toDouble());
  canvas.drawImageRect(image, rect, rect, paint);
});

加载和清除缓存的方式与音频类似:load, loadAll, clearclearAll。他们返回Future的图片加载类型。

仍然类似音频,你可以实例化自己的图片副本(每个实例共享不同的缓存):

Image image = await new Images().load('asd');
Flame中文站 all right reserved,powered by Gitbook最后修改: 2020-08-21 17:28:18

results matching ""

    No results matching ""