Search Unity

A good workflow to smoothly import 2D content into Unity, Part II: Importing

, mayo 23, 2013

Recently I wrote about authoring your 2D content in Photoshop and then setting it up for exporting. Today’s post will cover importing the files into Unity.  You can find a link to download all the files at the end of the post.

Picking up where we left off

Unity will happily import our images and XML file, but the images will be imported as normal textures by default, and the XML file will be imported as a text asset. So we need to write an importer within Unity to process the files for our game.
You might think that writing an AssetPostprocessor would be the way to go and you’d be forgiven for thinking that. The problem with using AssetPostprocessor is that we’re limited in what we can do within that context and it won’t allow us to create a new material which we need to do. So the answer is to simply write an editor script to do what we want.

Our importer will need to:

  • Load and deserialize the exported XML meta-data,
  • Change the texture import settings for our images so that we can process them,
  • Create and texture atlas and pack all our textures into it,
  • Create mesh assets for each of our images,
  • Create GameObjects that reference the meshes,
  • And create a scene to hold our GameObjects.

Writing Editor scripts
As with the exporter, you can download the importer script here (). It should be placed in a folder called “Editor” in order for it to work.
If you haven’t written editor scripts before you’re not taking advantage of one of Unity’s most powerful features. Editor scripts are a superset of normal scripting, so if you already know how to write game scripts you already know the basics of editor scripting too.

Editor scripts are distinguished from regular game scripts in essentially three ways.
Firstly, editor scripts must be placed within a folder named “Editor”, or one of it’s sub-folders. Secondly, at the top of the scripting file you must place the following line:

Finally, in order for the editor script to be called, it must derive from one of the editor sub-classes such as Editor, EditorWindow, ScriptableWizard, etc. You can use classes that don’t derive from these, but if you want to receive events and be interactive, these classes do so in a way similar to MonoBehaviour. For our purposes we’ll use the general Editor base class.

As with the exporter we won’t go over every line as the file is well commented, but let’s look at some of the more interesting bits.
To start, we need some way to invoke our importer, so we’ll put it on the Assets menu inside Unity like this:

So now we are sitting in the Assets menu, and when chosen we can execute a script, so now all we have to do is do something useful.

The first thing we’ll do is convert the XML file to something more useable such as a data class. When we wrote the exporter, we organized our data into a logical set of elements so that it will map easily into a data class. Our data class looks like the following and matches our XML file in structure and data types:

To actually convert the XML file into the data class, we use the built-in .NET serialization methods.

Since we’ll be creating a scene using code, it’s possible that the user already has that scene open, or another, and we need to be sure they get a chance to save changes. To do this we call:

Then we simply create a new scene, deleting the old one first if it already exists:

Next up is to fix the texture import settings. By default textures aren’t readable and we need to read them in order to put them into an atlas. While we’re at it, we also need to change some of the other settings.

Now we’re ready to create the new atlas material, texture and pack everything into it.

Since we have created all the basic parts we need, we can now loop over the images, create meshes, create the GameObjects and put them into the scene. It’s a fair amount of code so it isn’t repeated in it’s entirety, but certainly the most interesting part has to be creating the 2D sprites in Unity. You might be surprised to find out how simple and easy it is. I use a simple function to do it for all my 2D stuff within Unity and it looks like the following.

That may seem like a lot of code, but it’s actually quite straightforward and simple.
Finally, after we built all our 2D sprite assets, we simply fix-up the camera so that it will render our scene pixel perfect like it was originally in Photoshop.

If you look through the importer you should be able to follow it pretty easily.

If everything went well, after running the importer script you should see the scene fully composed and running in Unity.

You can download a Unity package with all the files for this tutorial.

20 replies on “A good workflow to smoothly import 2D content into Unity, Part II: Importing”

@VICENTE

Sorry about the delay in replying. If you’re targeting a platform with unsupported texture type, just change the editor script that modifies the atlas format to one that it supports. This solution is a bit similar to 2D toolkit and they both solve a similar problem in different ways. You can use this method along with 2D Toolkit, but they don’t directly work together.

@SEVOSHA

Hmm, strange. Is there any errors? Can you email your XML file so I can take a look? It’s brettb (at) unity3d.com.

I tried to import a previously exporting scene and nothing happened. I click import HOG scene, then find my XML, pick it up and … silence.
what am I doing wrong?

Also, I’m having this error:

Unsupported texture format – needs to be ARGB32, RGBA32, RGB24 or Alpha8

[…] Slim Lip Liner Pencil 836 Bloom. Classic, best-selling NYX Slim Lip Pencil applies smoothly, blends easily and is available in an astounding number of eye-popping […]

@Brett
Yes correct, you can move the camera, but this technique do not work in all kind of games. Take for example a 2D infinite runner where you also need all of the screen (at least horizontally), or games like Candy Crush were you can’t do that.

Thanks for the great tutorial!
FYI, something I ran into that should be mentioned is that Photoshop’s units need to be changed to pixels. By default the setting is inches, which on export will screw up all the positions in the xml doc.
Perhaps that could be checked (and possibly changed) in the Photoshop script.
Thanks again!

Even if we aren’t working in a 2D project, those tips are really welcome to anyone willing to jump into the 2D side of Unity. The only thing missing is the GUI system! :)
Good job!

Hi,

Thanks for the articles!

Looks good, I’ll try to make articles to detail my 2D workflow because it’s different from yours, and I want people to tell me how I can improve it.

But one question though, I think this is a webplayer game so you don’t have the issue, but you’ve set the camera orthographic size, to half the size of the height (768) :
Camera.main.orthographicSize = (768.0f/2.0f);

What if your game is running in a 960×640 window for example ? You will have some borders with nothing on them at the left and right… and if you change the orthographic size, you will lose the pixel perfect.

Thanks !

This workflow is generally really nice even for GUIs. The free range games has some asset on asset store which allows making GUIs from PSD files and these kind of solutions are really nice cause they allow artists to do much without relying on devs and also without doing time consumming tasks twise.

Microsoft’s blend product does the same thing for code and interface separation in a so much powerful way.

Amazing. I’m used creating Casual Adventure Games for BFG using C++ and some f… millions lines of code. I was planning to write another heavy engine to switch our production to Unity. The PSD workflow is amazing, and your post is just amazing. Thanks Brett.

Comments are closed.