LIGHTWELL | LESSONS

Guide #3Layers & Ambient Motion

CREATING YOUR FIRST SCENE

Open up your web browser and grab any image

from the web. We downloaded this cute cat photo.

STEP 1

LIGHTWELL 1

WHAT IS A SCENE? !

LAYEREDITING A

A “Scene” in Lightwell

represents an individual

screen in your app.

You can create as many

Scenes as you like. Add new

Scenes by clicking on the

+New Scene button.

Animations

Open up a New Lightwell Project. Double

Click Scene 1. !

Find the picture you just downloaded. !

Click and drag that picture into your Lightwell Layers Panel.

STEP 2

That’s it! You just created your first Layer! "

LIGHTWELL 2

Animations

WHAT IS A LAYER? #

LAYEREDITING A

Layers in Lightwell hold things like images, videos or sprites.

When you drag any of these assets to your Layers Panel on the left hand side of the interface, it will appear on the Canvas in the center of your screen.

Layers are positioned on the Canvas relative to their order in the Layers Panel. This means that you can put one Layer behind another to give depth to your project. This “layering” is how Layers got it’s name.

Drag Me!

Let’s start by changing a few simple Layer

Properties:

First, change the Width or Height to “2”. STEP 3

LIGHTWELL 3

LAYER PROPERTIES

Layer Properties allow us to

manipulate our Layers in

various ways. Want to make

a layer larger or smaller?

Maybe you’d like to rotate it

90 degrees on it’s side or

make it slightly transparent.

All of these things can be

accomplished within the

Layer Properties Panel.

Scale, the property we’re

changing in this step alters

the size of your layer. Here,

we’re doubling it in size.

Layer Properties !

LAYEREDITING A

before...

after…

Size: 1.0

Size: 2.0

Now, enter “180” under the rotate property.STEP 4

LIGHTWELL 4

LAYER PROPERTIES

LAYEREDITING A

Rotating a layer does just

what it sounds like… it

rotates it!

Here, we’re rotating our

photo 180 degrees, flipping

it upside down. before... !

"after…

Rotation: 0

Rotation: 180

Layer Properties #

Give your Layer an Opacity of “50%”STEP 5

LIGHTWELL 5

OPACITY

LAYEREDITING A

What is Opacity? Simply put,

it’s how transparent

something is. By default,

images are set to 100%

Opacity, meaning they are

completely opaque. You

can’t see through them.

Give a layer an Opacity less

than 100% however, and

you’ll gradually start to see

through it more as you

reach 0%, where it isn’t

visible at all!

before...

after…

Opacity: 100%

Opacity: 50%

Layer Properties !

Open up the Ambient Motion Panel under

Layer Controls.

Set the “Duration” to 1s.⏱

STEP 6

STEP 7

LIGHTWELL 6

WHAT IS AMBIENTMOTION?

Ambient Motion let’s you

add a simple animation to a

layer that loops forever.

But first thing’s first: you

need to set a Duration. A

Duration is how long it takes

to complete just one of

those animation loops.

A shorter Duration = a faster

Animation. "

A longer Duration = a slower

Animation. #

Ambient Motion$

before...

after…

LAYEREDITING A

STEP 9

Under “Scale,” set both the Width and

Height to “0.4” and see what happens.

STEP 8

Your layer should now be moving all on it’s own! Try messing around with some

of the settings even further. If you have multiple layers, you can copy + paste

Ambient Motion from one layer to another!

LIGHTWELL 7

WHAT IS TIMING?

Under Ambient Motion,

you’ll see a section labeled

“Timing.”

The Timing shows the the

pace of the animation with

an actual curve.

If you animate a ball falling

and choose linear timing, it

will move at the same pace

from beginning to end.

If you animate a ball falling

and choose ease-in timing,

it will start slow and

accelerate at the end.!

LAYEREDITING A

Ambient Motion"

0.4

1.0

20°

Set the “Rotation” to 20°.

LIGHTWELL 8

GLOSSARYDURATION

Ambient Motion is an animation that loops forever. The time it takes for one loop to complete is called Duration.

Setting a shorter time results in a faster-looking animaiton while a longer time results in a slower one!

SCALE

By default, Layers are imported into Lightwell with a Scale of “1.0” or, 100%.

Under the Ambient Motion Panel, if you set the Scale to “1.2”, your layer will animate the di!erence automatically.

MOVEMENT

Just like in Math Class, Lightwell uses an X and Y axis to determine movement.

Give X a value greater or less than 0 and watch your layer animate along a horizontal line. Give it a Y value to animate it along a vertical one.

ROTATION

Want your layer to animate by rotating along a point? Give this a value between -90 and 90 and start experimenting!

TIMING

When an object moves in real life, it doesn’t start and stop instantly. Think about when you open a refridgerator door— when you first tug on it, you pull it open quickly and then slow down as it fully opens.

Timing an animation works very much the same way. They define the change in an animation’s speed over time.