3.x 滚动列表末尾羽化渐隐渐现大佬们有方案吗。感觉又是shader了，实在是盲区

Creator 3.x
#1

image
image1196×288 40.8 KB
如图，列表可以自右向左边滚动，然后最右边的部分内容是渐隐渐现的。各位大佬们有没有什么解决方案，谢谢了

2赞
#2

做个白色渐变的图片盖上去是不是也能实现类似的效果

1赞
#3

嗯 我现在试试看

#4

这个不太行，因为列表有底色，白色的话颜色会盖住底色。

#5

渐变遮罩。

#6

列表的宽度可以知道，按钮距离列表中心点的位置也可以知道，计算下，根据按钮到中心点的距离设置节点的uiopacity应该可以吧？

#7

嗯 uiopcity 是全部透明，需要楼上说的那样渐变透明。我研究下cocos怎么弄渐变遮罩

#8

如果是要渐变的话，那应该用shader了

#9

感觉这个就是一张跟底色一样的图，渐变消失而已，哪要shader

#11

更改uv的alpha就好了

#12

3.x的话，rgba是独立的，直接修改a就行了。和渐变色一个道理。右边1，左边0

#13

两个明显不是一个需求啊，列表那个的确就是一个蒙层的事，底下这个图说实话看不太清，不过论坛很多渐隐渐显的shader，着色器只是控制a值也不算很难，研究一下吧

#14

公用一个shader 3.x的 我根据y的位置，写死的，你根据x加个vec4的控制两段，还可以和批

image
image738×1280 338 KB

// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
CCEffect %{
  techniques:
  - passes:
    - vert: sprite-vs:vert
      frag: sprite-fs:frag
      depthStencilState:
        depthTest: false
        depthWrite: false
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendDstAlpha: one_minus_src_alpha
      rasterizerState:
        cullMode: none
      properties:
}%

CCProgram sprite-vs %{
  precision highp float;
  #include <builtin/uniforms/cc-global>

  in vec3 a_position;
  in vec2 a_texCoord;
  in vec4 a_color;


  out float alpha;
  out vec4 color;
  out vec2 uv0;

  vec4 vert () {
    vec4 pos = vec4(a_position, 1);

    alpha = smoothstep(1020.,970.,pos.y)*smoothstep(100.,106.,pos.y);

    pos = cc_matViewProj * pos;

    uv0 = a_texCoord;
    color = a_color;

    return pos;
  }
}%

CCProgram sprite-fs %{
  precision highp float;
  #include <builtin/internal/embedded-alpha>

  in float alpha;
  in vec4 color;

  #if USE_TEXTURE
    in vec2 uv0;
    #pragma builtin(local)
    layout(set = 2, binding = 12) uniform sampler2D cc_spriteTexture;
  #endif

  vec4 frag () {
    vec4 o = color;
    #if USE_TEXTURE
      o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);
    #endif

    o.a *=alpha;

    return o;
  }
}%
#15

哇 感谢喵佬，我试试

#16

这个合批的原理是什么

#17

image
image1062×1479 45.9 KB

一个专门的摄像头输出滚动列表的render-texture，然后再显示到主摄像机，搭配上面二喵的羽化着色器。就可以实现了

下面是我修改过的着色器。有上下羽化和翻转Y轴的功能那个。
如果需要左右羽化，可以让AI去修改
image
image927×118 13 KB

// Copyright © 2017-2020 Xiamen Yaji Software Co., Ltd.
CCEffect %{

techniques:

  • passes:
    • vert: sprite-vs:vert
      frag: sprite-fs:frag
      depthStencilState:
      depthTest: false
      depthWrite: false
      blendState:
      targets:
      • blend: true
        blendSrc: src_alpha
        blendDst: one_minus_src_alpha
        blendDstAlpha: one_minus_src_alpha
        rasterizerState:
        cullMode: none
        properties:
        fadePercentage: { value: 0.1 }
        flipY: { value: true }

}%

CCProgram sprite-vs %{
precision highp float;
#include <builtin/uniforms/cc-global>
in vec3 a_position;
in vec2 a_texCoord;
in vec4 a_color;
out vec4 color;
out vec2 uv0;

vec4 vert () {
vec4 pos = vec4(a_position, 1);
pos = cc_matViewProj * pos;
uv0 = a_texCoord;
color = a_color;
return pos;
}

}%

CCProgram sprite-fs %{
precision highp float;
#include <builtin/internal/embedded-alpha>
in vec4 color;

uniform Constant {
float fadePercentage;
bool flipY;
};

#if USE_TEXTURE
in vec2 uv0;
#pragma builtin(local)
layout(set = 2, binding = 12) uniform sampler2D cc_spriteTexture;
#endif

vec4 frag () {
vec4 o = color;
vec2 uv = uv0;

// Y轴翻转
if (flipY) {
  uv.y = 1.0 - uv.y;
}

#if USE_TEXTURE
  o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv);
#endif

// 上下羽化效果
float topFade = smoothstep(0.0, fadePercentage, uv0.y);
float bottomFade = smoothstep(0.0, fadePercentage, 1.0 - uv0.y);
float fadeAlpha = topFade * bottomFade;

o.a *= fadeAlpha;
return o;

}
}%

listMask.zip (1.8 MB)
项目

1赞
#18

同样感谢大佬

#19

蒙张图盖上去是最简单的， 性能也是最好的