material之UV，offset，tiling

最新推荐文章于 2025-01-17 22:30:23 发布

惊风无尘

最新推荐文章于 2025-01-17 22:30:23 发布

阅读量5.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Unity3D 文章标签： unity

本文链接：https://blog.youkuaiyun.com/long2324066440/article/details/50916615

Unity3D 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了Unity中如何通过改变纹理的偏移(offset)和平铺(tiling)参数来实现纹理动画效果。通过具体示例，解释了这些参数如何影响纹理在三维模型上的显示，并提供了一个动画脚本实例，演示如何动态地更新纹理的位置和大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

UV坐标系如图：
这里写图片描述
offset指定使用贴图的起始位置，取值范围[0,1]

tiling：从offset位置处开始平铺图片，超过的部分（即空白处）会按比例生成新的区域拼接
到空白处。取值范围[-1,1]
在unity中建一个cube，新增一个用下图填充的材质球，改变offset和tiling的值，你就会明白为什么。
这里写图片描述
假设：offset的x和y的值分别为（0.1,0.25），则可以理解为u起始位置为为0.1，v的起始位置为0.25，u的终止位置为1.1，v的起始位置为1.25。
而实际图片的UV值为0到1，则超过1的部分会取余，变成（1%1,1.1%1）即（0，0.1）。所以的显示分别为[0.1,1)[1,0.1] [0.25,1)[1,0.25];
如下图：
这里写图片描述

假设：tiling的值为(0.25,1);
则表示用图片宽的1/4(0.25)倍，图片的高不变来填充正方体的面，U大于0表示从图片的左边开始。

如果tiling的值为（-0.25,1）
则表示从图片右边开始取1/4部分来平铺正方体的面，也就图片放大了4倍。
附加一个通过改变图片UV的动画脚本，来源：Extended”>http://wiki.unity3d.com/index.php/Animating_Tiled_texture-_Extended

using UnityEngine;
using System.Collections;

public class AnimatedTextureExtendedUV : MonoBehaviour
{

    //vars for the whole sheet
    public int colCount =  4;
    public int rowCount =  4;

    //vars for animation
    public int  rowNumber  =  0; //Zero Indexed
    public int colNumber = 0; //Zero Indexed
    public int totalCells = 16;
    public int  fps     = 10;
    //Maybe this should be a private var
    private Vector2 offset;
    //Update
    void Update () 
    {
        SetSpriteAnimation(colCount,rowCount,rowNumber,colNumber,totalCells,fps); 
    }


    //SetSpriteAnimation
    void SetSpriteAnimation(int colCount ,int rowCount ,int rowNumber ,int colNumber,int totalCells,int fps )
    {

        // Calculate index
        int index  = (int)(Time.time * fps);
        // Repeat when exhausting all cells
        index = index % totalCells;

        // Size of every cell
        float sizeX = 1.0f / colCount;
        float sizeY = 1.0f / rowCount;
        Vector2 size =  new Vector2(sizeX,sizeY);

        // split into horizontal and vertical index
        var uIndex = index % colCount;
        var vIndex = index / colCount;

        // build offset
        // v coordinate is the bottom of the image in opengl so we need to invert.
        float offsetX = (uIndex+colNumber) * size.x;
        float offsetY = (1.0f - size.y) - (vIndex + rowNumber) * size.y;
        Vector2 offset = new Vector2(offsetX,offsetY);

        renderer.material.SetTextureOffset ("_MainTex", offset);
        renderer.material.SetTextureScale  ("_MainTex", size);
    }
}