From Photoshop to Unity
Hello world! My name is Ben, and I’m a code addict.
This is my first time here, so on behalf of the Swing Swing Submarine team I’d like to welcome myself to this blog, yay!
With Tetrobot and Co done and Seasons after Fall starting, I want to use this transition time to share some of the tools and techniques that we’ve developed during Tetrobot and Co. Today: some Photoshop magic!
The menus of Tetrobot and Co were fairly (ridiculously?) complex, with multiple layers, many animated elements, doors opening and closing, and seamless screen transitions, so we knew a traditional, square-buttons-on-a-static-background UI system wouldn’t cut it. We had to make it easy for Géraud, our illustrator, to design as much as possible in Photoshop, and bring it effortlessly to Unity, animation-ready.
The basic idea: he draws as usual in Photoshop, using as many layers/groups/etc as he needs, and when importing the PSD files in Unity we extract each layer into a PNG, as well as the extra data (layer size, position, and depth, mostly). We also replicate the group structure, so with one click of a button we end up with a Unity hierarchy that is an exact match for the Photoshop layout.
Then when he changes the PSD, he only has to regenerate the textures, and can optionally also synchronize the scene.
The main menu in Photoshop
The main menu in Unity