Assets Workflow in My Memory of Us: PSD Importer

By:
Posted: 26/10/2018

Hi!

It’s been a while since we posted anything - the launch time left us in the busiest period in the history of Juggler Games (shout out to our friends at Crunching Koalas for making the simultaneous release on 3 platforms possible!). But today we are describing one of our most commonly used tools.

Initially, during the prototype stage of building a level, we were not really concerned about the graphic assets. As you could see in our previous post, areas are made up of very simple placeholders. However, a game without graphics is quite boring, to say the least. At some point, we wanted to fill those empty spaces with sprites.

We wanted our graphics to be on one hand highly reusable, but on the other – we wanted each level to have its own, unique character. This naturally led us to produce big batches of assets, designed to be placed in the engine. Joanna, the graphic designer, prepared an atlas of sprites, level designers cut them with Sprite Editor in Unity and placed them manually on the level, piece by piece. We used full-sized background images of what the level should look like, and we tried to recreate this in Unity, picking sprites by type or location that they were supposed to fit in.

That was a horror. Honestly, filling a scene in a level (and each level has a few of them) took multiple hours of manual labour. After going through a few scenes like that, we were sure that we need to find a better solution.

It was pretty obvious – we needed to import PSD (Photoshop) files straight into Unity, retaining information relevant to us. What we have been looking for is the placement of a sprite, scale and rotation. Additionally, we needed to automatically generate separate sprites for Unity in a way that would allow us to keep consistent naming conventions and avoid duplicating sprites showing up in different levels. On top of all that, we wanted a solution that would be as simple as possible.

So, in the end, it looks like this:

PSD Importer

And we doubt you can go simpler than that!

PSD files are huge, so we keep them outside of the project folder – Importer allows us to pick them regardless of Unity’s folder restriction. After selecting a file, we are confronted with another window:

PSD Importer Full View

This allows us to select particular objects if needed. These are essentially Photoshop layers stripped of areas with 100% alpha. When we create a sprite for the first time, we name it „xxx_MAIN” in Photoshop – you can actually see a few of these in the next screenshot. Mains are our „original” sprites. When importer encounters another sprite with the same name, it compares it to the main and manages scale transformation. Sadly, we found that retaining rotation information is impossible, as Photoshop always interprets layers as perfect rectangles aligned on x/y grid. Rotated sprites are always wildly distorted, so we just look out for them in a level and fix by hand – we still know which main exactly is used in any specific instance.

Photoshop - mains

After pressing „Create Scene” we get an object with all of the sprites sorted out to their respective layer orders. The only thing we have to do is fix up the rotation, sort them into parallax layers (which we can basically do in bulk in Unity’s Hierarchy) and check for proper hue values, as sometimes specific assets are lighter than we need them on a scene. However, this process takes roughly 1-2 hours per scene, as opposed to 3 days. And makes building a level MUCH more enjoyable!

 

Radoslaw Smyk