How to make cool animations

by Sean from spookshow.studio
June 2020 Update

Making Animation Easy

This newsletter is huuuge -- buckle up! :-)

For the month of June, I've been focused on making the animation system in Spook Show Studio powerful, quick to work with, and easy to use.

I'll walk through how everything works:

Layers and Animations

Before jumping into animations, it's important to understand that layers and animations make up the scene.

There are three animations available per room (Anim1-3), and a bunch of layers. These can be reordered by dragging.

The layers themselves can't animate, but they can be shown or hidden (like the TV above).

To start creating an animation, first you have to select which type you want:

Frames - You draw each frame, and the animation will cycle between the frames
Light - Useful for simulating a flashlight, where the cursor lights up a location
Particles - Creates a bunch of tiny shapes, with physics
Shake - Shakes the screen

Let's go through each animation type in detail:

Frames

Using Frames, you can draw each individual frame, and set a delay per frame ("3" in the gif above).

This is the most work, but it gives you the most control.

Also notice the running man icon on the left will let you preview any animation.

You can choose how the animation loops:

F.Loop - Forward looping
R.Loop - Reverse looping
F.Stop - Go forward and stop on the last frame
R.Stop - Go backward and stop on the first frame
F.Ping - Go forward, then backward, then forward, looping
R.Ping - Go backward, then forward, then backward, looping
Random - Just choose frames randomly

Light

The Light animation applies a simple flashlight effect.

You can choose the intensity of the light, and the inner and outer radius.

When the player is in the room, they will need to hunt around with their cursor to see everything.

Particles

I've had the most fun with Particles - you can create all sorts of cool effects, like fire, water, smoke, debris, magic, etc.

You start by drawing where you want particles to be created, and what color.

Next, you can decide how the particles behave using the controls. It might seem complicated at first, but if you play with it, you can easily figure out each piece:

Bit - Select which particles you want to appear
Life - How long the particles last
Count - How many particles are created
Launch - Direction to launch the particles
Speed - How fast particles are launched from their start
Spread - How much to vary the launch direction
Gravity - Direction to pull the particles
Pull - How hard to pull each particle
Jitter - How much particles wiggle around randomly

Shake

Lastly, there's the Shake animation.

As you would expect, this shakes the screen :-).

There are a few ways to customize it:

Shake - How far the screen moves
Speed - How fast the screen moves
Attack - How quickly the screen reaches its fastest movement
Hold - How long the shake continues at its fastest
Decay - How slow the screen settles back to the middle

Phew!

Alright, that's enough for this month!

These four animation types can create some cool effects. Keep in mind they can be combined - there are up to three animations per room. That means you can have a waterfall using particles, in a dark cave with a flashlight, and a rumbling earthquake, all in the same room.

This design also allows for new animation types in the future - but these four are good enough to get started.

Thanks for following along, see you in July!

- Sean aka @velipso

Website: spookshow.studio