Skip to content

Commit

Permalink
fix submetas change after image type
Browse files Browse the repository at this point in the history
  • Loading branch information
@yanOO1497
yanOO1497 committed Sep 6, 2023
1 parent 43bb89f commit 0d9fed3
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 75 deletions.
2 changes: 2 additions & 0 deletions editor/i18n/en/assets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ module.exports = {
},
},
image: {
label: 'Image',
type: 'Type',
typeTip: 'Type',
// bakeOfflineMipmaps: 'Bake Offline Mipmaps',
Expand All @@ -133,6 +134,7 @@ module.exports = {
flipGreenChannel: 'Flip Green Channel',
},
spriteFrame: {
label: 'SpriteFrame',
packable: 'Packable',
packableTip: 'Whether to participate in dynamic atlas or automatic atlas in build processes.',
rotated: 'Rotated',
Expand Down
3 changes: 3 additions & 0 deletions editor/i18n/zh/assets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ module.exports = {
},
},
image: {
label: '图像资源',
type: '类型',
typeTip: '类型',
// bakeOfflineMipmaps: 'Bake Offline Mipmaps',
Expand All @@ -133,6 +134,8 @@ module.exports = {
flipGreenChannel: '翻转绿色通道',
},
spriteFrame: {
label: '精灵帧资源（SpriteFrame）',
description: 'SpriteFrame 是 UI 渲染基础图形的容器。其本身管理图像的裁剪和九宫格信息，默认持有一个与其同级的 Texture2D 资源引用',
packable: 'Packable',
packableTip: '是否参与动态合图或者自动图集的构建处理',
rotated: 'Rotated',
Expand Down
135 changes: 61 additions & 74 deletions editor/inspector/assets/image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@
const { join } = require('path');
const { updateElementReadonly, updateElementInvalid } = require('../utils/assets');
const { injectionStyle } = require('../utils/prop');
const { ModeMap } = require('./texture/texture');

const imageTypeToImporter = {
raw: '',
texture: 'texture',
'normal map': 'texture',
'sprite-frame': 'sprite-frame',
'texture cube': 'erp-texture-cube',
};

exports.template = /* html */`
<div class="asset-image">
Expand Down Expand Up @@ -59,11 +68,13 @@ const Elements = {
ready() {
const panel = this;

panel.$.typeSelect.addEventListener('change', (event) => {
panel.$.typeSelect.addEventListener('change', async (event) => {
panel.metaList.forEach((meta) => {
meta.userData.type = event.target.value;
});

await panel.changeSubMetaWithType();

// There are other properties whose updates depend on its changes attribute corresponds to the edit element
Elements.isRGBE.update.call(panel);
Elements.fixAlphaTransparencyArtifacts.update.call(panel);
Expand Down Expand Up @@ -203,10 +214,6 @@ const Elements = {
};

exports.methods = {
apply() {
// if the image type changes between sprite-frame
this.spriteFrameChange = this.checkSpriteFrameChange(this.originImageType, this.meta.userData.type);
},
updatePanel() {
this.setPanel(this.$.panelSection, this.meta.userData.type);

Expand All @@ -222,14 +229,6 @@ exports.methods = {
const assetList = [];
const metaList = [];

const imageTypeToImporter = {
raw: '',
texture: 'texture',
'normal map': 'texture',
'sprite-frame': 'sprite-frame',
'texture cube': 'erp-texture-cube',
};

const imageImporter = imageTypeToImporter[type];

this.assetList.forEach((asset) => {
Expand Down Expand Up @@ -286,63 +285,61 @@ exports.methods = {
$panel.update(assetList, metaList, this.assetList);
},

checkSpriteFrameChange(srcType, destType) {
const changeTypes = ['texture', 'normal map', 'texture cube'];
// imageAsset type changed contains spriteFrame
let spriteFrameChange = '';
if (srcType === 'sprite-frame' && changeTypes.includes(destType)) {
spriteFrameChange = 'spriteFrameToOthers';
} else if (destType === 'sprite-frame' && changeTypes.includes(srcType)) {
spriteFrameChange = 'othersToSpriteFrame';
changeMipFilter(targetSubMetaKey) {
let dirty = false;
if (this.originImageType === 'sprite-frame') {
// spriteFrame -> any
this.metaList.forEach((meta) => {
if (meta.subMetas[targetSubMetaKey].mipfilter !== 'none') {
meta.subMetas[targetSubMetaKey].userData.mipfilter = 'nearest';
dirty = true;
}
});
} else if (this.meta.type === 'sprite-frame') {
// any -> sprite，disabled mipmaps
this.metaList.forEach((meta) => {
meta.subMetas[targetSubMetaKey].userData.mipfilter = 'none';
dirty = true;
});
}
return spriteFrameChange;
return dirty;
},

handleTypeChange(spriteFrameChange, type) {
if (!spriteFrameChange || !type) {
return;
}

const imageTypeToImporter = {
raw: '',
texture: 'texture',
'normal map': 'texture',
'sprite-frame': 'sprite-frame',
'texture cube': 'erp-texture-cube',
};
// change mipFilter
const imageImporter = imageTypeToImporter[type];
this.metaList.forEach((meta) => {
let mipChanged = false;
if (!meta) {
return;
async changeSubMetaWithType() {
let dirty = false;
// any -> texture : texture.wrapMode -> Repeat
// any -> sprite : texture.wrapMode -> Clamp
if (['sprite-frame', 'texture'].includes(this.meta.userData.type)) {
const textureKey = Object.keys(this.meta.subMetas).find((key) => this.meta.subMetas[key].importer === imageTypeToImporter.texture)
let wrapModeCache;
if (this.meta.subMetas[textureKey]) {
const textureUUID = this.meta.subMetas[textureKey].uuid;
wrapModeCache = await Editor.Profile.getConfig('inspector', `${textureUUID}.texture.wrapMode`);
}
for (const subUuid in meta.subMetas) {
const subMeta = meta.subMetas[subUuid];
if (!subMeta || subMeta.importer === '*') {
continue;
}
if (subMeta.importer === imageImporter) {
if (spriteFrameChange === 'othersToSpriteFrame' && imageImporter === 'texture' && subMeta.userData.mipfilter !== 'none') {
// imageAsset type change to spriteFrame，disabled mipmaps
subMeta.userData.mipfilter = 'none';
mipChanged = true;
} else if (spriteFrameChange === 'spriteFrameToOthers' && subMeta.userData.mipfilter === 'none') {
// imageAsset type change to other type from spriteFrame
subMeta.userData.mipfilter = 'nearest';
mipChanged = true;
if (!wrapModeCache) {
// use default wrapMode if not changed
const wrapModeName = this.meta.userData.type === 'texture' ? 'Repeat' : 'Clamp';
this.metaList.forEach((meta) => {
dirty = true;
const data = ModeMap.wrap[wrapModeName];
if (!meta.subMetas[textureKey]) {
meta.subMetas[textureKey] = {
userData: {}
}
}
break;
}
}

// sync meta
if (mipChanged) {
const content = JSON.stringify(meta);
Editor.Message.request('asset-db', 'save-asset-meta', meta.uuid, content);
for (const key of Object.keys(data)) {
meta.subMetas[textureKey].userData[key] = data[key];
}
});
}
});
},
}
if (this.originImageType === 'sprite-frame' || this.meta.type === 'sprite-frame') {
const targetSubMetaKey = Object.keys(this.meta.subMetas).find((key) => this.meta.subMetas[key].importer === imageTypeToImporter[this.meta.userData.type])
// sprite -> any : mipfilter = 'nearest'
dirty = dirty || this.changeMipFilter(targetSubMetaKey);
}
return dirty;
}
};

exports.ready = function() {
Expand Down Expand Up @@ -373,17 +370,7 @@ exports.update = function(assetList, metaList) {
this.metaList = metaList;
this.asset = assetList[0];
this.meta = metaList[0];

if (this.spriteFrameChange && this.originMetaList && !this.asset.readonly) {
this.handleTypeChange(this.spriteFrameChange, this.meta.userData.type);
// same as panel handle
if (this.meta.userData.type === 'sprite-frame') {
this.handleTypeChange(this.spriteFrameChange, 'texture');
}
}
this.originImageType = this.meta.userData.type;
// change originMetaList
this.originMetaList = JSON.parse(JSON.stringify(this.metaList));

for (const prop in Elements) {
const element = Elements[prop];
Expand Down
4 changes: 3 additions & 1 deletion editor/inspector/assets/texture/texture.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ const ModeMap = {
},
},
};

exports.ModeMap = ModeMap;
const Elements = {
anisotropy: {
ready() {
Expand Down Expand Up @@ -407,6 +407,8 @@ const Elements = {
panel.$.wrapModeSelect.addEventListener('change', (event) => {
// 根据 wrapModeSelect 组合值同步相应的 wrapModeS/wrapModeT 到 userData
const value = event.target.value;
// 临时记录用户的修改配置
Editor.Profile.setConfig('inspector', `${this.meta.uuid}.texture.wrapMode`, 'Clamp', 'temp');
if (ModeMap.wrap[value]) {
panel.userDataList.forEach((userData) => {
const data = ModeMap.wrap[value];
Expand Down

0 comments on commit 0d9fed3

Please sign in to comment.