How to make and export your own animated UI for Virtual Reality (for Designers)

5th May 2017

Software(s): Adobe After Effects, Adobe Animate | Theme(s): Motion Design, Virtual Reality

In this tutorial, we will see how to make animated UI (designer side) and how to prepare/export it for a developer (which is making a VR app/game for example). For this you will need two different softs : Adobe After Effects (for the animation) and Adobe Animate (for the exportation).

To make the tutorial simple we will use as example an animated loader (inspired from the Twitch app loader). Here is how it looks like when it’s animated.

loader_twitch_example_01

 

1 – First step, build your animated UI in After Effects

If you want to follow the tutorial without creating any UI, I let you download the project files.

A few tips to make a good looping UI :

  • Avoid key frames animations for complexe animation, make it clear, use expressions if it’s possible.
  • To make the loop looking beautiful, give it a few tries before to export, make sure your animation is repeatable. For this, you should duplicate your last animated layers and put the key frames before the beginning. Then what is animated at the end is also visible at the beginning and it makes your UI loopable.
  • Make the scene dimensions a power of two. There is a rule for game engines, called “the power of two” (see the link a bit further in the tutorial). Here my scene is 128px * 128px.

DOWNLOAD THE PROJECT FILES

(saved w/ Windows, After Effects CC 2017)

 

2 – Export your PNG sequence

Once you are satisfied with your creation, you have to export the sequence. In order to export it properly, select your scene then click on the menu Composition > Add To Render Queue or Ctrl+Alt+M (on Windows) and stick to the following instructions for the Output Module Settings :

outpoutmodulesettings

  • Format : PNG Sequence
  • Channels : RGB or RGB + Alpha if you need the transparency

About the project files, if you ant to make the sequence transparent, don’t forget to hide the background before to export!

And then select your folder for the output. After Effects will automaticaly increment the files by renaming them this way : loader_[#####].png. It is important to keep this nomenclature for the next steps.

If you want to directly download the sequence, here it is :
DOWNLOAD THE SEQUENCE

3 – Open Adobe Animate to compile the PNGs and generate a Sprite Sheet

The next step consist into compiling your PNGs from the sequence to make a sprite and generate a JSON file for the development.

Open Animate and create a simple ActionScript3.0 project. Then import all your PNGs in the Library : File > Import > Import to Library, select your PNGs from 0000 to the end and import them. Once it is done, select them all in the library, right click and select “Generate Sprite Sheet” :

generatespritesheetoptionanimate

 

The Sprite exportation settings open, this tool allows you to customize your exportation settings.

generatespritesheetandJSON

  • Image dimensions : Auto size
  • Data format : JSON (this will generate a JSON file with all the PNGs coordinates for the development)

By defaut le sprite size (Image dimensions) is set on “Auto size”, it means that Animate will optimze the way it exports the sprite and choose what square size is better to use. You will remark that the size is always a square based on a power of two, but why ?
The “Power of Two” rule is a fundamental necessity due to the way game engines work. This means your image files work best when their sizes are in 512×512 pixels, 1024×1024, and so on.. If you want to know more about this rule, take a look at this article.
Choose your path, and click export !

 

This is what you get (I made the background black to make it visible) :

Loader_SpriteSheet

 

This is the PNG, ready to be sent for the game development, don’t forget to attach the JSON file for the developer !

Let’s take a quick look at the JSON file and explain it a little bit…

 


{"frames": {

"loader_00000.png":
{
	"frame": {"x":0,"y":0,"w":128,"h":128},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
	"sourceSize": {"w":128,"h":128}
},
"loader_00001.png":
{
	"frame": {"x":128,"y":0,"w":128,"h":128},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
	"sourceSize": {"w":128,"h":128}
},
"loader_00002.png":
{
	"frame": {"x":256,"y":0,"w":128,"h":128},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
	"sourceSize": {"w":128,"h":128}
},

...
...
...

"loader_000XX.png":
{
	"frame": {"x":XXX,"y":XXX,"w":128,"h":128},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
	"sourceSize": {"w":128,"h":128}
},
"meta": {
	"app": "Adobe Animate",
	"version": "16.2.0.24",
	"image": "Loader_SpriteSheet.png",
	"format": "RGBA8888",
	"size": {"w":1024,"h":1024},
	"scale": "1"
}
}

The JSON file will give to the developer all the informations about all the PNGs compiled into the spritesheet : Their size, their position and their reference point. The informations in that file are pretty clear and easy to understand, generate yours and take a look at it to understand the way it works!

DOWNLOAD THE SPRITESHEET AND JSON FILES

That’s it ! I hope it helped you, drop me a line or a comment if you have any remarks or questions !

About the author

Bastien Delmare - Freelance Digital Designer
http://bastiendelmare.com

I'm a digital mercenary. During the last years I've been walking around the digital area, still learning everyday, this domain is an infinite source of inspiration who makes my days. Today as a freelancer I'm trying to take every project as a challenge because new knowledges, new technologies or innovative ideas are often required!