atlas 中 spriteframe 的 uv

问题

  • 图集中的图片 uv 值发生了变化 shader 中 uv0 为图集的 uv 故需要计算具体的偏移量

  • spriteframe.uv 定义了图片四个顶点的 uv 坐标, 一并传入 shader 中使用

ts 脚本需要手动设置 spriteframe 在 atlas 种的位置

    /**获取在图集中的uv位置 */
    private resetSpriteFrameUV() {
        const sf = this.getComponent(Sprite)!.spriteFrame!;
        const uv = sf.uv;
        const uvOffset = v4(uv[0], uv[5], uv[6], uv[3]);
        const uvRotated = sf.rotated ? 1.0 : 0.0;
        this.mtrl.setProperty('uvOffset', uvOffset);
        this.mtrl.setProperty('uvRotated', uvRotated);
    }

shader 中重新计算 uv 范围

      // 获取实际uv值, 打成图集变化了
        vec2 uv_atlas  = vec2(
          (uv0.x-uvOffset.x)/(uvOffset.z-uvOffset.x),
          (uv0.y-uvOffset.y)/(uvOffset.w-uvOffset.y)
        );
        if(uvRotated>0.5){
          float temp = uv_atlas.x;
          uv_atlas.x = uv_atlas.y;
          uv_atlas.y = temp;
        }