Flutter实现拼图游戏

实现这个小游戏, 需要哪些知识点了？

一. 加载图片

Future<ui.Image> getImage(String path) async {
    ByteData data = await rootBundle.load(path);
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
    FrameInfo frameInfo = await codec.getNextFrame();
    image = frameInfo.image;
    return image;
}

二. 绘图api

在flutter中有着跟android近乎一样的canvas API. 但是也有些差异

1. Android中的Rect.offset/Rect.offsetTo直接生效, 对应flutter中的React.shift, 结果在返回值里.
2. Android中的画布通过bitmap构建canvas, 接着直接调用canvas绘制, 绘制的内容就跑到bitmap上了, 而在flutter里需要这样

PictureRecorder recorder = PictureRecorder();
Canvas canvas = Canvas(recorder, Rect.fromLTWH(0.0, 0.0, width, height));
canvas.drawXXX();
...
Image image = canvas.endRecording().toImage(saveWidth, saveHeight);
//保存
image.toByteData(format: ImageByteFormat.png).then((data) {
    File file = File(path);
    file.writeAsBytes(data.buffer.asUint8List());
})

3. Android里绘制文字比较直观, 通过paint设置蚕食, 然后直接canvas.drawText, flutter里第一次用有点周折

ParagraphBuilder pb = ParagraphBuilder(ParagraphStyle(
  textAlign: TextAlign.center,
  fontWeight: FontWeight.w300,
  fontStyle: FontStyle.normal,
  fontSize: hitNode == node ? 20.0 : 15.0,
));
pb.pushStyle(ui.TextStyle(color: Color(0xff00ff00)));
pb.addText('${node.index + 1}');

ParagraphConstraints pc = ParagraphConstraints(width: node.rect.width);
//这里需要先layout, 后面才能获取到文字高度
Paragraph paragraph = pb.build()..layout(pc);
//文字居中显示
Offset offset = Offset(node.rect.width * (node.curIndex%level), node.rect.width * ((node.curIndex/level).floor() + 0.5) - paragraph.height/2);
canvas.drawParagraph(paragraph, offset);

三. 动画

Android里有属性动画, Flutter也有对应的动画, 但是多了个AnimationController.dispose调用

AnimationController controller = AnimationController(
  vsync: this,
  duration: const Duration(milliseconds: 1000),
);
ani = IntTween(begin: 0, end: 100).animate(controller);
ani.addListener(() {
    print(ani.value);
})
controller.forward();
//释放资源
controller.dispose();

四. 实现差异

Android里可以直接在自定义View里写完所有代码(绘制和交互逻辑), 调用上层完全不需要关心内部如何实现. 状态变更直接View.invalidate.
而在flutter里需要实现CustomPainter, 它只负责显示(绘制). 而状态变更和交互逻辑则写在StateWidget里. 这也符合flutter通过状态管理的理念.
只不过要传递大量参数到下层, 稍显麻烦, 仅仅只是为了一个draw(显示).

五. 游戏可解性

可以通过计算这个排列的逆序数个数加空格位置的坐标, 最终得到的数的奇偶性判断, 如果不ok, 再继续生成直到ok.