UI 自定义材质

从 1.2 版本开始, UI 的 Sprite 组件支持自定义材质的使用,其使用界面如下图:

其使用方法与其他材质并无不同,但由于 Sprite 面板有基于 UI 内置材质的功能,所以有一些需要注意的点:

  • 当设置自定义材质数量为 0 或为空时,会使用默认材质进行渲染,面板功能及使用方法可参考 Sprite
  • UI 并不支持多材质,自定义材质的数量最多为一个
  • 当使用了 ui 自定义材质之后,面板上的 Grayscale 功能将会失效,用户可选择自己在材质中实现此功能
  • 设置了自定义材质之后,面板上的 Color 属性会与本身材质中设置的颜色(如果有的话)混合影响精灵的渲染颜色
  • 针对自定义材质,需要在 shader 中引入 cc-sprite-texture 头文件并对 cc_spriteTexture 进行采样,即可直接通过设置面板上的 SpriteFrame 设置 sprite 使用的图片资源
  • 例如一个简单的使用了面板设置 SpriteFrame 来采样纹理的 fragment shader 应该是下面的样子:

      CCProgram sprite-fs %{
          precision highp float;
          #include <embedded-alpha>
          #include <cc-sprite-texture> // 引入预设头文件
    
          in vec4 color;
          in vec2 uv0;
    
          uniform Constant {
              vec4 mainColor;
          };
    
          vec4 frag () {
              vec4 o = vec4(1, 1, 1, 1);
              o *= texture(cc_spriteTexture, uv0); // 对 cc_spriteTexture 进行采样
              o *= color;
              o *= mainColor;
              return o;
          }
      }%
    
  • 如果用户希望对自定义材质进行 uniform 赋值操作,可通过获取 Sprite 上的 material 来进行操作,我们提供了不同的接口以应对不同的操作情况,如下代码所示:(请一定注意看不同接口的注释说明!)

          let spriteCom = this.node.getComponent(Sprite);
          // 通过 sharedMaterial 方法获取到的为 共享材质资源,针对 material 进行的操作将会影响到所有使用此材质的渲染对象
          let material = spriteCom.sharedMaterial;
    
          // 通过 material 方法获取到的为 当前渲染组件使用的材质试例,针对 material Instance 进行的操作只会对当前组件产生影响
          let materialInstance = spriteCom.material;
    

results matching ""

    No results matching ""