UMG Texture Atlas

Development Asset Creation
, ,
1

Hi

I’m developing a game that needs +200 icons for buttons. I wonder is there’s any way to pack all textures in photoshop and use it in unreal as a texture atlas.
if there is, what’s the workflow?

Thanks.

A sample for texture atlas:

850×582 95.7 KB

2

Anyone?

3

Hi!

You can use Paper 2D, is a default Plugin to UE4 that allows you to create Sprites from a one Texture and use them in UMG.

"To create a series of Sprites from a Sprite Sheet Texture:

  1. In the Content Browser, Right-click on the Sprite Sheet Texture, then under Sprite Actions choose Extract Sprites.
  2. Individual Sprites will be automatically extracted and added to the Content Browser."

Source: Paper 2D Sprites in Unreal Engine | Unreal Engine 5.1 Documentation

2 Likes
4

thanks. but is there any way that unreal engine use them as a single texture atlas? is this possible? or unreal make Atlas automatically on cooking contents.

5

If you set up your sprites to be grid based you can do it. Copy the functionality or directly use the flipbook node in material, but drive the time with a fixed scalar value so you can pick your sprite by hand. Then either make material instances for each element setting the atlas to use with that scalar parameter, or more automatic, create a dynamic material instance in UMG and set it programmatically.

6

I’d like to know this as well. I’m not sure what happens behind the scene, does going this route with sprites is more performance / memory easy or just adding separate image files is better.

7

Hello, This is late but for others seeking,

  1. Take the object into 3ds Max.
  2. Apply ‘UnwrapUVW’ modifier.
  3. Make a copy of your material in material editor,
  4. in the copy, put your Atlas in the Diffuse slot. (this makes it available to show in the background on UnwrapUVW so you can align the UVWs)
  5. then go into the UnwrapUVW and click UVW Editor,
  6. at the lower right you can pick what UVs (Material ID’s) you want to see, or ALL,
  7. Go into the upper right and find your Atlas image name in the drop down, select it.
    With it in the background, you can now:
  8. select, scale, move, zoom, pan, and rotate to move/scale your UV’s into proper place!
  9. Then collapse and
  10. make sure your material now reflects to new layout and Voila’!

Come seek me out if you need help, I don’t mind helping. I think I made a video on this on my channel: youtube.com/NextWorldVR

8

Just make Paper2D Sprites from your texture atlas and then you can use them in UMG widget

9

Hi, I’m aware that this is an old thread, but it’s still the first thing that comes up when you’re searching for “ue umg texture atlas” so I figured I might share my solution.

In the screenshot below you’ll see everything needed for this setup, I’ll write it down in case the image gets taken down after a while.

UE_Material_TextureAtlas
UE_Material_TextureAtlas1920×567 114 KB

Going from left to right:

Texture configuration

That’s 1024x1024 texture having 16x16 tiles.

Property Value
Compression Settings UserInterface2D (RGBA)
Lossy Compression Amount No lossy compression
Mip Gen Settings Sharpen0
Texture Group UI

Material configuration

Property Value
Material Domain User Interface
Blend Mode Translucent

Nodes blueprintue.com link
Basically you just need to do some simple math on the UVs, the formula goes as follows

Params:
 - ColumnsCount
 - RowsCount
 - ColumnIndex
 - RowIndex

Pseudocode:
  var ColumnSize = 1 / ColumnsCount
  var RowSize = 1 / RowsCount

  UVs = TextCoord[0] * MakeFloat2(ColumnSize, RowSize) + MakeFloat2(ColumnIndex * ColumnSize, RowIndex * RowSize)

Material instance
Single instance covers single tile, just specify column and row indexes and then use that instance inside UMG widget (you can use it in UImage instead of a texture asset). The preview will look blurry, but from what I’ve been testing so far, it looks good in-game.