Unity的UGUI用TexturePacker全自动打图集,包括九宫格切图信息

article/2025/9/28 1:50:48

Unity的UGUI用TexturePacker全自动打图集,包括九宫格切图信息

  • 前言
  • 环境准备
  • 实现过程
  • 注意
  • 总结
  • 版权声明

前言

最近在学习UGUI的打图集,之前一直在用SpritePacker和Sprite Atlas打图集,现在记录下另一种打图集方式:TexturePacker
主要是讲如何自动打图集到Unity,并且不丢掉九宫格信息,以及一些参数的设置

环境准备

1.unity版本2019.4.10f1
2.TexturePacker安装官网,支持正版,支持正版,支持正版https://www.codeandweb.com/texturepacker
3.TexturePacker安装Po Jie 版本点击这下载
4.unity中安装TexturePacker Importer点击这下载,也可以在unity商店搜索TexturePacker Importer安装
5.了解一下TexturePacker的命令行参数:
打开命令行工具并CD到TexturePacker的安装目录,输入 TexturePacker –help,会出现该版本的TP的一些命令行参数。在这里插入图片描述

实现过程

把要打图集的小图放到指定的文件夹,我是放在在这里插入图片描述
打出来的图放在Assets/SheetsByTP这个文件夹下,打好的图集会放在Assets/TexturePacker/icon文件夹下。
写两个编辑器脚本,放在Editor文件夹下,废话不多说上代码:

#if UNITY_EDITOR
using System;
using UnityEngine;
using System.IO;
using UnityEditor;
using System.Text;
using System.Diagnostics;
using Debug = UnityEngine.Debug;public class CommandBuild : Editor
{[MenuItem("Tools/SpritesPacker/CommandBuild")]public static void BuildTexturePacker(){//选择并设置TP命令行的参数和参数值(包括强制生成2048*2048的图集 --width 2048 --height 2048)string commandText = " --sheet {0}.png --data {1}.xml --format sparrow --trim-mode None --pack-mode Best  --algorithm MaxRects --width 2048 --height 2048 --max-size 2048 --size-constraints POT  --disable-rotation --scale 1 {2}" ;string inputPath = string.Format ("{0}/Images", Application.dataPath);//小图目录string outputPath = string.Format ("{0}/TexturePacker", Application.dataPath);//用TP打包好的图集存放目录string[] imagePath = Directory.GetDirectories (inputPath); for (int i = 0; i < imagePath.Length; i++) {UnityEngine.Debug.Log (imagePath [i]);StringBuilder sb = new StringBuilder("");string[] fileName = Directory.GetFiles(imagePath[i]);for (int j = 0; j < fileName.Length; j++){string extenstion = Path.GetExtension(fileName[j]);if (extenstion == ".png"){sb.Append(fileName[j]);sb.Append("  ");}UnityEngine.Debug.Log("fileName [j]:" + fileName[j]);}string name = Path.GetFileName(imagePath [i]);string outputName = string.Format ("{0}/TexturePacker/{1}/{2}", Application.dataPath,name,name);string sheetName = string.Format("{0}/SheetsByTP/{1}", Application.dataPath, name);//执行命令行processCommand("E:\\Program Files (x86)\\CodeAndWeb\\TexturePacker\\bin\\TexturePacker.exe", string.Format(commandText, sheetName, sheetName, sb.ToString()));}AssetDatabase.Refresh();}private static void processCommand(string command, string argument){ProcessStartInfo start = new ProcessStartInfo(command);start.Arguments = argument;start.CreateNoWindow = false;start.ErrorDialog = true;start.UseShellExecute = false;if(start.UseShellExecute){start.RedirectStandardOutput = false;start.RedirectStandardError = false;start.RedirectStandardInput = false;} else{start.RedirectStandardOutput = true;start.RedirectStandardError = true;start.RedirectStandardInput = true;start.StandardOutputEncoding = System.Text.UTF8Encoding.UTF8;start.StandardErrorEncoding = System.Text.UTF8Encoding.UTF8;}Process p = Process.Start(start);if(!start.UseShellExecute){UnityEngine.Debug.Log(p.StandardOutput.ReadToEnd());UnityEngine.Debug.Log(p.StandardError.ReadToEnd());}p.WaitForExit();p.Close();}
}
#endif

添加第二个脚本在Editor下


#if UNITY_EDITOR
using UnityEngine;
using System;
using System.IO;
using UnityEditor;
using System.Collections.Generic;
using System.Xml;
public class MySpritesPacker : Editor
{[MenuItem("Tools/SpritesPacker/TexturePacker")]public static void BuildTexturePacker(){string inputPath = string.Format("{0}/SheetsByTP/", Application.dataPath);string[] imagePath = Directory.GetFiles(inputPath);foreach (string path in imagePath){if (Path.GetExtension(path) == ".png" || Path.GetExtension(path) == ".PNG"){string sheetPath = GetAssetPath(path);Texture2D texture = AssetDatabase.LoadAssetAtPath<Texture2D>(sheetPath);Debug.Log(texture.name);string rootPath = string.Format("{0}/TexturePacker/{1}", Application.dataPath,texture.name);string pngPath = rootPath + "/" + texture.name + ".png";TextureImporter asetImp = null;Dictionary<string, Vector4> tIpterMap = new Dictionary<string,Vector4>();if (Directory.Exists(rootPath)){if(File.Exists(pngPath)){Debug.Log("exite: " + pngPath);//asetImp = GetTextureIpter(pngPath);//SaveBoreder(tIpterMap, asetImp);File.Delete(pngPath);}File.Copy(inputPath + texture.name + ".png", pngPath);}else{Directory.CreateDirectory(rootPath);File.Copy(inputPath + texture.name + ".png", pngPath);}AssetDatabase.Refresh();FileStream fs = new FileStream(inputPath + texture.name + ".xml", FileMode.Open);StreamReader sr = new StreamReader(fs);string jText = sr.ReadToEnd();fs.Close();sr.Close();XmlDocument xml = new XmlDocument();xml.LoadXml(jText);XmlNodeList elemList = xml.GetElementsByTagName("SubTexture");WriteMeta(elemList, texture.name, tIpterMap);}}AssetDatabase.Refresh();}//如果这张图集已经拉好了9宫格,需要先保存起来static void SaveBoreder(Dictionary<string,Vector4> tIpterMap,TextureImporter tIpter){for(int i = 0,size = tIpter.spritesheet.Length; i < size; i++){tIpterMap.Add(tIpter.spritesheet[i].name, tIpter.spritesheet[i].border);}}static TextureImporter GetTextureIpter(Texture2D texture){TextureImporter textureIpter = null;string impPath = AssetDatabase.GetAssetPath(texture);textureIpter = TextureImporter.GetAtPath(impPath) as TextureImporter;return textureIpter;}static TextureImporter GetTextureIpter(string path){TextureImporter textureIpter = null;Texture2D textureOrg = AssetDatabase.LoadAssetAtPath<Texture2D>(GetAssetPath(path));string impPath = AssetDatabase.GetAssetPath(textureOrg);textureIpter =  TextureImporter.GetAtPath(impPath) as TextureImporter;return textureIpter;}//写信息到SpritesSheet里static void WriteMeta(XmlNodeList elemList, string sheetName,Dictionary<string,Vector4> borders){string path = string.Format("Assets/TexturePacker/{0}/{1}.png", sheetName, sheetName);Texture2D texture = AssetDatabase.LoadAssetAtPath <Texture2D>(path);string impPath = AssetDatabase.GetAssetPath(texture);TextureImporter asetImp = TextureImporter.GetAtPath(impPath) as TextureImporter;SpriteMetaData[] metaData = new SpriteMetaData[elemList.Count];for (int i = 0, size = elemList.Count; i < size; i++){XmlElement node = (XmlElement)elemList.Item(i);Rect rect = new Rect();rect.x = int.Parse(node.GetAttribute("x"));rect.y = texture.height - int.Parse(node.GetAttribute("y")) - int.Parse(node.GetAttribute("height"));rect.width = int.Parse(node.GetAttribute("width"));rect.height = int.Parse(node.GetAttribute("height"));metaData[i].rect = rect;metaData[i].pivot = new Vector2(0.5f, 0.5f);metaData[i].name = node.GetAttribute("name");//读取源文件的meta文件,获取spriteBorder九宫格信息,写进图集中string sourcePath= string.Format("{0}/Images/{1}/{2}.png", Application.dataPath,sheetName, node.GetAttribute("name"));Vector4 sourceBorder= GetTextureIpter(sourcePath).spriteBorder;Debug.Log("图片的路径"+sourcePath+"图片的border"+sourceBorder.ToString());metaData[i].border = sourceBorder;// if (borders.ContainsKey(metaData[i].name))// {//     metaData[i].border = borders[metaData[i].name];// }}asetImp.spritesheet = metaData;asetImp.textureType = TextureImporterType.Sprite;asetImp.spriteImportMode = SpriteImportMode.Multiple;asetImp.mipmapEnabled = false;asetImp.SaveAndReimport();}static string GetAssetPath(string path){string[] seperator = { "Assets" };string p = "Assets" + path.Split(seperator, StringSplitOptions.RemoveEmptyEntries)[1];return p;}}internal class TextureIpter
{public string spriteName = "";public Vector4 border = new Vector4();public TextureIpter() { }public TextureIpter(string spriteName, Vector4 border){this.spriteName = spriteName;this.border = border;}
}
#endif

按下Tools/SpritesPacker/CommandBuild
按下Tools/SpritesPacker/TexturePacker
图集就打好了在这里插入图片描述

注意

1.如果有九宫格信息,注意名字要一致,可以查看图片的Border来查看九宫格信息

在这里插入图片描述
2.各文件路径可以在脚本里自行修改,如果需要设置其他参数,可以在命令里面自行添加

总结

欢迎大佬多多来给萌新指正,欢迎大家来共同探讨。
如果各位看官觉得文章有点点帮助,跪求各位给点个“一键三连”,谢啦~

声明:本博文章若非特殊注明皆为原创原文链接
https://blog.csdn.net/Wrinkle2017/article/details/113618934
————————————————————————————————

版权声明

版权声明:本博客为非营利性个人原创
所刊登的所有作品的著作权均为本人所拥有
本人保留所有法定权利,违者必究!
对于需要复制、转载、链接和传播博客文章或内容的
请及时和本博主进行联系
对于经本博主明确授权和许可使用文章及内容的
使用时请注明文章或内容出处并注明网址
转载请附上原文出处链接及本声明


http://chatgpt.dhexx.cn/article/yjiUhqNZ.shtml

相关文章

NGUI 九宫格切图

UISprite 的 Type 选择 Sliced 选择Edit 中的 Border

关于9宫格拼图,C++

该文章均为个人编写&#xff0c;如有错误&#xff0c;欢迎各位友友点评&#xff01; 一个简单的小游戏&#xff0c;使用到指针及一二维数组&#xff0c;相关知识可访问&#xff1a; 指针&#xff1a;https://blog.csdn.net/qiu___nan/article/details/127054411。 数组&…

html用九张图片做出九宫图,用ps如何将九张照片做成九宫格?

如何用PS将九张照片做成九宫格&#xff0c;并且随时可以更换呢。下面跟搞设计一起来做一下吧。 ↑ 首先准备好九张照片 ↑ 打开PS&#xff0c;新建一个1000x1000的文件 ↑ 选择矩形工具 ↑ 创建一个300x300的矩形 ↑ 随便填个颜色&#xff0c;把图层命名为1 ↑ 选择视图-新建参…

python将图片裁剪成九宫格

要求&#xff1a;将图片裁剪成九宫格&#xff0c;宫格图片位置打乱 思路&#xff1a; 判断该图片长宽是否能被3整除&#xff0c;不能需要对图片进行裁剪&#xff08;我的是边角裁剪&#xff09;双重for循环&#xff0c;根据步长对图片数组进行切片达到裁剪效果random.shuffle(…

html手机9张图片显示,怎么把一张图片分成9张(手机美图秀秀九宫格在哪)

手机拍照片咋做成九宫格&#xff1f;只需4步&#xff0c;这么发朋友圈真好看&#xff01; 国庆中秋双节已过&#xff0c;你拍了照片吗&#xff1f;很多朋友拍了照片后&#xff0c;喜欢发朋友圈分享。 今天教大家一招&#xff0c;让你发的朋友圈更好看&#xff0c;用手机就能完成…

九宫格拼图

九宫格拼图的实现&#xff1a; 效果为下图所示&#xff0c;实现拼图的完成&#xff0c;这里附上完整的代码&#xff0c;需要注意的是在产生随机的初始状态时&#xff0c;是随机两两交换&#xff0c;才能保证其一直是1-9的这样的情况&#xff0c;其他具体响应的设计在程序注释中…

Python切割九宫格图

Python切割九宫格图 朋友圈经常有人发九宫格图片&#xff0c;但那是使用特定的图片软件制成的或就是九章不同的照片本次我们用 Python 来制一张 九宫格主体是一个 3x3 的正方形矩阵 有9张对应的图片组成一般的软件&#xff0c;在遇到非矩阵型图片时难以完成重组&#xff0c;且…

边框图片_九宫格切图

边框图片 原理示意图&#xff1a; 九宫格切图法,保留四个角边框样式,拉伸平铺或环绕方式设置图片四条边.以达到边框样式相同大小可以改变的效果 组合写法&#xff1a; border-image: url("images/border.jpg") 167/20px round;拆分写法&#xff1a; border-image…

python和C++代码实现图片九宫格切图程序(附VS2015配置Opencv教程)

1、python代码实现图片分割成九宫格 需要包含的库&#xff0c;没有下载安装的&#xff0c;需要自己安装哦。 实现原理很简单&#xff0c;就是用PIL库不断画小区域&#xff0c;切下来存储成新的小图片。 假设每一个格子的宽和高分别是w、h&#xff0c;那么第row行&#xff08…

android九宫格切图,拼图九宫格切图app

拼图九宫格切图app是一款比较不错的手机九宫格照片编辑拼图软件&#xff0c;任意选择需要切割的图片&#xff0c;切割成九宫格拼图&#xff0c;轻松制作&#xff0c;喜欢发朋友圈的朋友们有福了&#xff0c;还可以自定义美化滤镜选择&#xff0c;添加文字&#xff0c;贴纸等&am…

赛效:电脑在线九宫格切图怎么制作?

九宫格切图的好处是提高作品的美观度&#xff0c;九宫格切图可以将原本散乱的图片元素进行有序的排列&#xff0c;使作品更具美感&#xff0c;提高观众的观赏体验。另外&#xff0c;还能增强作品的可读性&#xff0c;九宫格切图可以将作品中的主体与背景进行分离&#xff0c;使…

用canvas实现九宫格切图之手把手教学(uniapp+ts)

uniapp用canvas实现九宫格切图&#xff08;typescript&#xff09; 前言上传图片展示图片画布下载图片最终效果总结 前言 这几天工作比较轻松&#xff0c;所以就有时间发下呆&#xff0c;突然想起前段时间用了一个九宫格切图软件&#xff0c;所以就自己试着开发下&#xff0c;…

PS把图片切成九宫格

目录 PS把图片切成九宫格第一步&#xff0c;导入图片到PS第二步&#xff0c;设置裁剪第三步&#xff0c;导出第四步&#xff0c;效果图 PS把图片切成九宫格 PS把图片切成九宫格,把图片设置切片&#xff0c;不仅可以切成九宫格&#xff0c;也可以设置22&#xff0c;44&#xff0…

九宫格图片怎么操作?这里有你想要的方法

不知道平时小伙伴们在发朋友圈的时候有没有注意过很多人的朋友圈都会将很多图片拼起来&#xff0c;凑成九宫格图片来发送。这是因为朋友圈的限制&#xff0c;无法一次发完&#xff0c;每次最大上传只有9长照片。所以就有很多朋友一次拼齐9个图片在一起实现发布更多的图片&#…

html用九张图片做出九宫图,九宫切图软件 如何快速把照片做成九宫格切图

在微博时尚流行的图片展示上&#xff0c;九宫切图是当下最流行的一种&#xff0c;一张非常普通的照片经过了九宫切图软件的处理&#xff0c;变成非常漂亮的九宫图片&#xff0c;是不是美观大大提升了。尤其是在把自己自拍的照片做成九宫图展示&#xff0c;让人更有一种不一样的…

九宫格拼图怎么拼?分享两个简单的操作

日常生活中发朋友圈的时候&#xff0c;小伙伴是不是有很多照片想分享到朋友圈呢&#xff1f;但是因为朋友圈的限制&#xff0c;不能一次全发。有很多朋友发现很多朋友可以把一张图片剪成9格&#xff01;看起来很棒&#xff0c;那九宫格拼图怎么拼的呢&#xff1f;今天就和大家分…

unity的九宫格切割

我们新建Button&#xff0c;然后我们需要一张图片 修改图片类型如下&#xff1a; Editor GUI and Lagacy GUI适用于ngui&#xff0c;而Sprite适用于ngui 然后点击Sprite Editor&#xff0c;如果首次操作会报错&#xff0c;请按如下操作&#xff1a; 点击Package Manager-》将…

怎么制作九宫格切图?这两个方法非常简单

怎么制作出九宫格切图呢&#xff1f;相信大家在微信朋友圈看到过朋友发的九宫格切图照片&#xff0c;把一张照片切割成九份&#xff0c;然后按照一定的顺序发到朋友圈中&#xff0c;就会形成一个效果非常好的九宫格照片&#xff0c;我们自己也想发这种形式的朋友圈&#xff0c;…

matting之trimap生成_膨胀腐蚀

在抠图技术中三分图&#xff08;trimap)经常被用到&#xff0c;通常使用的方法是膨胀腐蚀(一般在去除噪声的时候先腐蚀再膨胀)。 1. import os import numpy as np import cv2def random_dilate(alpha, low1, high5, modeconstant):"""Dilation. erode"&…