How To Animate for Unreal Engine using Rotoscoping (even if you cannot art)
I’ve always been inspired by traditional frame — by — frame animations. There’s something soothing to me about how their imperfections peek through as the movement flickers throughout each of its frames.
As I started creating cinematics within game engines I realised that I could recreate a similar look by using rotoscope animation and the more I’ve used it the more I adore the way it looks.
What is Rotoscope Animation?
Rotoscope animation describes the process of creating animated sequences by tracing over live-action footage frame by frame.
Why use Rotoscope Animation?
This offers an animation style that is stylized and unique while also being relatively simple to achieve by anyone who has the patience to see it through. Even if you believe you lack any artistic skill you too can animate with this approach. I’ll take you through step by step how this can be achieved!
Step 1: Plan Your Animation
When planning where rotoscope animation would be best used in your projects keep in mind that this approach is quite time consuming so the best rotoscope animations are short, simple and easily able to loop. The first frame of the animation should match up with the last frame to smoothly transition throughout the whole movement.
Because of this I usually come up with basic actions that I want to represent throughout a rotoscope animation that can be looped easily. For example: someone walking on the spot, a person playing a musical instrument, a bird flapping its wings, etc.
Step 2: Figure out your Camera Angle
Rotoscope animations will be imported into your digital scene as a 2D Sprite Animation, therefore they’ll only be viewed from the front or behind. Because of this it’s vital that you make sure your animation is created at the correct angle to fit your scene, especially if you have fixed cameras within your project (such as if you’re creating a cinematic or a fixed camera game). To do this you can line up your camera to the scenes where you want the animation to play and take a photo of this angle so that you can use this as reference when creating it.
To take high resolution screenshots in Unreal Engine by pressing F9 or using the High Resolution Screenshot Tool within the Viewport Options. More info on the different methods to take a screenshot here: https://docs.unrealengine.com/4.27/en-US/WorkingWithMedia/CapturingMedia/TakingScreenshots/
If you’re unsure of the exact angle that you’ll need for each scene that will be using this animation style then don’t worry, the best thing to do is to create the animation from front on!
Step 3: Film your animations
Now it’s time to get some reference for your rotoscope animation by filming the actions you need. If you took photos of your 3D scene as reference then try to match up the scene as best as possible so that when you record your action then it’ll be at the right angle for your scene.
Film each action separately and try not to make them too long (you’ll thank yourself when you get to the next step). Don’t forget to keep in mind that you’ll need the action to end the same way that it starts if you want the animation to look cohesive when it loops.
The best thing about this is that you only need the footage as reference to draw over when creating your rotoscope animation so you don’t need a fancy camera to film, just a phone will do. Just ensure that the camera is stationary so that each frame of the action will line up perfectly with the other.
Step 4: Draw Over Your Videos in Photoshop
Now it’s time to art!
Import your reference video into the Animation Timeline of Photoshop. When this is imported you can use it as reference to draw over in a transparent New Layer. Skim over the video every few frames and keep creating a New Layer per chosen frame to draw onto. The more New Layers you create and the closer the frames are to one another, the smoother your animation will be! As you create more and more layers you’ll begin to see your animation come to life in the Timeline. Don’t forget that we need the end of the frame to nicely loop with the beginning and they must all be the same size!
This can be time consuming, but it all depends on how much time you’d like to put into the animation. For my projects I simply draw a thick white line over the outline and detail of my reference. I like to use white so that I can easily manipulate this colour when I import it into the game engine. Drawing every few frames also gives you more creative freedom to add detail that might not be there in your initial reference video, for instance you can add swirling steam from a coffee mug, glittering effects or bugs flying around a stinky dog (if you wanted to…)
Overall I find this step very therapeutic and it’s so rewarding to see your animation come together.
Step 5: Export as a Sprite Sheet
Once you’re happy with your animation then you’ll need to export it as a sprite sheet to use in Unreal Engine. This isn’t inbuilt into Photoshop so to do this you’ll have to add a Photoshop script. Download the Layers To Sprite Sheet file from here: https://gist.github.com/spajus/175d8f98948b5ff0233213f011280ba6
Put it into your: Program Files\Adobe\Photoshop\Presets\Scripts\
Then close and reopen your Photoshop to make sure the script is accessible.
It’s good practise to make a duplicate of your PSD here just in case you need to go back in the future and make further changes. Within your duplicate PSD delete the timeline so that all of your layers will be active on top of one another, it should look like a big squiggly mess! Then delete the video and background layer, leaving only the layers that you want to be included into the Sprite Sheet.
Select all of the layers and create a sprite sheet from them by going to File > Scripts and choosing Layers To Sprite Sheet. Insert How Many Sprites Per Row (this will depend on how many image layers you animation has). If you have an odd number of image layers then I suggest you have 1 Sprite Per Row so it’ll just be a long column of images with no blank spaces. It will warn you if there will be any blank spaces as well, so you can always adjust this number. You don’t want any blank spaces because this will become an empty frame in your animation.
Step 6: Import Sprite Sheet into Unreal Engine
To import your new sprite sheet into Unreal Engine you can simply drag and drop your image. Once doing so it will be imported as a Texture. To set up your Texture make sure to use these settings:
- Lossy Compression Amount: Lowest (Best image quality, largest file)
- sRGB: Unticked (To make your sprite is transparent once we turn it into a Material)
Step 7: Create the Animation within a Material
I use Materials to handle my sprite animations so that I can have more control over things such as the colours and adjusting the speed, but you can also use Sprite Actions to do this quicker if you have no need for that.
When creating my Material I’ll always make a master Material that has adjustable parameters so that I can quickly create Material Instances based off this one.
This master Material is set to:
- Material Domain: Surface (for use on a 3D Material, if you want to use for UI you can also change this to User Interface)
- Blend Mode: Masked (So the material will be transparent)
- Two Sided: Ticked (To ensure that the material can be viewed by both sides if this is needed)
Within a Material you can create Material Parameters which are nodes that can be adjusted in real-time without having to recompile the material. This makes it very easy for us to use the same master Material setup while making the appropriate adjustements for each Material Instance. When using a Material Parameter you can rename it to whatever suits you within its Details panel so that it’s easy to recognise the use for each Parameter.
The Flipbook Node is what drives the sprite animation, so I made ScalarParameter Values for:
- Speed (Time gets multiplied by this constant Parameter to set the animaiton speed)
- RowNumber (The amount of Horizontal Rows that the Sprite Texture has) Number of Rows
- ColumnNumber (The amount of Vertical Columns that the Sprite Texture has) Number of columns
The Flipbook UVs output is then fed into a TextureSampleParameter2D which will be set to the Sprite Texture.
I often hook the output of this to a multiply node with a VectorParameter so that I can use this to set a colour that can override the base colour of the Sprite Texture if needed.
The RGB output of your TextureSampleParameter2D gets fed into the Base Color (I also add mine to Emmissive Color) and use the Alpha output for the Opacity Mask input of the Material to set the transparency.
Once this is set up then you can create Material Instances from this master Material with adjustable parameters to tweak for each instance. To do this right click the master Material and choose ‘Create Material Instance’.
The Parameter Values you should have available to adjust are:
- Speed: The speed the flipbook will run through the sprite sheet
- RowNumber: The amount of Rows the Sprite Sheet has
- ColumnNumber: The amount of Columns the Sprite Sheet has
- Texture: The Sprite sheet to use
- Colour: The adjustable colour of the sprite
Step 8: Getting Animation into your 3D Scene
To insert this into your 3D scene you can add a Plane into your map by choosing Plane from within the Place Actors window under Shapes. Set this Plane to use your Material.
The above method works great for when you have fixed camera angles, however if you’re wanting to use this method for a first person game then you might need to ensure that this animation will always be visible from front on by the camera so that the illusion isn’t lost when the camera moves. In this case you can create a Blueprint to hold your Plane component. Within this Blueprint you can set the actor to rotate upon its Z axis to follow the camera On Tick! (I’d suggest turning tick On / Off when you need it so that its more performant).
There you have it! A simple yet effective way of adding Animation to your Unreal Engine project. I hope you enjoyed this tutorial, there are many ways to create rotoscope animation and to add sprite animations into your project, for example using Unreal Engines Sprite Actions or through using other software such as Blender but this is the way that I’ve been really enjoying lately. It gives me full control over the animation and I end up with an animation reminiscent of the traditional frame by frame cartoons that inspired me to begin with. I’m never disappointed by the final outcome and I hope you won’t be either :)
Saying all of that though, if there’s a way you incorporate animation into your projects or if you have an idea of how this process can be improved then please do feel free to share with me how. I’d love to learn together!
I hope this was somewhat insightful and hopefully educational for you and I wish you the very best for your creative projects ❤
If you’d like to check out more of my work or what I’m up to then you can follow me on YouTube, Twitch, Twitter or Instagram @YagmanX . I also have a free horror game ‘Perfection’ on itch.io and a music EP ‘Sweater’ available on all major music streaming platforms :)
