【游戏开发实战】Unity UGUI序列帧动画（蓝胖子序列帧图）

一、前言

序列帧动画应该是游戏中很常见的功能。今天就来介绍下Unity中如何使用如何通过UGUI来实现序列帧动画吧。
最终效果：

二、实现过程

1、导入序列帧图片

将一张序列帧图导入Unity工程中，比如我下面这张图。

2、设置图片格式和切割图片

将其Texture Type设置为Sprite (2D and UI)，并将Sprite Mode设置为Multiple。

点击Sprite Editor打开Sprite Editor编辑器。

你可能会弹出如下提示框

这是因为你工程中没有安装2D Sprite插件，打开Package Manager，搜索2D Sprite安装即可。

打开Sprite Editor编辑器后，点击Slice下拉按钮，选择Automatic自动切割，点击Slice按钮。

切割完成后，点击Apply按钮保存。

我们可以看到图片被切割成了多张子图。

3、序列帧动画脚本：UGUISpriteAnimation

创建一个脚本，命名为UGUISpriteAnimation，用于控制序列帧的播放。
UGUISpriteAnimation.cs代码如下：

using UnityEngine;
using System.Collections.Generic;
using UnityEngine.UI;

/// <summary>
/// 序列帧动画组件
/// </summary>
[RequireComponent(typeof(Image))]
public class UGUISpriteAnimation : MonoBehaviour
{
    private Image ImageSource;
    private int mCurFrame = 0;
    private float mDelta = 0;
    public float FPS = 5;
    public List<Sprite> SpriteFrames;
    public bool IsPlaying = false;
    public bool Foward = true;
    public bool AutoPlay = false;
    public bool Loop = false;
    public int FrameCount
    {
        get
        {
            return SpriteFrames.Count;
        }
    }

    void Awake()
    {
        ImageSource = GetComponent<Image>();
    }

    void Start()
    {
        if (AutoPlay)
        {
            Play();
        }
        else
        {
            IsPlaying = false;
        }
    }

    private void SetSprite(int idx)
    {
        ImageSource.sprite = SpriteFrames[idx];
        //该部分为设置成原始图片大小，如果只需要显示Image设定好的图片大小，注释掉该行即可。
        ImageSource.SetNativeSize();
    }

    public void Play()
    {
        IsPlaying = true;
        Foward = true;
    }

    public void PlayReverse()
    {
        IsPlaying = true;
        Foward = false;
    }

    void Update()
    {
        if (!IsPlaying || 0 == FrameCount)
        {
            return;
        }
        mDelta += Time.deltaTime;
        if (mDelta > 1 / FPS)
        {
            mDelta = 0;
            if (Foward)
            {
                mCurFrame++;
            }
            else
            {
                mCurFrame--;
            }
            if (mCurFrame >= FrameCount)
            {
                if (Loop)
                {
                    mCurFrame = 0;
                }
                else
                {
                    IsPlaying = false;
                    return;
                }
            }
            else if (mCurFrame < 0)
            {
                if (Loop)
                {
                    mCurFrame = FrameCount - 1;
                }
                else
                {
                    IsPlaying = false;
                    return;
                }
            }
            SetSprite(mCurFrame);
        }
    }

    public void Pause()
    {
        IsPlaying = false;
    }

    public void Resume()
    {
        if (!IsPlaying)
        {
            IsPlaying = true;
        }
    }

    public void Stop()
    {
        mCurFrame = 0;
        SetSprite(mCurFrame);
        IsPlaying = false;
    }

    public void Rewind()
    {
        mCurFrame = 0;
        SetSprite(mCurFrame);
        Play();
    }
}

4、挂脚本UGUISpriteAnimation，设置序列帧

在Canvas子节点下创建一个空节点，命名为SpriteAni，挂上UGUISpriteAnimation组件（会自动挂上Image组件）。

设置好每帧的Sprite，如上，我设置了dlam_5、dlam_6、dlam_7三帧。
FPS（帧率）为10，Auto Play（自动播放）勾选，Loop（循环播放）勾选。

5、运行效果

最后，送一张暗黑蓝胖子的攻击序列帧，感兴趣的同学自己玩一下。