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;
}