Beginner Game Programming Workshop

1 Meow game app

1.1 Interactive sound
Type in the following code, save it and test it:
1 function love.load ()
2 sound = lo v e . a u d i o . n e w S o u r c e ( " meow1.ogg " )
3 end
4

5 function love .mous epress ed ()

6 sound : play ()
7 end
The code in love.load() loads a sound file, love.mousepressed() plays it when a mouse button is
pressed or the touchscreen is touched.

1.2 Interactive image

Add the loading of two images to love.load():
1 bild_auf = l o v e . g r a p h i c s . n e w I m a g e ( " open.png " )
2 bild_zu = l o v e . g r a p h i c s . n e w I m a g e ( " closed.png " )
Insert the following two functions to your code:
1 function love.update ()
2 bild_aktuell = bild_zu
3 if sound : isPlaying () then bild_aktuell = bild_auf end
4 end
5

6 function love.draw ()
7 love.graph ic s. dr aw ( bild_aktuell , 0 , 0 )
8 end
love.update() calculates, which of the images is the current one. love.draw() draws it. Both
functions work 60 times per second. The image doesn’t quite fit but we will take care of that later.

1.3 Random meow sounds

Add the following random generator initiator and list (or table) of sounds to love.load():
1 soundliste = {
2 love.aud i o . n e w S o u r c e ( " meow1.ogg " ),
3 love.aud i o . n e w S o u r c e ( " meow2.ogg " ),
4 love.aud i o . n e w S o u r c e ( " meow3.ogg " ),
5 love.aud i o . n e w S o u r c e ( " meow4.ogg " ),
6 love.aud i o . n e w S o u r c e ( " meow5.ogg " ),
7 }
8 math.randomseed ( os.time () )
Replace the content of love.update() with code, which uses the sound list:
1 bild_aktuell = bild_zu
2 for i , u in pairs ( soundliste ) do
3 if u : isPlaying () then bild_aktuell = bild_auf end
4 end
Replace the content of love.mousepressed() with code which plays random sounds:
1 wahl = math.random (1 ,5)
2 soundliste [ wahl ]: stop ()
3 soundliste [ wahl ]: play ()

Beginner Game Programming 1/6 espws.de/en

 1.4 Adapt to different screens
Add calculations of the relations between image and window size to love.load():
1 fx = l ov e. g r a p h i c s . g e t W i d t h () / 1024
2 fy = lo v e. g r a p h i c s . g e t H e i g h t () / 600
Add scaling parameters to the love.graphics.draw() function call in love.draw():
1 love.graph ic s. dr aw ( bild_aktuell , 0 , 0 , 0 , fx , fy )
The image fits to the screen size this way, since mobile phones/tablets only have one resolution. This
is not optimal but a simple solution for the start.

1.5 Android port

If you would like to put own graphics (you can draw on the computer or on paper) and sounds into your
meow game app, tell the workshop coaches. You can also change the app icon.
We recommend to code the "back" button to close the Android app:
1 function love.keypressed ( key )
2 if key == " escape " then love.event.quit () end
3 end
To make the app playable on Android, a zip archive of the game has to be made, it must be renamed
to game.love and put into the project directory. Then use the make-apk script. The resulting game.apk
must then be put on the mobile phone/tablet and installed there. Let workshop coaches help you.

2 Cat and mouse game app

2.1 Image and sound
Type in the following code (without -- comments), save it and test it:
1 function love.load ()
2 math.randomseed ( os.time () ) -- For random numbers
3 love.windo w. s e tM o d e ( 1280 , 720) -- Changes screen size
4 grasBild = l o v e . g r a p h i c s . n ew I m a g e ( " gras.png " )
5 katzeBild = l o v e . g r a p h i c s . n e w I m a g e ( " katze.png " )
6 mausBild = l o v e . g r a p h i c s . n ew I m a g e ( " maus.png " )
7 katzeX = 400 -- Position of the cat
8 katzeY = 300
9 mausX = 300 -- Position of the mouse
10 mausY = 150
11 musik = lo v e . a u d i o . n e w S o u r c e ( " musik.ogg " )
12 musik : setLooping ( true )
13 musik : play ()
14 end
15

16 function love.draw ()
17 love.graph ic s. dr aw ( grasBild , 0 , 0 )
18 love.graph ic s. dr aw ( katzeBild , katzeX , katzeY )
19 love.graph ic s. dr aw ( mausBild , mausX , mausY )
20 end
The code in love.load() changes the screen resolution, loads the images and music, sets position
variables and plays the msuic. love.draw() draws the images, 60 times per second. They don’t quite
fit but we will take care of that later.

Beginner Game Programming 2/6 espws.de/en

 2.2 Automatic and interactive movement
Add mouse click position variables and sounds to love.load():
1 klickX = 400
2 klickY = 300
3 quietsch = l o v e . a u d i o . n e w S o u r c e ( " quietsch.ogg " )
4 miau = l o v e . a u d i o . n e w S o ur c e ( " miau.ogg " )
Add the following three functions to your code:
1 function distanz ( x1 , y1 , x2 , y2 )
2 a = x1 - x2
3 b = y1 - y2
4 return ( math.sqrt ( a ^2 + b ^2 ) )
5 end
6

7 function love.update ()
8 mausX = mausX + 7
9 if mausX > 800 then
10 mausX = -48
11 mausY = math.random ( 20 , 400 )
12 end
13 if distanz ( katzeX , katzeY , mausX , mausY ) < 40 then
14 quietsch : play ()
15 mausX = 999
16 end
17 if distanz ( katzeX , katzeY , klickX , klickY ) > 8 then
18 diffX = klickX - katzeX
19 diffY = klickY - katzeY
20 norm = math.sqrt ( diffX ^2 + diffY ^2 )
21 einhX = diffX / norm
22 einhY = diffY / norm
23 katzeX = katzeX + einhX * 5
24 katzeY = katzeY + einhY * 5
25 end
26 end
27

28 function love .mous epress ed ( x , y )

29 klickX = x
30 klickY = y
31 miau : play ()
32 end
The distanz() √ function calculates the distance between two dots thanks to the Pythagoras’ theorem
or the formula c = a2 + b2 .
love.update() 1. Moves the mouse, 2. Puts the mouse back, after it crosses the right border or
3. when cat and mouse touch, 4. moves the cat
The code in love.mousepressed() changes the klickX and klickY variables each time a mouse
button is pressed or the touchscreen is touched.

Beginner Game Programming 3/6 espws.de/en

 2.3 Screen size
Add calculations of the relations between image and window size to love.load():
1 fx = l ov e. g r a p h i c s . g e t W i d t h () / 800
2 fy = lo v e. g r a p h i c s . g e t H e i g h t () / 450
Add scaling parameters to the love.graphics.draw() function call in love.draw():
1 love.graph ic s. dr aw ( grasBild , 0 , 0 , 0 , fx , fy )
2 love.graph ic s. dr aw ( katzeBild , katzeX * fx , katzeY * fy , 0 , fx , fy )
3 love.graph ic s. dr aw ( mausBild , mausX * fx , mausY * fy , 0 , fx , fy )
Ersetze die Variablenzuweisungen in love.mousepressed(), um vom Bildschirm aufs Spielefeld zu
projezieren:
1 klickX = x / fx
2 klickY = y / fy

2.4 Score and time

Add image sizes, font configuration, time and score to love.load():
1 breite = l o v e . g r a p h i c s . g e t W i d t h ()
2 hoehe = l o v e . g r a p h i c s . g e t H e i g h t ()
3 l o ve . g r ap h i c s . s e t N e w F o n t ( hoehe /15)
4 zeitStart = l ov e.t im er .g et Ti me ()
5 zeit = 30
6 punkte = 0
Add time calculaation to love.update():
1 zeit = 30 - math.floor ( lo ve .t im er .g et Ti me () - zeitStart )
Add a score counter to the one if block in love.update() which reacts to cat and mouse touching:
1 if zeit > 0 then
2 punkte = punkte + 1
3 end
Add displaying time and score to love.draw():
1 text = " Zeit : " .. zeit .. " , Punkte : " .. punkte
2 love.graph i c s . p r i n t f ( text , 0 , 0 , breite , " center " )
You should put the content of love.update() into a if zeit > 0 then ... end block to stop
the game after the time runs out. You can use a similar block in love.draw() to display a "Game Over!"
message.

2.5 Android port

See section 1.5.

Beginner Game Programming 4/6 espws.de/en

 3 Matrix music DJ app
Type in the following code (without -- comments), save it and test it:
1 function love.load ()
2 la , lg = love.audio , love.graphics
3 math.randomseed ( os.time () ) -- For random numbers
4 namen = { " lead " , " drums " , " drumsb " , " clap " }
5 instr = {{} ,{}} -- Table of instruments with...
6 for i = 1 , 2 do -- two rows and...
7 for j = 1 , # namen do -- four columns
8 instr [ i ][ j ] = {}
9 instr [ i ][ j ] .snd = la.newSource ( namen [ j ] .. i .. " .ogg " )
10 instr [ i ][ j ] .snd : setLooping ( true ) -- Endless looping on
11 instr [ i ][ j ] .snd : setVolume ( 0 ) -- Loudness to 0
12 instr [ i ][ j ] .snd : play () -- Track playback starts
13 instr [ i ][ j ] .farbe = { 60* j , math.random (200) , 200 }
14 end
15 end
16 spalten , zeilen = # instr [1] , # instr -- 4 columns , 2 rows
17 breit , hoch = lg.getWidth () , lg.getHeight () -- Screen size
18 feldb , feldh = breit / spalten , hoch / zeilen -- Touch field size
19 end
20

21 function love.draw ()
22 for i , zeile in ipairs ( instr ) do -- i is the index , zeile is the value
23 for j , instrument in ipairs ( zeile ) do
24 lg.setColor ( instrument.farbe ) -- Instruments have own colors
25 lg.rectangle ( " fill " , (j -1) * feldb , (i -1) * feldh , feldb , feldh )
26 if instrument.snd : getVolume () == 1 then
27 lg.setColor ( 255 , 255 , 255 , 95 ) -- on / off state is displayed
28 lg.circle ( " fill " , (j -0 .5 ) * feldb , (i -0 .5 ) * feldh , feldb *0 .4 )
29 end
30 end
31 end
32 end
33

34 function love .mous epress ed (x , y ) -- Gets started by mouse / touchscreen

35 wob = math.ceil ( x / feldb ) -- Calculating column
36 woh = math.ceil ( y / feldh ) -- Calculating row
37 if instr [ woh ][ wob ] .snd : getVolume () == 1 then
38 instr [ woh ][ wob ] .snd : setVolume (0) -- Loudness 0%
39 else
40 instr [ woh ][ wob ] .snd : setVolume (1) -- Loudness 100%
41 end
42 end
The code makes intense use of tables/lists and for loops as well as calculations, which might need a
bit more time to be understood. Feel free to ask coaches for help.

3.1 Android port

See section 1.5.

Beginner Game Programming 5/6 espws.de/en

4 Epilogue

LÖVE draws pictures and shapes using positions in a coordinate system, which originates from the top
left corner towards right and down.

LÖVE is the game engine used in this workshop. More information about LÖVE programming is available
at love2d.org/wiki/love .

Additional workshop material is available at espws.de/en .

©2015 Iwan Gabovitch, Einstieg Spiele-Programmierung Workshop.

This document is licensed under a Attribution-ShareAlike 4.0 International Public License.

Beginner Game Programming 6/6 espws.de/en