制作类似 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. CentOS 7下ElasticSearch集群搭建案例

    最近在网上看到很多ElasticSearch集群的搭建方法,本人在这人使用Elasticsearch5.0.1版本,介绍如何搭建ElasticSearch集群并安装head插件和其他插件安装方法. 一 ...

  2. LR接口测试---webservices

    //================================================================================== /* //事务开始 lr_st ...

  3. 【C++】智能指针简述(三):scoped_ptr

    在介绍scoped_ptr之前,我们先回顾一下前两篇文章的内容. 首先,智能指针采用RAII机制,通过对象来管理指针,构造对象时,完成资源的初始化;析构对象时,对资源进行清理及汕尾. auto_ptr ...

  4. php切换版本之后 redis 安装使用

    一:redis安装Download, extract and compile Redis with: $ wget http://download.redis.io/releases/redis-3. ...

  5. Spring学习开发之路——使用JavaBean代替EJB

    Spring框架是由于软件开发的复杂性而创建的.Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情.然而,Spring的用途不仅仅限于服务器端的开发.从简单性.可测试性和松耦 ...

  6. Ubuntu安装Foxit PDF阅读器

    最近使用Ubuntu自带的PDF阅读器,发现使用体验较差,打算安装FoxitReader(可能是我习惯了Foxit和Adobe) Foxit官网 对系统平台要求如下:(支持Linux) 继续摸索了一下 ...

  7. Linux学习笔记(二) 文件管理

    了解 Linux 系统基本的文件管理命令可以帮助我们更好的使用 Linux 系统,以下介绍几个常用的文件管理命令 1.pwd pwd 是 Print Working Directory 的简写,用于显 ...

  8. out对象的使用

    out对象的使用 制作人:全心全意 out对象用于在Web浏览器内输出信息,并且管理应用服务器上的输出缓冲区.在使用out对象输出数据时,可以对数据缓冲区进行操作,及时清除缓冲区中的残余数据,为其他的 ...

  9. lastpass密码管理工具使用教程

    现在移动互联网发展异常空气,无论访问哪个平台或者网站必须要注册账号,日子久了就会发现最痛苦的就是记住这些网站的密码.因为我们不可能将所有的网站都是设置同样的的账号密码,因为国内网站用户数据库被泄露的事 ...

  10. 转一篇GCC相关的文章

    http://blog.csdn.net/dadoneo/article/details/8201403 Glibc辅助运行库 (C RunTime Library): crt0.o,crt1.o,c ...