Activity 1.7

Making It Move

Key Concepts

A Second Box

Change Between Frames

Speed That Does Not Depend on the Computer

Your Programs Already Repeat

local x = 100

function love.draw()
    love.graphics.circle("fill", x, 300, 40)
end

Your Programs Already Repeat

local x = 100

function love.draw()
    love.graphics.circle("fill", x, 300, 40)
end

That circle is drawn sixty times a second, and has been since session 2.

It looks still because every one of those sixty pictures is identical.

So Motion Is Not Drawing

Motion is changing something between the pictures.

You do not have to write the repeating. It is already happening.

There Is a Second Box

function love.update(dt)

end

function love.draw()

end

love.update

Change things. Runs first, every frame.

love.draw

Draw things. Runs second, every frame.

Think, then paint. Sixty times a second, forever.

Two Lines Make It Move

local x = 100

function love.update(dt)
    x = x + 2
end

function love.draw()
    love.graphics.circle("fill", x, 300, 40)
end

Two Lines Make It Move

local x = 100

function love.update(dt)
    x = x + 2
end

function love.draw()
    love.graphics.circle("fill", x, 300, 40)
end

x = x + 2 is the line from session 3, running sixty times a second.

Now the Rule From Session 3 Matters

function love.update(dt)
    local x = 100
    x = x + 2
end

This never moves. A variable made inside the box is made again every frame, set back to 100, and thrown away.

Anything that has to remember between frames lives above both boxes.

What Is dt?

The number in the parentheses. Seconds since the last frame — usually about 0.0167, which is one sixtieth.

The engine measures it and hands it to you. You never set it.

Why It Matters

x = x + 2 means 2 pixels per frame.

Why It Matters

x = x + 2 means 2 pixels per frame.

A faster computer draws more frames, so the same program runs faster on a better machine.

That is how old games become unplayable on new hardware.

Multiply by dt Instead

local x = 100
local speed = 200

function love.update(dt)
    x = x + speed * dt
end

Multiply by dt Instead

local x = 100
local speed = 200

function love.update(dt)
    x = x + speed * dt
end

speed is now 200 pixels per second, on every computer, forever.

Half a frame or a double frame, the distance works out the same.

Then It Leaves

Then It Leaves

Nothing in your program says stop, so nothing stops it.

It is still out there, still moving. Session 9 is where you get to say something about it.

Today's Objectives

• Write code in love.update
• Change a variable between frames to make a shape move
• Say why the variable cannot live inside the box
• Use dt so speed is per second, not per frame

Key Terms

Frame

One pass of update and draw. About 60 per second.

love.update

Where things change. Runs before love.draw.

dt

Seconds since the last frame, measured for you.

Frame rate

How many frames a computer manages per second.

'F' → Fullscreen

Build

Task 1: One Circle, Standing Still

Copy template-game to 1-07-move and start from what you already know:

1
local x = 100
2

3
function love.draw()
4
    love.graphics.circle("fill", x, 300, 40)
5
end

Run it. Nothing surprising — but that circle is being drawn about 3,600 times a minute.

Task 2: Add the Second Box

Put love.update above love.draw:

1
local x = 100
2

3
function love.update(dt)
4
    x = x + 2
5
end
6

7
function love.draw()
8
    love.graphics.circle("fill", x, 300, 40)
9
end

Run it. Then change the 2 and run again — try 10, then 0.5, then -2. Write down what each one does.

Task 3: Watch the Number

print still works in a graphics program. The output goes to the terminal panel while the window is open:

1
function love.update(dt)
2
    x = x + speed * dt
3
    print(x)
4
end

103.33333333333
106.66666666667
110
...
796.66666666667
800
803.33333333334

The circle left the window and the number kept going. Let it run past 800 and write down what it says. Nothing is wrong; nothing told it to stop.

Take the print line back out before the next task. Sixty lines a second fills a terminal fast.

Task 4: Speed in Seconds, Not Frames

Replace the moving line with the honest version:

1
local x = 100
2
local speed = 200
3

4
function love.update(dt)
5
    x = x + speed * dt
6
end

speed is now measured in pixels per second. Set it to 800 and the circle crosses the window in one second. Time it.

Then set it to 50, then -200. Write down how long each crossing takes.

Challenge (Optional): Diagonal

Give it a second speed and move both coordinates:

1
local x = 100
2
local y = 100
3
local speedX = 200
4
local speedY = 120
5

6
function love.update(dt)
7
    x = x + speedX * dt
8
    y = y + speedY * dt
9
end

Then make it move up and to the left instead, without changing anything except two numbers.

Challenge (Optional): Growing

Nothing says the changing variable has to be a position. Make the radius grow instead: radius = radius + 30 * dt, with the circle standing still.

Then try growing and moving at the same time, and try a negative growth rate. Watch what the circle does as the radius passes zero, and write down whether Lua complains about it.

Checkpoint

• 1-07-move has a circle that crosses the window and leaves
• The moving line is x = x + speed * dt, not x = x + 2
• x and speed are declared above both boxes
• You can say what happened when x was moved inside the box

Reflection

Answer the following questions before submitting your work.

1. Your circle from session 2 was already being drawn sixty times a second and looked completely still. Explain what "moving" actually means to a computer, given that.
2. Moving local x = 100 inside love.update stopped the circle. Describe what happens to x on each of the sixty frames in that version.
3. x = x + 2 and x = x + 200 * dt look about the same on your computer. Describe a situation where they behave completely differently, and say which one you would rather have written.

Submit

Submit the required files to the appropriate dropbox.

Activity Complete