Sprite动画效果实现

2D游戏中通过短时间内快速切换贴图来实现动画效果。为了减少贴图数量,可以合并为一张贴图,根据时间来修改UV坐标,达到和切换贴图一样的效果。

在UnityShader的Properties块中,定义属性:

Properties {
    _MainTex ("Base (RGB)", 2D) = "white" {}
    _CellAmount ("Cell Amount", float) = 0.0
    _Speed ("Speed", float) = 12
}

这里定义了合并后的贴图、子贴图数量和切换动画的速度。

在CG代码中可以这么写:

float spriteUV = IN.uv_MainTex;    //得到UV坐标

float cellUVPercentage = 1.0 / _CellAmount;  //每个单元格占有的百分比

float timeVal = fmod(_Time.y * _Speed, _cellAmount);    //按照时间获取当前需要展示的单元格
timeVal = ceil(timeVal);    //向上取整,得到单元格的下标

float xValue = spriteUV.x;
xValue += timeVal;
xValue *= cellUVPercentage;    //修正UV,加上offset
spriteUV = float2(xValue, spriteUV.y);

这里没有修改UV的y分量,如果我们合并的贴图是按grid方式排列,那么是需要对y也做类似操作。

代码部分的主要难点是如何做修正。先求出每一cell所占的百分比cellUVPercentage,如8张贴图并排合并成一张贴图,那么cellUVPercentage=1.0/8=0.125。

第一个cell的区间:0 - 0.125

第二个cell的区间:0.125 - 0.25

......

第八个cell的区间:0.875 - 1.0

所以按照时间分别取得0,1,2,3,...,7,0,1,2,3,....。

原文地址:https://www.cnblogs.com/dreamnwx1/p/9674450.html

时间: 2024-10-20 04:15:20

Sprite动画效果实现的相关文章

子弹射中敌人播放爆炸并销毁的动画效果

首先在敌人enemy 的脚本下面 public class enemy : MonoBehaviour { public EnemyType type=EnemyType.enemy0; private float time = 0; public int framePerSecond = 10; public Sprite[] enemyExplosionArray; //存放动画帧的数组 private SpriteRenderer spriteRenderer; //用于得到动画效果 pu

15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) 9. 3D Synth Pure CSS 3D Synthesizer (mousedown for rotation

多种方法实现Loading(加载)动画效果

当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次. 既能让用户知道正在提交中,也能防止二次提交,好处多多呢. 上面的这个圈圈是会滚动的.简单点的话,可以直接用GIF动态图片实现.不过现在已经有了CSS3和HTML5了,多了好几种高大上的实现方式. 这里先来介绍几个动画的在线demo,第一个是HTML5 Boilerplate中的Effeckt.css,第二个是Animate.css. 下面一一列出,如果要结合按钮的话,可自行修改下CSS或JS等文件

赞!15个来自 CodePen 的酷炫 CSS 动画效果

CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) 1. JavaScript Mickey Watch Apple watch like Mickey watch by

(转)多种方法实现Loading(加载)动画效果

当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次. 既能让用户知道正在提交中,也能防止二次提交,好处多多呢. 上面的这个圈圈是会滚动的.简单点的话,可以直接用GIF动态图片实现.不过现在已经有了CSS3和HTML5了,多了好几种高大上的实现方式. 这里先来介绍几个动画的在线demo,第一个是HTML5 Boilerplate中的Effeckt.css,第二个是Animate.css. 下面一一列出,如果要结合按钮的话,可自行修改下CSS或JS等文件

iOS点击查看大图的动画效果

对于图片来说,除了表情包,几乎都会被点击查看大图.今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图.大图会从小图的位置和大小"弹"出来,同时背景变成半透明的阴影.点击大图或者阴影后,收起大图,同样地弹回到小图去,同时去掉阴影背景,就像是一张图片在伸大缩小一样. 现在看看这是怎么实现的.在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了

iOS 之动画效果

/** type *  各种动画效果  其中除了'fade', `moveIn', `push' , `reveal' ,其他属于私有的API. *  ↑↑↑上面四个可以分别使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'来调用. *  @"cube"                     立方体翻滚效果 *  @"moveIn"    

Core Animation 动画效果介绍

在开始之前呢,先了解一下UIView和CALayer大体的区别(重点列举了以下四点): UIView继承自 UIResponder,因此UIView 可以处理响应事件,而CALayer继承自NSObject,所以它只是负责内容的创建,绘制. UIView负责对内容的管理,而CALayer则是对内容的绘制 UIView中有关位置的属性只有frame.bounds.center,而CALayer除了具备这些属性之外还有anchorPoint.position. 通过修改CALayer可以实现UIVi

带感”的边框交互动画效果

  效果的原理其实就是"四条边"发生宽度和高度的变化,上下两边是宽度变化,左右两边是高度的变化: 它们发生变化的方向也可以可控的,根据坐标设置即可控制. 下面我们直接上代码: 首先准备基础代码,那四条边并不是真正的border,而是通过标签加以宽高写出来,然后定位到四个方向: <!-- html --> <div class="box"> <div class="topL"></div> <d