天天看點
傳回

ue4 設定打包名稱_UE4導入圖集：TexturePacker

本篇文章搬運自我自己的部落格，原文連結: UE4導入圖集：TexturePacker　作者: ZhaLiPeng

在開發遊戲時，會使用到大量的圖檔資源，使用圖集的作用在于減少 DrawCall，提高性能。在UE中沒有圖集的打包工具，比較流行的方案是使用第三方的圖集打包工具TexturePacker。新版本的TexturePacker支援直接導出UE4的Sprite，并且可以在引擎中直接導入。在之前的版本中可以使用VaTexAtlas通過Json Array的資料導入，不過與TexturePacker直接導出UE的Sprite相比，VaTexAtlas并沒有優勢，UE的Sprite還可以直接預覽，VaTexAtlas則不可以，在官方已經支援的情況下不建議再使用VaTexAtlas作為UE導入圖集的方式。

本篇文章主要内容是記錄TexturePacker圖集生成檔案的分析、導入UE、選項介紹、以及記錄在UE中使用遇到的問題。

圖集檔案結構和導入UE

TexturePacker的項目檔案格式為

*.tps

，在使用TexturePacker導出UE的圖集會産生兩個檔案（以Icons項目為例）：

icons.tps
icons.paper2dsprites
icons.png

其中

icons.png

是導出的Texture。

icons.paper2dsprites

是目前圖集的描述檔案，使用json格式，用于描述圖集中包含的每個Sprite的資訊：

{
  "frames": 
  {
    "BackIcon.png":
    {
      "frame": {"x":49,"y":1,"w":36,"h":36},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":36,"h":36},
      "sourceSize": {"w":36,"h":36}
    },
    "Cross_12x.png":
    {
      "frame": {"x":251,"y":53,"w":12,"h":12},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":12,"h":12},
      "sourceSize": {"w":12,"h":12}
    }
  },
  "meta": {
    "app": "https://www.codeandweb.com/texturepacker",
    "version": "1.0",
    "target": "paper2d", 
    "image": "icons.png",
    "format": "RGBA8888",
    "size": {"w":288,"h":120},
    "scale": "1",
    "smartupdate": "$TexturePacker:SmartUpdate:25f0f996e96d501a04346c8b7185b520:81c127855f3c19ba3f655bd8ca6a90ac:7e03caed8675e493d8b522094ff94bba$"
  }
}

将

icons.paper2dsprite

檔案拖入UE的Content Browser視窗會建立出下面這些資源：

ue4 設定打包名稱_UE4導入圖集：TexturePacker
  • Frames目錄下是目前圖集中的每個Sprite，原始導入的資源關系均是軟引用（Sprite->Sprite以及Sprite->Texture），但是有些Sprite會硬引用

    /Paper2D/TranslucentUnlitSpriteMaterial

     這個

    Material Instance
  • Texture目錄中具有一個目前圖集的完整Texture，該資源的原始路徑依賴為硬碟中的png檔案，圖集中的Sprite對該Texture的資源引用關系是軟引用。
  • SpriteSheet這個資源則是導入

    *.paper2dsprite

     檔案建立的資源，該資源的原始路徑依賴為

    *.paper2dsprite

     檔案，該資源對圖集的完整Texture是硬引用，對圖集中的Sprite是軟引用。

Texture Settings

主界面：

ue4 設定打包名稱_UE4導入圖集：TexturePacker

參數說明。

Data

  • Data Format：選擇Publish時生成的格式，支援UE
  • Trim sprite names：是否裁剪Sprite的名字，在false的情況下，Sprite的名字會包含字尾如

    BackIcon.png

     ，導入引擎時名字為BackIcon_png，為true時則把字尾裁剪掉。
  • Prepend Folder name：導出的Sprite是否包含目錄名字，若為false，則所有的Sprite都按照原本的名字，若為true，導出的

    *.paper2dsprite

     檔案中對

    sprite

     的描述中會包含路徑資訊（如Icons/BackIcon.png，導入引擎中的名字就為Icons_BackIcon_png）
  • TexturePatth：指定要導出的Texture路徑

Texture

  • Texture format：導出圖集的Texture的格式，預設

    PNG-32
  • Texture file：導出的Texture的檔案名
  • Png Opt Level：PNG檔案的優化，所有的優化都是有損壓縮，0為32位png檔案.（0 always write 32 bit png files、1write indexed (8 bit) png files if possible、2..7 optimize packing, high values might be slow）
  • Pixel format：像素格式：預設

    RGB8888

所有支援的格式：

ue4 設定打包名稱_UE4導入圖集：TexturePacker
  • Transparency Handling：使用何種方式處理Alpha透明像素的顔色值，支援四種模式，預設選項為

    Clear Transparent pixel

     ，該模式節省磁盤空間。
ue4 設定打包名稱_UE4導入圖集：TexturePacker

Layout

  • Max Sise：圖集的最大尺寸
  • Fixes Size:手動指定圖集的大小，為空則讓TexturePacker确定圖集大小
  • Size Contraints：圖集的大小限制，預設選項是Any Size。在UE中導入的Texture要求是2次幂的，否則在IOS上會有顯示問題，如果非2次幂，在UE中可以設定填充，不填充也可以，要把Compression-Compression Settings設定為USerInterface2D，但是非2次幂的Texture會有性能問題。（之前遇到的問題：UE4：IOS貼圖非2次幂的顯示問題）
ue4 設定打包名稱_UE4導入圖集：TexturePacker
  • Forces squared：強制Texture具有2次幂大小，勾選後(Max Size和Fixes Size被鎖定為單個值)。
  • Scaling variants：縮放變體的設定
  • Scale：縮放
  • Scale Mode：縮放模式，預設為

    Smooth

     。
  • Algorithm：Sprite的排列算法，預設是

    MaxRects

     ，大小混排，也可以使用

    Grid/Strip

     使用最大Sprite的格子布局。選擇不同的算法，可以控制的選項不一樣。
  • Basic：

    Sort by

     /

    Sort order

     /

    Pack

     ，用于控制Sprite的排列規則
  • Grid/Strip：按照最大的Sprite為基本格子機關
  • MaxRects：

    Heuristics

     /

    Pack

     ，其中Heuristics又控制着幾種模式
ue4 設定打包名稱_UE4導入圖集：TexturePacker
  • Multipack：如果不想要把所有的Sprite打包到單個Texture裡，可以使用此選項打包出多個Texture和資料檔案，預設false
ue4 設定打包名稱_UE4導入圖集：TexturePacker
  • Allow rotation：是否允許旋轉Sprite，能夠使生成的Texture貼合的更好，開啟後可以将他們順時針或者逆時針旋轉90度（在有些引擎中可能會不支援，在UE中測試沒有問題），預設為true
  • Detect identical sprites：自動别名相同的圖檔隻在Texture中存儲一次，但是資料檔案中包含多份，相當于一個Texture中包含了一個Sprite的圖，但是資料中可以存儲兩個Sprite的資訊，在導入引擎時就會生成兩個Sprite，但原始的Texture中隻有一份圖像資料，可以節省空間。

Sprites

  • Trim mode：可以裁剪Sprite邊界的透明像素，由于不需要處理透明像素，是以可以縮小Sprite的尺寸，可以使圖集排布的更加緊密，并加快渲染速度。有四種模式

    None

     /

    Trim

     /

    Crop,keep Pos

     /

    Crop,flush Pos

     。
  • None：不裁剪，保持Sprite原始大小，保持原有的透明像素，在此種模式下在UE中使用該Sprite與原圖相同。
  • Trim：移除Sprite周圍的透明度，在使用時，應該具有原有大小，但該選項并非在所有架構中都可用。實際測試時在UE中使用Sprite比例與原圖不同，沒有原圖中的周圍透明像素。
  • Crop,keep Pos：導入UE中與

    Trim

     看起來相同，目前還沒發現其他的差別。
  • Crop,flush Pos：導入UE中與

    Trim

     以及

    Crop,flush Pos

     看起來相同。
ue4 設定打包名稱_UE4導入圖集：TexturePacker
  • Trim margin：當開啟裁剪時，裁剪算法會盡可能多地删除邊界的透明像素，設定

    Trim margin

     可以指定保留邊界的像素。
  • Transparency Threshold：值範圍為1~255，預設值為1。當開啟裁剪時，低于此值的alpha值将被視為透明，對于邊界幾乎不可見的alpha像素的Sprite可以起到裁剪的作用。
  • Extrude：預設值為1，用于指定拉伸Sprite邊界重複的像素，Sprite的大小保持不變。但設定之後在UE中Sprite的中心位置發生了變化。當Extruct設定為10，之前和之後的差別：
ue4 設定打包名稱_UE4導入圖集：TexturePacker
  • Border padding：填充圖集Texture邊緣為透明像素（邊緣的位置不放置Sprite）
  • Shape padding：設定Sprite之間的填充，預設為2，填充的像素不會添加到sprite中，在使用OpenGL渲染時應至少設定為2.
  • Common divisor：擴充Sprite的大小使其能被設定的值整除，擴充的Sprite會透明，預設值為1，表示Sprite大小不變，最大為2048。用途為強制設定大小相同的Sprite，在多個縮放因子上強制相同的布局。
ue4 設定打包名稱_UE4導入圖集：TexturePacker

Normal maps

  • Pack with same layout：Sprite圖像和他們的法線貼圖使用相同的布局打包在單獨的Sprite sheets上。

UE4使用圖集的問題

UMG中使用的問題

UMG裡使用TexturePacker圖集，在UImage空間中使用Sprit，用Draw As=Image ,Tiling=Horizontal，發現整個圖集都被平鋪出來了。

在

Tiling

為

No Tile

的模式下是正常的，但是在其他的模式下都會有問題。 應該是引擎支援不夠的問題，隻能暫時先不用這種方式，有時間具體分析一下原因。

Reimport問題

reimport圖集有一個坑，可能會出現uv混亂，出現UV不對的問題。

避免問題的操作流程是：

  1. 保證沒有打開使用到該圖集的UMG
  2. 删掉圖集和所有sprite重新拖進來一次
ue4 設定打包名稱
上一篇: App出海 對接 Google、Facebook旗下産品梳理
下一篇: QT 5.1 中文問題 亂碼 方框

繼續閱讀