【Unity】在Unity中播放序列帧动画、播放图集动画


概述

本文通过两种方式播放序列动画,第一种(逐图播放)简单易操作但性能略差,第二种(图集播放)性能相对更好一些但操作相对复杂。不过还是建议使用第二种,因为第二种更适合做合理的架构,不仅仅是序列动画,平时用的 UI 资源也可以一起放到图集资源中,通过不同的名称进行获取。

注意:本文关注的是那种多张图切换的动画,如果需要类似于 Spine 那种形变动画可以看我的另外一篇文章:【Unity】在Unity 3D中使用Spine开发2D动画

播放序列帧动画

准备图片

首先将你所有的图片都导入到项目中,然后在 Project 视窗选中你所有的图片并将其 Texture Type 改为 Sprite(2D and UI),然后确保 Sprite Mode 为 Single 。
如图:
在这里插入图片描述

准备脚本代码

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

namespace Core
{
    
    
    /// <summary>
    /// 序列帧动画播放器
    /// 将该脚本挂载到拥有Image组件的GameObject下即可
    /// framesPerSecond用于调节每一秒播放的帧数
    /// sprites用于存放每一帧的图片
    /// <remarks>开发者 : Genesis (*╹▽╹*) </remarks>
    /// </summary>
    public class SequenceFramePlayer : MonoBehaviour
    {
    
    
        /// <summary>
        /// 每秒播放的帧数
        /// </summary>
        public float framesPerSecond = 10.0f;
        
        /// <summary>
        /// 存储序列帧动画的所有帧
        /// </summary>
        public Sprite[] sprites;

        private Image _image;

        private void Start()
        {
    
    
            _image = GetComponent<Image>();
            StartCoroutine(PlayAnimation());
        }

        private void OnEnable()
        {
    
    
            StartCoroutine(PlayAnimation());
        }

        private IEnumerator PlayAnimation()
        {
    
    
            while (true)
            {
    
    
                for (var i = 0; i < sprites.Length; i++)
                {
    
    
                    if (_image != null)
                    {
    
    
                        _image.sprite = sprites[i];
                    }
                    yield return new WaitForSeconds(1f / framesPerSecond);
                }
            }
        }
    }
}

处理场景

在场景中建立一个 Image ,或者给你的UI组件添加一个 Image 组件也行。
在这里插入图片描述

使用脚本

将脚本 SequenceFramePlayer 挂载到刚才的 Image 游戏对象上,并将图片拖拽到 Sprites 中,友情提示:Inspector 右上角有个小锁头,我们可以先选中 Image ,然后点击锁定,然后再去使用 Shift 批量选中图片进行拖拽,这样会方便很多。

Frames Per Second 属性是用来调节速度的,也就是每秒钟播放多少张图片。

在这里插入图片描述

播放图集动画

修改设置

首先要更改一下设置,操作步骤为 Edit -> Project Settings -> Editor ,将 Sprite Packer -> Mode 设置为 V1 Always 或者 V2。

修改图片资源类型

注意:此处跟前面略有不同,需要将 Mesh Type 设置为 Full Rect 。
在这里插入图片描述

扫描二维码关注公众号,回复: 17416196 查看本文章

创建 Sprite Atlas

在 Projects 中创建一个 Sprite Atlas ,如下图:
在这里插入图片描述
将图集拖放到 Sprite Atlas 的 Objects for Packing 中,然后点击下方的 Pack Preview 按钮进行预览。
在这里插入图片描述

准备脚本

using System.Collections;
using UnityEngine;
using UnityEngine.U2D;
using UnityEngine.UI;

namespace Core
{
    
    
    /// <summary>
    /// 图集动画播放器
    /// 将该脚本挂载到拥有Image组件的GameObject下即可
    /// framesPerSecond用于调节每一秒播放的帧数
    /// spriteAtlas需要制定创建好的SpriteAtlas
    /// <remarks>开发者 : Genesis (*╹▽╹*) </remarks>
    /// </summary>
    public class SpriteAtlasPlayer : MonoBehaviour
    {
    
    
        /// <summary>
        /// 每秒播放的帧数
        /// </summary>
        public float framesPerSecond = 10.0f;

        public string prefix;
        
        /// <summary>
        /// 存储序列帧动画的所有帧
        /// </summary>
        public SpriteAtlas spriteAtlas;

        private Image _image;

        private void Start()
        {
    
    
            _image = GetComponent<Image>();
            StartCoroutine(PlayAnimation());
        }

        private void OnEnable()
        {
    
    
            StartCoroutine(PlayAnimation());
        }

        private IEnumerator PlayAnimation()
        {
    
    
            while (true)
            {
    
    
                for (var i = 0; i < spriteAtlas.spriteCount; i++)
                {
    
    
                    if (_image != null)
                    {
    
    
                        _image.sprite = spriteAtlas.GetSprite($"{
      
      prefix}{
      
      i}");
                    }
                    yield return new WaitForSeconds(1f / framesPerSecond);
                }
            }
        }
    }
}

使用脚本

与前面的设置基本相同,只不过这次不需要拖动图片,而是直接将刚才创建的 Sprite Atlas 文件放进来即可。
在这里插入图片描述


更多内容请查看总目录【Unity】Unity学习笔记目录整理

猜你喜欢

转载自blog.csdn.net/xiaoyaoACi/article/details/142878582