聊聊Unity自定义组件之序列帧播放组件问题

  我们知道在unity中播放序列帧动画有两种方式,第一种是利用Unity自带的animation组件来播放,我们只需要在工程目录中全选选中所有我们需要播放的图片,将其拖动到Hiercarchy上,Unity就会帮我们自动创建一个animation片段,我们就可以用animation组件来控制我们的动画,不过这种方式创建的图片Sprite Renderer类型的。第二种方式就是创建一个Image组件,利用代码创建一个sprite,写一段代码利用Update函数来逐帧替换Image的sprite来实现动画的播放。这种的话可能会麻烦点,不过自由度高一点,可根据自己的需求来进行编写代码控制

  由于最近的项目中需要用到大量的序列帧动画以及逻辑处理,本来想用Unity自带的Animation组件来实现的,但由于甲方需求一再变更,需要处理的逻辑太多,为了方便修改和拓展,所以就根据自己项目的需求自定义了一个序列帧播放组件来辅助开发。先贴上图片看看效果,如下图就是这个ImageAnimation脚本组件,我们只需要创建一个Image,然后挂载上这个脚本,将需要播放的图片赋给脚本上的Sprite数组,根据自己需求可在编辑面板设定图片的循环播放方式、播放速度、以及是否自动播放,还可根据自己的需求添加回调函数。很方便。

  好了,废话不多说了,上代码,脚本开放出来了播放Play()、暂停Pause()、停止Stop()、重播Replay() 4个公共方法,以及一个回调函数,根据自己的需求直接调用这4个方法和回调来控制自己的图片播放控制就好。脚本不是很复杂,主要是希望给大家提供一种思路,在项目开发中可以根据自己的需求封装一些功能出来来辅助自己开发,以提高效率。这次分享就到这里了,大家有什么问题和意见都可以和我交流、探讨,一起学习进步。

/***********************************
*    Description:描述这是一个图片序列帧播放脚本,
*    Mountpoint:挂载点将其挂载在Image组件上
*    Date:2019.07.11
*    Version:unity版本2017.2.0f3
*    Author:LJF
***********************************/
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using LjfLog;
using UnityEngine.Events;
namespace LJF
{
    //规范命名、添加注释、合理封装、限制访问权限、异常处理
    public class ImageAnimation : MonoBehaviour
    {
        public enum State
        {
            idle,
            playing,
            pause
        }
        public enum State1
        {
            once,
            loop
        }

        [Header("播放方式(循环、单次)")]//默认单次
        public State1 condition=State1.once;
        [Header("自动播放")]//默认不自动播放
        public bool Play_Awake = false;
        //播放状态(默认、播放中、暂停)
        private  State play_state;
        private Image manimg;
        [Header("每秒播放的帧数(整数)")]
        public float frame_number=30;
        [Header("sprite数组")]
        public Sprite[] sprit_arr;
        //回调事件
        public UnityEvent onCompleteEvent;
        private int index;
        private float tim;
        private float waittim;
        private bool isplay;
        void Awake()
        {
            manimg = GetComponent<Image>();
            tim = 0;
            index = 0;
            waittim = 1 / frame_number;
            play_state = State.idle;
            isplay = false;
            if (manimg == null)
            {
                Debuger.LogWarning("Image为空,请添加Image组件!!!");
                return;
            }
            if (sprit_arr.Length<1)
            {
                Debuger.LogWarning("sprite数组为0,请给sprite数组添加元素!!!");
            }
            manimg.sprite = sprit_arr[0];
            if (Play_Awake)
            {
                Play();
            }
        }
        void Update()
        {
            //测试
            if (Input.GetKeyDown(KeyCode.A))
            {
                Play();
            }
            if (Input.GetKeyDown(KeyCode.S))
            {
                Replay();
            }
            if (Input.GetKeyDown(KeyCode.D))
            {
                Stop();
            }
            if (Input.GetKeyDown(KeyCode.P))
            {
                Pause();
            }
            UpMove();

        }
        private void UpMove()
        {
            //单播
            if (condition == State1.once)
            {
                if (play_state == State.idle && isplay)
                {
                    play_state = State.playing;
                    index = 0;
                    tim = 0;
                }
                if (play_state == State.pause && isplay)
                {
                    play_state = State.playing;
                    tim = 0;
                }
                if (play_state == State.playing && isplay)
                {
                    tim += Time.deltaTime;
                    if (tim >= waittim)
                    {
                        tim = 0;
                        index++;
                        if (index >= sprit_arr.Length)
                        {
                            index = 0;
                            manimg.sprite = sprit_arr[index];
                            isplay = false;
                            play_state = State.idle;
                            //此处可添加结束回调函数
                            if (onCompleteEvent != null)
                            {
                                onCompleteEvent.Invoke();
                                return;
                            }
                        }
                        manimg.sprite = sprit_arr[index];
                    }
                }
            }
            //循环播放
            if (condition == State1.loop)
            {
                if (play_state == State.idle && isplay)
                {
                    play_state = State.playing;
                    index = 0;
                    tim = 0;
                }
                if (play_state == State.pause && isplay)
                {
                    play_state = State.playing;
                    tim = 0;
                }
                if (play_state == State.playing && isplay)
                {
                    tim += Time.deltaTime;
                    if (tim >= waittim)
                    {
                        tim = 0;
                        index++;
                        if (index >= sprit_arr.Length)
                        {
                            index = 0;
                            //此处可添加结束回调函数
                        }
                        manimg.sprite = sprit_arr[index];
                    }
                }
            }
        }
        /// <summary>
        /// 播放
        /// </summary>
        public void Play()
        {
            isplay = true;
        }
        /// <summary>
        /// 暂停
        /// </summary>
        public void Pause()
        {
            isplay = false;
            play_state = State.pause;
        }
        /// <summary>
        /// 停止
        /// </summary>
        public void Stop()
        {
            isplay = false;
            play_state = State.idle;
            index = 0;
            tim = 0;
            if (manimg == null)
            {
                Debuger.LogWarning("Image为空,请赋值");
                return;
            }
            manimg.sprite = sprit_arr[index];
        }
        /// <summary>
        /// 重播
        /// </summary>
        public void Replay()
        {
            isplay = true;
            play_state = State.playing;
            index = 0;
            tim = 0;
        }
    }
}

到此这篇关于聊聊Unity自定义组件之序列帧播放组件问题的文章就介绍到这了,更多相关Unity序列帧播放组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Unity Shader实现序列帧动画效果

    本文实例为大家分享了Unity Shader序列帧动画效果的具体代码,供大家参考,具体内容如下   实现原理 主要的思想是设置显示UV纹理的大小,并逐帧修改图片的UV坐标.(可分为以下四步) 1.我们首先把 _Time.y 和速度属性_Speed 相乘来得到模拟的时间,并使用CG 的floor 函数对结果值取整来得到整数时间time 2.然后,我们使用time 除以_HorizontalAmount 的结果值的商来作为当前对应的行索引,除法结果的余数则是列索引. 3.接下来,我们需要使用行列索引

  • Unity实现粒子光效导出成png序列帧

    本文为大家分享了Unity实现粒子光效导出成png序列帧的具体代码,供大家参考,具体内容如下 这个功能并不是很实用,不过美术同学有这样的需求,那么就花了一点时间研究了下. 我们没有使用Unity的引擎,但是做特效的同学找了一批Unity的粒子特效,希望导出成png序列帧的形式,然后我们的游戏来使用.这个就相当于拿Unity做了特效编辑器的工作.这个并不是很"邪门",因为用幻影粒子,或者3dmax,差不多也是这个思路,只不过那些软件提供了正规的导出功能,而Unity则没有. 先上代码 u

  • Unity3D制作序列帧动画的方法

    当我们需要制作动态炫酷科技感很强的UI时,美术一般会给我们提供一些序列图,这时候我们只需在程序里实现序列动画. 一.动画机 unity自带的帧动画机很方便,我们首先选择所要播放序列帧动画的Image,然后在Window下选择Animation,会弹出一个动画制动的界面,我们选择Create,然后进入如下界面: 我们按照如下添加动画控制的属性, 然后将我们美术给我们的序列图(要设置成2DandUI模式哦)拖入到动画帧面板里. Unity自带的动画机播放序列帧动画很简单也很方便,但是有一定的局限性.

  • Unity代码实现序列帧动画播放器

    序列帧动画经常用到,最直接的方式就是用Animation录制.但某些情况下这种方式并不是太友好,需要靠代码的方式进行序列帧动画的实现. 代码实现序列帧动画,基本的思路是定义一个序列帧的数组/列表,根据时间的流逝来确定使用哪一帧并更新显示. NGUI的UI2DSpriteAnimation已经实现了此功能,但是它支持的目标只有Native2D的SpriteRenderer组件或者NGUI自身的UI2DSprite组件,并不支持UGUI的Image组件. 当然可以通过改写源码的方式来添加对Image

  • 聊聊Unity自定义组件之序列帧播放组件问题

    我们知道在unity中播放序列帧动画有两种方式,第一种是利用Unity自带的animation组件来播放,我们只需要在工程目录中全选选中所有我们需要播放的图片,将其拖动到Hiercarchy上,Unity就会帮我们自动创建一个animation片段,我们就可以用animation组件来控制我们的动画,不过这种方式创建的图片Sprite Renderer类型的.第二种方式就是创建一个Image组件,利用代码创建一个sprite,写一段代码利用Update函数来逐帧替换Image的sprite来实现

  • 聊聊Unity 自定义日志保存的问题

    前言 之前unity5.x在代码中写了debug.log..等等,打包之后在当前程序文件夹下会有个对应的"outlog.txt",2017之后这个文件被移到C盘用户Appdata/LocalLow/公司名 文件夹下面.觉得不方便就自己写了个 代码 using UnityEngine; using System.IO; using System; using System.Diagnostics; using Debug = UnityEngine.Debug; public class

  • vue2.0 自定义 饼状图 (Echarts)组件的方法

    1.自定义 图表 组件 Echarts.vue <!-- 自定义 echart 组件 --> <template> <div> <!-- echart表格 --> <div id="myChart" :style="echartStyle"></div> </div> </template> <script> export default { props: {

  • 基于vue-element组件实现音乐播放器功能

    最近在写一个基于 github-page 和 gist 的博客, 想加个音乐播放器, 做了一个早上, 发出来分享一下 演示地址 https://github-laziji.github.io 效果 使用到的组件 element组件 布局 Layout 按钮 Button 滑块 Slider 进度条 Progress 弹出框 Popover html5组件 audio 实现代码 更详细的实现可以看 https://github.com/GitHub-Laziji/vblog <template>

  • 微信小程序自定义组件传值 页面和组件相互传数据操作示例

    本文实例讲述了微信小程序自定义组件传值 页面和组件相互传数据操作.分享给大家供大家参考,具体如下: 要想在组件中调到页面中的方法,并且想要组件中传数据到页面去,emmmm,可以酱紫: 用组件事件 triggerEvent! 首先,在页面中定义组件 ,json文件中记得加上: { "usingComponents": { "user-btn": "/pages/component/userInfo/userInfo" } }, 然后,index.w

  • 微信小程序自定义菜单切换栏tabbar组件代码实例

    这篇文章主要介绍了微信小程序自定义菜单切换栏tabbar组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图: wxml代码: <view class="top_tabbar" > <block wx:for="{{itemName}}" wx:key="{{index}}"> <view class="item_name {{tabInde

  • VUE实现时间轴播放组件

    本文实例为大家分享了VUE实现时间轴播放组件的具体代码,供大家参考,具体内容如下 先上效果图吧 1.初始化的效果! 2.可以拖拽,鼠标放上显示时间 3.播放按钮后,正常播放 左右两个横线可以上一页下一页 下面说VUE接入的步骤: 1.index.html中引入js和css文件 <script src='../static/js/timePlay.js'></script> <link href='../static/css/timePlay.css' rel='stylesh

  • Vue3+TS实现语音播放组件的示例代码

    目录 第一步:点击拖拽进度条 第二步:操作媒体音频 第三步:进度条和播放进度关联 完整代码 该功能将使用vue3 + TS来实现语音播放组件,使用什么技术不重要,重要的是看懂了核心逻辑后,通过原生js.react.vue2等都可以轻松实现 所涉及到重要点有以下几个: (1)进度条的实现:拖拽进度条.点击进度条 (2)操作audio语音播放:通过js操作audio媒体 (3)播放进度与进度条紧密关联:播放的进度改变时,进度条也随之改变:进度条改变时,播放的进度也随之改变 效果图: 开始我们的设计吧

  • 详细聊聊vue组件是如何实现组件通讯的

    目录 前言 如何解决组件之间通讯呢? 解决方案: 父传子 实现过程: 原理图示 父组件 Footer.vue 子组件 MyCon.vue 小案例 采用了父传子 父组件 App.vue 子组件 MyProduct.vue 效果展示 子传父 实现过程 原理图示 父组件 App.vue 子组件 MyCon.vue 商品案例 运用了子传父 父组件 App.vue 子组件 MyProduct.vue 效果展示 总结 前言 每一个组件中的变量和数据都是独立的,如果别的组件想要访问另一个组件里的数据该怎么做?

  • 微信小程序自定义可搜索的picker组件示例详解

    PC端开发,组件库是有可搜索的select可用 但是在手机端微信小程序开发的时候,使用select就不太合适了,小程序端的选项一般都是是使用picker 但是,问题又来了,微信小程序官方并没有给我们提供可搜索的Picker 人家没给,那我们就自定义一个呗 别的到没啥,就是感觉交互上有点奇怪 具体效果如下图所示: 废话不多说了,上代码: myPicker.wxml <view class="date-background" hidden="{{flag}}"&g

随机推荐