texturemerger图集拆分 图集解析工具

前言：
有时候经常从别的项目拷贝一些.png和.plist文件（图集资源），复用图集中的某些图片资源。
使用TexturePackerGUI打图集的时候，如果没有进行破解，打出来的图集存在水印。
1、碎图分解：尝试使用TexutureUnpack 和 unpack-textureatlas 发现分解出来的图片存在偏差（具体使用和下载，请百度）。
2、消除水印：破解一下可以解决（破解不成功可清除一下注册表），这里我们换一种方式解决。

代码资源已上传gitee: 其中2222文件夹是代码（路径下的Atlas和Image文件夹不要删除，但可以清空），www文件夹是图集资源。
https://gitee.com/songhuiyuan/atlas-decomposition-tool.git

拆分效果如下

一、根据.plist碎图分解
不满足需求的时候，我们使用nodeJS基于.plist文件自己写了一个脚本。

执行如下脚本：
C:\Users\Admin\Desktop\2222>node test.js C:\Users\Admin\Desktop\www
其中www文件夹包含图集（注意：需保证plist和png路径一致）
在脚本文件夹中Image文件下自动生成和图集名称一样的文件夹，并将分解的碎图放入其中。
注意：打图集过程中图片会存在旋转，分解的时候我们用代码处理旋转可能会出现部分资源阴影错位，所以分解过程中不做旋转处理。（分解完后可以自己去手动旋转图片）

const fs = require("fs");
const fse = require('fs-extra');
const plist = require('plist');
const images = require("images");
const walkSync = require('walk-sync');

//图集分解 - 需保证plist和png路径一致。

let sourcePath = process.argv[2];
if (sourcePath) {
    //获取plist文件名称
    let plistArray = walkSync(sourcePath, { globs: ['**/*.plist'] });
    //读取plist文件内容
    for (let i = 0, j = plistArray.length; i < j; i++) {
        let plistFile = fs.readFileSync(sourcePath + '\\' + plistArray[i], 'utf8');
        let plistData = plist.parse(plistFile) //用plist转内容为Js对象<解析XML>

        //根据plist名号生成文件夹 - 存放分解的图片
        let dirName = plistArray[i].split('.')[0];
        fse.ensureDirSync('./Image/' + dirName);
        // console.log('++=',  dirName)

        let big_Image = images(sourcePath + '\\' + dirName + '.png');
        for (let key in plistData.frames) {
            //获取plist中图片x,y ,width, height
            let rectStr = plistData.frames[key].textureRect.match(/\d+(.\d+)?/g);
            let rectArr = rectStr.join(',').split(',');
            //根据plist数据判断是否旋转
            if (plistData.frames[key].textureRotated) {
                //rotate(270)虽然摆正图片，但存在错位阴影问题。所以这里不进行旋转。
                images(big_Image, Number(rectArr[0]), Number(rectArr[1]), Number(rectArr[3]), Number(rectArr[2])).rotate(0).save(`./Image/${dirName}/${key}`);
            }
            else {
                images(big_Image, Number(rectArr[0]), Number(rectArr[1]), Number(rectArr[2]), Number(rectArr[3])).save(`./Image/${dirName}/${key}`);
            }
        }
    }
}

二、去除水印
去官网下载个TexturePack下来，可发现要使用需要付费才可，如果不想付费点击使用免费版本，但是呢免费版本打出来的图片带有水印，plist倒是正常的，所以我们要做的就是在plist的基础上使用NodeJS脚本读取plist的信息重新生成图片，这样就可以免费使用TexturePack的功能了！

执行如下脚本：
C:\Users\Admin\Desktop\2222>node test.js C:\Users\Admin\Desktop\www
其中www文件夹包含图集（注意：需保证plist和png和散图文件路径一致，且散图名称和图集名称要一样，并且散图文件夹下不支持嵌套文件夹存放图片）
在脚本文件夹中Atlas文件下自动生成和图集名称一样的文件夹，并将合并的大图放入其中。

const fs = require("fs");
const fse = require('fs-extra');
const plist = require('plist');
const images = require("images");
const walkSync = require('walk-sync');

let sourcePath = process.argv[2];
//图集合成 - 需保证plist和png和散图文件路径一致，且散图名称和图集名称一样。
if (sourcePath) {
    //获取plist文件名称
    let plistArray = walkSync(sourcePath, { globs: ['**/*.plist'] });
    //读取plist文件内容
    for (let i = 0, j = plistArray.length; i < j; i++) {
        let plistFile = fs.readFileSync(sourcePath + '\\' + plistArray[i], 'utf8');
        let plistData = plist.parse(plistFile) //用plist转内容为Js对象<解析XML>

        //根据plist名号生成文件夹 - 存放合成的图片
        let dirName = plistArray[i].split('.')[0];
        fse.ensureDirSync('./Atlas/' + dirName);

        //根据plist中获取尺寸,创建透明图片
        let sizeStr = plistData.metadata.size.match(/\d+(.\d+)?/g);
        let sizeArr = sizeStr.join(',').split(',');
        let big_Image = images(Number(sizeArr[0]), Number(sizeArr[1]));

        for (let key in plistData.frames) {
            //获取plist中图片x,y
            let rectStr = plistData.frames[key].textureRect.match(/\d+(.\d+)?/g);
            let rectArr = rectStr.join(',').split(',');
            //根据plist数据判断是否旋转
            if (plistData.frames[key].textureRotated) {
                big_Image.draw(images(sourcePath + '/' + dirName + '/' + key).rotate(90), Number(rectArr[0]), Number(rectArr[1]))
            }
            else {
                big_Image.draw(images(sourcePath + '/' + dirName + '/' + key), Number(rectArr[0]), Number(rectArr[1]))
            }
        }

        big_Image.save(`Atlas/${dirName}/${dirName}.png`);
    }
}