Unity之2D Sprite Outline外轮廓效果
操作系统:Windows8.1
显卡:Nivida GTX965M
开发工具:Unity5.3.8f1
Unity提供了2D Object Sprite对象,但是没有提供外轮廓Outline效果的支持,本次将会使用扩展版本的默认sprite着色器以及一个简单的组件来添加sprite的轮廓。这可以用于突出鼠标上的精灵,突出显示环境中的元素,或仅仅使精灵从周围环境中脱颖而出。
首先,在您的项目中创建一个名为Sprite-Outline的新着色器。 这个着色器提供了默认sprite着色器的所有功能,并添加了sprite轮廓。
Shader "Sprites/Outline"
{
Properties
{
[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Color ("Tint", Color) = (,,,)
[MaterialToggle] PixelSnap ("Pixel snap", Float) = // Add values to determine if outlining is enabled and outline color.
[PerRendererData] _Outline ("Outline", Float) =
[PerRendererData] _OutlineColor("Outline Color", Color) = (,,,)
} SubShader
{
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
"PreviewType"="Plane"
"CanUseSpriteAtlas"="True"
} Cull Off
Lighting Off
ZWrite Off
Blend One OneMinusSrcAlpha Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile _ PIXELSNAP_ON
#pragma shader_feature ETC1_EXTERNAL_ALPHA
#include "UnityCG.cginc" struct appdata_t
{
float4 vertex : POSITION;
float4 color : COLOR;
float2 texcoord : TEXCOORD0;
}; struct v2f
{
float4 vertex : SV_POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
}; fixed4 _Color;
float _Outline;
fixed4 _OutlineColor; v2f vert(appdata_t IN)
{
v2f OUT;
OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);
OUT.texcoord = IN.texcoord;
OUT.color = IN.color * _Color;
#ifdef PIXELSNAP_ON
OUT.vertex = UnityPixelSnap (OUT.vertex);
#endif return OUT;
} sampler2D _MainTex;
sampler2D _AlphaTex;
float4 _MainTex_TexelSize; fixed4 SampleSpriteTexture (float2 uv)
{
fixed4 color = tex2D (_MainTex, uv); #if ETC1_EXTERNAL_ALPHA
// get the color from an external texture (usecase: Alpha support for ETC1 on android)
color.a = tex2D (_AlphaTex, uv).r;
#endif //ETC1_EXTERNAL_ALPHA return color;
} fixed4 frag(v2f IN) : SV_Target
{
fixed4 c = SampleSpriteTexture (IN.texcoord) * IN.color; // If outline is enabled and there is a pixel, try to draw an outline.
if (_Outline > && c.a != ) {
// Get the neighbouring four pixels.
fixed4 pixelUp = tex2D(_MainTex, IN.texcoord + fixed2(, _MainTex_TexelSize.y));
fixed4 pixelDown = tex2D(_MainTex, IN.texcoord - fixed2(, _MainTex_TexelSize.y));
fixed4 pixelRight = tex2D(_MainTex, IN.texcoord + fixed2(_MainTex_TexelSize.x, ));
fixed4 pixelLeft = tex2D(_MainTex, IN.texcoord - fixed2(_MainTex_TexelSize.x, )); // If one of the neighbouring pixels is invisible, we render an outline.
if (pixelUp.a * pixelDown.a * pixelRight.a * pixelLeft.a == ) {
c.rgba = fixed4(, , , ) * _OutlineColor;
}
} c.rgb *= c.a; return c;
}
ENDCG
}
}
}
现在创建一个名为SpriteOutline的材质,并在检查器中分配新创建的着色器。
接下来创建一个新的C#脚本并将其命名为SpriteOutline。 该组件将在编辑器和运行时处理更新我们的材质,关闭或打开轮廓效果,还可以更改轮廓颜色。 也可以在动画中使用此组件,以启用或禁用特定动画帧的轮廓或更改轮廓颜色。
using UnityEngine; [ExecuteInEditMode]
public class SpriteOutline : MonoBehaviour { public Color color = Color.white; private SpriteRenderer spriteRenderer; void OnEnable () {
spriteRenderer = GetComponent<SpriteRenderer>(); UpdateOutline(true);
} private void OnDisable()
{
UpdateOutline(false);
} // Update is called once per frame
void Update () {
UpdateOutline(true);
} void UpdateOutline(bool outline)
{
MaterialPropertyBlock block = new MaterialPropertyBlock();
spriteRenderer.GetPropertyBlock(block);
block.SetFloat("_Outline", outline ? 1f : );
block.SetColor("_OutlineColor", color);
spriteRenderer.SetPropertyBlock(block);
}
}
现在,基本工作完成了,添加了一些精灵到你的场景。 将SpriteRenderer组件的材质字段更改为上面创建的SpriteOutline材质。 您还需要将SpriteOutline组件添加到此游戏对象中,以默认显示白色轮廓。 要隐藏轮廓,只需禁用或删除组件。
随着所有的完成,你现在应该有一个黄色轮廓的精灵。 在检查view中,您可以独立于SpriteRenderer颜色将颜色更改为任何您想要的颜色。 自定义着色器还维护默认sprite着色器的所有现有功能。
大功告成,效果如图所示!
Unity之2D Sprite Outline外轮廓效果的更多相关文章
- [ShaderStaff] Sprite Outline外轮廓效果
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Unity5.3.8f1 Unity提供了2D Object Sprite对象,但是没有提供外轮廓Outline效果的支持 ...
- Unity中实现网格轮廓效果,选中边框效果
问题背景: 最近要实现选中实体的高亮效果,要那种类似于unity中Outline的效果,网格轮廓高亮效果. 效果图: 具体代码: OutlineEffect.cs 实体高亮效果类: 轮廓边总控制类,该 ...
- CSS3外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者 ...
- Unity Chan 2D Asset
Unity Chan 2D Asset 4月份時,UNITY CHAN 官方網站推出了3D大島こはく,之後也有更新1.11版,而在六月12日時,則釋出了2D版本素材,一樣可以在UNITY CHAN 官 ...
- CSS控制边界、边框与外轮廓
一.CSS控制边界 1.内边距 padding(内边距也叫内填充) padding-bottom 长度/百分比 元件下端边线的空隙 padding-left 长度/百分比 元件左端边线的空隙 padd ...
- CSS Outline(轮廓)
CSS Outline(轮廓) 一.CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. CSS outline 属性规定元素轮廓 ...
- Siki_Unity_1-8_使用Unity开发2D游戏_PongGame
Unity 1-8 使用Unity开发2D游戏 PongGame 任务1:演示 http://pan.baidu.com/s/1pKUHsev; up2i 任务2:案例介绍 创建PongGame,注意 ...
- canvas绘制图像轮廓效果
在2d图形可视化开发中,经常要绘制对象的选中效果. 一般来说,表达对象选中可以使用边框,轮廓或者发光的效果. 发光的效果,可以使用canvas的阴影功能,比较容易实现,此处不在赘述. 绘制边框 绘制 ...
- unity 之2D游戏简单操作
unity 做2D项目也很方便. 首先要调整camera的模式,camera 的检视面板参数如下: perspective 模式就是平时用的 模式.摄像机到游戏物体是有角度的张开, 而 orthog ...
随机推荐
- (转)Java线程面试题 Top 50
原文链接:http://www.importnew.com/12773.html 本文由 ImportNew - 李 广 翻译自 javarevisited.欢迎加入Java小组.转载请参见文章末 ...
- 6.Java集合总结系列:常见集合类的使用(List/Set/Map)
MARK 总结: Set.List 和 Map 可以看做集合的三大类. List集合是有序集合,集合中的元素可以重复,访问集合中的元素可以根据元素的索引来访问. Set集合是无序集合,集合中的元素不可 ...
- salesforce 零基础学习(六十八)http callout test class写法
此篇可以参考: https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_classes_restfu ...
- 不可不知的 Android strings.xml 那些事
相信 strings.xml 已经是大家在 Android 开发中最熟悉的文件之一了,但其实它也有很多需要注意的地方和一些小技巧,知道了这些可以让你的 Android 应用更加规范易用,大家来看看吧. ...
- 最近公共祖先LCA(Tarjan算法)的思考和算法实现
LCA 最近公共祖先 Tarjan(离线)算法的基本思路及其算法实现 小广告:METO CODE 安溪一中信息学在线评测系统(OJ) //由于这是第一篇博客..有点瑕疵...比如我把false写成了f ...
- 因为文件组 'PRIMARY' 已满 解决办法
简介:文件组 'PRIMARY' 已满 一般虚拟主机提供商是通过限制数据库文件的大小来实现提供定制的数据库空间的.当你把从虚拟数据库空间备份下来的文件恢复到自己的服务器上时,这个限制还是存在的.找到数 ...
- Linux-进程描述(3)之进程状态僵尸进程与孤儿进程
进程状态 进程状态反映进程执行过程的变化.这些状态随着进程的执行和外界条件的变化而转换.为了弄明正正在运行的进程是什么意思,我们需要知道进程的不同状态.一个进程可以有多个状态(在Linux内核中,进程 ...
- angular directive
1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式被声明: 取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A: E(元素):<directiveName ...
- ue4构建光照失败问题与解决
不知从哪天开始,我的ue4.13就突然无法成功构建光照了, 症状为:虽然swarm连接到了100%,然而之后就卡住一动不动,一看看log是连接tcp什么agent什么失败的. 虽然把所有物体都设置成非 ...
- JS比较思维模型
在这里,要分享的JS中两种思维方式: 1)面向对象风格示例: function Foo(who){ this.me = who; } Foo.prototype.identify = function ...