移除 @scale @size,调整为自动计算 scale

This commit is contained in:
onvia 2023-08-04 17:24:37 +08:00
parent 6e294f7a19
commit 8d35d76c7a
18 changed files with 8307 additions and 177 deletions

View File

@ -55,12 +55,8 @@ Mac 下首次使用需要先执行根目录下的 `install_depends.sh` 安装 `c
<a href="#ar"> @ar 锚点</a>
<a href="#size"> @size 尺寸</a>
<a href="#full"> @full 全屏</a>
<a href="#scale"> @scale 缩放</a>
<a href="#ignore"> @ignore | @ig 忽略导出图片和节点</a>
<a href="#ignorenode"> @ignorenode | @ignode 忽略导出节点</a>
@ -75,6 +71,11 @@ Mac 下首次使用需要先执行根目录下的 `install_depends.sh` 安装 `c
<a href="#flipY"> @flipY 翻转图像 (flip 变种)</a>
### 移除
~~<a href="#size"> @size 尺寸</a>~~
~~<a href="#scale"> @scale 缩放</a>~~
### 组件
@ -143,20 +144,7 @@ check 为 Toggle 的属性,类型为 Sprite
```
<a id="size"></a>
```
@size{w:100,h:100}
节点尺寸 非图片尺寸
作用图层: 所有图层
参数:
w?: 宽
h?: 高
只对填写的参数生效,未填写的则为计算到的值
无参数不生效
```
<a id="full"></a>
```
@ -167,20 +155,6 @@ check 为 Toggle 的属性,类型为 Sprite
```
<a id="scale"></a>
```
@scale{x:1,y:1}
节点缩放
作用图层: 所有图层
参数:
x?: x 方向
y?: y 方向
只对填写的参数生效,未填写的则为 1
```
<a id="ignore"></a>
```
@ignore
@ -210,7 +184,7 @@ check 为 Toggle 的属性,类型为 Sprite
<a id="img"></a>
```
@img{name: string,id: 0,bind: 0}
@img{name:string,id:number,bind:number}
定制图片
作用图层:图像图层
@ -266,10 +240,45 @@ flip 的变种 y 方向镜像图像vv
@flipY 的图层不会导出图像
```
---
---
---
### 移除
<a id="size"></a>
```
@size{w:100,h:100}
节点尺寸 非图片尺寸
作用图层: 所有图层
参数:
w?: 宽
h?: 高
只对填写的参数生效,未填写的则为计算到的值
无参数不生效
```
<a id="scale"></a>
```
@scale{x:1,y:1}
节点缩放
作用图层: 所有图层
参数:
x?: x 方向
y?: y 方向
只对填写的参数生效,未填写的则为 1
```
---
---
---
### 说明
多个字段可作用在同一个图层上,按需使用
为做到所见所得,移除手动设置 @size@scale,修改为自动计算,使用方式为 `@img{bind:目标id}` `@flipX{bind:目标id}` `@flipY{bind:目标id}`

View File

@ -39,8 +39,9 @@ Mac 下首次使用需要先执行根目录下的 `install_depends.sh` 安装 `c
1. 缓存资源按钮: 手动缓存资源MD5当你不确定资源是否完全缓存的时候可以执行
2. 强制导出图片选项: 勾选后,即使已经进行缓存的资源同样会导出图片
3. 只导出图片选项: 可以把此工具只当做是切图工具,同时会将文本图层的字号及颜色输出到文件
4. 输出路径输入框: 可以直接导出到指定路径,如果没有填写,默认为 psd 同级目录
5. 红框区域:拖入 psd 文件夹或 psd 文件,也可以点击红框区域使用选择文件功能
4. 中文转拼音:最终导出无论是图片名还是节点名如果包含中文,都会转成拼音。
5. 输出路径输入框: 可以直接导出到指定路径,如果没有填写,默认为 psd 同级目录
6. 红框区域:拖入 psd 文件夹或 psd 文件,也可以点击红框区域使用选择文件功能
### 属性
@ -54,12 +55,8 @@ Mac 下首次使用需要先执行根目录下的 `install_depends.sh` 安装 `c
<a href="#ar"> @ar 锚点</a>
<a href="#size"> @size 尺寸</a>
<a href="#full"> @full 全屏</a>
<a href="#scale"> @scale 缩放</a>
<a href="#ignore"> @ignore | @ig 忽略导出图片和节点</a>
<a href="#ignorenode"> @ignorenode | @ignode 忽略导出节点</a>
@ -74,6 +71,11 @@ Mac 下首次使用需要先执行根目录下的 `install_depends.sh` 安装 `c
<a href="#flipY"> @flipY 翻转图像 (flip 变种)</a>
### 移除
~~<a href="#size"> @size 尺寸</a>~~
~~<a href="#scale"> @scale 缩放</a>~~
### 组件
@ -142,20 +144,7 @@ check 为 Toggle 的属性,类型为 Sprite
```
<a id="size"></a>
```
@size{w:100,h:100}
节点尺寸 非图片尺寸
作用图层: 所有图层
参数:
w?: 宽
h?: 高
只对填写的参数生效,未填写的则为计算到的值
无参数不生效
```
<a id="full"></a>
```
@ -166,20 +155,6 @@ check 为 Toggle 的属性,类型为 Sprite
```
<a id="scale"></a>
```
@scale{x:1,y:1}
节点缩放
作用图层: 所有图层
参数:
x?: x 方向
y?: y 方向
只对填写的参数生效,未填写的则为 1
```
<a id="ignore"></a>
```
@ignore
@ -209,7 +184,7 @@ check 为 Toggle 的属性,类型为 Sprite
<a id="img"></a>
```
@img{name: string,id: 0,bind: 0}
@img{name:string,id:number,bind:number}
定制图片
作用图层:图像图层
@ -265,10 +240,45 @@ flip 的变种 y 方向镜像图像vv
@flipY 的图层不会导出图像
```
---
---
---
### 移除
<a id="size"></a>
```
@size{w:100,h:100}
节点尺寸 非图片尺寸
作用图层: 所有图层
参数:
w?: 宽
h?: 高
只对填写的参数生效,未填写的则为计算到的值
无参数不生效
```
<a id="scale"></a>
```
@scale{x:1,y:1}
节点缩放
作用图层: 所有图层
参数:
x?: x 方向
y?: y 方向
只对填写的参数生效,未填写的则为 1
```
---
---
---
### 说明
多个字段可作用在同一个图层上,按需使用
为做到所见所得,移除手动设置 @size@scale,修改为自动计算,使用方式为 `@img{bind:目标id}` `@flipX{bind:目标id}` `@flipY{bind:目标id}`

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

View File

@ -39,8 +39,9 @@ Mac 下首次使用需要先执行根目录下的 `install_depends.sh` 安装 `c
1. 缓存资源按钮: 手动缓存资源MD5当你不确定资源是否完全缓存的时候可以执行
2. 强制导出图片选项: 勾选后,即使已经进行缓存的资源同样会导出图片
3. 只导出图片选项: 可以把此工具只当做是切图工具,同时会将文本图层的字号及颜色输出到文件
4. 输出路径输入框: 可以直接导出到指定路径,如果没有填写,默认为 psd 同级目录
5. 红框区域:拖入 psd 文件夹或 psd 文件,也可以点击红框区域使用选择文件功能
4. 中文转拼音:最终导出无论是图片名还是节点名如果包含中文,都会转成拼音。
5. 输出路径输入框: 可以直接导出到指定路径,如果没有填写,默认为 psd 同级目录
6. 红框区域:拖入 psd 文件夹或 psd 文件,也可以点击红框区域使用选择文件功能
### 属性
@ -54,12 +55,8 @@ Mac 下首次使用需要先执行根目录下的 `install_depends.sh` 安装 `c
<a href="#ar"> @ar 锚点</a>
<a href="#size"> @size 尺寸</a>
<a href="#full"> @full 全屏</a>
<a href="#scale"> @scale 缩放</a>
<a href="#ignore"> @ignore | @ig 忽略导出图片和节点</a>
<a href="#ignorenode"> @ignorenode | @ignode 忽略导出节点</a>
@ -74,6 +71,11 @@ Mac 下首次使用需要先执行根目录下的 `install_depends.sh` 安装 `c
<a href="#flipY"> @flipY 翻转图像 (flip 变种)</a>
### 移除
~~<a href="#size"> @size 尺寸</a>~~
~~<a href="#scale"> @scale 缩放</a>~~
### 组件
@ -142,20 +144,7 @@ check 为 Toggle 的属性,类型为 Sprite
```
<a id="size"></a>
```
@size{w:100,h:100}
节点尺寸 非图片尺寸
作用图层: 所有图层
参数:
w?: 宽
h?: 高
只对填写的参数生效,未填写的则为计算到的值
无参数不生效
```
<a id="full"></a>
```
@ -166,20 +155,6 @@ check 为 Toggle 的属性,类型为 Sprite
```
<a id="scale"></a>
```
@scale{x:1,y:1}
节点缩放
作用图层: 所有图层
参数:
x?: x 方向
y?: y 方向
只对填写的参数生效,未填写的则为 1
```
<a id="ignore"></a>
```
@ignore
@ -209,7 +184,7 @@ check 为 Toggle 的属性,类型为 Sprite
<a id="img"></a>
```
@img{name: string,id: 0,bind: 0}
@img{name:string,id:number,bind:number}
定制图片
作用图层:图像图层
@ -265,10 +240,45 @@ flip 的变种 y 方向镜像图像vv
@flipY 的图层不会导出图像
```
---
---
---
### 移除
<a id="size"></a>
```
@size{w:100,h:100}
节点尺寸 非图片尺寸
作用图层: 所有图层
参数:
w?: 宽
h?: 高
只对填写的参数生效,未填写的则为计算到的值
无参数不生效
```
<a id="scale"></a>
```
@scale{x:1,y:1}
节点缩放
作用图层: 所有图层
参数:
x?: x 方向
y?: y 方向
只对填写的参数生效,未填写的则为 1
```
---
---
---
### 说明
多个字段可作用在同一个图层上,按需使用
为做到所见所得,移除手动设置 @size@scale,修改为自动计算,使用方式为 `@img{bind:目标id}` `@flipX{bind:目标id}` `@flipY{bind:目标id}`

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

View File

@ -10,12 +10,8 @@
<a href="#ar"> @ar 锚点</a>
<a href="#size"> @size 尺寸</a>
<a href="#full"> @full 全屏</a>
<a href="#scale"> @scale 缩放</a>
<a href="#ignore"> @ignore | @ig 忽略导出图片和节点</a>
<a href="#ignorenode"> @ignorenode | @ignode 忽略导出节点</a>
@ -30,6 +26,11 @@
<a href="#flipY"> @flipY 翻转图像 (flip 变种)</a>
### 移除
~~<a href="#size"> @size 尺寸</a>~~
~~<a href="#scale"> @scale 缩放</a>~~
### 组件
@ -98,20 +99,7 @@ check 为 Toggle 的属性,类型为 Sprite
```
<a id="size"></a>
```
@size{w:100,h:100}
节点尺寸 非图片尺寸
作用图层: 所有图层
参数:
w?: 宽
h?: 高
只对填写的参数生效,未填写的则为计算到的值
无参数不生效
```
<a id="full"></a>
```
@ -122,20 +110,6 @@ check 为 Toggle 的属性,类型为 Sprite
```
<a id="scale"></a>
```
@scale{x:1,y:1}
节点缩放
作用图层: 所有图层
参数:
x?: x 方向
y?: y 方向
只对填写的参数生效,未填写的则为 1
```
<a id="ignore"></a>
```
@ignore
@ -221,10 +195,45 @@ flip 的变种 y 方向镜像图像vv
@flipY 的图层不会导出图像
```
---
---
---
### 移除
<a id="size"></a>
```
@size{w:100,h:100}
节点尺寸 非图片尺寸
作用图层: 所有图层
参数:
w?: 宽
h?: 高
只对填写的参数生效,未填写的则为计算到的值
无参数不生效
```
<a id="scale"></a>
```
@scale{x:1,y:1}
节点缩放
作用图层: 所有图层
参数:
x?: x 方向
y?: y 方向
只对填写的参数生效,未填写的则为 1
```
---
---
---
### 说明
多个字段可作用在同一个图层上,按需使用
为做到所见所得,移除手动设置 @size@scale,修改为自动计算,使用方式为 `@img{bind:目标id}` `@flipX{bind:目标id}` `@flipY{bind:目标id}`
@ -236,15 +245,16 @@ flip 的变种 y 方向镜像图像vv
```
## 注意事项
### 美术
- 智能图层 支持
- 蒙版,形状这些图层需要栅格化,或转为智能图层使用
- 图层样式
- 颜色叠加 图层图层不支持,文本图层支持
- 描边 文本图层支持
- 颜色叠加: 文本图层支持,图像图层不支持
- 描边: 文本图层支持
- 其他图层样式不支持
工具会把 画布外的图像也导出成图片,需要美术将 画布外 不需要导出的图像处理掉
需要美术将多个碎图组合的图像合并成智能图层使用
@ -294,3 +304,4 @@ textOffsetY label节点 Y 偏移
- 使用 @flip 替换 @mirror
- @img 增加 {id, bind} 参数
- 增加 @scale
- 移除 @scale @size

File diff suppressed because one or more lines are too long

View File

@ -7,14 +7,9 @@
"build": "tsc -b",
"watch": "tsc -w",
"rollup": "rollup -c",
"test": "node dist/index.js --input ./test/normal-test.psd --cache-remake --output ./out/",
"test": "ts-node src/index.ts --force-img --input ./test/scale-demo.psd --project-assets ./out/ --cache ./cache/cache.json --output ./out/",
"help": "node dist/index.js --h",
"test-dir": "node dist/index.js --input E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\test --output E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\out --cache E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\cache\\cache.json",
"test-psd": "node dist/index.js --input E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\test\\normal-test.psd --output E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\out --cache E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\cache\\cache.json",
"test-cache": "node dist/index.js --input E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\test\\normal-test.psd --output E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\out --cache E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\cache\\cache.json --project-assets E:\\Demo\\CC249JSTest\\assets --cache-remake",
"test-dir-no-output": "node dist/index.js --input E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\test --cache E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\cache\\cache.json",
"test-psd-no-output": "node dist/index.js --input E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\test\\normal-test.psd --cache E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\cache\\cache.json",
"test-init": "node dist/index.js --init --project-assets E:\\Demo\\CC249JSTest\\assets --cache E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\cache\\cache.json",
"test-init": "node dist/index.js --init --project-assets ./out/ --cache E:\\Git\\ccc-framework-3d\\tools\\psd2ui\\cache\\cache.json",
"test-png9": "ts-node src/index.ts --engine-version v342 --pinyin --input ./test/png9.psd --output ./out/",
"test-png9-2": "node dist/index.js --engine-version v342 --pinyin --input ./test/png9.psd --output ./out/"
},

View File

@ -23,6 +23,6 @@ module.exports = {
json(),
// resolve(),
commonjs(),
terser()
// terser()
]
}

View File

@ -31,6 +31,7 @@ import { exportImageMgr } from './ExportImageMgr';
import { CCUIOpacity } from './engine/cc/CCUIOpacity';
import { CCUITransform } from './engine/cc/CCUITransform';
import { CCVec3 } from './engine/cc/values/CCVec3';
import { Vec3 } from './values/Vec3';
/***
@ -124,7 +125,7 @@ export class Main {
// 创建缓存文件
if (args.cache && !fs.existsSync(args.cache)) {
writeCache();
await writeCache();
}
// 在没有缓存文件或者 指定重新缓存的时候,读取项目资源
@ -278,16 +279,15 @@ export class Main {
// 劫持尺寸设置,使用 psd 中配置的尺寸,这里不对原数据进行修改
let size = new CCSize(layer.size.width, layer.size.height);
if (layer.attr?.comps.size) {
let _attrSize = layer.attr.comps.size;
size.width = _attrSize.w ?? size.width;
size.height = _attrSize.h ?? size.height;
// if (layer.attr?.comps.size) {
// let _attrSize = layer.attr.comps.size;
// size.width = _attrSize.w ?? size.width;
// size.height = _attrSize.h ?? size.height;
// }
}
// 对缩放进行处理
size.width = Math.round(Math.abs(size.width / layer.scale.x));
size.height = Math.round(Math.abs(size.height / layer.scale.y));
// // 对缩放进行处理
// size.width = Math.round(Math.abs(size.width / layer.scale.x));
// size.height = Math.round(Math.abs(size.height / layer.scale.y));
// 配置的位置 Y 偏移
let offsetY = 0;
@ -342,6 +342,18 @@ export class Main {
} else {
// 查找绑定的图像
let _layer = imageMgr.getSerialNumberImage(layer);
// 根据原始图片自动计算缩放
let scaleX = layer.textureSize.width / _layer.textureSize.width;
let scaleY = layer.textureSize.height / _layer.textureSize.height;
if (scaleX != 1 || scaleY != 1) {
layer.scale = new Vec3((layer.isFlipX() ? -1 : 1) * scaleX, (layer.isFlipY() ? -1 : 1) * scaleY, 1);
node._trs.setScale(layer.scale.x, layer.scale.y, layer.scale.z);
node._lscale = new CCVec3(layer.scale.x, layer.scale.y, layer.scale.z);
}
// 使用已缓存的 图片 的 uuid
let imageWarp = imageCacheMgr.get(_layer.md5);
sprite.setSpriteFrame(imageWarp ? imageWarp.textureUuid : _layer.textureUuid);
@ -417,14 +429,14 @@ export class Main {
}
console.log(`保存图片 [${_layer.imgName}] md5: ${_layer.md5}`);
imageWarp && (imageWarp.isOutput = true);
let fullpath = path.join(out, `${_layer.imgName}.png`);
fs.writeFileSync(fullpath, _layer.imgBuffer);
this.saveImageMeta(_layer, fullpath);
let fullPath = path.join(out, `${_layer.imgName}.png`);
fs.writeFileSync(fullPath, _layer.imgBuffer);
this.saveImageMeta(_layer, fullPath);
});
}
saveImageMeta(layer: PsdImage, fullpath: string) {
saveImageMeta(layer: PsdImage, fullPath: string) {
let _layer = imageMgr.getSerialNumberImage(layer);
let imageWarp = imageCacheMgr.get(_layer.md5);
if (!imageWarp) {
@ -448,7 +460,7 @@ export class Main {
meta = meta.replace(/\$BORDER_LEFT/g, s9.l as any);
meta = meta.replace(/\$BORDER_RIGHT/g, s9.r as any);
fs.writeFileSync(fullpath + `.meta`, meta);
fs.writeFileSync(fullPath + `.meta`, meta);
}

View File

@ -42,7 +42,7 @@ export class PsdImage extends PsdLayer {
this.md5 = fileUtils.getMD5(this.imgBuffer);
this.textureSize = new Size(canvas.width, canvas.height);
this.scale = new Vec3((this.isFilpX() ? -1 : 1) * this.scale.x, (this.isFilpY() ? -1 : 1) * this.scale.y, 1);
this.scale = new Vec3((this.isFlipX() ? -1 : 1) * this.scale.x, (this.isFlipY() ? -1 : 1) * this.scale.y, 1);
}
onCtor() {
@ -64,12 +64,12 @@ export class PsdImage extends PsdLayer {
}
/** 是否是 x 方向镜像图片 */
isFilpX() {
isFlipX() {
return typeof this.attr.comps.flipX?.bind !== 'undefined';
}
/** 是否是 y 方向镜像图片 */
isFilpY() {
isFlipY() {
return typeof this.attr.comps.flipY?.bind !== 'undefined';
}
@ -89,8 +89,8 @@ export class PsdImage extends PsdLayer {
// this.position.x = this.position.x - this.parent.size.width * this.parent.anchorPoint.x + this.size.width * this.anchorPoint.x;
// this.position.y = this.position.y - this.parent.size.height * this.parent.anchorPoint.y + this.size.height * this.anchorPoint.y;
// 如果是镜像图片,则特殊处理
let arX = (this.isFilpX() ? (1 - this.anchorPoint.x) : this.anchorPoint.x);
let arY = (this.isFilpY() ? (1 - this.anchorPoint.y) : this.anchorPoint.y);
let arX = (this.isFlipX() ? (1 - this.anchorPoint.x) : this.anchorPoint.x);
let arY = (this.isFlipY() ? (1 - this.anchorPoint.y) : this.anchorPoint.y);
this.position.x = this.position.x - this.rootDoc.size.width * this.rootDoc.anchorPoint.x + this.size.width * arX;
this.position.y = this.position.y - this.rootDoc.size.height * this.rootDoc.anchorPoint.y + this.size.height * arY;
}

View File

@ -40,8 +40,8 @@ export interface PsdAttr {
igimg?: {};
full?: {};
size?: { w?: number, h?: number };
scale?: { x?: number, y?: number };
// size?: { w?: number, h?: number };
// scale?: { x?: number, y?: number };
img?: { id?: number, name?: string, bind?: number }
flip?: { bind: number, x?: number, y?: number }
flipX?: { bind: number }
@ -93,8 +93,9 @@ export abstract class PsdLayer {
this.name = this.chineseToPinyin(this.attr?.name || this.name);
// 使用配置的缩放系数
let _scale = this.attr?.comps.scale;
this.scale = new Vec3(_scale?.x ?? 1, _scale?.y ?? 1, 1);
// let _scale = this.attr?.comps.scale;
// this.scale = new Vec3(_scale?.x ?? 1, _scale?.y ?? 1, 1);
this.scale = new Vec3(1, 1, 1);
}
abstract onCtor();
@ -195,10 +196,10 @@ export abstract class PsdLayer {
}
// 检查冲突
if (obj.comps.full && obj.comps.size) {
console.warn(`PsdLayer->${obj.name} 同时存在 @full 和 @size`);
}
// // 检查冲突
// if (obj.comps.full && obj.comps.size) {
// console.warn(`PsdLayer->${obj.name} 同时存在 @full 和 @size`);
// }
return obj;
}

Binary file not shown.