快捷導(dǎo)航

Android?Flutter實(shí)現(xiàn)精靈圖的使用詳解

更新時(shí)間：2022年08月31日 11:20:25 作者：JulyYu

在游戲開發(fā)中，精靈圖會(huì)將一個(gè)人物所有動(dòng)作放置在一張圖片中，通過坐標(biāo)定位選取其中一張圖展示。本文就來教你如何使用精靈圖，感興趣的可以了解一下

前言

在日常開發(fā)中遇到的圖片展示一般是靜態(tài)圖和Gif圖兩種形式（靜態(tài)和動(dòng)態(tài)的不同）。與此同時(shí)當(dāng)需要對(duì)圖片做效果時(shí)讓其動(dòng)起來，常用方案是Gif圖播放或者是幀動(dòng)畫（多種靜態(tài)圖輪詢播放）。但在游戲開發(fā)中還有一種動(dòng)圖表現(xiàn)形式叫做Sprite圖(雪碧圖)，其在前端開發(fā)中也是很常見。為什么需要使用精靈圖，因?yàn)槊繌垐D片顯示都需要去發(fā)起請(qǐng)求獲取，若頁面圖片數(shù)量較多（一個(gè)頁面有幾十個(gè)小圖）并發(fā)請(qǐng)求將是一個(gè)大數(shù)量級(jí)，可能會(huì)造成頁面加載速度降低，精靈圖其中一個(gè)特點(diǎn)就是減少服務(wù)器請(qǐng)求，一次性加載到所有圖片。

如何使用精靈圖

在游戲開發(fā)中精靈圖會(huì)將一個(gè)人物所有動(dòng)作放置在一張圖片中，通過坐標(biāo)定位選取其中一張圖展示。根據(jù)精靈圖配置信息來定位到不同圖片再通過定時(shí)切換選取不同圖片從而實(shí)現(xiàn)連貫動(dòng)畫效果。

自定義實(shí)現(xiàn)加載

自定義實(shí)習(xí)方式是對(duì)精靈圖進(jìn)行加載，因?yàn)槊繋瑘D片尺寸大小是一致的。

每幀圖片尺寸固定后就能確認(rèn)每一幀圖片在整張圖片的定位位置，因此能夠根據(jù)X-Y坐標(biāo)來找到相應(yīng)圖片。
創(chuàng)建定時(shí)器調(diào)整間隔時(shí)間計(jì)算出坐標(biāo)位置切換需要展示圖片。
再結(jié)合Container+Positioned形式來實(shí)現(xiàn)采用偏移量方式顯示哪張圖片。

class SpriteWidget extends StatefulWidget {
  final Image image;
  final Size spriteSize;

  final Duration duration;

  SpriteWidget({
    Key key,
    @required this.image,
    @required this.spriteSize,
    @required this.duration,
  }) : super(key: key);

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

class _SpriteWidgetState extends State<SpriteWidget> {
  Image get image => widget.image;

  Size get spriteSize => widget.spriteSize;

  Duration get duration => widget.duration;
  // 當(dāng)前顯示的圖片位置
  int currentIndex = 0;
  int currentTimes = 0;
  
  int startIndex = 0;

  int endIndex = 1;
  int playTimes = 0;

  // 定時(shí)器用來更新精靈圖加載
  Timer timer;

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

  @override
  void dispose() {
    super.dispose();
    timer?.cancel();
  }

  @override
  Widget build(BuildContext context) {
    // 使用container+Positioned來限制圖片顯示區(qū)域
    return Container(
      width: spriteSize.width,
      height: spriteSize.height,
      child: Stack(
        children: [
          Positioned(
              left: -spriteSize.width * currentIndex,
              top: -spriteSize.height * currentIndex,
              child: image)
        ],
      ),
    );
  }
}

Flame加載精靈圖

除了自定義方式實(shí)現(xiàn)精靈圖加載外，F(xiàn)lutter官方還提供了Flame框架實(shí)現(xiàn)游戲內(nèi)容制作幫助開發(fā)者更方便實(shí)現(xiàn)游戲相關(guān)功能開發(fā)。

首先在依賴庫添加Flame庫，此外bonfire是Flame庫的拓展封裝了更多游戲開發(fā)相關(guān)功能接口。

  bonfire: ^2.0.0
  flame: ^1.0.0

實(shí)現(xiàn)角色資源加載類，bonfire中已經(jīng)幫助開發(fā)者實(shí)現(xiàn)了Sprite功能只需要加載精靈圖就能獲取到精靈圖加載能力。

abstract class BaseRole {
  // 速度
  double velocity;
  late Sprite sprite;

  BaseRole({
    this.velocity = 10,
  });

  dynamic load();

  void run();
}
class UserRole extends BaseRole {
  Vector2 offset = Vector2(0.0, 0.0);
  Vector2 size = Vector2(48.0, 48.0);

  @override
  void run() {
    double x = (48 + offset.x) % 192;
    double y = 0;
    offset = Vector2(x, y);
    sprite.srcPosition = offset;
    sprite.srcSize = size;
  }

  @override
  Future load() async {
    sprite = await Sprite.load(
      'user_role.png',
      srcPosition: offset,
      srcSize: size,
    );
    return sprite;
  }
}

在bonfire游戲開發(fā)中還有SpriteComponent組件，開發(fā)者只需要繼承它加載使用Sprite即可。

class UserRoleComponent extends SpriteComponent {
  late UserRole userRole;

  UserRoleComponent()
      : super(
          size: Vector2.all(100),
        );

  double minDt = 1 / 8; // 30 fps
  double dtOverflow = 0;

  @override
  Future<void>? onLoad() async {
    userRole = UserRole();
    sprite = await userRole.load();
    super.onLoad();
  }

  @override
  void update(double dt) {
    dtOverflow += dt;
    if (dtOverflow < minDt) {
      return;
    }
    userRole.run();
    dtOverflow = 0;
  }
}

到此這篇關(guān)于Android Flutter實(shí)現(xiàn)精靈圖的使用詳解的文章就介紹到這了,更多相關(guān)Android Flutter精靈圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: