制作类似 RPG 游戏时,可能会须要显示小地图。

小地图的制作一种方式是用还有一个摄像机来渲染到一张纹理上。实时显示到UI界面。

以Unity 5.0 的 UI 系统为例:
在地图正上方放置一个摄像机,设置其 Culling Mask,比方:Ground(地面)、MinimapSign(玩家怪物标识),创建一张 Render Texture,将 Target Texture 属性指向这张纹理图片。例如以下图所看到的:

创建 UI 面板。由于这里小地图打算制作成圆形,使用 Mask 组件和一张掩码图片能够达到这个效果。

如上图的 MapMask 物体加入 RawImage 指向掩码图片,加入 Mask 组件。例如以下图所看到的:


其下的 RawImage 物体即是用来绘制小地图纹理,将其 Texture 属性指向小地图纹理图片就可以,例如以下图所看到的:

执行效果例如以下图所看到的:


但是当场景中使用水效果的话,水没有绘制到小地图中,例如以下图所看到的:

可是摄像机生成的纹理,却是有绘制的,例如以下图所看到的:

那么应该是绘制到 UI 上时,出现了错误。查看 UI 所使用的默认 Shader ,发现它採用了混合 Blend SrcAlpha OneMinusSrcAlpha,那么可能是由于原图中的水部分Alpha通道为0,使得 Alpha 混合时产生透明效果。将水材质的 Horizon Color 的 Alpha 值改为
255,例如以下图所看到的:

最后效果例如以下图所看到的:


另外,使用 Mask组件 虽比較方便,可是不够平滑,也能够写 Shader 来实现 Mask功能。详细内容对 UI-Default.shader 进行拷贝稍加改动。命名为 MaskShader.shader,内容例如以下:
 Shader Code 
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94
Shader "UIEx/Default-Mask"

{

    Properties

    {

        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}

        _Mask ("Mask Texture", 2D) = "white" {}

        _Color ("Tint", Color) = (1,1,1,1)



        _StencilComp ("Stencil Comparison", Float) = 8

        _Stencil ("Stencil ID", Float) = 0

        _StencilOp ("Stencil Operation", Float) = 0

        _StencilWriteMask ("Stencil Write Mask", Float) = 255

        _StencilReadMask ("Stencil Read Mask", Float) = 255



        _ColorMask ("Color Mask", Float) = 15

    }



    SubShader

    {

        Tags

        {

            "Queue"="Transparent"

            "IgnoreProjector"="True"

            "RenderType"="Transparent"

            "PreviewType"="Plane"

            "CanUseSpriteAtlas"="True"

        }



        Stencil

        {

            Ref [_Stencil]

            Comp [_StencilComp]

            Pass [_StencilOp]

            ReadMask [_StencilReadMask]

            WriteMask [_StencilWriteMask]

        }



        Cull Off

        Lighting Off

        ZWrite Off

        ZTest [unity_GUIZTestMode]

        Blend SrcAlpha OneMinusSrcAlpha

        ColorMask [_ColorMask]



        Pass

        {

        CGPROGRAM

            #pragma vertex vert

            #pragma fragment frag

            #include "UnityCG.cginc"



            struct appdata_t

            {

                float4 vertex   : POSITION;

                float4 color    : COLOR;

                float2 texcoord : TEXCOORD0;

            };



            struct v2f

            {

                float4 vertex   : SV_POSITION;

                fixed4 color    : COLOR;

                half2 texcoord  : TEXCOORD0;

            };



            fixed4 _Color;



            v2f vert(appdata_t IN)

            {

                v2f OUT;

                OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);

                OUT.texcoord = IN.texcoord;

#ifdef UNITY_HALF_TEXEL_OFFSET

                OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);

#endif

                OUT.color = IN.color * _Color;

                return OUT;

            }



            sampler2D _MainTex;

            sampler2D _Mask;



            fixed4 frag(v2f IN) : SV_Target

            {

                half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;

                // clip (color.a - 0.01);

                half4 color2 = tex2D(_Mask, IN.texcoord);

                return fixed4(color.r, color.g, color.b, color2.r);

            }

        ENDCG

        }

    }

}
创建材质,设置为这个Shader。设置其 Mask图片,例如以下图所看到的:

设置小地图 Raw Image 组件的属性,其 Material 指向这个材质,例如以下图所看到的:

终于效果对照方下:

Unity uGui RawImage 渲染小地图的更多相关文章

  1. Unity UGUI图文混排源码(二)

    Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...

  2. Unity UGUI实现图文混排

    目前在unity实现图文混排的好像都是通过自定义字体然后在文本获取字符的位置,用图片替换掉图片标签,这样对于支持英文来说,并没有什么影响.然后对于中文来说就是一个相当麻烦的事了,毕竟图文混排多用于游戏 ...

  3. Unity UGUI

    超详细的基础教程传送门:(持续更新中) Unity UGUI之Canvas&EventSystem:http://blog.csdn.net/qq992817263/article/detai ...

  4. Unity UGUI —— 无限循环List

    还记得大学毕业刚工作的时候是做flash的开发,那时候看到别人写的各种各样的UI组件就非常佩服,后来自己也慢慢尝试着写,发现其实也就那么回事.UI的开发其实技术的成分相对来说不算多,但是一个好的UI是 ...

  5. Unity UGUI图文混排(五) -- 一张图集对应多个Text

    继上一篇说的更新了一张图集对应多个Text的功能,为了节省资源嘛 这里,但是也没有舍弃之前的一个Text一个图集,因为我感觉应该两个都有用,于是我重新写了一个脚本 1.其实大体跟前面的都没变,解析标签 ...

  6. Unity UGUI图文混排源码(三) -- 动态表情

    这里是根据图文混排源码(二)进一步修改的,其他链接也不贴了,就贴一个链接就好了,第一次看这文章的同学可以先去看看其他几篇文章 Unity UGUI图文混排源码(二):http://blog.csdn. ...

  7. Unity UGUI图文混排源码(一)

    Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...

  8. Unity UGUI Layout自动排版组件用法介绍

    Unity UGUI布局组件 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...

  9. Curved UI - VR Ready Solution To Bend Warp Your Canvas 1.7,1.8,2.2,2.3 四种版本压缩包(Unity UGUI曲面插件),可以兼容VRTK

    Curved UI - VR Ready Solution To Bend Warp Your Canvas 1.7,1.8,2.2,2.3 四种版本压缩包(Unity UGUI曲面插件) 可以兼容V ...

随机推荐

  1. Meta标签 h5

    一  PC端meta标签 1 页面关键词 <meta name="keywords" content="your tags"> 2 页面描述 < ...

  2. 常用css属性总结

    边框修饰:border------>top,bottom,left,right上下左右边框 分为:color,类型style{ groove,dashed,ridge,solid}一个值---- ...

  3. navicat创建存储过程报错

    搞了半天这个恶心的报错,最后发现竟然是存储过程的一个varchar类型的参数没给长度,如varchar(64)长度必须指定不然就会报错: mark一记

  4. 6.14 提取第n个分割的子串

    问题:从字符串中提取出一个指定的.由分割符隔开的子字符串.create view v as select 'mo,larry,curly' as namefrom t1union allselect ...

  5. 如何让一个div里面的div垂直居中?

    如何让一个div里面的div垂直居中? 如何让上面灰色有文字那个div和背景图标垂直居中,不管屏幕大小有好大,始终在垂直方向上的中间.上面有整个布局和样式表,谢谢高手指点 CSS3时代当然要用CSS3 ...

  6. (转)Hibernate框架基础——一对多关联关系映射

    http://blog.csdn.net/yerenyuan_pku/article/details/52746413 上一篇文章Hibernate框架基础——映射集合属性详细讲解的是值类型的集合(即 ...

  7. C++_运算符重载 总结

    什么是运算符的重载? 运算符与类结合,产生新的含义. 为什么要引入运算符重载? 作用:为了实现类的多态性(多态是指一个函数名有多种含义) 怎么实现运算符的重载? 方式:类的成员函数 或 友元函数(类外 ...

  8. Mybatis与Spring整合方法

    实现mybatis与spring进行整合,通过spring管理SqlSessionFactory.mapper接口. tips:mybatis官方提供与mybatis与spring整合jar包. 一. ...

  9. JAVA基础——集合Iterator迭代器的实现

    一.迭代器概述 1.什么是迭代器? 在Java中,有很多的数据容器,对于这些的操作有很多的共性.Java采用了迭代器来为各种容器提供了公共的操作接口.这样使得对容器的遍历操作与其具体的底层实现相隔离, ...

  10. 数字图像处理技术在TWaver可视化中的应用

    数字图像处理(Digital Image Processing)又称为计算机图像处理,它是指将图像信号转换成数字信号并利用计算机对其进行处理的过程.常用的图像处理方法有图像增强.复原.编码.压缩等,数 ...