I worked on a new website recently that uses a subtle parallax scroll effect on the homepage, so I wanted to briefly explain how the effect was achieved. Continue reading Subtle parallax effect on scroll – client website
Creating animation with SVGs, CSS animations, spritesheets & GSAP
I’ve created an animation using a few different methods that runs in a browser and is responsive (works on both mobiles, tablets and desktop). Continue reading Creating animation with SVGs, CSS animations, spritesheets & GSAP
Exporting a sprite sheet from Flash into Unity animation
I didn’t even realise Unity had an animation timeline until recently, in my Space Turd project I used scripts to time things appearing on screen – when actually I could have made it easier for myself by using tweened animations, something I love in Flash.
Flash is still my favourite tool for drawing and animation though, so for this new project (which currently I’m just calling “Glob”) I wanted to animate the character of Glob to blink and look from left to right.
So I animated this in Flash, and I was happy with it. It’s so nice to use Flash’s timeline again, it’s been too long! And it’s super easy!
Now to move this into Unity
I thought this bit would be where it gets difficult. What I didn’t know until recently though is that you can export a spritesheet from Flash, which is more of an industry standard for games. It puts all your animation onto one image.
If you right click the movie clip containing the animation you can select “Generate sprite sheet”, which exports a file like this:
You might not be able to see the white above, as the background is transparent.
Then in Unity you can load this as a sprite (putting it into a folder called “Sprites” automatically converts it. Then you have to tell Unity how to split this file up into it’s different frames.
First I selected “Automatic” but it for some reason wanted to merge the first 2 frames, so had to select the 2nd manually. Which wasn’t difficult, just making sure it’s the same width and height as the others.
Animation in Unity
So I opened the animation window, and got a familiar timeline. It looks similar to Flash but works probably more like animation in 3DsMAX. There’s a record button, and changing any property of the object is recorded. So I dragged it to 30 seconds, swapped the sprite for the “blinking” frame, and saved it.
Unity creates an Animation file which saves in your project. It also saves an “Animator” file. Not sure what this is yet, but I deleted it and the entire animation was deleted, so it’s essential! Here’s the contents:
I’ll post more info about this “Glob” project here. But in the meantime, here’s the repo on GitHub.