Advertisement

Texture atlas tool

Started by October 17, 2016 03:11 AM
11 comments, last by Kylotan 8 years, 1 month ago

Hi everyone!

Analyzing one video game, I found texture atlases usage, for example:

[attachment=33643:atlas.png]

Currently in my game, each cross hire image has separate file.

I would like to switch to atlas usage.

I think there are many approaches how to do it, and here are solutions that came to my mind:

  1. Use some specialized tool.
  2. Use some plugin for photoshop/2D editor.
  3. Write own tool.

Could someone suggest a good (and probably free) tool/plugin to do the job?

PS: platform – Windows.

Thanks in advance!

Currently in my game, each cross hire image has separate file.

If they are all the same size then you can just connect them yourself, example four cross hairs of 64*64 will make a simple grid atlas of 128*128.

Could someone suggest a good (and probably free) tool/plugin to do the job?

Blender can do it for you, it has many atlas tools. If you upload the images I can show you how to do it in Blender.

Advertisement

Blender can do it for you, it has many atlas tools. If you upload the images I can show you how to do it in Blender.

That would be great!

There are 5 temporary dds images in attachment

OK, so before I begin I want to make clear that texture atlases are noting special. You can make them with any graphics software, the reason I will be teaching Blender is because it's a vector software and will allow you to scale images and move them around with no problems.

Also knowing how to make a 2D atlas in Blender teaches you 80% of the work needed to make a 3D texture atlas.

It's recommended you know how Blender works.

This is going to feel long, however once you can do it you will be making atlases and sprite sheets quickly.

The following images have been edit to help with the tutorial.

Step1:

First you need to turn on the image importer in Blender.

1: Open the file menu->User Preferences -> Add-ons tab->Import-Export.

2: Find the Import images as planes option and enable it. Save User settings.

3: Open the file menu and under import select Image as planes

[spoiler]bwx8FlX.png[/spoiler]

Step2:

Find the images and select them all and import

Check that all options are the same as in the image, the red dots are important.

[spoiler]Ogr7uXd.png[/spoiler]

Step3:

Press Z-key and then the 8-key to change display to texture.

You should now see something like this image.

[spoiler]9xyzBEc.png[/spoiler]

Step4:

Add a plane to use as the target.

1: Press Shift-A to open the add menu. Mesh-> Plane

A plane should appear if it's white instead of black don't panic, also I moved this one down by 1 to allow better view of the images.

Move the images you imported to where you want them think of black/white plane as a image. Hold the ctrl-key to snap against the grid, Shift key to move in smaller amounts.

2: Press tab with the plane selected to go into edit mode. Depending on your setting you will either have to choose from a menu or it will just go into edit mode.

3: Select edge tool.

4: Select the right side edge and move it along the X axis by 2.

The Blender grid is 64*64 pixel for each Blender unit. We are using a 256*128 image so 4*2 units.

[spoiler]ZlThyre.png[/spoiler]

Step5:

Now we will make a new texture.

1:Split the screen. https://www.blender.org/manual/interface/window_system/areas.html

2:Change the type to UV/image editor.

3:Click on image.

4:Select New image.

5:Set the name and Properties 256 by 128.

Exit edit mode by pressing tab, if the menu appear select object mode.

Optional 6: Go back into edit mode and press the U-key to unwrap the plane.

If you are in edit mode and the image changed just select it near where the name is.

You only need to do this if you left edit mode before making the image. Exit edit mode by pressing tab, if the menu appear select object mode.

[spoiler]FOGeq6f.png[/spoiler]

Step6:

Finally we transfer the data from the small images onto the new one.

1:Select the Bake option under the render tab.

2:Check that you are in object mode, select all the object in the 3D view, hold shift and select the black/white plane until it has a light orange border.

Check that bake mode is texture and that Selected to Active is on.

Hit the bake button, you should see it render the image. Save your new image to a file.

http://imgur.com/JYsmwYG

I can only upload 5 images.

Once you know how to do this it will take no more than 15-40 seconds to do.

You should now realize you can do it in any software, a atlas is just a combination of the images, a sprite sheet.

The final Blend: https://drive.google.com/file/d/0B3hHgiNtHATdVE9GblZHd1NBZm8/view?usp=sharing

You can also use a sprite sheet tool if this is too much.

I'm guessing that requires a fixed grid, right?

Does anyone have any plugins or processes that will pack graphics more tightly, and export a list of bounding boxes for each one?

Although not directly usable without writing a tool for it, I use this with great success to perform atlas generation.

Advertisement

I'm guessing that requires a fixed grid, right? Does anyone have any plugins or processes that will pack graphics more tightly, and export a list of bounding boxes for each one?

Blender has the texture atlas add-on for that, the reason I didn't demonstrate it is because it's a real pain to learn and the gain from doing things like this is dismissive. It's good for 3D where you deal with irregular shapes.

In 2D using a grid based atlas is preferred as it makes loading easy and it's as effective as any otter atlas.

In 2D using a grid based atlas is preferred as it makes loading easy

That's kind of tautological though... if you have a tool which automatically packs images more closely and gives you the coordinates for loading them as well, it would be almost as easy as a grid but more efficient, so that would be preferable.

it would be almost as easy as a grid but more efficient, so that would be preferable.

If there was a tool like that and you could load all the images and the map and then the engine would auto map them; then it would be worth the small performance boost, maybe.

Coding the map or typing it line by line isn't efficient, using a grid of constant sizes is more efficient as you will only need one function to load it; keeping it a grid will also help when moving from software to software.

I guess you could write a function to read the map and divide, it shouldn't be hard; the grid will always be more efficient; in my opinion.

if you have a tool which automatically packs images more closely and gives you the coordinates for loading them as wel

Most sprite sheet tools provide a text document with a map, it just gets confusing when you start mapping large amounts.

There is a online one that I use from time to time, it produces a map and it's optional: https://www.leshylabs.com/blog/posts/2013-12-03-Leshy_SpriteSheet_Tool.html

I will recommend using Blender instead even if it's hard to learn, because Blender allows you composing, 3d object atlas and many otter options along with the 2D atlas.

For people that just want a fast tool I recommend Leshy SpriteSheet.

If you want a offline one google "Sprite sheet tool".

You can also use a sprite sheet tool if this is too much.

Thank you, Scouting Ninja for your great effort!

I tried Blender method and after 1 hour found that I really need drag and drop tool :) with layout export facilities (like UV for each image) + command line support to integrate it to my pipeline.

So, using your suggestion, I found 2 tools:

1. Completely free: Sprite Sheet Packer

2. Texture Packer

If someone could suggest better free tool, I would appreciate it.

This topic is closed to new replies.

Advertisement