Страница 1 из 1

Как лучше реализовать анимацию направления потока

СообщениеДобавлено: 10 июн 2018, 00:26
cfif
в этом видео на 15-й секунде показана анимация направления движения нефтепродуктов по трубопроводам.


как лучше реализовать анимацию таких стрелок. Думаю копать в сторону движения по сплайну - создаю плоские объекты в виде стрелок в начале сплайна и направляю их по этому сплайну, а в конце - уничтожаю стрелку.
Но может можно их направить по самому трубопроводу, чтобы лишних сплайнов не добавлять - их у меня толпа.
А может есть еще какие варианты?

Re: Как лучше реализовать анимацию направления потока

СообщениеДобавлено: 10 июн 2018, 09:42
Cr0c
Второй uv сделать и на нём офсет текстуры со стрелками двигать

Re: Как лучше реализовать анимацию направления потока

СообщениеДобавлено: 15 июн 2018, 20:06
BFZ
Cr0c писал(а):Второй uv сделать и на нём офсет текстуры со стрелками двигать

А у вас случайно нет шейдера который умеет такое делать?

Я тоже интересуюсь этим вопросом, но в шейдерах не соображаю вообще, и тот вариант который получился у меня сейчас - совсем не устраивает.
Правда мне это нужно именно для UI картинок, я хочу сделать, что-бы по спрайту монеты пробегал спрайт полоски типа блеска.
Вот что-то подобное мне нужно наверное, только все эти доп. опции не обязательны, надо просто чтобы также полоска бегала по основному спрайту.
10$ отдавать за шейдер жаба прям душит.

Мой вариант который использую сейчас, частями выдран из разных других шейдоров и туториалов, и он не умеет в VertexLit рендере работать, только в форварде, да и так криво работает(сама текстура с блеском хреново накладывается).


Да, шейдер я конечно слишком жирно запросил, может хотя-бы урок или туториал видели, в котором реализуется подобное?

Re: Как лучше реализовать анимацию направления потока

СообщениеДобавлено: 16 июн 2018, 11:12
cfif
Cr0c писал(а):Второй uv сделать и на нём офсет текстуры со стрелками двигать


спасибо за идею, буду копать в этом направлении!

Re: Как лучше реализовать анимацию направления потока

СообщениеДобавлено: 16 июн 2018, 13:40
Cr0c
BFZ писал(а):Правда мне это нужно именно для UI картинок, я хочу сделать, что-бы по спрайту монеты пробегал спрайт полоски типа блеска.

UI и свет не пересекаются же. Монетка анимированная? Блеск независимо от спрайта анимации накладывается?

Re: Как лучше реализовать анимацию направления потока

СообщениеДобавлено: 16 июн 2018, 14:01
BFZ
Cr0c писал(а):
BFZ писал(а):Правда мне это нужно именно для UI картинок, я хочу сделать, что-бы по спрайту монеты пробегал спрайт полоски типа блеска.

UI и свет не пересекаются же. Монетка анимированная? Блеск независимо от спрайта анимации накладывается?

Там один тег был ненужный оказывается. Сейчас работает и на vertexLit

Вот такой вариант вышел на данный момент:
Синтаксис:
Используется glsl
Shader "Custom/ScrollTexture" {
        Properties {
                [PerRendererData] _MainTex("Sprite", 2D) = "white" {}
                [PerRendererData] _Color("Sprite Tint", Color) = (1,1,1,1)

                _ScrollColor("Scroll Tint", Color) = (1,1,1,1)
                _ScrollTex("Scroll Texture", 2D) = "black" {}
                _ScrollOpacity("Scroll Opacity", Range(0, 1)) = 1
                _ScrollX("Scroll X", Range(-1, 1)) = 0
                _ScrollY("Scroll Y", Range(-1, 1)) = 0
        }
       
        SubShader {
                Pass {
                        Blend SrcAlpha OneMinusSrcAlpha
                        Cull Off
                        ZWrite Off
                        CGPROGRAM

                        #pragma vertex vert
                        #pragma fragment frag
                        #include "UnityCG.cginc"
                               
                        uniform sampler2D _MainTex; uniform float4 _MainTex_ST;
                        uniform sampler2D _ScrollTex; uniform float4 _ScrollTex_ST;
                        uniform half _ScrollOpacity;
                        uniform half4 _ScrollColor;
                        uniform half _ScrollX;
                        uniform half _ScrollY;
                        uniform half4 _Color;

                        struct VertexInput {
                                float4 vertex : POSITION;
                                float3 normal : NORMAL;
                                float2 texcoord0 : TEXCOORD0;
                                float4 vertexColor : COLOR;
                        };

                        struct VertexOutput {
                                float4 pos : SV_POSITION;
                                float2 uv0 : TEXCOORD0;
                                float4 posWorld : TEXCOORD1;
                                float3 normalDir : TEXCOORD2;
                                float4 vertexColor : COLOR;
                        };

                        half2 Scroll(float2 uv, half x, half y) {
                                return half2(uv.r + _Time.y * x, uv.g + _Time.y * y);
                        }

                        half3 Blend(half4 tt, half3 tc, half3 tint) {
                                tt.rgb *= tint;
                                return lerp(tt.rgb, tc, ((tt.a - 1) * -1));
                        }

                        VertexOutput vert(VertexInput v) {
                                VertexOutput o = (VertexOutput)0;
                                o.uv0 = v.texcoord0;

                                o.vertexColor = v.vertexColor * _Color;
                                o.normalDir = UnityObjectToWorldNormal(v.normal);
                                o.posWorld = mul(unity_ObjectToWorld, v.vertex);
                                o.pos = UnityObjectToClipPos(v.vertex);
                                return o;
                        }

                        float4 frag(VertexOutput i) : COLOR {
                                half _time = _Time.w;
                                half2 scrollUV = Scroll(i.uv0, _ScrollX, _ScrollY);
                                half4 mainTexture = tex2D(_MainTex, TRANSFORM_TEX(i.uv0, _MainTex));
                                half3 canvas = mainTexture.rgb * i.vertexColor.rgb;

                                half4 scrollTex = tex2D(_ScrollTex, TRANSFORM_TEX(scrollUV, _ScrollTex));
                                scrollTex.rgb = Blend(scrollTex, canvas, _ScrollColor.rgb);

                                canvas = lerp(canvas, scrollTex.rgb, _ScrollOpacity);

                                half3 finalColor = canvas;
                                return fixed4(finalColor, (mainTexture.a * i.vertexColor.a));
                        }
                        ENDCG
                }
        }
        FallBack "Sprites/Diffuse"
}


Проблема в том, что текстура блеска растягивается на тех спрайтах, которые куда либо двигались с помощью аниматора.
А на статичных все ок.

Re: Как лучше реализовать анимацию направления потока

СообщениеДобавлено: 16 июн 2018, 14:23
Cr0c
Аддитивный бленд так делается же:
Синтаксис:
Используется glsl
float4 AdditiveMix(float4 in_b, float4 in_t)
                        {
                                float4 result = float4(in_b.rgb * (1.0 - in_t.a) + in_t.rgb * in_t.a, 0.0);
                                result.a = in_t.a + in_b.a * (1.0 - in_t.a);
                                return result;
                        }
 

Re: Как лучше реализовать анимацию направления потока

СообщениеДобавлено: 16 июн 2018, 14:37
BFZ
Cr0c писал(а):Аддитивный бленд так делается же:

Сделал, по-моему ничего не изменилось
Хотя может я не правильно это использовал, я ж говорю не шарю не фига в этих шейдерах
Вот что вышло:
Синтаксис:
Используется glsl
Shader "Custom/ScrollTexture" {
        Properties {
                [PerRendererData] _MainTex("Sprite", 2D) = "white" {}
                [PerRendererData] _Color("Sprite Tint", Color) = (1,1,1,1)

                _ScrollColor("Scroll Tint", Color) = (1,1,1,1)
                _ScrollTex("Scroll Texture", 2D) = "black" {}
                _ScrollOpacity("Scroll Opacity", Range(0, 1)) = 1
                _ScrollX("Scroll X", Range(-1, 1)) = 0
                _ScrollY("Scroll Y", Range(-1, 1)) = 0
        }
       
        SubShader {
                Pass {
                        Blend SrcAlpha OneMinusSrcAlpha
                        Cull Off
                        ZWrite Off
                        CGPROGRAM

                        #pragma vertex vert
                        #pragma fragment frag
                        #include "UnityCG.cginc"
                               
                        uniform sampler2D _MainTex; uniform float4 _MainTex_ST;
                        uniform sampler2D _ScrollTex; uniform float4 _ScrollTex_ST;
                        uniform half _ScrollOpacity;
                        uniform half4 _ScrollColor;
                        uniform half _ScrollX;
                        uniform half _ScrollY;
                        uniform half4 _Color;

                        struct VertexInput {
                                float4 vertex : POSITION;
                                float3 normal : NORMAL;
                                float2 texcoord0 : TEXCOORD0;
                                float4 vertexColor : COLOR;
                        };

                        struct VertexOutput {
                                float4 pos : SV_POSITION;
                                float2 uv0 : TEXCOORD0;
                                float4 posWorld : TEXCOORD1;
                                float3 normalDir : TEXCOORD2;
                                float4 vertexColor : COLOR;
                        };

                        half2 Scroll(float2 uv, half x, half y) {
                                return half2(uv.r + _Time.y * x, uv.g + _Time.y * y);
                        }

                        float4 AdditiveMix(float4 in_b, float4 in_t) {
                               float4 result = float4(in_b.rgb * (1.0 - in_t.a) + in_t.rgb * in_t.a, 0.0);
                               result.a = in_t.a + in_b.a * (1.0 - in_t.a);
                                return result;
                        }

                        VertexOutput vert(VertexInput v) {
                                VertexOutput o = (VertexOutput)0;
                                o.uv0 = v.texcoord0;

                                o.vertexColor = v.vertexColor * _Color;
                                o.normalDir = UnityObjectToWorldNormal(v.normal);
                                o.posWorld = mul(unity_ObjectToWorld, v.vertex);
                                o.pos = UnityObjectToClipPos(v.vertex);
                                return o;
                        }

                        float4 frag(VertexOutput i) : COLOR {
                                half _time = _Time.w;
                                half2 scrollUV = Scroll(i.uv0, _ScrollX, _ScrollY);
                                half4 mainTexture = tex2D(_MainTex, TRANSFORM_TEX(i.uv0, _MainTex));
                                half4 canvas = mainTexture * i.vertexColor;

                                half4 scrollTex = tex2D(_ScrollTex, TRANSFORM_TEX(scrollUV, _ScrollTex));
                                scrollTex = AdditiveMix(canvas, scrollTex);

                                canvas = lerp(canvas, scrollTex, _ScrollOpacity);

                                half3 finalColor = canvas;
                                return fixed4(finalColor, (mainTexture.a * i.vertexColor.a));
                        }
                        ENDCG
                }
        }
        FallBack "Sprites/Diffuse"
}
 

Re: Как лучше реализовать анимацию направления потока

СообщениеДобавлено: 16 июн 2018, 14:52
Cr0c
Монеты анимированы?

Re: Как лучше реализовать анимацию направления потока

СообщениеДобавлено: 16 июн 2018, 15:14
BFZ
Cr0c писал(а):Монеты анимированы?

Сам спрайт не меняется, но с помощью аниматора в начале игры двигаю ГО с ним по канвасу в нужное положение.

на сцене все нормально выглядит если что, но вот в игре уже косяк

Все, нашел закономерность. Вобщем если спрайт убрать(бэкграунд), то на этом чистом прямоугольнике все хорошо.
Но если добавить бэк, например монетку, или просто квадрат залитый, то уже проявляется косяк.
Что-то с uv видимо.
Это все на статичном спрайте если что проверял.

Вот скрин:
Скрытый текст:
Изображение

На верхнем варианте полосочка очень сильно увеличилась в размере, на среднем вообще почти в пятно превратилась, на нижнем размер такой как и надо.
Но на нижнем прозрачная область стала розовой.

Re: Как лучше реализовать анимацию направления потока

СообщениеДобавлено: 16 июн 2018, 17:39
Cr0c
Вечером дома гляну. Может подкручу шейдер.

Re: Как лучше реализовать анимацию направления потока

СообщениеДобавлено: 16 июн 2018, 17:40
Cr0c
Скинь в личку монетку, блик и шейдер

Re: Как лучше реализовать анимацию направления потока

СообщениеДобавлено: 16 июн 2018, 18:05
BFZ
Cr0c писал(а):Скинь в личку монетку, блик и шейдер

Благодарю, скинул в личку. :ymhug: