Spritesheet Scene Transitions in Unity3D

Devon O. · September 16, 2017 · Shaders, Unity3D · 0 comments
38

Over the past couple weeks I’ve been working on  a number of transition effects for use with the Starling Framework. One of my favorites involved using a Starling MovieClip of a greyscale sprite sheet animation to hide or reveal a DisplayObject instance. For example, you could take a black and white frame sequence of something burning or a spreading ink splotch and use it to transition an image in or out. After completing the Starling work, I got to wondering if I could do the same thing in Unity3D with the same spritesheet and texture atlas assets. Of course with a little finagling it turns out I could so I thought I’d share this little tip for anyone looking to do something similar.

What It Is

Before going any further it would probably help to present a visual idea of what the heck I’m talking about. Click here for a WebGL example of the type of effect this technique can create. Just to make the example scene more interesting, I used a fantastic Blacksmith’s Forge interior from 3DForge available for free on the Unity Asset Store. So what’s happening? Essentially, there is a spritesheet animation of a spreading blob of ink being used to mix the main scene texture with a specified color (in this case just black) inside an image effect shader during Unity’s OnRenderImage event.

How It Is

Of course the first thing you’ll need to create a spritesheet transition is a spritesheet and texture atlas .xml file. I created mine with this cool little ink splotch video on YouTube and a bit of fiddling with Adobe Photoshop and Animate. You can make yours however you’d like, but you’re welcome to use what I made so long as it isn’t for commercial purposes as I have no rights to the original video posted by Gerson Domiciano Coelho.

 

Ink Reveal Spritesheet

 

If you’re playing along and don’t have a Unity project set up, create one now. Just to keep things neat, add the ink_reveal.png to a Textures directory inside your Unity project Assets directory and the ink_reveal.xml to a StreamingAssets directory inside your Unity project Assets directory (as you may have guessed, we’ll be streaming that XML in a little bit later) PROTIP: set the encoding of the .xml file to ascii or 8bit – when loading text in a WebGL project, Unity tends to choke on UTF-8.

The trickiest part of this technique is the image effect shader, so let’s get that out of the way. In a Shaders directory in your Unity project, create a new Image Effect Shader and name it “SpriteSheetTransition”. In the properties section of the shader, in addition to the _MainTex property, we also want to add a _TransitionTex property which is another 2D, a _Region property which is a Vector, and a _Color property which is a, you guessed it, Color.  Also add these properties to the SubShader section of the shader (down below the sampler2D _MainTex; line).  In the same place, also declare a float4 property named _TransitionTex_TexelSize. Now we can get down to brass tax and write the fragment shader.

What we want to do is convert the uv coordinates passed from the vertex shader to a specific region so when we sample the transition texture (i.e. the ink_reveal.png file) we only sample the specific frame we want (i.e. a specific rectangle as described by the SubTexture elements in the texture atlas .xml file). There’s a very simple formula used to convert numerical ranges from one to another that looks like this:

NewValue = (((OldValue-OldMin) * (NewMax-NewMin)) / (OldMax-OldMin)) + NewMin

Now in uv land, where we range from 0-1, OldMax-OldMin is always 1. Likewise OldValue-OldMin will always be OldValue. So that standard formula can be simplified to something like:

transitionUV = oldUV * rangeValues + minimumValues

It’s easy enough to get our range and minimum values from our XML region values by multiplying by the texel size (_TransitionTex_TexelSize.xy is texel width and texel height. Check out the Unity docs for more details). The final thing we’ll want to do is flip the v coordinate (i.e. subtract from 1) to range from bottom to top rather than top to bottom.

Once we get that transitionUV coordinate, we can sample our transition texture there. Then we add up the rgb values of the sample and divide by 3 to get the average color (keeping in mind, this is a greyscale image). This average is what we can use for a mix amount. To reverse the effect (say for a transition out rather than a transition in), just subtract this value from 1 before mixing. In any case, now that we have our mix amount, we can just sample the main texture at the original uv coordinates and mix (lerp, that is) that color with our _Color property the amount to mix. The final shader looks something like this:

That is really the heat of the meat as far as the effect goes, but we may as well finish up. The next thing we’ll need is a material that uses the transition shader. In a materials directory in the Unity project, create a new material named TransitionMaterial. In the Inspector, with the new material selected, set the shader to the SpriteSheetTransition.shader we just created. Also in the inspector, set the Transition Texture to the ink_reveal.png you added to the Textures directory and the Color to, well, whatever you want (black to match the effect I created).

After that, we’ll need a deserialized xml object to hold our texture atlas xml. Really this will just be a collection of objects mapped to those SubTexture elements in the xml atlas. In a Scripts directory, add a new script called RegionContainer (note that this doesn’t extend MonoBehaviour). This will both be our deserialized xml as well as a couple static methods to actually do the deserialization and return a RegionContainer instance. Something like this:

Finally we’ll need a component (i.e. a script) that actually uses that material to create the post process effect. This component will be responsible for getting our regions (deserializing the .xml file, that is), applying the effect by blitting the main scene material with our TransitionMaterial and updating the regions of the sprite sheet used in our shader. When the effect is complete, the component should just kill itself and be done.

So, back in the Scripts directory, create a new C# script named TransitionPostProcessor that looks something like this:

To finally tie everything together, we’ll need one last puzzle piece – a simple script that adds the above component to the main camera. In the unity scene, create an empty GameObject named TransitionController and in the Scripts directory create a new C# script with the same name. The script itself is very simple and really just intended as a demo (I’m sure you’d never want to just keep adding a transition on mouse click. I hope.). This script then just adds the transition component to the camera on awake – and again every time you click on the scene.

Add the TransitionController.cs script to the TransitionController game object in the scene and in the inspector window, set the Transition Material property to the TransitionMaterial we created earlier.

And that should be that. Test the project and see what happens. In theory, the TransitionController will add the TransitionPostProcessor component to the main camera. The processor will, in turn, load or stream the texture atlas .xml file and deserialize it into a list of Region objects. Once that list is created, the processor will blit the transition material and update the region rectangle in the shader according to a specified FPS (well, I didn’t mention that, but have a look through the posted code).  When the last region has been reached, the component will simply remove itself from the camera and the scene is good to go.

It probably seems more complicated than it needs to be but really, this technique can be easily used to produce a pretty much endless number of fairly extravagant scene transitions. And if you already have the assets handy from Starling (or another spritesheet/texture atlas based framework), all the better.

If you have any problems or questions, let me know in the comments.

Leave a Comment!

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Devon O. Wolfgang

AIR | Unity3D | AR/VR

Unity Certified Developer

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development” and “Starling Game Development Essentials”

Reviewer of “The Starling Handbook”

Unity Engineer at Touch Press.

Categories
Recent Comments
Archives