首页 > Unity3D频道 > 【UGUI研究院】 > UGUI研究院之优化Image设置Tiled类型产生过多的三角形顶点 （十六）
2015
05-27

UGUI研究院之优化Image设置Tiled类型产生过多的三角形顶点 （十六）

这是我一个同事发现的方法， 首先为我的同事 – “进进” 同学点个赞！

如下图所示，将Image Type设置成Tiled来做拉伸时， unity会自动复制出很多三角形和顶点来。

UGUI研究院之优化Image设置Tiled类型产生过多的三角形顶点 （十六） - 雨松MOMO程序研究院 - 1

 

试想一下如果你的原图很小，但是拉伸的面积又很大， 那么三角形顶点数量将非常恐怖。。

我们可以用RawImage来解决这个问题。如下图所示，拉伸rawImage 后三角形 顶点的数量将不会在增加。

UGUI研究院之优化Image设置Tiled类型产生过多的三角形顶点 （十六） - 雨松MOMO程序研究院 - 2

 

注意图片类型使用Texture.

Wrap Mode 设置 Repeat。

UGUI研究院之优化Image设置Tiled类型产生过多的三角形顶点 （十六） - 雨松MOMO程序研究院 - 3

 

最后把此Texture 挂在TiledImage上即可。代码中会根据 拉伸的范围来自动的算rawImage UVRect

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
using UnityEngine;
using UnityEngine.UI;
using System.Collections.Generic;
 
[AddComponentMenu("UI/TiledImage")]
public class TiledImage:RawImage {
protected override void OnRectTransformDimensionsChange(){
base.OnRectTransformDimensionsChange();
Vector2 size=rectTransform.sizeDelta;
this.uvRect=new Rect(0,0,size.x/texture.width*canvas.scaleFactor,size.y/texture.height*canvas.scaleFactor);
}
}
 

OK ，如果您有什么好的建议 欢迎在下面给我留言！ 嘿嘿。

前几天有朋友问我， unity2D的Sprite怎么使用tiled。看看这篇文章吧，写的挺清楚的。

http://schemingdeveloper.com/2014/10/15/tiling-sprites-unity/

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

《UGUI研究院之优化Image设置Tiled类型产生过多的三角形顶点 （十六）》有 7 条评论

  1. 单腾 说：
    2017 年 10 月 17 日下午 1:53

    直接把Texture的WrapMode改成Repeat就行了,我在unity2017里面直接提示我了.

    回复
  2. 丁知成 说：
    2017 年 9 月 14 日上午 10:37

    鱼松大大，为什么我的图片没有 室友Tiled类型的Image看起来 清晰，反而模糊了呢

    回复
  3. 龙形蛇意 说：
    2017 年 2 月 4 日下午 2:01

    您好，我这里新写了一个方法http://www.cnblogs.com/drashnane/p/6361437.html ，目前Tile数量多了后还有点问题，不过暂时没想到什么更好的方法。还有您文中最后那个链接，我照图中在advance里把wrap mode设置成repeated，但是点apply后又会自动变回clamp，不知道是什么问题，我的unity版本是5.4.3p2。

    回复
  4. Chiuan 说：
    2015 年 10 月 30 日下午 10:48

    发现UGUI动一下占用了很多GC和CPU的Rebuild

    回复
  5. Yman 说：
    2015 年 6 月 3 日下午 2:39

    如果给物体绑定了自动拉伸的描点的话，会报错

    回复
  6. Colooooooo 说：
    2015 年 5 月 28 日上午 8:34

    不错，挺好的方法！

    回复

留下一个回复

你的email不会被公开。