Sprite Editor 图集切片精灵

简介:



切图需求

假设有一张大的UI的图集,我们想把它里面的小图一张一张地切割出来,如果有plist文件,请查阅我的另一篇文章《还原TexturePacker plist 文件 切开各小图片

今天我们使用 Unity4.3或更高版本自带的 Sprite Editor 来导出切片精灵

切图效果

imageimage

image

步骤

1、准备一张大的图集,导入Unity的Asset/Resources/XXX/文件夹下(注意:图集文件一定要放在Resources文件下)

image

2、该图集默认是Texture,我们需要把它的Type修改成Sprite

imageimage

3、接着修改Sprite Mode为Multiple,应用。然后点击 Sprite Editor

image

4、在打开的Sprite Edirot 窗口中把图集切成多个Sprite

imageimage

插件代码

5、编写TestExportSprite.cs,放在Editor目录下

复制代码
using UnityEngine;
using UnityEditor;

public class TestExportSprite
{
    
    [MenuItem("Assets/导出选中图片为单独png")]
    static void ExportSelSprite()
    {
        string resourcesPath = "Assets/Resources/";
        foreach (Object obj in Selection.objects)
        {
            string selectionPath = AssetDatabase.GetAssetPath(obj);

            // 必须最上级是"Assets/Resources/"
            if (selectionPath.StartsWith(resourcesPath))
            {
                string selectionExt = System.IO.Path.GetExtension(selectionPath);
                if (selectionExt.Length == 0)
                {
                    continue;
                }

                // 得到导出路径
                string loadPath = selectionPath.Remove(selectionPath.Length - selectionExt.Length);
                loadPath = loadPath.Substring(resourcesPath.Length);

                // 加载此文件下的所有资源
                Sprite[] sprites = Resources.LoadAll<Sprite>(loadPath);
                if (sprites.Length > 0)
                {
                    // 创建导出文件夹
                    string outPath = Application.dataPath + "/outSprite/" + loadPath;
                    System.IO.Directory.CreateDirectory(outPath);

                    foreach (Sprite sprite in sprites)
                    {
                        // 创建单独的纹理
                        Texture2D tex = new Texture2D((int)sprite.rect.width, (int)sprite.rect.height, sprite.texture.format, false);
                        tex.SetPixels(sprite.texture.GetPixels((int)sprite.rect.xMin, (int)sprite.rect.yMin,
                            (int)sprite.rect.width, (int)sprite.rect.height));
                        tex.Apply();

                        // 写入成PNG文件
                        System.IO.File.WriteAllBytes(outPath + "/" + sprite.name + ".png", tex.EncodeToPNG());
                    }
                    Debug.Log(string.Format("Export {0} to {1}",loadPath,outPath));
                }
            }
        }
        Debug.Log("Export All Sprites Finished");
    }
}
复制代码

5、使用Sprite Editor把图集切割成Sprite之后,修改图集的属性为Advanced,并勾选 Read/Write Enabled 和Transpare

image

否则当你导出切片时会报错

UnityException: Texture 'UIAtlas' is not readable, the texture memory can not be accessed from scripts. You can make the texture readable in the Texture Import Settings.
UnityEngine.Texture2D.GetPixels (Int32 x, Int32 y, Int32 blockWidth, Int32 blockHeight) (at C:/BuildAgent/work/aeedb04a1292f85a/artifacts/EditorGenerated/TextureBindings.cs:259)
TestSaveSprite.SaveSprite () (at Assets/Editor/TestSaveSprite.cs:39)

5、在Resources目录下选中UIAtlas.psd,右键,选择“导出选中图片为单独png

image

 

说明

部分内容参考自:http://blog.csdn.net/akof1314/article/details/38845933


本文转自赵青青博客园博客,原文链接:http://www.cnblogs.com/zhaoqingqing/p/4020667.html,如需转载请自行联系原作者

相关文章
|
6月前
[笔记]音视频学习之SDL篇《二》 绘制平铺的背景图并居中放置另一图片
[笔记]音视频学习之SDL篇《二》 绘制平铺的背景图并居中放置另一图片
|
4月前
|
前端开发 小程序
微信小程序canvas画布绘制base64图片并保存图片到相册中
微信小程序canvas画布绘制base64图片并保存图片到相册中
Threejs使用精灵Sprite作为标签,鼠标悬浮精灵上时鼠变小手
Threejs使用精灵Sprite作为标签,鼠标悬浮精灵上时鼠变小手
1294 0
Threejs使用精灵Sprite作为标签,鼠标悬浮精灵上时鼠变小手
|
图形学
unity3d UI特效处理,image置灰shader
新建材质,材质指定该shader,然后将材质球拖拽到image上面,效果就显示出来了 图片.png Shader "UI/ImageGreyShader" { Properties { [PerRendere...
3108 0
|
4月前
qrc-标签和按钮、调色板加载图片
qrc-标签和按钮、调色板加载图片
22 0
|
8月前
|
移动开发 前端开发 HTML5
前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)
前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)
178 0
|
11月前
|
前端开发
雪碧图 Sprite图
雪碧图 Sprite图
|
前端开发 JavaScript
一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效
华丽炫酷的动画特效总能够让人心旷神怡,不能自已。艳羡之余,如果还能够探究其华丽外表下的实现逻辑,那就是百尺竿头,更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效,并比较不同之处。
一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效
|
Web App开发 前端开发 JavaScript
用SVG 制作 Sprites的图标系统(一)
我一直是图标字体的大力支持者。很多网站真的需要一个图标系统,图标字体提供了一个该死的精细系统。但是,我认为假设你对 IE 9+ 很好,使用内联 SVG 并且 <use> 引用图标的元素是一个优秀的系统。
227 0
用SVG 制作 Sprites的图标系统(一)
|
Web App开发 缓存 前端开发
用SVG 制作 Sprites的图标系统(二)
我一直是图标字体的大力支持者。很多网站真的需要一个图标系统,图标字体提供了一个该死的精细系统。但是,我认为假设你对 IE 9+ 很好,使用内联 SVG 并且 <use> 引用图标的元素是一个优秀的系统。
191 0