Vous guidez étape par étape pour développer un outil d'empaquetage d'atlas à l'aide de node

/** 图集打包对象 */
const MySpritePackTool = function (opt) {
    this.options = {
        //一个文件夹图片过多或者过长 递归最大次数
        maxCount: opt.maxCount || 2,
        //需要打包图集的文件路径
        assetsPath: opt.assetsPath,
        //输出文件路径
        outPutPath: opt.outPutPath,
        //一张图集打包最大size
        maxSize: { width: 2048, height: 2048 }
    }
};

module.exports = MySpritePackTool;

|--assets
   |--index
      |--img-Vous guidez étape par étape pour développer un outil dempaquetage datlas à laide de node
      |--img-Vous guidez étape par étape pour développer un outil dempaquetage datlas à laide de node
   |--login
      |--img-Vous guidez étape par étape pour développer un outil dempaquetage datlas à laide de node
   |--img-Vous guidez étape par étape pour développer un outil dempaquetage datlas à laide de node
   |--img-Vous guidez étape par étape pour développer un outil dempaquetage datlas à laide de node

{
  assets: [
    {
      id: 'assets/img-Vous guidez étape par étape pour développer un outil dempaquetage datlas à laide de node',
      width: 190,
      height: 187
    },
    ...
  ],
  name: 'assets',
  keys: 'img-Vous guidez étape par étape pour développer un outil dempaquetage datlas à laide de node,img-Vous guidez étape par étape pour développer un outil dempaquetage datlas à laide de node,',
  index: {
    assets: [
        {
            id: 'assets/index/img-Vous guidez étape par étape pour développer un outil dempaquetage datlas à laide de node',
            width: 190,
            height: 187
        },
        ...
    ],
    name: 'index',
    keys: 'img-Vous guidez étape par étape pour développer un outil dempaquetage datlas à laide de node,img-Vous guidez étape par étape pour développer un outil dempaquetage datlas à laide de node,'
  },
  login: {
    assets: [
        {
            id: 'assets/login/img-Vous guidez étape par étape pour développer un outil dempaquetage datlas à laide de node',
            width: 190,
            height: 187
        }
    ],
    name: 'index',
    keys: 'img-Vous guidez étape par étape pour développer un outil dempaquetage datlas à laide de node,'
  },
}

MySpritePackTool.prototype.findAllFiles = function (obj, rootPath) {
    let nodeFiles = [];
    if (fs.existsSync(rootPath)) {
        //获取所有文件名
        nodeFiles = fs.readdirSync(rootPath);

        //组装对象
        let nameArr = rootPath.split('/');
        obj["assets"] = [];
        obj["name"] = nameArr[nameArr.length - 1];
        obj["keys"] = "";

        nodeFiles.forEach(item => {
            //判断不是图片路径
            if (!/(.png)|(.jpe?g)$/.test(item)) {
                let newPath = path.join(rootPath, item);
                //判断存在文件 同时是文件夹系统
                if (fs.existsSync(newPath) && fs.statSync(newPath).isDirectory()) {
                    // console.log("获得新的地址", newPath);
                    obj[item] = {};
                    this.findAllFiles(obj[item], newPath);

                } else {
                    console.log(`文件路径: ${newPath}不存在!`);
                }

            } else {
                console.log(`图片路径: ${item}`);
                obj["keys"] += item + ",";
                let params = {};
                params["id"] = path.resolve(rootPath, `./${item}`);
                //获得图片宽高
                params["width"] = images(path.resolve(rootPath, `./${item}`)).width();
                params["height"] = images(path.resolve(rootPath, `./${item}`)).height();
                obj["assets"].push(params);
            }
        })

    } else {
        console.log(`文件路径: ${rootPath}不存在!`);
    }
}

images(item["maxArea"].width, item["maxArea"].height)

//绘制空白图像
let newSprites = images(item["maxArea"].width, item["maxArea"].height);
//绘制图集
imgObj.forEach(it => {
    newSprites.draw(images(it["id"]), it["x"], it["y"]);
});

newSprites.save(`${this.options.outPutPath}/${item['fileName']}.png`);

MySpritePackTool.prototype.drawImages = function (obj) {
    let count = 0;
    if (obj.hasOwnProperty("assets")) {
        //打包出一个或者多个图集
        let imgsInfo = obj["assets"];
        imgsInfo.forEach(item => {
            if (item.hasOwnProperty("atlas")) {
                let imgObj = item["atlas"];
                // console.log("8888",imgObj)
                //绘制一张透明图像
                let newSprites = images(item["maxArea"].width, item["maxArea"].height);
                imgObj.forEach(it => {
                    newSprites.draw(images(it["id"]), it["x"], it["y"]);
                });

                newSprites.save(`${this.options.outPutPath}/${item['fileName']}.png`);
                count++;
            }
        })
    }

    for (let item in obj) {
        if (obj[item].hasOwnProperty("assets")) {
            this.drawImages(obj[item]);
        }
    }

}

npm i sprites-pack-tool

const MySpritePackTool = require("sprites-pack-tool");
const path = require("path");
/** 打包最多递归次数 */
const MAX_COUNT = 2;
//需要合成的图集的路径
const assetsPath = path.resolve(__dirname, "./assets");

/** 图集打包工具配置*/
const mySpritePackTool = new MySpritePackTool({
    //一个文件夹图片过多或者过长 递归最大次数
    maxCount: MAX_COUNT,
    //需要打包图集的文件路径
    assetsPath: assetsPath,
    //输出文件路径
    outPutPath: path.resolve(__dirname, "./res"),
    //一张图集打包最大size
    maxSize: { width: 2048,height: 2048}
});
/** 图集打包 */
mySpritePackTool.Pack2Sprite();