手写一个在Flutter里展示”精灵图“的Widget

前言

之前用Flutter里的游戏引擎Flare做了一个“是男人就坚持100秒”的游戏,文章请看这里

使用Flare引擎之后,完全没有了Flutter应用特有的代码风格。虽然更适应我这类有过游戏开发经验的开发者,但并不利于我们学习Flutter框架。所以我在那篇文章最后也说了,要抽空用Widget重写一次这个游戏。

首要任务,就是得有一个支持”精灵图“的Widget,既然是学习,那就不能用别人开发好的,必须得自己亲手造轮子。

什么是”精灵图“

image.png

精灵图的英文是spritesheet(精灵表单),就是在一张图上放置多个图形,只需要加载到内存里一次。在展示的时候,仅展示单个图形的区域。一般多个图形多用来放置连续动画的多个关键帧。除了在游戏引擎里很常见以外,为了减少web请求,在前端领域也很常见。

原理拆解

加载一张大图,但每次只展示图片的特定区域

image.png

比如这张飞机的精灵图,尺寸是330x82(像素),横向排布5个画面,那么单个画面的尺寸就是330/5 = 66。我们每次展示的区域为x=66*画面序号,y=0,width=66,height=82

可以设定横向排布或纵向排布

精灵图可以横向或纵向排布,有些游戏引擎的贴图最大尺寸为4096x4096,所以还有些情况是需要我们换行切换的,但原理差异并不大,这里就不过多讨论了。

可以设定播放时间间隔,自动切换多个连续区域

2021-04-08 09_45_16.gif

大部分时候我们是需要用精灵图来展示动画的,比如这个飞机的精灵图。其中第1,2幅画面用于展示飞机飞行状态的动画,需要循环播放。

2021-04-08 09_48_43.gif

第3,4,5幅画面用于展示飞机爆炸的动画,只需播放一次。

思考应该用哪些Widget来搭建

通过一个动画演示来看看我们需要哪些Widget

2021-04-08 10_00_37.gif
  • 可以控制显示区域的Widget(Container)
  • 需要可以指定坐标的Widget(Stack+Positioned)

原理也清楚了,也知道该用什么Widget,那么接下来的代码就很容易了

将思路转变为代码

@override
Widget build(BuildContext context) {
return Container(
    width: 66,
    height: 82,
    child: Stack(
      children: [
        Positioned(
          left: 66*currentIndex,
          top: 0,
          child: widget.image
        )
      ],
    ),
);
}
复制代码

加入定时器,根据设定的时间间隔改变currentIndex,那么图片看上去就动起来了。

Timer.periodic(widget.duration, (timer) { 
    setState(() {
      if(currentIndex>=4){
        currentIndex=0;
      }
      else currentIndex++;
    });
  }
});
复制代码

我们再进一步封装成一个自己原创的Widget,下面是这个Widget的全部代码

import 'dart:async';

import 'package:flutter/widgets.dart';

class AnimatedSpriteImage extends StatefulWidget {

  final Image image;
  final Size spriteSize;
  final int startIndex;
  final int endIndex;
  final int playTimes;
  final Duration duration;
  final Axis axis;

  AnimatedSpriteImage({
    Key? key,
    required this.image,
    required this.spriteSize,
    required this.duration,
    this.axis = Axis.horizontal,
    this.startIndex = 0,
    this.endIndex = 0,
    this.playTimes = 0,//0 = loop
  }) : super(key: key);

  @override
  _AnimatedSpriteImageState createState() => _AnimatedSpriteImageState();
}

class _AnimatedSpriteImageState extends State<AnimatedSpriteImage> {

  int currentIndex = 0;
  int currentTimes = 0;

  @override
  void initState() {

    currentIndex = widget.startIndex;

    Timer.periodic(widget.duration, (timer) { 
      if(currentTimes<=widget.playTimes){
        setState(() {
          if(currentIndex>=widget.endIndex){
            if(widget.playTimes!=0)currentTimes++;
            if(currentTimes<widget.playTimes||widget.playTimes==0)currentIndex=widget.startIndex;
            else currentIndex = widget.endIndex;
          }
          else currentIndex++;
        });
      }
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        width: widget.spriteSize.width,
        height: widget.spriteSize.height,
        
        child: Stack(
          children: [
            Positioned(
              left: widget.axis==Axis.horizontal?-widget.spriteSize.width*currentIndex:0,
              top: widget.axis==Axis.vertical?-widget.spriteSize.height*currentIndex:0,
              child: widget.image
            )
          ],
        ),
    );
  }
}
复制代码

封装得好,使用起来也尤其方便。

//播放飞机飞行状态动画
AnimatedSpriteImage(
  duration: Duration(milliseconds: 200),//动画的间隔
  image: Image.asset("assets/images/player.png"),//精灵图
  spriteSize: Size(66, 82),//单画面尺寸
  startIndex: 0,//动画起始画面序号
  endIndex: 1,//动画结束画面序号
  playTimes: 0,//播放次数,0为循环播放
)

//播放飞机爆炸动画
AnimatedSpriteImage(
  duration: Duration(milliseconds: 200),//动画的间隔
  image: Image.asset("assets/images/player.png"),//精灵图
  spriteSize: Size(66, 82),//单画面尺寸
  startIndex: 2,//动画起始画面序号
  endIndex: 4,//动画结束画面序号
  playTimes: 1,//播放次数,0为循环播放
)
复制代码

关注大帅

一个热爱前端开发的老程序猿,只在三个平台分享内容