精华内容
下载资源
问答
  • Unity Shader 之 实现简单的动态过场切换图片效果 目录 Unity Shader 之 实现简单的动态过场切换图片效果 一、简单介绍 二、实现原理 三、注意事项 四、效果预览 五、实现步骤 六、关键代码 一、...

    Unity Shader 之 实现简单的动态过场切换图片的效果

     

    目录

    Unity Shader 之 实现简单的动态过场切换图片的效果

    一、简单介绍

    二、实现原理

    三、注意事项

    四、效果预览

    五、实现步骤

    六、关键代码


     

    一、简单介绍

    Shader Language的发展方向是设计出在便携性方面可以和C++、Java等相比的高级语言,“赋予程序员灵活而方便的编程方式”,并“尽可能的控制渲染过程”同时“利用图形硬件的并行性,提高算法效率”。

    本文介绍,如何使用 shader ,动态过场形式切换图片的一点简单效果。

     

    二、实现原理

    1、通过时间叠加判断,当 值小于 主图 uv 的时候,进行切换图的渲染

    // 过场切换的位置
    float curPos = _Time.y*_Speed;
    
    if(curPos < i.uv.x){
    	col = tex2D(_CutTex,i.uv);
    }


     

    三、注意事项

    1、 当小于 x,渲染_CutTex(开始都是小于 x的,开始渲染_CutTex), 随着时间变化,切换为 _MainTex

     

    四、效果预览

     

    五、实现步骤

    1、打开Unity,新建一个工程

     

    2、导入素材,和新建shader,并对应新建材质

     

    3、编写好shader,把材质对应赋值

     

    4、场景中添加一个 Quad ,并把材质赋给Quad,用来显示

     

    5、运行场景,效果如上

     

    六、关键代码

    Shader "Unlit/CutEffect"
    {
        Properties
        {
            _MainTex ("Texture", 2D) = "white" {}
    		_CutTex("Cut Tex",2D)="white"{}
    
    		// 切换速度
    		_Speed("speed",Range(-1,1))=0.2
    
        }
        SubShader
        {
            Tags { "RenderType"="Opaque" }
            LOD 100
    
            Pass
            {
                CGPROGRAM
                #pragma vertex vert
                #pragma fragment frag
            
    
                #include "UnityCG.cginc"
    
                struct appdata
                {
                    float4 vertex : POSITION;
                    float2 uv : TEXCOORD0;
                };
    
                struct v2f
                {
                    float2 uv : TEXCOORD0;
        
                    float4 vertex : SV_POSITION;
                };
    
                sampler2D _MainTex;
                float4 _MainTex_ST;
    			sampler2D _CutTex;
    			float _Speed;
    
                v2f vert (appdata v)
                {
                    v2f o;
                    o.vertex = UnityObjectToClipPos(v.vertex);
                    o.uv = v.uv;
      
                    return o;
                }
    
                fixed4 frag (v2f i) : SV_Target
                {
                    // sample the texture
                    fixed4 col = tex2D(_MainTex,i.uv);
                    
    
    				// 过场切换的位置
    				float curPos = _Time.y*_Speed;
    				// 当小于 x,渲染_CutTex(开始都是小于 x的,开始渲染_CutTex), 
    				// 随着事件变化,切换为 _MainTex
    				if(curPos < i.uv.x){
    					col = tex2D(_CutTex,i.uv);
    				}
    				
    
                    return col;
                }
                ENDCG
            }
        }
    }
    

     

     

     

    展开全文
  • Unity切换场景淡入淡出效果

    千次阅读 2017-05-03 16:54:47
    在制作游戏时,我们在切换场景时经常需要增加一个淡入淡出的效果。这里,我们利用Unity自带的动画系统制作一个场景的淡入淡出的效果。步骤如下: 1.在游戏中新建一个游戏对象,给游戏添加一个GUITexture组件,并设置...
    在制作游戏时,我们在切换场景时经常需要增加一个淡入淡出的效果。这里,我们利用Unity自带的动画系统制作一个场景的淡入淡出的效果。步骤如下:
    1.在游戏中新建一个游戏对象,给游戏添加一个GUITexture组件,并设置好相关的参数后,制作成prefab。如下图:
    
    ![这里写图片描述](https://img-blog.csdn.net/20170503163347320?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcTU2ODM2MDQ0Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    
    2.给这个prefab制作1个动作文件Animation,这个动作一会持续2秒,动画的持续过程会改变此prefab中GUITexture里的Color.a的值。在第0帧处,color.a的值为0,在动画的第1秒处color.a的值为0.5,在动画第2秒处color.a的值又变化为0.此时就完成了一个alpha值的渐变动画。
    
    3.加控制代码。
    
    using UnityEngine;
    using System.Collections;
    using UnityEngine.SceneManagerment;
    
    public class LoadLevelFadeEffect : MonoBehaviour {
        [HideInInspector]
        public int levelIndex;
    
        // Use this for initialization
        void Awake () {
            //这个脚本不会在切换场景时被销毁
            DontDestroyOnLoad(this.gameObject);
        }
    
        // Update is called once per frame
        void Update () {
    
    
        }
    
        /// <summary>
        /// 注:这个方法在unity引擎中的动画系统中利用事件调用。下面的DestroySelf同样在Unity中调用
        /// </summary>
        public void Test()
        {
            //这里是场景切换的逻辑。
            SceneManager.LoadScene(levelIndex);
            ……
        }
    
        public void DestroySelf()
        {
            Destroy(this.gameObject);
        }
    }
    
    4.将上面的脚本添加给我们制作的prefab中,并在该prefab的动画的第1秒处的关键帧上添加事件,执行Test()函数。在动画播放完毕后的关键帧上再添加事件,执行DestroySelf()函数。表示销毁自身。
    
    至此,整个切换场景的淡入淡出效果实现完毕。但是这样做有几点是需要注意的:
    1、在需要切换场景的时候只需要生成这个Prefab即可,生成代码如下:
    
            //在场景中生成该Prefab
            GameObject go = UIManager.Instance.LoadGameObject("Others/Fade");
            GUITexture gt = go.GetComponent<GUITexture>();
            //保证GUITexture可以覆盖整个游戏屏幕
            gt.pixelInset = new Rect(-100, -100, Screen.width, Screen.height);
    2.这个淡入淡出只针对游戏内的场景有效,无法将游戏中的UI也淡入淡出。
    3.这样做会让游戏中的很多代码在工程外调用,由引擎调用,因此后期在维护时会增加成本。因此必须在调用代码时做好注释,表明这一段代码是由引擎调用的。
    
    展开全文
  • //Logo显示状态切换 private void LogoDisPlay() { if (disPlayState == DisPlayState.start) { Timer = time; disPlayState = DisPlayState.delay; } if (disPlayState == DisPlayState.delay) { ...

    public GameObject canvas;
    private Transform logoParent;
    private Transform Logo_logo; //logo一
    private Transform Logo_qmtgTrans; //logo二
    private Transform Logo_brand; //logo三
    private float Timer; //计时器
    private float time = 5f; //延迟的总时长
    private float Alpha = 1f;
    private float AlphaSpeed = 3f; //Alpha值渐变的时间,1就是对应渐变需要1秒,2就是2秒
    DisPlayState disPlayState = DisPlayState.start;
    public void Start(GameObject cav)
    {
    canvas = cav;
    disPlayState = DisPlayState.start;
    var logoParentPrafab = Resources.Load<Transform>("UIPrefabs/LogoParent");
    logoParent = GameObject.Instantiate(logoParentPrafab);
    logoParent.SetParent(canvas.transform, false);
    Logo_logo = logoParent.transform.Find("Logo_logo");
    Logo_qmtgTrans = logoParent.transform.Find("Logo_qmtg");
    Logo_brand = logoParent.transform.Find("Logo_brand");
    }

    public void Update()
    {
    LogoDisPlay();
    }
    //Logo显示状态切换
    private void LogoDisPlay()
    {
    if (disPlayState == DisPlayState.start)
    {
    Timer = time;
    disPlayState = DisPlayState.delay;
    }
    if (disPlayState == DisPlayState.delay)
    {
    DelayTime(DisPlayState.minusAlpha);
    }
    if (disPlayState == DisPlayState.minusAlpha)
    {
    if (Logo_logo != null)
    AlphaControl(true, DisPlayState.addAlpha, Logo_logo.gameObject);
    }
    if (disPlayState == DisPlayState.addAlpha)
    {
    if (Logo_brand != null)
    AlphaControl(false, DisPlayState.delay2, Logo_brand.gameObject);
    }
    if (disPlayState == DisPlayState.delay2)
    {
    DelayTime(DisPlayState.minusAlpha2);
    }
    if (disPlayState == DisPlayState.minusAlpha2)
    {
    if (Logo_brand != null)
    AlphaControl(true, DisPlayState.addAlpha2, Logo_brand.gameObject);
    }
    if (disPlayState == DisPlayState.addAlpha2)
    {
    if (Logo_qmtgTrans != null)
    AlphaControl(false, DisPlayState.delay3, Logo_qmtgTrans.gameObject);
    }
    if (disPlayState == DisPlayState.delay3)
    {
    DelayTime(DisPlayState.minusAlpha3);
    }
    if (disPlayState == DisPlayState.minusAlpha3)
    {
    if (Logo_qmtgTrans != null)
    AlphaControl(true, DisPlayState.addAlpha3, Logo_qmtgTrans.gameObject);
    }
    if (disPlayState == DisPlayState.addAlpha3)
    {
    if (Logo_logo != null)
    AlphaControl(false, DisPlayState.start, Logo_logo.gameObject);
    }
    }
    //控制Alpha值减小和增加
    private void AlphaControl(bool minus, DisPlayState nextState, GameObject _logo)
    {
    if (minus)
    {
    Alpha -= Time.deltaTime * 1 / AlphaSpeed;
    if (Alpha <= 0)
    {
    disPlayState = nextState;
    //if (_logo.name == "Logo_logo")
    //{
    // Logo_logo.gameObject.SetActive(true);
    // Logo_qmtgTrans.gameObject.SetActive(false);
    // Logo_brand.gameObject.SetActive(false);
    //}
    //else if (_logo.name == "Logo_qmtg")
    //{
    // Logo_logo.gameObject.SetActive(false);
    // Logo_qmtgTrans.gameObject.SetActive(true);
    // Logo_brand.gameObject.SetActive(false);
    //}
    //else if (_logo.name == "Logo_brand")
    //{
    // Logo_logo.gameObject.SetActive(false);
    // Logo_qmtgTrans.gameObject.SetActive(false);
    // Logo_brand.gameObject.SetActive(true);
    //}
    //else
    //{
    // Debug.LogError("Logo消失了");
    //}
    }
    _logo.GetComponent<RawImage>().color = new Color(1, 1, 1, Alpha);
    }
    else
    {
    Alpha += Time.deltaTime * 1 / AlphaSpeed;
    if (Alpha >= 1)
    {
    disPlayState = nextState;
    }
    _logo.GetComponent<RawImage>().color = new Color(1, 1, 1, Alpha);
    }
    }
    //延时并切换状态
    private void DelayTime(DisPlayState _state)
    {
    Timer -= Time.deltaTime;
    if (Timer <= 0)
    {
    disPlayState = _state;
    Timer = time;
    }
    }
    //显示Logo的各种状态枚举
    private enum DisPlayState
    {
    start,
    delay,
    minusAlpha,
    addAlpha,
    delay2,
    minusAlpha2,
    addAlpha2,
    delay3,
    minusAlpha3,
    addAlpha3,
    end
    }

    转载于:https://www.cnblogs.com/Study088/p/7451802.html

    展开全文
  • Unity帧动画 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class FrameAnimation : MonoBehaviour { public Sprite[] pictures; public bool ...

    将脚本挂载到图片上

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UI;
    
    public class FrameAnimation : MonoBehaviour
    {
    	//进行动画的图片精灵(外部拖拽至左侧)
        public Sprite[] pictures;
        public bool loop=false;//循环控制
        float frequence = 0.1f;//精灵切换频率
        float calTime = 0f;
        int index = 0;//精灵索引
        Image img;
        // Start is called before the first frame update
        void Start()
        {
            img = GetComponent<Image>();//获取组件
            img.sprite = pictures[index];
        }
    
        // Update is called once per frame
        void Update()
        {
            if (Time.time - calTime>frequence)
            {   
                if (index==pictures.Length-1)
                {
                    index = 0;
                }
                img.sprite = pictures[++index];
                calTime = Time.time;
            }       
        }
    }
    
    
    展开全文
  • using System.Collections; using System.Collections.Generic; using UnityEngine; [DisallowMultipleComponent]//只允许添加一次 [RequireComponent(typeof(SpriteRenderer))]//...//切换精灵 } } }  
  • Unity翻页书效果实现

    2021-02-28 13:56:41
    在开发过程中,由于效果的需要,可能会实现UGUI翻页书效果,动态切换图片,满足需求,这时候可以使用这个案例。 实现原理 通过拖拽方法动态模拟阴影和遮挡关系,切换图片,达到翻页书效果。 运行图片 演示视频链接...
  • ** 最近接到一个项目,非得要百叶窗切换图片,于是乎想着快速开发的原则,先去求助百度,然后最后基本上都指定到一个大佬写的shader,然后我就下载下来尝试下,结果不是很理想,可能是我不会shader的原因,效果不是...
  • 1,创建一个RawImage组件,把图片和代码挂上去。 2 ,black 是黑色图片,随意截个图就行;FadeInOut是代码。 代码如下:FadeInOut.cs using UnityEngine; using UnityEngine.SceneManagement; using UnityEn.....
  • 这应该不太陌生的吧,这就是雨松大牛Unity3D研究院里面的头像效果,最开始逛他的文章就发现这个效果有点意思,于是自己动手在Unity里面实现一个类似的效果。 其实关键就两步操作,1.实现图片的圆形裁剪,2.控制图片...
  • Unity实现图片无限循环轮播(横and竖) 先来看看效果 横 实现 介绍:只可以左右按键控制图片切换,可无限扩展图片数量 思路:首尾相连。尾图片与首图片互换位置以及动画效果 主要代码: RectTransform[] tfs;...
  • unity_NGUI_实现点击鼠标左键切换给定图集中的图片显示 1.先给定图集;2.再指定图片:(先观赏效果) 导入NGUI插件包,自动添加NGUI选项: 创建NGUI,先打开Prefab Toolbar: 拖动生成NGUI图层: 插入...
  • 可用于UGUI image渐变效果,处理图片切换,轮播等特效处理。
  • 之前写过一篇,方形头像和圆形头像的过度效果Unity随记(三) 方形头像与圆形头像的切换过度效果.当时采用的就是从中心点(0.5,0.5)为圆心,通过控制半径的长度和方形头像进行剪切的操作,文章: 但是如果需要对icon进行...
  • 1、Image组件显示的图片由SourceImage属性...2、下面利用一个定时器实现自动切换图片效果。 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public clas
  • 类似于一个刮刮乐的效果,通过射线检测Mesh上的某一点,然后是这一点上的贴图采用别的图片的一个效果 如图就是射线检测水流碰撞点,然后把脏贴图替换为干净贴图 using System.Collections; using System....
  • 实现切换鼠标图标 比较简单,但最近学习的时候遇到了,还是决定记录一下 效果图: 设置鼠标图片 设置可点击的区域和不可点击区域 我们可以通过设置射线检测指定的LayerMask层碰撞来实现 1.设置我们能够点击的Layer...
  • 最近接到一个项目,非得要百叶窗切换图片,于是乎想着快速开发的原则,先去求助百度,然后最后基本上都指定到一个大佬写的shader,然后我就下载下来尝试下,结果不是很理想,可能是我不会shader的原因,效果不是想...
  • Unity3D NGUI ATLAS制作

    千次阅读 2012-09-13 10:27:35
    使用该内容可以实现图片显示还有通过切换实现动画效果。这里主要记录一下atlas的制作过程。 首先了解atlas的参数内容。 Material: 该内容包含了图籍的图片,还有Shade信息 TP Import: 在使用TexturePacker...
  • Unity UGUI基础之Button

    2019-05-24 10:36:27
    UGUI Button 一、Button组件: Interactable(是否可用):勾选,按钮可用,取消勾选,按钮不...Sprite Swap(图片切换) Animation(执行动画)(后面有详细介绍) Target Graphic(过渡效果作用目标):可以是...
  • unity2018新功能2D Animation

    千次阅读 热门讨论 2018-12-19 19:03:00
    先上效果 1.第一步打开Window下的Package Manager,安装红框里的两个或者只安装2D Animation(因为我只用了这个,没用IK) 2.选择一张图片,进入编辑模式,选择Bone Editor,Tools栏分别是创建骨骼,创建自由骨骼...
  • 动画绘制的原理:现在屏幕中确定动画的显示区域,然后将动画中的每一帧图片按固定的时间在这个区域中按顺序切换,从而实现动画的效果。建立文件夹Textures,里面放上图片,此处我截了三张图,风怒的小鸟图片放在该...
  • 就像最早的电影,依次展示一张又一张的图片,只要这些图片是连续的并且切换的足够快,那么当然就可以骗过人的眼睛,得到细腻的动画效果(现在我们的电脑电视本质上依然是这个原理,只不过是以帧的形式表现的)‘ ...
  • <p>#unity #Shader Graphs #Shader ...突然有个想法如果把要显示的图片用遮罩这样我换精灵图片就可以做到换武器的效果,可以大大的减轻负担 <p><a href="https://link.zhihu.com/?target=...
  • 游戏引擎可以对这些图片进行切换来达到模拟二维动画的效果。 在unity3D中选中2D视角,选择正交投影,即可进行2d游戏的开发 在unity商店中下载rougelike资源 直接导入一个叶子的图片,然后并且可以通过新建一个...
  • 声明:此篇文章是个人学习笔记,并非教程,所以内容可能...2.Transition属性,此属性是用来调整UI交互的效果的,比如鼠标点击UI时出现的颜色变化、图片切换、动画切换等。 3.Navigation属性,导航属性,用户可以使用方
  • 三面翻广告牌(Trivision, Triangular Billboard)是由一组...在这篇文章里,我们就讲一下如何制作一个棱柱翻转切换图片效果。 https://en.wikipedia.org/wiki/Trivision   模拟棱柱翻转的基本,就在于将同时...
  • 有限状态机用法教程 本文提供全图文流程,中文翻译。 Chinar 坚持将简单的生活...助力快速理解 FSM 有限状态机,完成游戏状态的切换给新手节省宝贵的时间,避免采坑! Chinar 教程效果: 全文高清图片,点...
  • 四、Unity4.6UI--------------Button

    千次阅读 2015-01-25 23:37:19
    Interactable: 是否接受响应事件 Transition:鼠标过渡效果 Navigation:鼠标响应顺序? Visualize:? On Click() 指定响应鼠标事件函数 ...Color Tint:按钮使用颜色渐变 ...Sprite Swap:使用图片切换

空空如也

空空如也

1 2
收藏数 35
精华内容 14
关键字:

unity图片切换效果