UI Custom Material

UI custom material is the best practice to expand UI performance and enhance UI’s own capabilities. Cool UI effects such as dissolving and external glow can be achieved through custom materials

Sprite component supports UI Custom Material. The user interface is as follows:

UIMaterial

Using a UI built-in material works the same as custom materials. However, there are few items to take into consideration:

  1. When the number of custom materials is set to 0 or empty, the default material will be used. Please refer to the Sprite documentation.
  2. UI does not support multiple materials, the number of custom materials is at most one.
  3. When the ui custom material is used, the Grayscale function on the panel will be invalid. Users can choose to implement this function in the material.

  4. For custom materials, the cc-sprite-texture header file must be introduced in the shader to obtain the uploaded texture. The cc_spriteTexture in it corresponds to the SpriteFrame image resource set on the UI rendering component property panel. For example, a simple fragment shader that uses the panel setting SpriteFrame to sample textures should look like the following:

    1.  CCProgram sprite-fs %{
    2.      precision highp float;
    3.      #include <cc-sprite-texture>
    4.      in vec4 v_color;
    6.      uniform ARGS{
    7.          float time;
    8.      };
    10.      in vec2 uv0;
    11.      uniform sampler2D u_normalMap;
    13.      vec4 frag () {
    14.          vec4 color = vec4(1, 1, 1, 1);
    15.          color *= v_color;
    16.          float value = 1.0;
    17.          vec4 o = texture(u_normalMap, uv0);
    18.          value *= o.r;
    19.          if (value < time) {
    20.              discard;
    21.          }
    23.          color *= texture(cc_spriteTexture, uv0);
    24.          if (value < time + 0.05) {
    25.              color = vec4(0.9, 0.6, 0.3, color.a);
    26.          }
    28.          return color;
    29.      }
    30.  }%

    dissolve

  5. To perform uniform assignment operations to custom materials, they can operate by obtaining the material on the Sprite. We provide different interfaces to deal with different operating conditions, as shown in the following code: (Please pay attention to the difference Notes on the interface!)

    1.  let spriteCom = this.node.getComponent(Sprite);
    2.  // What is obtained through the sharedMaterial method is a shared material resource, and operations on material will affect all rendering objects that use this material
    3.  let material = spriteCom.sharedMaterial;
    5.  // The material trial used by the current rendering component obtained through the material method, the operation for material Instance will only affect the current component
    6.  let materialInstance = spriteCom.material;