UGUI의 ScrollView에서 컴포넌트 통과 처리

3619 단어 uGUIShaderLabUnity
시도해 본 것은 아래의 GIF처럼 ScrollView의 일부분을 처리를 통해 담백하게 하는 것이다.
아마 Asseet Store나 GitHub이면 이미 만들어진 물건이 나올 거예요...
이번에는 이쪽의 실시에 신경을 많이 썼기 때문에 학습 순서에 따라 예를 하나 만들어 보았습니다.
어렵기 때문에 설치 내용을 적어 놓을게요.
  • Unity2017.3.1p2의 설치/동작 확인
  • 프로젝트 세트가 GiitHub에 업로드되었습니다.
  • mao-test-h/FadeScrollView
  • ※ 샘플 장면 참조 "Assets/MyContents/Scenes/Sample.unity"
  • 설치 정보


    ScrollView 내의 페이드 섹션에 대한 대략적인 설명을 마치면 투명 전용 Shader를 설치하는 형식으로 대응합니다.
    면도기 자체는 built-in shader'UI-Dfault.shader'를 기반으로 개조한 것이기 때문에 적용되는 재료는 요소에 직접 적용할 수 있다.
    컨텐트는 C# 측면에서 투사 범위의 직사각형 영역에 전달된 다음 파쇄기 내에서 영역을 판정하여 이러한 프로세스를 통과시킵니다.
    아래에 코드의 일부분을 싣겠습니다.
    ◆ UI-FadeColumn.shader
        Properties
        {
            .......
    
            // フェードの境界(top, bottom, left, right)
            [HideInInspector] _Border ("_Border", Vector) = (0.0, 0.0, 0.0, 0.0)
            // フェードの影響度
            _FadeIntensity ("Fade Intensity", Float) = 0.01
            // 縦ラインのフェードの有効化
            [Toggle(FADE_VERTICAL)] _OnFadeVertical ("On Fade Vertical", Float) = 0
            // 横ラインのフェードの有効化
            [Toggle(FADE_HORIZONTAL)] _OnFadeHorizontal ("On Fade Horizontal", Float) = 0
        }
    
        .......
    
                float4 _Border;
                float _FadeIntensity;
    
                fixed4 frag(v2f IN) : SV_Target
                {
                    half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
    
                    // 境界の中央の算出
                    float2 center = float2(lerp(_Border.z, _Border.w, 0.5), lerp(_Border.x, _Border.y, 0.5));
    
                    // 境界の中央から離れるに連れて薄くしていく
                    #if FADE_VERTICAL
                    if(IN.worldPosition.y >= center.y || IN.worldPosition.y < center.y)
                    {
                        // 縦ライン
                        float scaleY = (_Border.x - _Border.y) / 2.0;
                        float offsetY = IN.worldPosition.y - center.y;
                        color.a -= ((abs(offsetY) / scaleY)) * _FadeIntensity;
                    }
                    #endif
                    #if FADE_HORIZONTAL
                    if(IN.worldPosition.x >= center.x || IN.worldPosition.x < center.x)
                    {
                        // 横ライン
                        float scaleX = (_Border.z - _Border.w) / 2.0;
                        float offsetX = IN.worldPosition.x - center.x;
                        color.a -= ((abs(offsetX) / scaleX)) * _FadeIntensity;
                    }
                    #endif
    
                    .......
                }
    

    보태다


  • 처음에는 C# 측에서 각 요소에 따라 전체적으로 투명하게 실현되는 것을 고려했지만 C# 측에서 ScrollView 요소 전체를 처리를 통해 제어하면 전송 부분이 분리된 느낌이 들어 미묘해 보이는 우려가 있다우선 연속 디스플레이(점차적인 변화가 필요)를 위해 부스러기 농담기 안에서 대응을 시도했다.
  • ※ 라고 하지만 각 요소가 분리되어 전송되더라도 실제로 보면 그다지 조화롭지 않은 느낌이 들지 않을 수 있으므로 이를 검증해야 한다.

  • 현재의 처리로 파열기 내에서if분지 등을 진행하기 때문에 처리 원가가 좀 높다는 우려가 있다.
  • 와 상대적인분기은'ScrollRect를 전달하는 중심 좌표'의 형식으로 변경되어 전체적인 계산 처리가 감소했고 아마도 이쪽은 가벼울 것이다.(실제 아카이브 비교는 이루어지지 않았지만...아직 검증되지 않았습니다.)
  • ※ 단, 현재 우리는 상하 단계에만 대응하고, 좌우도 페이드할 때는 개조가 필요합니다.
  • 이번 실장례로 샘플에만 한정되며, 실제 사용하려면 요소 소재의 설정 주위의 자동화 등을 고려하면 사용하기 쉬울 수 있다.
  • 좋은 웹페이지 즐겨찾기