关闭

Unity 精灵图集Shader渲染错乱

标签: unityuishader
3105人阅读 评论(1) 收藏 举报
分类:

原因

在使用 Unity 开发游戏过程中,UI 界面上的表现有着举足轻重的地位,优秀的表现效果可以让游戏增色不少。要让 UI 精灵图片有独特的表现效果,需要给图片加上特定的 Shader 着色器,这样一来就能让这个图片表现出独特的效果,比如:溶解、消失等等。然而,在使用中,因为精灵被打包到图集里面,运行起来的效果大相径庭,Shader 里面 uv 坐标不再是单个图片的坐标了,而是图集里面该图片的坐标,使得 Shader 计算错误,最终渲染错乱。

例子

当前测试版本:Unity 5.3.0
测试工程地址:https://github.com/akof1314/uGUISpriteInAtlasShader

正确的表现:

错误的表现:

包含该图片的图集:

图片位于图集的左下角,进行扭曲效果计算时,使用了图集的中心位置,导致出错。

解决

将单个图片的纹理坐标保存到 UV1 中,传递单个图片的纹理坐标和在图集中纹理坐标的比例关系。

纹理坐标

单个图片的纹理基本是(0,0),(0,1),(1,1),(1,0),UGUI 中图片控件只使用了 UV0,那么就可以将单个图片的纹理保存到 UV1 中。

继承BaseMeshEffect,重载ModifyMesh方法,代码如下:

using UnityEngine;
using UnityEngine.UI;

public class VertIndexAsUV1 : BaseMeshEffect
{
    public override void ModifyMesh(VertexHelper vh)
    {
        if (!IsActive())
            return;

        UIVertex vert = new UIVertex();
        for (int i = 0; i < vh.currentVertCount; i++)
        {
            vh.PopulateUIVertex(ref vert, i);
            vert.uv1.x = (i >> 1);
            vert.uv1.y = ((i >> 1) ^ (i & 1));
            vh.SetUIVertex(vert, i);
        }
    }
}

Shader 中加一个float2 texcoord1 : TEXCOORD1,绘制计算的时候,采用这个坐标,如下图所示:

对于简单的处理 Alpha 融合,这样就可以了。

比例关系

对于复杂的 Shader 表现,影响最终的图片绘制效果,那么还需要传递比例关系。可以直接使用 Unity 接口,获取图集里面单个图片的 UV 值,向 Shader 进行传递,代码如下所示:

Image img = GetComponent<Image>();
if (img)
{
    Vector4 uvRect = UnityEngine.Sprites.DataUtility.GetOuterUV(img.overrideSprite);
    m_Graphic.material.SetVector("_UvRect", uvRect);
}

Shader 里面通过单个图片的 UV 坐标,反推出图集里面的 UV 坐标,如下图所示:

结语

对于很多 Shader 算法,都是使用 UV 坐标去计算的,当遇到图集,那么就需要从计算的坐标,反推到真实的坐标。

Github 地址:https://github.com/akof1314/uGUISpriteInAtlasShader

1
0
查看评论

Unity动态字体模糊的原因和解决办法

原因:在Unity的动态字体中,如果滑动一个列表,会有新的文字加入渲染,字体材质会更新。在这个过程中,会有字体模糊的现象出现。 解决:解决这问题的方法其实很简单,只需要预先把这些文字统统放到一个Label中,然后去掉它的碰撞并且让透明度变成0就可以了。这样Unity就会预先将这些字统统刷到...
  • StupidCodeGenerator
  • StupidCodeGenerator
  • 2014-06-03 09:22
  • 5309

unity开发遇到的几个坑(UGUI等)

总结一些unity现有版本中遇到的坑。
  • rcfalcon
  • rcfalcon
  • 2015-01-13 15:47
  • 71440

unity3D 5 学习 脚本文件拖拽进对象报错原因分析

脚本名称与类名称不一致
  • u014133338
  • u014133338
  • 2016-12-30 10:51
  • 440

Unity之Shader过滤掉不带Alpha通道贴图的背景颜色 - 四

过滤掉不带Alpha通道贴图的黑色背景颜色,屏蔽掉光照影响(改变光源的颜色模型贴图颜色不受影响)代码如下方法一Shader "Custom/NewShader2" { Properties { _MainTex ("Base (RGB)"...
  • LIQIANGEASTSUN
  • LIQIANGEASTSUN
  • 2015-04-09 14:00
  • 4544

unity3d Mecanim武器骨骼动画错位解决方法

这几天开始做游戏中跟动画相关的部分了,此次新项目我们决定一次从新开始,就是能用新的东西就都用新的东西,没有必要总是把自己局限在之前的认知里头,所以此次我们大胆而又现实的采用了Unity 4.x版本新增的Mecanim动画系统,并且我们果断地又选择了使用Humanoid动画类型。好吧,一切从新开始。 ...
  • qq617119142
  • qq617119142
  • 2015-01-09 23:29
  • 4235

Unity_物体方向错乱问题与Space的关系与解决方法

以物体向前走的案例来说明 物体旋转时错位的情况也可以参考本文物体的正前方与世界的正前方重合时,不会发生错位void Update () { //获取坐标 float ver= Input.GetAxis("Vertical");...
  • wd1161728437
  • wd1161728437
  • 2017-08-19 16:04
  • 323

Unity编辑器下 图集内精灵的获取

孙广东 2015.12.11Unity中的图集打包工具没有提供这个功能。  没有更好的方法。可以选择图集, 查看里面的都包括哪些资源然后可以点击资源, 就会在 Project 面板中选择到指定的资源了。using UnityEngine; using UnityEditor; using ...
  • u010019717
  • u010019717
  • 2016-08-29 22:12
  • 1503

unity使用texturepack更新图片时图片错位的解决

texturepack,这个工具可以讲许多张散图合并成一张大图,同时生成一个plist文件,该文件记录了原先三图所在生成的大图中的坐标以及大小什么的,这个工具在cocos2d-x上是很方便的。而在unity上呢?unity官方时自带了一个切图工具的,如下图,选中一张图片,在它的inspector中将...
  • lj820348789
  • lj820348789
  • 2015-11-23 22:52
  • 1695

Unity3D使用动态字库字体错位

转载自:http://blog.csdn.net/u012091672/article/details/17414811 NGUI讨论群:333417608 这个博客解决的是Label各种碎的问题(显示文字不对),如果是模糊的话不要看这个。 方法1: 升级Unity到4.3版本以...
  • yuxikuo_1
  • yuxikuo_1
  • 2015-11-23 21:38
  • 985

Unity通过prefab动态创建UI时出现错位/Scale = 0.5555

具体原因不明 在setparent时将worldPositionStays设置为false可解决 GameObject prefab = Instantiate( Resources.Load("prefabs/" + database[mylevelnum])); pr...
  • noootwo
  • noootwo
  • 2018-01-16 10:56
  • 22
    个人资料
    • 访问:3554467次
    • 积分:36068
    • 等级:
    • 排名:第137名
    • 原创:402篇
    • 转载:88篇
    • 译文:5篇
    • 评论:3425条
    个人说明
    联系方式:
    文章存档
    最新评论