Advance Book-Part 1 en

TABLE OF CONTENT - ADVANCE 1
Meeting 1
INTRO TO CONSTRUCT AND JUMPING PLATFORM ......................... 1
Meeting 2
NAVIGATE THROUGH THE MAP ....................................................... 18
Meeting 3
ANIMATE INSIDE LAYOUT ............................................................... 32
Meeting 4
ENEMY SCORE AND NEXT LEVEL .................................................... 44
Meeting 5
DRAWING WITH INKSCAPE ............................................................. 62
Meeting 6
BALL, PADLLE, AND BLOCKS ........................................................... 79
Meeting 7
BOUNCING BALL AND FLOATING BLOCKS ..................................... 95

Meeting 8
LIFE AND NEXT LEVEL ...................................................................... 106
Meeting 9
LAYOUT AND BUTTON .................................................................... 114
Meeting 10
DRAWING BIRD AND PIG ............................................................... 120
Meeting 11
AIM AND SHOOT ........................................................................... 130
Meeting 12
PARTICLES AND NEXT STAGE .......................................................... 146
Meeting 13
PICK COLOR AND TRACE ............................................................... 155
Meeting 14
DESIGN EXAM ................................................................................. 164
Meeting 15
PROGRAMMING EXAM 1 ................................................................. 165
Meeting 16
PROGRAMMING EXAM 2 ................................................................. 166
TABLE OF CONTENT - ADVANCE 2
Meeting 1
DRAW WITH GRID AND BEZIER CURVE ............................................ 167
Meeting 2
GLOWING SPRITESHEET .................................................................. 182
Meeting 3
SELECT PLAYER AND SHOOT RANDOM METEOR .............................. 193
Meeting 4
LIFE, SCORE, AND FAMILY FEATURE ................................................. 213
Meeting 5
POWER-UP ITEMS ............................................................................ 228
Meeting 6
INSTANCE VARIABLE AND GAME OVER ........................................... 237
ADVANCE 1
INTRO TO MEETING 1
CONSTRUCT
AND JUMPING
PLATFORM
What are we going to learn today?

Closer Look to Construct 3 Website
Sprite Movement Using Behavior
1
Meeting 1 - Intro to Construct and Jumping Platform
CONSTRUCT 3
Isn’t it fun developing your own game?

What are the games you made in Scratch
Now we will learn to make a more exciting game in Construct 3!
Construct 3 is a website specialized in making

2D games such as shooter and platformer games
You can also make game just like that!

Do you want to find out how to make games using Construct 3?
Let’s make games using Construct 3!
We will start with a Mini Platformer game, listen to the

teacher’s instruction carefully!
2
CREATE NEW GAME
STEP 1
Open link : https://editor.construct.net/ > NEW PROJECT
Name it : “Meeting1_[yourName]”
Match the settings to the picture below
Click Create
to start making
your game.
STEP 2
After the project is made, activate the autosave
feature to secure your project.
Click Menu > Setting > Save and Backup
Setting the file

location
Setting the backup file

location
Autosave time interval
You can save your projects in Timedoor’s GDrive or your own Gdive.
3
CREATE NEW GAME
STEP 3
On the Properties tab, Set the layout size to 854 x 480
After the layout is done, we need to add sprites into the layout
Do you know what a Sprite is?
Can you give an example of Sprite in a game that you
know?
Layout is the arranged location of objects in a game.

This group of objects is the elements of every level, menu,
or a title page.
Sprite is an element that exist in a game.

Sprite can be a player, an enemy, an obstacle, or
item points.
Follow these directions below to add Sprites.
4
ADDING SPRITE
STEP 1
You will need 3 sprites.
sprite 1 : Platform
sprite 2 : Rabbit
Sprite 3 : Carrot
We will start by adding a platform sprite

Right Click on the layout and then click + Insert new object button
Choose sprite > Insert then click the layout
5
ADDING SPRITE
STEP 2
Select the color Green, and then click Fill (Paint Bucket icon) and click
inside the square
3
2
This is the result
When you finish, click close to the upper right corner to return to
the layout.
STEP 3
The sprite in the layout display will appear like this
Set the size to 200 x 40
6
ADDING SPRITE
STEP 4
Duplicate your sprite platform by Right
click > copy > paste and set the layout
according to the example below.
We have added sprites using sprite editor tools in Construct’s and

duplicated the sprites using copy paste.
Next, we will import pictures from the computer as a sprite.

We will add a Rabbit sprite
STEP 1
Right click > Insert new object > Sprite
Choose Load an image from a file (CTRL + O) on the menu above.
7
ADDING SPRITE
STEP 2
Choose Rabbit and Open
Back to the layout set the size to 50 x 90

Place the Rabbit on the lowest
platform
STEP 3
Add 2 Carrot sprites using the same methods to add the

Rabbit sprite.
Do not Copy-Paste the sprite since we need to add

different set movements behavior for each carrot.
8
BEHAVIOR
We will make the Rabbit to be able to move left and right and also jump
on the platforms. We will also make the carrot moves.
How to make a sprite move in Scratch ?
Can you make a sprite jump in scratch?
How to make a sprite rotates in scratch?
In Construct 3, Moving sprites will be easier by using various

Behavior
Behavior is a set of certain actions for the sprites that can

be added without coding.
9
ADDING BEHAVIOR
The first behavior that we will use is Solid. We will give this
Behavior to the platform that the Rabbit will stepped on.
Solid is a behavior which makes an object

impenetrable that other objects cannot pass
through it.
STEP 1
Add the behavior to the platform by
Right click on the sprite > Add >
Behavior > Solid
After adding behavior, Click Add on

bottom side to select.
You can check the sprite’s behaviors in the

Properties tab on the left side of the layout.
The result of Copy-Paste an object that already has

behaviors is an object with the exact same behaviors owned
by the original.
10
ADDING BEHAVIOR
STEP 2
Using the same methods, we will give a behavior

to the Rabbit.
Choose Platform Behavior.
Platform is a type of behavior which creates

walking and jumping actions on a platform (an
object with Solid behavior)
Play your game by clicking the play button on the upper side and
move the rabbit using arrow keys.
Next, Let’s set the position of the Carrot

Place the carrots according to the example below.
11
ADDING BEHAVIOR
STEP 3
We will continue by giving Behaviors to the Carrots
Type Behaviors that we will use are Sine and Rotate
1 Add behavior: Sine
2 Add behavior: Rotate
Sine is a type of behavior that set the object

properties (position, size, and degree) in the form
of sine-wave
Rotate is a type of behavior that makes the object

to rotate
You can check out the effect of the behaviors

to sprite that by clicking Preview button in the
Behavior Properties
Save your Project by clicking

Menu > Project > Save
12
EXPLORE
1. Try to add the Sun and 2 Clouds to the layout and

arrange them according to the example below!
Make the Sun spin and the Clouds move left and right!
2. Add 1 sprite lalu and try to add various behaviors to find out
the functions and what do they do!
No Behavior Function
13
CHALLENGE
1. Now try to make your layout bigger

Set the layout size and viewport size to 1280 x 720
Layout size
1
Viewport size
2. Try to make platforms with 2 different sprite.

You can pick any color for your platforms.
3. Arrange your platforms according to the exampple given.

Blue platform : stay in place
Red platform : move left and right
4. Also add your own player

You can draw it yourself or get one from the internet.
5. Add some items on the platforms as well.
14
CHALLENGE
Move left and

right
15
GAME TIME
Let’s play Carrot Quest

https://www.thelogicgame.com/games/carrotpush/index.html
Move the Rabbit

by clicking the
desired box.
Rabbit will move
while pushing
carrot seeds
Planting ground
Carrot seeds must
be pushed until they
reach the planting
ground
16
HOW WAS TODAY’S LEARNING?
What is Behavior?
Answer : __________________________________________
____________________________________________________
What Behaviors we used while making our Mini

Platformer game?
Answer : __________________________________________
____________________________________________________
Why do you need to add Solid behavior to the

platforms?
Answer : __________________________________________
____________________________________________________
What is the function of Platform behavior on player?

Answer : __________________________________________
____________________________________________________
17
MEETING 2
NAVIGATE
THROUGH
THE MAP

Arranging The Maze
Using Event Sheet
18
Meeting 2 - Navigate Through the Map
MAZE
Do you still remember what you have learned in the previous

meeting?
We have learned about Behavior
Do you still remember what is Behavior?
We will learn how to move characters to various points using a new

behavior calld 8 Direction in the Maze Game.
Maze Game is a type of game where we need to move in a complex

route and multiple junctions to find a way out.
A maze usually has some obstacles or enemies that must be

avoided and items that must be collected like in the game below.
Try a maze game in the website below:

https://www.mathsisfun.com/games/mazes.html
19
FIND YOUR WAY
Player
Click and drag to move the player to
the desired direction.
Choose the level of

difficulty of the game. Finish Line
Click to show a new

maze.
Was the game you played difficult?

What was your highest level in this game?
Which level was your favorite?
Let’s make your own Maze Game by following the instructions
below!
20
DRAWING MAZE
STEP 1
Prepare your project according to the rules below:
Nama project : Maze_[yourName]

Viewport size : 854 x 480
Layout size : 854 x 480
Make sure the autosave is active.
STEP 2
Add a blue square sprite

for the Maze’s wall
Add Solid behavior to
make the player unable to
pass through the walls.
STEP 3
Copy and paste

the sprite you
have made and
arrange them to
make a maze as
shown beside.
21
ADDING PLAYER
Continue by adding a player sprite.

Player will be able to move inside the maze which is controlled by the
arrow keys on the keyboard.
Follow the instructions below:
STEP 1
Add player sprite from your computer
Do you still remember how to do it?
Set the size to 45 x 40 and place it on the lower left corner.
22
MOVING PLAYER
STEP 2
Let’s make your player move!
Do you still remember how to make a player move in Scratch?
What codes do you use to make the player move?
In Construct 3, moving player can be done easily by using a certain

Behavior.
Add 8 Direction Behavior to the player
8 Direction is a type of behavior that allows

an object to move up, down, right, left,
and diagonally
Now try to play your game!

Can you move the player with the arrow keys on the keyboard?
Can you solve the Maze and find a way out?
Add sprites of Seaweed 1 and 2 in some points to decorate your Maze!
Seaweed 1 Seaweed 2
size 91 x 67 size 55 x 60
Do you still remember how to add and multiply a sprite?
23
JELLYFISH
We will ad sprite Jellyfish sprite which will

move up and down and can push the player.
Did you know that a sprite could have more than just one
Behavior?
We will use Sine behavior to make the Jellyfish move up and
down and Solid behavior to make the Jellyfish able to push the
player.
We will add the Behaviors to the Jellyfish using a different
method, we will add them from the Properties.
STEP 1
Click the jellyfish, and on the
Properties click Add/Edit
Behavior
Click Add New Behavior > Solid
STEP 2
After adding Solid behavor, it will
appear as follows
Click back on the Add New
Behavior to add new behaviors
Choose Sine and set as follows
24
URCHIN AND WORM
STEP 1
We will add Urchin sprite which will appear bigger
and smaller and spin
Add Rotate behavior to make the Urchin spin

Also add Sine behavior using the following
settings
STEP 2
We will add Worm sprite which will move left and
right
Add Sine behavior using the following settings
25
EVENT SHEET
Who still remember what Event is?

Can you give an example of event in a game?
Event is a cause that makes something hapen. In this game we will be

making Worm sprite dissappear when touching the Player.
The commands that we will be giving to the sprite will be arranged in
Event Sheet tab.
This tab can be found in the upper part of layout
Click Event sheet 1!
Event Sheet is a page that contains logic commands that

will be use to run the program.
STEP 1
Click Add Event to add a new Event
Click Player > Next
26
EVENT SHEET
STEP 2
Click On collision with another object > Next > Click to choose
Select Worm > OK >
It will look as follows
27
EVENT SHEET
STEP 3
Click Add Action to add a

new Event
Click Worm > Next
Click Destroy > Next
Your coding will look like below
Try to move your player to touch the worm. See what happens!
28
EXPLORE
In making a Maze, we use1 sprite and then Copy-Paste it to create the

wall of the Maze
Why don’t we just draw a Maze when we create a sprite?
Let’s find out together!
1. Make a new project and name it: ExploreMeeting2_[Your

Name], adjust the size with the Maze project that you make.
2. Add Maze sprite as in the picture,

Add Solid behavior
3. Adjust the sprite size

following the size of the
screen
4. Add a Player (as you like), add 8 Direction behavior
5. Play your game

Can the player move?
Why do you think it happens?
29
CHALLENGE
After learning how to combine several behaviors in 1 sprite,

let’s continue working on the Maze game that you made in the
previous meeting!
1. Try combining multiple behaviors in one sprite and

see what happens to your sprites
No Behavior 1 Behavior 2 Result
2. Try adding Trumpet sprites

Place it at the exit of the Maze
Make the trumpet move bigger, smaller, and spin!
3. Open again the platformer project that you have already

done previously.
Add a code to destroy 1 sprite in the game when touching
with the Player.
30
How do you arrange the Maze layout?

Answer : __________________________________________
____________________________________________________
What is the function of 8 Direction to the player?

Answer : __________________________________________
____________________________________________________
What is the function of Event Sheet?

Answer : __________________________________________
____________________________________________________
How do you code to make the Worm disappear

when touching the Player?
Answer : __________________________________________
____________________________________________________
31
MEETING 3
ANIMATE
INSIDE LAYOUT

Getting to know Animation Frame
Using 8 Direction and Bound to Layout behavior
32
Meeting 3 - Animate Inside Layout
ANIMATION FRAME
Do you still remember what we have learned in the previous

meeting?
We have learned about Layout and Event Sheet
What is the function of Event Sheet in Construct 3?
Today we will learn about Animation frames and we will also learn
about a new behavior called Bound to Layout
Let’s start with Animation Frame
Have you ever watched Animation movies?

The characters in the Animation movies are moving pictures that do a lot
of things. In order to do that, the animation maker (animator) combines
multiple pictures with different postitions and poses of the characters.
As you can see on the picture above, to make the character jumps and
falls, it takes 9 pictures that are shown one after another (sequentially).
These group of pictures is called Animation Frames.
In Scratch, animation can be made using Next Costume blocks to

change the costume or appearance of a sprite so it looks like as if it is
moving.
Animation Frame is a combination of static pictures that

are displayed one after another (sequentially) to create a
certain movement.
33
ANIMATION FRAME
You also can make a simple

animation at home using
Flipbook, just like the one in
this video.
https://www.youtube.com/watch?v=Njl-uqnmBGA
Now it is time to create your Animation Frames in the Computer.
Prepare your project following this criteria:
Project name : TurtleAdventure_[Your Name]

Make sure the autosave is active.
Add background to your project

The method used to add background is the same as adding
sprites to your layout
Add water background and set the size similar to the layout, then
set the opacity : 50%
34
ANIMATION FRAME
STEP 1
We will add a sprite with Animation Frame
Select Add new Object > Sprite
Then select Turtle1 from your computer
Afterwards right click next to frame 0 > Import Frames > From Files
> choose Turtle2
STEP 2
Right click on the right side of the tab on
Animation 1
Then activate the Loop in the Animation
Properties
You can also set the speed of your animations by
adjusting the number in the Speed column
To check out the preview of your animation right

click on Animation 1 > Preview
35
MOVE YOUR SPRITE
STEP 3
Add 8 Direction Behavior to the Turtle and try to play your game.
How does your turtle move?
To make the turtle move properly we need to rotate the frames to

make the turtle heading right.
Edit the frames by clicking the Turtle 2x to open the sprite editor
Click Rotate 90O Clockwise to rotate

the frame to the right.
Do it to the entire frames.
What will happen if we only rotate

one frame without rotating the
other?
STEP 4
Try to move the turtle outside the layout.
The turtle still can move inside and outside the layout.
We will make the only to only be able to move around
inside the layout with a behavior.
Add Bound to Layout behavior.
Bound to Layout is a type of behavior that makes

the sprite unable to leave a layout.
36
RENAME SPRITE
Before continuing our project, in this game we already have 3 sprites

which are Turtle, Urchin, and backdrop. Rename your sprites to make
them easier to identify when coding.
Right click on the sprites and select

Rename. Give name to the Background,
Turtle, dan Urchin sprites
When playing a game there must be obstacles that must be avoided. For
example in the game above, T-rex must avoid the trees so that the game
continues.
What would happen if a T-rex hit a tree?
Give an example of an obstacle that you know in a game!
37
ADDING OBSTACLES AND ITEMS
Obstacle is an object that must be avoided in the game.

(Sometimes it decreases player health or life point or will
end the game if it hits the player)
Add Rock sprite as an obstacle Set size to 43 x 36

Add Solid behavior and place it as below
Add Starfish sprite to your game, and don’t forget

to rename it
Code it so that when the Turtle touches the

Starfish, the starfish will disappear (Destroy)
38
CODING
On collision with another object command is used to

connect events between sprites.
For instance when the Turtle touches the starfish, the
starfish will disappear; in this event we will be connecting
Turtle
Try to play your game!

What happens when the Turtle touches the Rock?
What happens when the Turtle touches the Starfish?
How do you read the Codes that you’ve made?
39
EXPLORE
Check out the properties of 8 Direction

behavior
Try to change the number in the Max
speed, Acceleration, Deceleration as the
picture shows.
What happens to your character when
you start the game?
Let see what happens if:
1. We set the the Acceleration to 0, and Deceleration to 100
2. We set the Acceleration to100, and Deceleration to 0
3. We set the Directions to Up & Down
4. We set the Directions to Left & Right
5. We set the Directions to 4 Directions
Let’s try to draw Urchin sprite with 4 frames

(adding frames by right click> add frame)
In the Animation properties activate Loop
and Ping Pong
What difference does it make when the

Ping Pong option is enabled or disabled?
What is the function of Ping Pong option?
40
EXPLORE
Max Speed : Set the maximum speed of the sprite

Acceleration : Set the speed of the sprite from 0 to the
maximum speed
Deceleration : Set the speed of the sprite from the
maximum to 0
Ping Pong : Adjust the appearance of the frame with
back-and-forth order
4Direction works the same

as coding arrow keyboard in
scratch.
The 4 Direction option makes
the object can be controlled to
move right, left, up, down
Add Frame : Adding a blank frame where we can draw

our own animation
Import Frame : Adding a frame by using an image from
an existing file on the computer
41
CHALLENGE
After learning to add items, let’s continue to work on the

following challenges
1. Let’s add Rotate behavior to Starfish, then click Run layout!

Let’s see what happened to Starfish ?
Try to make Starfish spin faster !
2. Let’s add Sine behavior to Starfish

If the Movement is changed to Vertical, what will happened
to Starfish?
3. If the number in Period is reduced, what happens to

Starfish?
4. If the Magnitude number is increased, what happens to the

Starfish?

5. Try to add more Starfish and give 4 kinds of movement
variations on point items; such as spin fast, medium, slow,
and some other do not spin!
6. For the variation of point items which have medium speed

rotation, make the items spin while moving right and left!
7. For the variation of point items with fastest speed rotation,

make the item spin while moving up and down!
8. Try to make 1 Starfish spin at speed 90 and also move up

and down with Period 8 and Magnitude 100!
(Don’t let the starfish hit the obstacles and get out of the
layout!)
42
What is Animation Frame?

Answer : __________________________________________
____________________________________________________
How do you add a frame? What is the difference

between Add frames and Import frames?
Answer : __________________________________________
____________________________________________________
What is the function of Bound to Layout behavior?

Answer : __________________________________________
____________________________________________________
What should we do if we want to speed up the right

and left movement of the point items?
Answer : __________________________________________
____________________________________________________
43
MEETING 4
ENEMY SCORE
AND
NEXT LEVEL

Adding enemies and score
Making the next level into the game
44
Meeting 4 - Enemy Score and Next Level
ADDING ENEMY
What is your favorite game?

In your game, is there any enemies and
score?
How do you beat the enemies?
How do you get the score?
Now we will learn to add the enemyies

and scores into the game that we have
made!
Before we star, let’s recall some old memories!
1. How do you create point items in a game?
2. What type of Behavior used to make a sprite spins?
In this meeting we will use Rotate behavior and learn new behaviors to
move the enemies in the game
In the previous meeting we learned how to add the Obstacles.

Do you still remember what an Obstacle is?
Do you think an enemy is same to an obstacle?
Enemy is an object within a game that will stand in the way

or attack players and has to be defeated or avoided.
45
ADDING ENEMY
In games, enemies move in certain patterns. For example, there are

enemies which move in straight lines, in circles, and there are also
enemies that move following the path of the player.
Let’s try to add an enemy into the Game.

Open your Turtle Adventure game!
STEP 1
Add Shark spritesprite as your enemy, and don’t
forget to rename it!
Position the sprite in between 2 rocks
We will try to add a Behavior to the sprite to control the

movements of the enemy.
The first behavior that we will add to the enemy is Bullet
behavior.
Have you ever seen a bullet shot from a gun?

How does it move?
What do you think would happen if a sprite is given the Bullet
behavior?
46
ADDING ENEMY
Bullet is a type of behavior that makes a sprite

launch and move like a bullet.
STEP 2
Add Bullet behavior to the Shark.
After that adjust it so that when the Shark bounces
when hitting the rocks by activating the Bounce
off Solids option.
Uncheck the set angle option so that the shark

doesn’t spins or turn around when it hits the Rocks
STEP 3
Next we will try to combine 2 behaviors, Bullet dan Rotate
What do you think would be the movement in result of this
combination?
Try to give bullet and rotate to the Urchins and see what happens!
Make the Urchins to move around the Rock!
STEP 4
Codes to make the Turtle disappear when it touches shark and urchin
47
SCORE
Before creating the scores for the game, let’s try to remember
these below!
1. What is Variable?
2. Do you still remember what Global Variable is?
In a game, point items must be collected to add scores as a reward.

Score in a game is a Variable
Now let’s create scores in Event Sheet!
STEP 1
Make a Global Variable by right click on event sheet > Add global
variable
Name it Score > OK
Global Variable will be shown at the top part of Event sheet
48
SCORE
STEP 2
Add scores everytime the player collect point items
On event of set Turtle on collision with starfish;
Add action > System > Add to > Variable: Score; Value: 1

Can you see the score increases when the Turtle hits the Starfish?
Why do you think that could happen?
49
SCORE
STEP 3
In Scratch, the Variable that you make will be displayed directly into the
layout, but in Construct, if you want to display your Variable, you have to
use another object called Text
Add Text object into the layout by: Insert new object > Text
Set the properties similar to the

picture on the left
50
SCORE
STEP 4
Place the text

at top Left
corner of the
layout
STEP 5
On event set Turtle on collision with starfish;
Add action > Text > Set text > “SCORE : “&Score
Click twice on the

Score variable
icon
51
SCORE
Your codes will look like this
Try to play the game and see what happens!

Did you manage to make the score increase everytime the Turtle
is in contact with the Starfish?
How to decrease the Score?

Add is used to increase the Score. And to decrease it, we will use
Substract from
Add to
Has the similar function with change
score by 1 in Scratch
Subtract from
Has the similar function to change
score by -1 in Scratch
52
WATERGATE
Next, we will add a new layout to the game
Before making the new layout let’s first make a Watergate and place it
corner of the layout (size 140 x 40)
Later we will make the player to switch to the new layout when it touches
this Watergate sprite.
53
CREATE NEW LAYOUT
Follow these steps below to create a new layout!
STEP 1
On the project tab, right click on

the folder Layout > Add layout
> Add layout only
Set the size similar to the

existing layout
54
CREATE NEW LAYOUT
STEP 2
Add Background, Turtle, Rock, Starfish dan Text objects.
Since you already have used these objects in the previous layout, you
just need to drag and drop the objects you need from Project Tab
Click and Drag
55
ADDING ENEMY AND OBSTACLE
STEP 3
Add Jellyfish enemy in your game,
Make 2 animation frames (size 39 x 65)
for the jelly fish in your game
Make it moves up and down (adjust the
speed as you wish)
Code to make the Turtle disappear when it
hits the Jellyfish
STEP 4
Create 1 sprite with brown color and shape it like

a log, and then make the log spins obstructing the
turtle
(Turtle can’t pass through the log)
56
CODING
Let’s add some codes so that The turtle are able to switch layout
when it touches the Watergate
STEP 1
On Event Sheet, klik Add event > Turtle > On collision with
another object > Watergate
STEP 2
Add action > System > Go to layout > Layout 2
Try to play the game and see if you can switch between layouts
57
EXPLORE
Let’s explore with the new behaviors that we have just learned!
1. In Bullet behavior, if the number of Acceleration is increased, what

happens to the enemy?
2. In the Bullet behavior, if the number in Speed is

increased, What
3. In Bullet behavior, if the number of Gravity is increased, what

4. In Bullet behavior, if Set angle is activated What happens to the

enemy?
5. In Bullet behavior, if Bounce off solids is disabled, what happens to

the enemy?
6. In the Common property, if the angle is changed to 90, what

58
CHALLENGE
You have learned how to switch layouts

Try to do the following Challenges:
1. Create a new Watergate in layout 2

Code the turtle to return to layout 1 when touching the
watergates!
Add new watergate sprites on layout 2

If the Turtle touches this sprite it will return to layout 1
2. Open your Maze project again

Add 2nd layout with new enemies that have bullet behavior!
Make the players to be able to switch between Layouts 1 and
2!
Enemy with bullet behavior

Make the sprite bounce when it hits the maze
59
CHALLENGE
Do you remember the Jumping Platform and Maze games that

you made earlier?
Try to add coding to both games
1. Maze: Worm disappears when touching Player and Score

increases
2. Jumping Platform: Carrot disappears when touching Player

and Score increases
60
What kind of variable did you use to create the

Score?
Answer : __________________________________________
____________________________________________________
how do you make the Score appear?

Answer : __________________________________________
____________________________________________________
How do you make a new layout?

Answer : __________________________________________
____________________________________________________
What code do you use to switch to the next layout?

Answer : __________________________________________
____________________________________________________
61
MEETING 5
DRAWING
WITH
INKSCAPE

Getting to know Inkscape app
Using Inkscape to draw objects
62
Meeting 5 - Drawing with Inkscape
SPRITE AND VECTOR
Do you still remember what Sprite is?

Sprite in the computer and graphical world is pictures or 2D animation
that is integrated in to the screen.
Sprite also is an element in games similarand can be in the forms of a
player, enemy, obstacles and point items.
In this lesson we will learn how to draw Vector that we will use as sprite
within our game.
Vector is a type of computer graphic that formed by

multiple lines and curves. The quality of the graphic/picture
are unchanged no matter how much you enlarge it.
Vector can be in the form of pictures or logo that you usually see
everyday.
There are also vector in the form of text!
The difference between Vector and Bitmap/Raster
VECTOR BITMAP
Does not crack when zoomed, Cracked when zoom more than its
because it is made of curves initial size
Contohnya logo, Ilustrasi, dll Example Images dan Photo
Type File : .svg Type File : .jpg dan .png
63
WHAT IS INKSCAPE?
Inkscape is a free software used to make and

draw Vectors.
The main purpose of Inkscape is to become an

outstanding graphic processing software that
include these standards XML, SVG, dan CSS
Later we will design and draw sprites/background, using tools within

Inkscape
Pictures above is the interface of

Inkspace software, within it there are a
number of tools that we can use later to
draw vectors.
Next we will try to understand

the use of Tools and Function of
Inkscape.
64
TOOLS IN INKSCAPE
Inkscape Menu consists a number of important function on every

program, that is related to file management New, Open, Save, Export
Command Bar is on
Tools Box is on the the right side of the
left side of the screen, screen, containing
containing set of basic shortcut icons to
utility tools to create certain commands that
and change shapes can be accessed from
the menu or shortcut
button
65
TOOLS IN INKSCAPE
Choosing tools from the toolbox changes the Control Bar to show
the certain option related to the tools.
Snap Controls Bar is located on the right side of the screen,

with its function that is to allow easier access in setting
Snapping Method (Modes)
Color Palette is the fastest way to assign color on to a shape. It will

be displayed on the bottom side of the canvas, or can be opened via
windows by clicking this below
View > Swatches (Shift + Ctrl + W)
66
DRAWING SIMPLE OBJECT
We will start by learning how to create simple object such as

Rectangles, Elipses, Polygon, Triangle and Stars
STEP 1
To create a Square just pick Rectangle Tools

Rectangle & Square (R)
Now left click while pressing CTRL and then drag it to the bottom
right corner
Left click while
pressing CTRL
Drag towards
this point
The result is a perfectly simetrical square that has the same length on
each side.
STEP 2
To create a random rectangle you just need to use Rectangle Tools
How to create it is similar to creating square but without pressing on
CTRL
Click and drag to the bottom right corner as far as you wish your
rectangle would be.
So what is the function of CTRL in creating shapes?
67
STEP 3
To create circles you can just use Circles Tools

Circles, Ellipses, and Arch (E)
Try left click while pressing CTRL then drag it to the bottom right
corner
The result is perfectly simetrical circle
STEP 4
To create a Polygonstry we just need to use Star & Polygons Tools

Star & Polygons (*)
On the top part of the screen (Control Bar) it will displays Controller
Menu Panel for Star & Polygons Tools, choose Polygons
For Numbers Curving/Rounding Randomizing Reset

Creating of Corners Corners Shapes
Polygons
For Creating
Stars
68
After choosing Polygon Tools, make sure Corners : 5 so when you make
an object it will have 5 corners
Click and hold while dragging your mouse up while
pressing CTRL
So the result would be a polygons similar to the picture

on the right side
STEP 5
Still using Tools similar to Polygon Tool, but now set the Corner number
to 3
Now try to draw by click and dragging up your mouse cursor while
pressing CTRL
The result will look like the

picture beside
STEP 6
Still using the same Tools but now we will use the Star option.
Choose
Star
Try to click and hold then drag up
your mouse cursor while pressing
CTRL
The result will look like this star on
the right side
69
TRANSFORMING OBJECT
Now we will learn how to transform and picking colors, the first thing we
should learn is how to transform Transform; Move, Scale and Rotate.
STEP 1
First press Shift + CTRL + M as a shortcut to open Transform panel
This is a transform panel that will

be shown on the right sid of you
screen, choose Move because
we will learn how to move
objects
Select stars that we have made then set the Horizontal on the
Transform panel to 5 or more and set the metric to cm (Centimeter) >
click Apply
What happen to the object?

object will move to from its initial position to the right side by 5 cm or
exactly like the number you give on Horizontal transformation
STEP 2
Now we will try to scale the object, scale function is to make the object
bigger or smaller
Pick the menu Scale > check on Scale proportionally
This result in every object you made will be proportional
Choose Scale
Choose Scale
Proportionally
70
TRANSFORMING OBJECT
Pay attention to what happens to the star that you’ve made when
you change the scale number!
Object will be bigger and smaller based on the number you put on the
scale
The example of result if you put bigger number on Scale
What will happen if you change the number without activating

Scale proportionally option?
STEP 3
Last, we will try to rotate pictures
There is a key to change the rotating axis from left to right exist on
the rotate menu
Select the Object then choose right rotation at the angle of 90

Object will rotate by 90 degrees to the right
71
CHOOSING COLOR
Now we will learn how to pick an apply colors

Select the stars that we’ve made befor
On the bottom side of the screen, there is a color panel that we can use
to change the color of an object
Color
panel
Try to click one of the colors, and see what happens!
Contoh merubah warna menjadi merah
Or you can open this panel Fill & Stroke by (Shift+CTRL+F) to pick a
more accurate color
You just need to change the value in each

color channel
R = Red
G = Green
B = Blue
A = Alpha (Transparency)
72
DIVISION AND DIFFERENCE
Now we will draw a Moon

Here we will use a Command Path called
Difference & Division
Path Difference is used to delete a certain part of an

object by putting another object on top of the target object
Path Division is used to divide object using lines from other

object that are on top of the targeted object
STEP 1
Use Circles tools to make a circle, press and hold CTRL so the Circle are
perfect
Delete the stroke if there is any
Set the color like this below
R = 159
G = 242
B = 255
A = 100
On Fill and Stroke option,

Choose Stroke Paint
Click here to delete the
stroke
73
STEP 2
Copy the circle that you have made and set the
position similar to this picture
Block both circle object then choose

Path > Diference
The red circle will cut the blue circle in a shape

of a moon
STEP 3
Copy the moon object into two, then arrange it
similar to this picture and change the color to red so
it is easier for you to tell the difference.
Block both circle object then

Choose Path > Division
If the object looks like this, it means your moon

has been cut by the red moon object
74
STEP 4
Next step is to change the color of one piece of the moon to be darker.
Click outside of the

picture, then click
again here
R = 133
G = 244
B = 255
A = 100
The result will look like this
Save your project!

Saving a Project Saving an Image (.png)
Click File then choose Click File then choose Export PNG
Save
You will save the file in form
of .svg you can open and
edit it again in Inkscape
Choose Export As
then choose a
location where
you want save
the file
Then click Export
75
EXPLORE
• Try making the star object again!
• Try to change the value of Corners, and see what happens!
• Try to change the value of Spoke Ratio, and see what happens!
• What will happen if the value of Rounded increases?

What will happen if the value of Rounded turned negative?
• What will happen if the value of Randomized is increased?

What will happen if the value of Randomized changed to negative?
• Now try to draw using the Pentagon tool

What shape will be made ?
• Try to change the value of Corners, and see what happens!
• Try to increase or decrase the value on Rounded!
• Try to increase or decrase the value on Randomized!
• Does Pentagon has Spoke Ratio?

What do you think a spoke ratio is?
76
CHALLENGE
Using Path-Difference and Path-Division try to make these

shapes:
You can pick any color you want for the shapes
Using Path-division make some details to the objects as below:

Use Bezier tools to make some lines taht you can use to to make
the partitions to the objects:
Click 1x to start the line and click 2x on the other location
to end the line.
77
How do you set the size of an Object?

Answer : __________________________________________
____________________________________________________
How do you change the fill color and stroke color of

an object?
Answer : __________________________________________
____________________________________________________
What are the functions of corner, spoke ratio,

rounded and randomized?
Answer : __________________________________________
____________________________________________________
What are the functions of Path difference and Path

division?
Answer : __________________________________________
____________________________________________________
78
MEETING 6
BALL,
PADLLE, AND
BLOCKS

Drawing game assets and batch export
Creating Blocks uisng Path Division and Random Tree
79
Meeting 6 - Ball, Paddle, and Blocks
DRAWING PADDLE AND BALL
Let’s try to design some sprites for Arkanoid game that

we will make in the next meeting!
We will start by making paddle dan ball sprite using
Inkscape.
STEP 1
With using Rectangle tool, make an object as in the picture below
Click on this point and

drag down to the below
point to make a rectangle
Set the size to 150px X 34px

Set the color as follows
R = 170
G = 170
B = 170
A = 100
STEP 2
Make a circle object with the size of 22px X 22px
Set the Stroke size to 2 px on Stroke style
R = 170 R = 120
G = 170 G = 120
B = 170 B = 120
A = 100 A = 100
Main Color Stroke Color
Choose Stroke style tab on the

transform tab and set the Width
80
DRAWING PADDLE AND BALL
STEP 3
We will use Batch Export to save our objects in form of PNGs
(.png)
Batch Export is a function that can be used to export more

than one objects at the same time.
Block both Object, set the location to save the objects using Export as,
then check the Batch Export 2 Selected Objects, lastly click Export
81
DRAWING BLOCKS
We will continue making Blocks sprite

This block will later crack when the ball hits them
Tools that will be used:
Draw Bezier
Rectangle
STEP 1
Try makin a square similar to
the example. Set the Width and R = 230
G = 230
Height to 64px X 64px and use B = 230
the color shown on the right side A = 100
of the picture.
STEP 2
1
Make a diagonal line using Bezier Click 1X here to
curve, and then block the square and start the line.
the line, and choose Path > Division
Click 2X here to end it.

2
Now try moving the object and see what happens?

If nothing happens, clicking the empty lay out and
click the object again and try to move it.
The result look like this, the square will diagonally cut
into 2 triangles.
82
DRAWING BLOCKS
STEP 3
R = 128
Change one of the object color
G = 128
darker, and use the provided B = 128
color. A = 100
STEP 4
Join both triangles and add one black
square on top of them.
Set the size to 52px X 52px and put it
on the center of the larger square
Group all objects by:

Select all of the object > Right Click > Group
83
DRAWING BLOCKS
Create more squares using colors as shown below in the size of

64px X 64 px
R = 19 R = 113 R = 255
G = 235 G = 199 G = 186
B = 162 B = 236 B = 186
A = 100 A = 100 A = 100
R = 59 R = 10 R = 24 R = 30 R = 255 R = 255
G = 254 G = 212 G = 154 G = 187 G = 82 G = 123
B = 184 B = 139 B = 211 B = 215 B = 82 B = 123
A = 100 A = 100 A = 100 A = 100 A = 100 A = 100
These blocks will be stacked and will crack or even vanish when hit by
the ball.
Let’s make a frame for the block’s cracks.
The cracks will be made by using Extension Render Random Tree
STEP 1
Copy the block that you have
made.
On the one block, we ill add
cracking effects
On the menu bar, click Extensions
> Render > Random Tree
84
CRACKED BLOCKS
STEP 2
Random Tree window will appear, Check on Live Preview to see the
immediate result, Set the Minimum size to 40, Click apply to create
the random tree.
STEP 3
Put it on top of the box, adjust the Stroke thickness
and change the color into white
Group Object
STEP 4
The smaller the Minimum size the more branches generated
Make 1 more frame with more cracks. Group it when it is done
Also create crack frame for blocks with other colors

After finish, Batch Export the frames in form of .png
85
FILTER
Filter is a tool in the menu bar to give certain effects to a choosen object
Filter itself has various of effect types that can be used and can be
applied to any object you want. For example Gaussian Blur effect can be
used directly from Fill and Stroke window. It gives blurry effect onto an
object.
Example of Gaussian blur:
The wide range of effects and filter function is to add aesthetic point
onto the object you make.
For example if you want to design a set of objects in which the focus
is on one object and blurred the rest of it, then gaussian blur effect is
perfect to create this effect.
Next we will use the filters in the Inkscape
Create a square with the size of 100px X 100px

Pick any color you like for the square
For example, the color used here is blue
86
PRESET FILTER
STEP 1
In the Menu, Click Filter > Bevels
> Neon
The result will be similar to the
picture below
STEP 2
Adjust the Blur on the Fill & Stroke window to 56% by click & drag
See what happens to your object?

Try to change the blur value into a larger or smaller number!
What is the effects of blur value to your object?
Now let’s continue making other filter with using Filter Editor!
87
FILTER EDITOR
STEP 1
Create a black square in the size of 52px X 52px
Click Filter > Filter Editor
It will display Filter Editor panel on the right side of your
screen, the display will look like this
Click New
STEP 2
To add effects click on Effect (Blend)
> choose the effect that we need to add
(Turbulence)
> Click Add Effect
88
FILTER EDITOR
STEP 3
Add the effect in this order below
1. Turbulance
2. Color Matrix
3. Composite
4. Blend
STEP 4
Now let’s set the object to acquire Steel or Metal look, follow the settings
in these pictures below.
Turbulence Effect Color Matrix Effect

Make sure to Link off
Composite Effect Blend Effect
89
FILTER EDITOR
STEP 5
Next click the Black Box that we have made before, then check on
Filter Effect to turn on/apply effect on to the Black box
Try to change the order of the effects by clicking and dragging

the effects up or down
What happens to your object?
Try to apply the filter on the block that you have made!
STEP 6
Try to create a block similar to this below with the new filter
that you have made
90
SPIRAL
Next we will try to use Spiral Tools

This tools is rarely used, but sometimes we will still need it
for example to create snail’s shell or lolypop candy.
Now we will try to create Lolypop candy using

Rectangle Tools, Circle and Spiral
STEP 1
Create rectangle with the size of 25px X 300px add the
White color and set stroke : 2px
STEP 2
Create a Red circle with the size of

350px X 350px
STEP 3
To create Spirals choose Spirals Tools

Spirals (i)
On the Control Bar, adjust Turns to 5 and Divergence to 1
91
SPIRAL
STEP 4
Click and drag to the canvas until resulting to the
picture beside.
After finished, re-adjust the size to 280px X 275px
Try to change the value on Turns and Divergence.

What happens to your Spiral.
STEP 5
Arrange all the objects that you have made into the
shape of a lolypop as shown beside.
You can choose any color you want for your object.
The color of the spiral can be changed in Stroke Paint.
Now make a snail according to the example below.
92
CHALLENGE
Try to make some variations for your paddle and balls!
Make a background that you’re going to use in your game.

You can create and choose any designs and colors you want.
93
Meeting 6 - Ball, Paddle, and
What is the function of Batch Export?

Answer : __________________________________________
____________________________________________________
What does Bezier Curve do in block making?

Answer : __________________________________________
____________________________________________________
How do you make cracks on a block?

Answer : __________________________________________
____________________________________________________
What do Turns and Divergence do on Spiral tools?

Answer : __________________________________________
____________________________________________________
94
BOUNCING MEETING 7
BALL AND
FLOATING
BLOCKS

Moving paddle and bouncing the ball
Arranging blocks and adding instance variable
95
Meeting 7 - Bouncing Ball and Floating Blocks
ARKANOID
Let’s remember what we’ve learned before!
What kind of games that you have made?

What type of behaviors that you have learned?
How to control a player?
Now we will learn how to make Arkanoid

game.
Do you knnow about Arkanoid game?
Have you ever played an Arkanoid game
before?
Arkanoid is an arcade game developed
by Taito in the year of 1986 and one of
the most populer game ever made.
In this game you have to destroy blocks

using a ball to get some points.
You also have to control a platform to
the left and right to keep the ball from
falling.
From the explanation above can you

imagine the game you will make?
Let’s start the Arkanoid project!

Create a new project with this Criteria below; don’t forget to activate
Autosave!
Project Name : Arkanoid_[Your Name]

Add new sprite for background, then adjust the background size
similar to the layout size
96
BALL AND PADDLE
STEP 1
After adding background, we will add another Layer to place the sprites
Later, Background will be on Layer 0 and
Moving sprites will be placed on Layer 1
It is needed to help you with the sprite arrangement.
Right click on Layer 0,

choose Add layer at top
STEP 2
On Layer 1, add Ball dan Paddle Sprite.
You can use the sprite that you have made before.
Ball Paddle
Behavior Behavior
97
BALL AND PADDLE
STEP 3
Click Sprite, then adjust the properties as belowbelow
Ball Paddle
STEP 4
Add input objects
Code the ball to launch when any key is pressed.

On Event sheet add Event
Keyboard
> On any key Pressed
Add action
Ball
> Set enabled
> Enable
Try to play your game and see if you can move the paddle or not.
How does the ball move in the game you’ve made?
In this game we will make the ball only able to escape from the layout
from the bottom of the layout.
Do you know how to do it?
Try to code the ball to be able to escape only through the bottom
of the layout!
98
BOUNCING BALL
Did you use any bevavior?
What will happen if you give the ball that behavior?
We need to make the ball able to escape the layout

through the bottom of the layout. If you use Bound to
Layout the ball will never leave the layout from any side of
the layout. We will also need the ball to be able to bounce
when hitting the side of the layout. Bound to Layout can
not bounce object that has Bullet behavior.
Then how can we do it?
To make the ball stay within the layout and unable to escape we will give
some barriers on the left, top, and right side of the layout using these
steps below.
STEP 1
We will create borders on the 3 sides of the layout
Add sprite with the color of your choice and give behavior
STEP 2
Copy and paste into 3 parts and put it as
borders of the left, right, and top side of the
layout.
Now the ball will bounce when hitting the
border and will escape from the layout if
it pass through the bottom part.
99
ADDING BLOCKS
After adding the border, the Ball and Paddle won’t be able to move out
of the layout, next we will be adding Blocks that has Instance variable
Instance Variable is a variable that is added on a sprite to

contain numeric and text data. Instance Variable can not be
displayed on the layout and on different event sheet.
STEP 1
Add Blocks sprite with 3 frame
You can use Block that we have drawn

before
Create the sprite with complete frame,
with few cracks, and a lot of crack (3
Adjust the animation properties as follows
Add Behavior
Rename sprite to StrongBlock
100
ADDING BLOCKS
STEP 2
Add Instance Variable on Blocks
Click on Blocks, then on Properties, choose Instance Variables > Add
new instance variables
Name the variable Life with

initial value of 3 to make
the blocks has 3 lifes (needs
to hit 3 it times in order to
destroy)
STEP 3
Click on the layout, then activate

Show grid and Snap to grid feature
on the properties
Copy and paste Blocks 28 times then

arrange it in the shown order.
Or we can also arrange as how you
want to create it
We need to hit the blocks 3 times in order to destroy it. Everytime we

touch it the blocks will change frame before it finally dissappears.
101
ADDING BLOCKS
STEP 4
Code the Blocks to decrease 1 life and change the frame of the Block
everytime the Ball touches the Block
Add Event when Ball touches Block

Add action
Block > Subtract from > Life: 1
We will be adding Sub event in this codes

Rigth click on the arrow sign of the event Ball > Add > Add sub-event
Sub-event is an event that is inside the main event

The sub event will run after the main event is executed
102
ADDING BLOCKS
Add Sub event

Block > Compare instance variable > Life = 2
Add action
Block > Set frame > 1
Add Sub event

Add action
Block > Set frame > 2
Add Sub event

Add action
Block > Destroy

Can you make the ball bounce on to the blocks?
Can the blocks change frame everytime the ball hits them?
Can the blocks destroy after the ball hits them 3 times?
103
CHALLENGE
Try adding these to your game

1. Delete 8 Strong blocks so now you only have 20 strong
blocks
2. Add 4 Medium blocks with 2 frames (block have 2 lifes and

will be destroyed after the ball hits them 2 times. Every time
the ball hits the block, change frame)
3. Add 4 Weak blocks with only 1 frame (block will be destroy

after the ball hits them once)
4. Display the score on the top of the layout
5. Add score when a block is destroyed

Strong Blocks = 3 points
Medium Blocks = 2 points
Weak Blocks = 1 point
104
What is the function of the borders on the left, top

and right side of the layout?
Answer : __________________________________________
____________________________________________________
Why can’t we use Bound to Layout behavior for the

ball?
Answer : __________________________________________
____________________________________________________
What is Instance Variable?

Answer : __________________________________________
____________________________________________________
What is Sub-event?
Answer : __________________________________________
____________________________________________________
105
MEETING 8
LIFE AND
NEXT LEVEL

Adding Variable and Respawning Ball
Adding more levels to gthe game
106
Meeting 8 - Life and Next Level
RESPAWN AND LEVEL UP
Let’s try to remember what we have learned before!
What is Instance Variable?

What is Sub-event?
How to make Blocks change their frame when the ball hits them?
If it passes through the bottom of the layout and disappears, can the
Ball show up again?
In Arkanoid game we have few
chances to play depending on
the number of Balls we have.
When the game starts we will have 3 balls.

If we lost a ball (failed to bounce the ball with the
paddle, and the ball ended up passing through the
bottom of the layout) life will be decreased by 1 and
a new ball will appear and you can start playing
again
If we run out of balls, the game will be over

Did you manage to destroy all the blocks?
What happens after all the blocks have been
destroyed?
When all the blocks have been destroyed we will

advance to the next level which has more blocks
to destroy.
Now we will learn how to add Ball Life variable, event for respawning,
and level within the game
Let’s open your Arkanoid game file!
Do you still remember the difference between global and instance

variable?
Now we will use global variable to give lives to the Ball sprite
Add global variable with using the

name Ball_Life dan Value = 3
107
RESPAWN BALL
STEP 1
Add this codes on event sheet to decrease the lives of the ball when it falls out
of the layout
STEP 2
To respawn when the amount of Ball_Life = 2 add sub event on the event
that you are currently working on
System
> Compare variable
> Ball_Life = 2
STEP 3
To create a new Ball and control the paddle to come back to its initial position,
on
Add action Add action
System Paddle
> Create object > Set position
Do the same thing to the sub-event Ball_Life = 1
108
RESPAWN BALL
STEP 4
Add evenet to destroy the ball if Life has already runs out
Ball_life = 0 > Destroy
Your code will be seen like this
Show the number of lives on the top of the layout

Does the ball show up again when there are few lives left?
Can the paddle move back to the center if the ball showed up again?
109
LEVEL UP
Now let’s add level 2 and 3 to Arkanoid game
STEP 1
Duplicate “Layout 1” 2x by
Right click on Layout 1 > Duplicate
Rename layout 1 to LV1 by

Right click on Layout 1 > Rename
Rename Layout 2 to LV2
Rename Layout 3 to LV3
STEP 2
Add 14 blocks to layout 2,

that consist of:
10 Strong Block
2 Medium Block
2 Weak Block
Add 28 blocks to layout 3,

that consist of:
20 Strong Block
4 Medium Block
4 Weak Block
110
LEVEL UP
STEP 3
Add global variable using the name Points with Value = 72
Why setting the points to 72?

Because at the beginning of the game there are 28 blocks that consists of:
20 Strong Block X 3 points = 60 Points
4 Medium Block X 2 points = 8 Points
4 Weak Block X 1 point = 4 Points
Thus the total points is 72
Add codes similar to these below to advance to the next level on the game
Score = Point (All the blocks have been destroyed)
Why do we add 36 to the Points?

Because on every level, the number of blocks always added up by 14 blocks
which consists of:
10 Strong Block X 3 points = 30 Points
2 Medium Block X 2 Points = 4 Points
2 Weak Block X 1 point = 2 Points
Thus the total points will be added by 36 points on every level
Now play your game!

Can you destroy all the blocks and switch to the next layout?
111
EXPLORE
Why do we choose to use Ball_Life global variable and not Instance

Variable on Ball sprite?
What will happen if we use instance variable instead to the Ball?
To answer those questions, you will have to do some experiments on the ball!
These are the experiment steps:
1. Creat instance variable on Ball Sprite with the name “Ball” value 3
2. Add these codes:
3. Deactivate the codes that is crossed by Clicking on Event/Action of

the one that you wanted to deactivate and hit “D” on the keyboard
4. Run the Game!
5. After the game runs and you find your answer

Don’t forget to delete again the codes that you add and
activate the codes that are deactivated previously!
112
What is the difference between global variable and

instance variable?
Answer : __________________________________________
____________________________________________________
Why should we use global variable Ball_life instead

of instance variable in the Ball sprite?
Answer : __________________________________________
____________________________________________________
What will happen if we use instance variable to the

Ball?
Answer : __________________________________________
____________________________________________________
113
MEETING 9
LAYOUT AND
BUTTON

Adding Start, Win, and Game Over Layouts
Adding Start and Replay Button
114
Meeting 9 - Layout and Button
LAYOUT
When playing a game, do you just directly play the game once it
begins?
What do you usually do before starting to play the game?
How do you start a game?
How do you restart a game after losing the game?
Usually when starting a game, you will find an intial page. In that initial page
you can choose to enter the game by pressing the Play or Start button
When you finish a level, the display where you can choose to play again will
appear with the Replay button
In the previous lesson we have learned how to respawn a ball and level up in
the Arkanoid game
We will add Start, Game Over, and Win Game Layout
On the Start layout, it will display Game Title and Start button
On the Game Over layout, it will display Score and Replay button
On the Win Layout, it will display Congratulation and Replay button
Let’s open again your Arkanoid project!
115
START LAYOUT
STEP 1
Add new layout without event sheet, give it the
name Start
Position the layout on the top
Set the layout to 448 x 790

Make sure it is connected to
Event sheet 1
Add background and adjust the background size similar to the layout.
You can use your background layout on your game (level 1)
Add thes texts such “ARKANOID” and “Let’s Play Game!” below it, place
the texts in the center of the layout
Add Button Start sprite and place it below the

“Let’s Play Game!” texts
Gives growing and shrinking effect to the
Start Button
STEP 2
Codes Start Button when clicked so when it is clicked you can switch to
LV1 layout, set score = 0 dan ball_life = 3
Add event > Mouse > On Object Clicked > Mouse button: Left, Clicked
type: Clicked, Object Clicked: Start Button
116
WIN LAYOUT
STEP 1
Add Layout with event sheet, then change the layout
name it to Win Game
Place the layout on the lowest order after LV3 layout
Add Background and adjust the background size similar to the layout.
You can use your game background layout (level 1)
Add Emoji sprite with 2 frames

Activate looping animation, so it looks
like talking
Place it on the center of the layout
Add “CONGRATULATION YOU WIN THIS GAME!” text and position it on

the center of the layout
Add Replay Button sprite and position it on the
center of the layout and under the text sprite
Give the button magnifiying and shrinking
effect
STEP 2
Add codes on Event sheet 2 so when Replay button is clicked it will
switch to the Start layout
117
GAME OVER LAYOUT
STEP 1
Add layout without any event sheet, then change the
event sheet on the layout to Event Sheet 2,
Change the name to GameOver
Position the layout on the bottom order after Win
Game layout
Add Background and adjust the background size similar to the layout.
You can use your game background layout (level 1)
Add Emoji sprite with 2 frames

Activate looping animation, so it looks like talking
Position it on the center of the layout
Add GAME OVER sprite then position it on the center of the

layout
Give the button magnifiying and shrinking effect
Display SCORE text, position it below the Game Over sprite
Add Replay Button sprite and position it under the “SCORE”

And give magnifiying and shrinking effect to the button
STEP 2
Add codes on Event sheet 1 when Ball_Life = 0 the layout will switch to
Game Over layout Add action on sub event when Ball life = 0
System
> go to Game Over layout
118
How do you make a new layout with the Event

Sheet?
Answer : __________________________________________
____________________________________________________
How do you determine which Event Sheet is used by

the Layout?
Answer : __________________________________________
____________________________________________________
How to Coding to make the Layout move when an

Object is clicked?
Answer : __________________________________________
____________________________________________________
119
MEETING 10
DRAWING
BIRD AND PIG
Drawing Bird using Object to Path
Drawing Pig using Arch End Point
120
Meeting 10 - Drawing Bird and Pig
DRAW THE BIRD
In this meeting we will create our own sprite again

that will be added in our game that we make using
Inkscape.
Do you still remember the sprites you made by yourself?
Do you still remember how to export several objects at the same

time?
And, do you still remember what Spritesheet is?
The next game that we will make is called Cannonbird

In this game, we will need bird sprite that will be launced and pig sprite
that you need to beat.
Let’s start drawing those sprites!
Start with drawing bird sprite
STEP 1
We will make the body of the bird using
Circle Tools
Make a circle
Stroke 5px
R = 255
G = 204
B = 0
A = 100
121
DRAW THE BIRD
STEP 2
Now we need to add some accent on it’s body.
By using the duplicate duplicate to the object and then arrange them as
the picture below.
Block both of objects and then

select in the menu:
Path > Division
It will splits the circle to 2 different
Change the color of the bottom part to white.
STEP 3
And then add some eyes using Circle tools as well.
Make 3 circles with each size as follows:
64px X 78px (putih, stroke hitam 2px)
30px X 35px (hitam, no stroke)
15px X 20px (putih, no stroke)
Arrange the circlle as the example above and then group them together
to make eye object.
122
DRAW THE BIRD
STEP 4
Now, we will make the beak using Polygon tool,
Set the value to: Corner 3 and Rounded 1
Set Size to: 65px X 71px

Stroke 5px
R = 255
G = 255
B = 0
A = 100
STEP 5
Next, we will make the tail using Rectangle Tool with size: 70px X
15px
After that select this rectangle object and convert it from object to path
by selecting in the menu: Path > Object to Path
STEP 6
Select Tools: Edit Path by Nodes
After selecting Nodes tool, several nodes will appear on the edges of the
rectangle object.
123
DRAW THE BIRD
Click and hold on the top right

node and then drag it a little bit
downwards.
Now click and hold the node

at the bottom right and drag
it upwards, until it creates a
triangle as the example follows.
STEP 7
After turning the object into a cone shape, duplicate it the objects so that
you will have 3 objects.
Next, we will combine all the

objects following the example
beside. For the eyebrow, you can
duplicate one of the tails and
change the color.
Add some more details to the
bird such as brow and spots on
the bird’s body.
124
DRAW THE PIG
We have made the bird, now we will make the

Pig character.
STEP 1
Let’s make the body first using Circle Tools
Set the size to: 250px X 250px
Stroke: 5px
R = 128
G = 195
B = 71
A = 100
STEP 2
In order to make the mouth, we will still need to use circle tool but there
are some aditions in the settings.
When selecting Circle Tool, you need to give value: 180 to the Arch
end point which is in the controller menu when choosing Circle tool.
When you make a circle on the canvas,

R = 34
the shape that comes out is only a half
G = 85
circle such as the picture beside. B = 0
Set the size to: 67px X 27px A = 100
125
DRAW THE PIG
STEP 3
To return the circle to the normal shape you can choose icon on the
far right, or giving 0 on the value of the start dan end column.
Make a nose with the size: 170px X 73px

And the nostril size: 15px X 32px
R = 110 R = 34
G = 226 G = 85
B = 73 B = 0
A = 100 A = 100
Don’t forget to group them to ease you when you need to move them
together.
STEP 4
Next, make the ear with the size as follows: 80px X 72px
Also make the inner part of the ear with the size: 45px X 50px
R = 110 R = 56
G = 226 G = 157
B = 73 B = 27
A = 100 A = 100
126
DRAW THE PIG
STEP 5
Make some eyes using the same ways as making the eye for the bird.
STEP 6
Combine and arrange all the objects you have made until you create the
pig as the example below.
127
CHALLENGE
Make another bird as the example below!
R = 84 R = 213 R = 255
G = 221 G = 246 G = 255
B = 255 B = 255 B = 0
A = 100 A = 100 A = 100
Make some boxes as the example below!
128
What is the function of rounded option when

making the beak of the Bird?
Answer: __________________________________________
____________________________________________________
How to make a triangular shape for the tails of the

birds?
Answer: __________________________________________
____________________________________________________
How to return the shape of half circle into full circle?

Answer: __________________________________________
____________________________________________________
129
MEETING 11
AIM AND
SHOOT

Directing the sprite to follow the mouse pointer
Learning physics behaviour
130
Meeting 11 - Aim and Shoot
CREATE A NEW GAME
Do you still remember game projects that you made at the

previous meeting?
How many types of behaviors that you have learned?
Write 3 types behaviors that you know and describe them!
Behavior Name Description
In today’s meeting, we will start with moving the cannon to follow

the movement of the mouse pointer. After that we will learn a
new behavior, which is Physics behavior through CannonBall
game.
131
FOLLOW THE MOUSE
How do you move the player in the

game that you play?
How many ways can be used to move
the player that you know?
Have you ever played the game Zuma?
How do you direct the player where to
shoot?
Beside using the arrow keys on the keyboard, you can also use the
mouse pointer to direct the player in a game, for example in Zuma.
In this game, the player will move following the movements of the
mouse and shoot when the mouse is clicked.
We will try to do the same in the meeting today.

Let’s prepare our project with the following conditions; and don’t
forget to activate the autosave feature!
Project name : SpaceShooter_[yourname]

Background : blue sky color
Sprite : Platform, Bird (45x45), Cannon, Base
You can use the Bird sprites that you have made
previously.
Don’t forget to change the name of your sprites.
132
IMAGE POINT
STEP 1
Add object: Mouse
Insert new Object > Mouse
STEP 2
Set the Image point that will be the axis of the cannon. This axis will
follow the movement of the mouse pointer.
Click 2x on the Cannon sprite > Edit the image points
You will see the image point on the cannon in the middle of the
sprite.
Move the image point backwards by clicking on the place that you
want and the image point will move to the area you click.
133
ARRANGE THE CANNON
STEP 3
Set the position of the cannon as follows:
If the cannon looks like this, right

click on the cannon stand (Base) >
Z Order > Send to top of layer to
change the position as follows
Make sure the image point is

in the center of the circle on
the cannon base.
134
AIM THE CANNON
Z Order is used to control how sprites to overlap to each

other in a layer.
STEP 4
To make the cannon move following the mouse pointer, add new event
in the event sheet System > Every tick
Add action
Sprite Cannon
> Set angle toward position
> Mouse.X ; Mouse.Y
> Done
Try to play and see how your cannon move
135
PHYSICS
Before playing physics in the game, let’s

take a look at the laws of physics around
us.
Can you mention some examples of

physical laws?
When you throw something upwards, it will come back down. This is one
of the physic laws that we know as gravity.
Gravity is the force that will pull things down. It happens to all
particles that have weight in the universe.
Gravity is widely applied in various games such as Angry bird. As in the

game, when you throw the bird up, it will fall back down to hit Pig.
In this meeting we will try to use Physic behavior in construct to simulate

the laws of physics in the game Cannonbird.
In real life, what will happen when we shoot a

cannonball?
Bird that the cannon going to shoot will be given
Physic behavior so it will behave like a real
cannonball in real life.
Physics is a behavior that simulates the laws of

physics in the real world into the game
136
ANOTHER IMAGE POINT
Previously, we have set the image point as rotation axis of the cannon
to follow the movement of the mouse, now we will add a new image
point where the bird will be launched.
STEP 1
Click 2x on the Cannon1 Sprite and select Edit the image points
On the left side of the screen and then right click on the white
area and select Add a new image point
and then Image Point 1 will appear.
STEP 2
Place the new image point (Image Point 1) in the end of the
cannon.
Next we will use the Physics behavior to the platform and Bird sprite.
Sprites that have physics behavior can touch to each other.
137
PHYSICS PLATFORM AND BIRD
STEP 1
Add Physics behavior in the Platform
Set the properties as follows:
What is the function of Immovable?

Try to play your game without
activating (check) the Immovable
Immovable locks the sprites that have physics behavior so they don’t
move or fall when the game starts.
STEP 2
Add Physics behavior to the Bird
Set the properties as follows:
138
SHOOTING BIRD
STEP 1
Add Event
Mouse
> On click
> Mouse button : Left
> Click type : Clicked
STEP 2
Add an action to place a bird from the top of the cannon:
Sprite Cannon
> Spawn another object
> Object : Sprite Ball
> Image point : 1
139
SHOOTING BIRD
Create Object dan Spawn have a similar function, yaitu

which is to create objects such as clones clone in scratch.
However, the some differences such as:
Create object can place/show an object everywhere
based on the specified coordinates.
Spawn object can only place/show an object on another
Image Point Object.
STEP 3
Add action to launch the bird:
Sprite Bird
> Apply impulse at angle
> Impulse : distance(Self.X, Self.Y, Mouse.X, Mouse.Y)/20
> Angle : Sprite Ball.Angle
> Image point : 0
140
SHOOTING BIRD
Play your game!

What happens when you click the mouse close to the cannon?
What happens when you click the mouse far from the cannon?
The impulse coding reads as follows:

Distance (distance from the ball to the mouse)/20
The bigger the value of the divider, the slower the ball will be.
The farther the distance, the faster the ball wii be
Ball launching speed:

Distance 100/20 = 5cm/second
Do you know what game it

is?
Do you know how to play
it?
Have you played this game
before?
In the marble game, the players must shoot the marbles with their
fingers to hit and push other marbles out of the arena using the force.
The force from one object to push the other is called Impulse.
141
BLOCKS AND TNT
Add more
Blocks and TNT
into your game
In the Block and TNT sprtites, add Physics behavior and set the
Collision mask into Bounding box.
Multiply the Block sprite and arrange them around TNT sprite.
Play the game and watch the movements

of these blocks!
Place some sprites in a higher place and
see what happens.
What happens when you arrange the

blocks randomly?
By adding physics behavior to the blocks, these objects will behave like
in real world.
What will happen if immovable feature is activated?

What will happen if the Collision Mask is set to Circle?
Let’s move on by changing our TNT sprite costume using the

Spawn coding.
Deactivate Immovable feature and return Collision Mask into
142
IMPULSE
STEP 1
Add Event
Bird > On collision with TNT
Add Action 1
TNT > Destroy
Add Action 2
Block
> Apply impulse at angle
> Impulse : 10
> Angle : angle(TNT.X, TNT.Y, Block.X,Block.Y)
> Image point : 0
Impulse : 10 - Determine the amount of impulse to be used

Angle : angle(TNT.X, TNT.Y, Block.X,Block.Y) - Impulse will be
given at an angle between TNT and Blocks
Try playing your game and see what happens when Bird touches
TNT
143
EXPLORE AND CHALLENGE
1. Sprite Bird has Circle Collision Mask while ,

Platform has Bounding Box Collision Mask.
Why are the Collision Masknya different?
Try to change the Collision Mask in the Ball into Bounding
Box and see what happens.
2. In the Physics behavior of the Ball, what happens to the Ball

when Immovable is activated?
3. In Physics behavior, what happens to the block when

Immovable is activated in one of the blocks?
4. If the number of Density is increased what would happen to

the blocks?
5. Try to add some Blocks and 4 Pig sprites and then stack
them together like in the angry bird game. Feel free to be
creative with the arrangement! Place the Pigs inside the
layout!
6. When the bird hits the Pigs, they will disappear and your
score will increase.
Don’t forget to add the score variable text and call it every
time you make a score!
144
What is the function of behavior Physics?

Jawaban: __________________________________________
____________________________________________________
What is the function of Immovable option in the

properties?
Answer: __________________________________________
____________________________________________________
How to code in order to make the cannon move

following the mouse cursor?
Answer : __________________________________________
____________________________________________________
What is impulse?
Answer : __________________________________________
____________________________________________________
145
MEETING 12
PARTICLES AND
NEXT STAGE

Adding Particles Effect
Adding Level 2 to the game
146
Meeting 12 - Particles and Next Stage
WHAT’S NEXT?
Let’s remember what we learned before!

Do you remember to the materials that you have learned so far?
- What is Physics behavior?
__________________________________________________________________
__________________________________________________________________
- What is Spawn?
__________________________________________________________________
__________________________________________________________________
- What is Impulse?
__________________________________________________________________
__________________________________________________________________
How far has your cannon bird project been?

In today’s meeting, we will complete Cannon Bird and learn to
create particle effects and also the next level for the game.
Let’s open again your CannonBird project!
Do you remeber how to create the explosive effect on TNT?

Which action do you need to use to create the effect?
Now, we are going to create the explosion using particles effect.
Do you still remember what particles is?
Have you ever dropped a ball or a rock into

the sand?
What happens when the ball or stone hits
the sand?
When an object collides with another object,
there will be tiny bits and pieces flying out in all
directions. We call them Particles
147
SPAWN PARTICLES
We will make the particles appear when the Pig sprite touches the Bird sprite
launcehed by the Cannon.
STEP 1
Insert New Object > Particles
Place the particles outside layout
Use Brush tool with size:175
The particle sprite will look

like this.
Set the particle size into:
50x50
STEP 2
Set Rate, Spray Cone and Type
in the Properties
STEP 3
Add action
Pig
> Particles; Layer: 0; Image
point: 0
Place action under:
action Pig >Destroy
148
NEXT STAGE
Do you remember the game on Tynker?

What have you guys played on Tynker?
In the game, what happens after you complete the missions?
Each level in the game has a mission to complete.

After the mission is complete, player can continue to the next level or stage.
Normally, the higher the level in the game, the higher the difficulty.
Now, we will try to make the next level stage for your CannonBird
game!
STEP 1
Make a new variabel and rename “Pig”
Set Initial value > 4
This variable is made to store the values of the stage.
Stage 1 values 4 according to the number of the Pigs in the game.
149
NEXT STAGE
STEP 2
Duplicate Layout 1
And then, in duplicate result (Layout 2)
Add:
- A few Blocks
- 1 TNT
- 2 Pig
STEP 3
Make a new event Add action
System System
> On start of layout > Set value
> Variable: Score; Value: 0
This coding will make the score back to 0 every time the layout
changes or when the player enters a new layout.
150
NEXT STAGE
STEP 4
To be able to compare the variables we need sub event.
A sub event is an additional condition that will run only if the main
condition is met/fulfilled.
Right click on the gray field under the Bird on collision with Pig event
Select Add
> Add sub-event
> System
> Compare Variable
> Score = Equal to Pig
151
NEXT STAGE
STEP 5
Add action to the sub-event
Action 1: System > Wait > 1.0 second
Action 2: System > go to next/previous layout > Next
Action 3: System > add to > Variable: Stage; Value: 2
This code makes the layout change when the score value equals to the value
of the stage (the stage value equals to the number of pigs, which is 4)
Every time the layout changes, the stage value will increase by 2 from the
previous stage (the stage value at level 2 is 6 according to the number of the
pigs in that level).
STEP 6
Add Winn Layout
Right click on the layout
> Add layout
> Add layout only
Set layout size to 854x480
Add Background
Add text: “Congratulations! You win the game!”
Set the alignment to make the text appear on the center of the layout.
Don’t forget to adjust the size and font too.
152
EXPLORE
Let’s get exploring with our game that we just made!
1. Change the action of the TNT; remove the Fire spawn and
change it to particle for the TNT!
2. Add a few more levels in your game! Remember, every time you
level up there will be some more additional Pigs!
3. There are Properties In the Particles, try to change the Rate

value to 100, see what happens to the Particles?
4. Now let’s change the value of the particles into 10 and see what
happens to the Particles.
5. Change the type to Continuous Spray. Now see what happens to

your Particles after you change it?
6. In the Initial particle properties, Increase the vcalue of the

Speed and Size. See what happens to Particles? What is the
153
What is the function of Rate and Spray cone in the

Particles effect?
Answer: __________________________________________
____________________________________________________
How to make the Particles to move faster and look

bigger?
Answer: __________________________________________
____________________________________________________
How to code to make the player move to level 2

when the score reaches 4?
Answer: __________________________________________
____________________________________________________
What is the function of the code below?
Answer: __________________________________________
____________________________________________________
154
MEETING 13
PICK COLOR
AND TRACE

Getting to knoe Pick Color tool
Using Bezier to Trace A Picture
155
Meeting 13 - Pick Color and Trace
PICK COLOR
In the previous meeting, you drew the plane using

polygon and bezier curve.
Today, we will use Pick Color Tool to pick color sample

from a picture.
The way to use PICK COLORS is very simple. You just need to point the
cursor to the color sample in the desired part of the image, then click on
that area.
Next, the selected color you choose will be automatically applied to your
object.
Easy, right?
Let’s continue today’s lesson by making a star and give it some glow
effect as the detail.
156
BEZIER CURVE
Bezier Curve is the ultimate weapon and often used to

make vector shapes.
Not only in Inkspace, but all vector-based softwares.
For the beginners, it is usually used to trace a picture/image by

connecting the dots of the path.
We will make the body of a plane using Bezier
Tools
STEP 1
1
Activate the bezier
4 curve, then click in
order 1,2,3,4,1 so
that it forms a picture
2 like the one on the
side
3
STEP 2 1
To make a straight line, click 1x on

position 1 and click 2x on position 2
STEP 3
Use Edit Path By Nodes to
curve the Lines
157
NODES
Click on the nodes to see the

angle of the curve
Slide this section to

adjust the curvature of
the line
When nodes are selected, the toolbar will

have these options
Make selected nodes auto-smooth
Make selected nodes symmetric
Make selected nodes smooth
Make selected nodes corner
Try changing your nodes after selecting that option!

What is the function of the auto-smooth option?
What is the function of symmetric options?
What is the function of the smooth selection?
What is the function of corner selection?
158
TRACE ON!
Tracing or forging is a drawing process by tracing from an existing

image to create a similar or exact image
Let’s try tracing the Plane image first
STEP 1
Import Plane images into inkscape
by selecting File > Import (CTRL+I)
> OK
STEP 2
In the Fill and Stroke tab,
set the Opacity into 50%
to make it easier to see the
tracing line.
159
TRACE ON!
STEP 3
Do the tracing on parts of the plane
Trace only on one side, then color the part that you have drawn
Use the pick color tool to get the same color as the example or you can
also choose the color you want
STEP 4
Group your images, then
duplicate so that you have 2
similar images
160
TRACE ON!
STEP 5
Flip one of your pictures, then put

them together to make a whole
plane image
You have successfully completed a picture of an airplane

Why do you think we only need to draw half the plane?
161
CHALLENGE
Now try to do the tracing on these following images!
162
What is the function of Pick Color option?

Answer : __________________________________________
____________________________________________________
What is Tracing?
Answer : __________________________________________
____________________________________________________
What tools are used for tracing?

Answer : __________________________________________
____________________________________________________
163
MEETING 14
DESIGN
EXAM
What will we learn today?

Design test for Advance 1
The question will be given by the teacher
164
MEETING 15
PROGRAMMING
EXAM (1)

Programming test for Advance 1
165
MEETING 16
PROGRAMMING
EXAM (2)

Programming test for Advance 1
166
ADVANCE 2
MEETING 1

Activating grid to help you draw
Using Bezier Curve to draw
167
Meeting 1 - Draw with Grid and Bezier Curve
REMEMBER ME ...
Let’s memorize what we have learned in Inkspace.
What are the functions of these
What are the functions of:
Path Division :
Path Difference :
Random Tree :
168
GRID
In this meeting we will draw the Space ship using the grid as a guide to
make it easier for us to draw
STEP 1
Activate Page Grid (#) to help you draw by
clicking the menu: View > check on Page
Grid
STEP 2
Set the grid size in
File > Document
Properties > Grid
Set the size Spacing X

and Spacing Y to 10px
STEP 3
1 Select Bezier Curve in the Toolbox
Click once on the canvas from point
1 and then move mouse pointer to
point 2 then click again. Continue
the steps until point 6 and go back to
2 6 point 1.
4
3 5 Set Stroke 1px
169
DRAW THE SPACESHIP
STEP 4
Add a window on the plane
1 Same as the previous step, start from
point 1 until 5 and then go back to
2 5 point 1.
3 4
Add some more windows.

Duplicate the window using Right Click >
Duplicate
The duplicated object will be right on top of
the original object.Click and drag it to move
the object.
Flip one of the

objects using Flip
Horizontally option in
the Control bar
STEP 5
Make the shape beside using the same way in
from the previous step.
Draw > Duplicate > Flip
Arrange the objects you draw into the

example beside.
170
DRAW THE SPACESHIP
STEP 6
Add some weapons using Rectangle tool.
Click on the new rectangles that you

just made, and then choose Lower
Selection to Bottom in the Control
Bar to make the weapons move the
weapons behind the plane
STEP 7
Next, add some jet flames using Tools Rectangles with curved
ends.
Click Gradient tool

We will make gradient to the flame of the plane.
171
DRAW THE SPACESHIP
Click Here
and then drag down
Click 2x on the gradient line

to add points
Click on each point

to change the color
Yay! You have successfully

made a plane
Now try to add some colors

on your plane to make it
more interesting!
Don’t forget to save your

project and export the
project as .png
Try to make 2 more Spaceships according to your own creativity

as more options to the player in the game
172
DRAW ENEMY PLANE
STEP 1
We continue by creating a Plane for the enemy. Use Polygon Tool to
make the body of the plane in the shape of a hexagon.
Choose Polygon Tools and
set Corners: 6
Click and drag on the canvas until
a shape of hexagon appear. R = 221
set into Size 45px X 60px G = 85
Stroke 1px B = 255
A = 100
STEP 2
Make 3 hexagons with the size of each as follows: 14px X 16px,
Stroke 1px
STEP 3
Make a wing that is proportional to the body of the plane.
1
R = 204
G = 0
B = 255
A = 100
2 3
After that, duplicate the wing and flip it horizontally.
Connect to the body of the plane and place it behind the body.
173
DRAW ENEMY PLANE
STEP 4
Add some tubes and rectangular objects with size 6px X 16px and
stroke 1px to decorate the wings and as the weapons.
R = 136
G = 0
B = 170
A = 100
STEP 5
For the final touch, we need to make the flame using some circles,
make 3 circles in the different sizes.
1. 10px X 42.500px (Red)
2. 10px X 32.33px (Orange)
3. 10px X 20px (Yellow)
Combine the circles together and place
174
CHALLENGE
Try to make the costumes for the plane sprite that you just made!
Create 4 airplane frames with different colors
Try to make your own plane according to your creation!

And make the frame too!
175
ROTATION
Do you know what Rotate is?

Rotate is used to rotate the object or image that we selected. Rotate will
change the directon of our object from what was originally facing up to
down or sideways
Example
In Inkspace, we need to select the object first and then click Rotate icon
in the Control Bar in order to rotate it.
1 2 3 4
1 Rotate 90 degree to the left
2 Rotate 90 degree to the right
3 Flip horizontally
4 Flip vertically
176
EXPLORE
What do you need to do to make the objects change their position

as shown below?
177
RESCALE
Rescale is used to change the size of an object to make it appear larger

or smaller.
The bigger the number you write, the bigger the picture will become and
vice versa.
To Scale it, you just need to select and object and open the Transform
(SHIFT+CTRL+M) panel and choose Scale menu.
Set the unit in pixel and then set the value according to how big or how
small you want to scale the object,
Click apply to set your setting.
What will happen

if you activate or
deactivate the Scale
Proportinally option?
In your opinion, what

is the function of that
option?
95px X 93px
125px X 122px
Click twice to the object until it appears like in the

picture beside and drag on of the corner’s nodes.
See what happens!
178
WIN AND GAME OVER
We will make WIN & GAME OVER Popups These Popups will be useful
when you win the game or lose in the game and they will appear as a
sign.
STEP 1
Make a square like the picture beside

with the dimension: 170px X 200px
Duplicate it so that you can use it as the Game Over display.
STEP 2
We will use Text tool to add some

texts in this object
Pada salah satu object, Tambahkan Teks

“YOU WIN” dengan Font : Berlin Sans FB
179
WIN AND GAME OVER
STEP 3
Add 3 stars under “YOU WIN” text to
complete the look.
STEP 4
Add “GAME OVER” to the duplicated square
without adding the stars.
Yeay, you have successfully made WIN

& GAME OVER displays, don’t forget to
export them in the format of .png!
Try to make START and REPLAY buttons using your creativity!

Use Polygon, Rectangle or Circle tool to make the objects and also
add some texts using Text tool.
180
What is the function of Grid while drawing?

Answer : __________________________________________
____________________________________________________
How to set color gradient?

Answer : __________________________________________
____________________________________________________
What is the function of Text tool?

Answer : __________________________________________
____________________________________________________
What is the function of Rotate and Rescale?

Answer : __________________________________________
____________________________________________________
181
MEETING 2
GLOWING
SPRITESHEET

Making some details in the object
Making Spritesheet
182
Meeting 2 - Glowing Spritesheet
GLOWING EFFECT
GLOWING EFFECT is used to give some glow effect

to an object, such as the picture beside.
To make glow effect is very simple. You just need to

follow these simple steps.
STEP 11
STEP
Make 2 star objects with Spoke Ratio 0,380
STEP 2
Select one of the stars and add a different color such as blue, green, or
red.
183
GLOWING EFFECT
STEP 3
Next, open Fill and Stroke panel, set BLUR into 5% and the opacity to
80% to the star that you just recolore. The star will now look like below.
STEP 4
Next, open Fill and Stroke panel, set BLUR into 5% and the opacity to
80% to the star that you just recolore. The star will now look like below.
You have successfully made a star with some glow effect.

Next, we will make a star with some texture.
184
STAR TEXTURE
STEP 1
Make a star using Star & Polygon Tool
Set the color to yellow

Remove Stroke
To add stroke:
• select the star object that you want
to be added with color stroke
• right click on the red color in the
Color Palette below
• select Set stroke
In stroke paint, set value A until

Max to show the stroke
In stroke style, set the value

Width to 1,000 mm
185
STAR TEXTURE
STEP 2
Change the stroke into
path
Use shortcut
CTRL+ALT+C or
choose in the: Menu
Path > Stroke to Path
This border (stroke) becomes an
independent object (path).
STEP 3
Activate snap point & snap centre object on the right

side of the window.
Activate Nodes
And then click 2X between the nodes to create a
new one.
Make sure to make new nodes inside the
path.
Click & drag from the corner tip to the

center of the star as shown on the picture
beside.
Repeat on each side of the star.
186
STAR TEXTURE
STEP 4
When you finish, the star will look like

this.
Group both of the objects.
Now we will make several frames for the stars

and group them in a Spritesheet as in the
example beside.
Spritesheet is an image consisting several animated

sprites and/or frames.
In the gaming world, spritesheets are very useful in reducing memory

usage, speeding up the image display process and keeping frame rates
high
187
SPRITESHEET
STEP 1
Prepare 4 pieces of Board

size with a size of 100px X
100px
(draw the boardsize with
Rectangle tool)
Paste the board size without
grouping it
STEP 2
Set the size of the star to 100px X 100px
You still remember the steps, right!
STEP 3
Duplicate the stars to 4!
Rotate the duplicated starts 90°
Repeate until you have 4 stars with different angle.
188
STAR TEXTURE
STEP 4
Arrange the 4 stars you made into the board size that you have prepared
Delete the green square so that only the star object remains
STEP 5
Select the four star objects and
export to .png
> Export png image
> Set width and height

in the image size into
400px X 100px
> export as to select the

file storage folder for the
object
> Click Export
189
HOW TO USE SPRITESHEET
Spritesheets can be used in constructs by:
STEP 1
Right click > Import Frames >
From strip
Choose the spritesheet that you

have created
STEP 2
Adjust the number of vertical and horizontal cells > import
190
CHALLENGE
Try to draw particles that you will use later in the game
You can use the Create Circle, Ellipse and Arcs tools to
create a circle with a size of 100px X 100px each
Don’t forget to hold down the (CTRL) key while drawing to form a
perfect circle
Remove the fill and set the Stroke Paint to make the image like
below
R = 255 R = 255 R = 255 R = 0

G = 0 G = 0 G = 140 G = 191
B = 0 B = 0 B = 0 B = 255
A = 100 A = 100 A = 100 A = 100
R = 255 R = 255 R = 255

G = 255 G = 140 G = 255
B = 0 B = 0 B = 0
A = 100 A = 100 A = 100
R = 255
G = 255
B = 0
A = 100
Batch export 4 objects that you have drawn into .png form
Try to make spritesheets for these objects too!
191
What are the benefits of using Pick Color in your

design?
Answer: __________________________________________
____________________________________________________
How to make the Glow Effect?

Answer: __________________________________________
____________________________________________________
What is Spritesheet?
Answer: __________________________________________
____________________________________________________
What are the benefits of using Spritesheet?

Answer: __________________________________________
____________________________________________________
192
SELECT PLAYER
MEETING 3
AND
SHOOT RANDOM
METEOR
Apa yang akan kita pelajari hari ini?

Making scrolling background using tiled background
Choose the player in the game and random costume

obstacles
193
Meeting 3 - Select Player and Shoot Random Meteor
TILE AND SCROLL
Let’s remember what we have learned before!
In previous lesson, we have made the space ship and other objects using
Inkscape. Now we will start using these sprites in the game.
Today we will learn to use

Tiled Background feature
in Construct3 to make a
Scrolling background, also
to control player’s movement
and shoot with your mouse in
the shooter game.
Do you know an example of shooter game?

Have you ever played one before?
Tiled Background is an object that can display images in

repeat as shown in the example below:
Scrolling Background is a background that scrolls from

side to side and makes the sprite seem to be constantly
moving.
Other than to using a Tiled Background, we will make the game

to be able to choose which player to use in the game!
Prepare the project as follows
194
TILED BACKGROUND
Project Name : SpaceShooter_[Your Name]

STEP 1
Rename this layout into
Game
Add Tiled Background in the
layout
Insert new object
> Tiled Background
> Click on the layout
> Load image from a file
> darkPurple
> Open
Adjust the size of the Tiled

Background to the size of the
layout.
STEP 2
Transparent layer 0
Click on the layer 0
> look at the properties
> tick Transparent box
195
SCROLLING BACKGROUND
Scrolling Background displays a

background that runs several Pixels
repeatedly like the effect of rolling
background every time using the
operator.
Scrolling Background can move vertically

or horizontally.
STEP 3
Copy and then paste Tiled Background
that you have made earlier and then
place it on top of the layout.
We are going to make the

background move downwards by 3
pixels each time.
Compile the code in the Event Sheet

Add event > System > Every tick
Add action > TiledBackground > Set
Y > Self.Y + 3
Set Y = To adjust the object’s location at Y coordinate

(Vertically)
Self.Y + 3 = To make the object move downwards by 3 pixel at
Y coordinate
196
SCROLLING BACKGROUND
STEP 4
If the background under the layout at Y coordinate is more than
480, then the background will be returned back above the layout
at: Y = -480 coordinates.
We will use Compare Y command to find the Y position of the

background and move it back up once it reaches 480 pixels.
Add event
> TiledBackground
> Compare Y
Add action
> TiledBackground
> Set Y
> -480
STEP 5
Lock layer 0 dan and make a

new layer on top of it.
(Right click > Add layer at top)
197
CONTROL YOUR PLAYER
Have you ever paid attention on how to control player movements

in shooter games?
What tools are used to move and control the character in the
game?
In Construct 3, we can select input devices to control the player’s

movements in the game, they are: Gamepad, Keyboard, Mouse, dan
Touch
In the shooter game, we
will also use Mouse input
to control the player’s
movement, so that the player
can move right and left.
We also give behavior to the
player, so that the player
cannot exit the layout
STEP 1
Add Spaceship Sprite; rename it to Player
Make the Player sprite to hace 3 different
animations
You can use the sprites you drew earlier
Make sure the Sprite is on Layer 1
Right click to the blank space and click

Animation > Add Animation
Create 3 animations
198
199
CONTROL YOUR PLAYER
STEP 2
Add new objects into
the layout
Right click
> Insert New Object
> Mouse
Add koding to make the player always follow the mouse cursor
In the Event
Add Action
> Player
> Set X
> Mouse.X
Set X = Set the object’s location at X coordinate

(Horizontally)
Mouse.X = Make objects move following the direction of the
mouse horizontally at the X coordinate
Try to play it and see if the player follows the mouse
Do you still remember the behavior used to the bullet object?

We will use behavior: Bullet to
the lazer that will be shot and
also action: Create object to
clone the bullet at a certain
position and Operator to
determine the position of the
cloning object.
200
CREATE AND SHOOT THE LASER
STEP 1
Add Laser sprite, add behavior: bullet
Set the lazer posisition to face right.
If you don’t rotate the lazer, it will move upwards in a

horizontal position.
Place Laser outside the layout.
Change the angle of the Laser to 270

to make the lazer shoot upwards and
and face upwards too.
Set angle to 0 will make the laser
move to the right.
STEP 2
Add some effect while shooting
thge laser.
Add new Object
> Audio
In the project bar on the right, right click on the
Sounds folder
> Import sounds
> Import Audio
> sfx_laser2
201
STEP 3
Code to shoot the lazer
Add event > Mouse > Mouse button is down > Left
Add new condition by:

Right click on the event: mouse left
button is down
> add another condition
> ystem
> Every X seconds
> 0.2
Coding Event will become:
STEP 4
Show the laser with the function: Create Object
Add action
> System
> Create object
Player.X = Bullet will be launched horizontally from the

middle of the player.
Player.Y-40 = Bullet will be launched vertically in front of

the player.
202
STEP 5
Add some sound effect every time you shoot the laser.
Add action
> Audio
> Play
Here it is, Let’s try to play your Shooter game!
Create object is used to show an object at certain

coordinate (can be at an empty field on the layout) or from
another object without an image point
Next we will make the player to be able to choose the plane to use
before the game starts.
STEP 1
Make a new layout and add new Tiled background object in Layer 0
Lock layer 0 dan and make a new layer on top of it
(Right click > Add layer at top)
On Layer 1 add Game Title and Player Select button
203
PLAYER SELECT
In the Player Select

sprite add behavior
so that sprites can
grow and shrink
And then Rename
this layout into
HOME and place it
before Game layout
STEP 2
Add a new layout, name it to PLAYER
layout and place it between HOME and
GAME layout
add a Background to the Layer 0 and
connect that layout to Event sheet 1
Add coding so that hen we Click Player
Select > go to PLAYER layout
STEP 3
Add Layer 1
Add a sprite and name it
PlayerOption on Layer 1 with 3
animation as wehn you make
the animation for Player
204
PLAYER SELECT
STEP 4
Copy Paste Sprite PlayerOption to 3 and place it next to each
other
To change the Costume we need to set the Initial animation in the
properties bar as follows:
Clone Sprite PlayerOption and Rename it

into PlayerDisplay
Player display as a representation of
PlayerOptions which is selected by the player
Place it on top of PlayerOptions

Add also a PLAY button
205
PLAYER SELECT
Add coding to allow us to choose the Player to use during the

game
STEP 1
In the Event sheet 1,
add a Global variable
with type string
String Variable is a
variable used to
store string value
(alphabet characters)
STEP 2
Coding to make PlayerDisplay change color according to
PlayerOption option
Add Event Add Action

> Mouse > PlayerDisplay
> On object clicked > Set animation
> PlayerOption
206
PLAYER SELECT
Add Action
> System
> Set value
Your coding will appear as follows
Try to play it and see if you can choose your player in the PLAYER
layout
STEP 3
Coding to move to Game Layout when clicking Play button
207
PLAYER SELECT
STEP 4
Also code to place the player in the position 400,400
STEP 5
Code to make the Player on the GAME layout the show the same color
as selected in PLAYER layout when played
On On start of layout Event, add Action:
> Player
> Set Animation
Try to play your game starting from HOME until GAME layout
Can you play the game using a the different player?
208
RANDOMLY APPEAR
This time we will add a static obstacle in the form of a

Meteor in our shooter game.
The meteor will move from top to bottom of the screen
and nothing can destroy it. The player must avoid the
meteor.
STEP 1
In the GAME layout, add Meteor sprite with
several frames.
In the Animation Properties set Speed to 0
Place the meteor outside the layout on the
left or right side and add Rotate behavior.
STEP 2
Continue with randomly show the Meteor every 5 seconds at X
position.
Add a new event

> System
> every X seconds
>5
STEP 3
Add action
> System
> Create object
> X: random(68,700)
Y: -50
209
RANDOMLY APPEAR
What is the function of random?
Do you still remember the Random Pick

block on Scratch?
What is the function of the numbers we
put in the random command?
Random has the same function as the Random Pick on Scratch, which is
to randomize numbers according to a certain range.
Now, we need to randomize the place where the meteor will appear
horizontally, which is at the X coordinate ranging from 68 - 700 starting
the meteor at the top of the layout, which is at the coordinate: Y=-50.
STEP 4
Now make the meteor move from top to bottom by 1 pixel at a
time
Add a new action in the Event Every tick

> Meteor
> Set Y
> Self.Y + 1
After adding meteors to the game, next we will

create random costume (Frame) to the meteor
when it appears using random coding so that
each meteor that shows up will have a different
shapes and sizes.
210
RANDOM COSTUME OBSTACLES
In the event System Every 5 Seconds

add new action
> Meteor
> Set frame
> random(5)
Why random(5)?
because we have 5 frames of meteor counting from 0 to 4.
To count the frames we start from number 0 not from 1
211
How do you make a Scrolling Background?

Answer : __________________________________________
____________________________________________________
How do you code to make the player move right and

left following the mouse direction?
Answer : __________________________________________
____________________________________________________
What type of Variable is used to store the Costume

Animation Player value?
Answer : __________________________________________
____________________________________________________
How to make a Random Costume for the Meteor?

Answer : __________________________________________
____________________________________________________
212
MEETING 4
LIFE, SCORE,
AND FAMILY
FEATURE

Using Font Sprite for the Score and Life
Using Family Features in Construct
213
Meeting 4 - Life, Score, and Family Feature
SPRITEFONT FOR LIFE
Let’s remember what we have learned in the previous meeting.
In the previous meeting, we have

finished the project with Tiled
Background and Create Object
What is Tiled Background?
What is the function of Create Object?
We will also show the life and score

using sprite font
Sprite font is a sprite that contains a set of letters and

characters
STEP 1
Add global variables and name them Life and Value : 3
Add a new action in gthe event On start of layout
> System
> Set value
> Variable : Life
> Value : 3
STEP 2
Show the life variable using Sprite font
Place it on top right corner of the layout by:
214
SPRITEFONT FOR LIFE
Add new object

> Sprite Font
> Insert
> Place it in layout
> Close
STEP 3
Set the Properties as follows
STEP 4
Add Coding to show Life Text in the event Every Tick
215
PARTICLES
We will add coding for the Player so that when it touches a meteor it will
be destroyed and become a particle followed by reducing life by 1
If the Player still has Life remaining, it will respawn again to continue the
game.
Particle adalah serpihan-serpihan kecil yang terlontar ke

segala arah akibat tabrakan antara 2 buah benda
STEP 1
Add Particles into the layout.
Insert New Object > Particles
Place it outside the layout.
You can upload the particles that you

have made previously with option:
You can also draw your own using the

Brush tool (B).
Set the brush size as needed.
216
SPAWN PARTICLES
STEP 2
The particle sprite will look like this.
Set the particle size to 50x50
Add the Properties to:

Rate > 10
(the number of scattered particles)
Spray cone > 360
(spreading angles of the particles)
Type > One-shot
(the number of times of the scatter)
STEP 3
Add coding: when touching Meteor, Player will be destroyed.
In the same event, Add Action Player showing Particles:
Add Action
> Player
217
RESPAWN PLAYER
STEP 4
Add a new action to reduce the player’s life
> System
> Subtract from
> Life : 1
STEP 5
As long as there is still Life remaining, the Player will respawn and
continue the game even if it is destroyed by a Meteor
Add a sub event and action to respawn as long as the life
remaining is more than 1
And then add another sub event to make the player disappear
when there is no longer remaining life
Code to make the Player respawn with the selected costume and
also to return the animation of the Plane to default ketika when
winning or losing.
218
CREATE ENEMIES
Have you ever played a game where the enemies move towards
the player?
Now, we will create an Enemy Plane that moves towards the player using
Action : Set angle toward position
STEP 1
Add Enemy Plane Sprite, select 4

frame with the same shapes but
with different colors.
Rotate all the frames, Place the

sprite outside the layout on the
left/right side.
Add behavior: Bullet to the Enemy Plane, and set: Speed

to 200.
STEP 2
Code to make the Plane Enemy appears every 2 seconds at
random horizontal position.
Add: Event
System
> Every X seconds
>2
Add: action
System
> Create object
219
CREATE ENEMIES
STEP 3
Code to make the Enemy Plane move towards player’s coordinates.
Add new Event

> Enemy Plane
> On Created
Add action
> Enemy Plane
> Set angle toward position
In this coding we will use:

Action : Set angle toward position
USed to set sprite direction.
It works similar to Point block in Direction and Point
Towards in Scratch
X : player.X > X coordinate (horizontal) player
Y : player.Y > Y coordinate (Vertical) player
So the enemy will appear and point towards the player and also
will move towards the player.
STEP 4
Coding agar Enemy muncul dengan kostum yang berbeda seperti
yang kamu lakukan pada meteor
220
USING FAMILY
When the Player touches Enemy1, The player will be destroyed into
particles and will reappear if there is still life remaining
This Event uses the sama action as when the Player touches the
Meteor
For the objects with the same Action, they can be grouped into a
family so that e don’t need to repeat the similar codes.
221
FAMILIES FEATURE
With Families feature you can group

these enemies into 1 family with a
specific name which can be called to an
event or action.
Therefore, the Families feature is really

useful to simplify your code and shorten
your time while working on a project.
STEP 1
In the project bar right click in the
Families folder > Add family
STEP 2
Click on the object that will be grouped into 1 family
> click Add >>
Add all the enemies in the Family and the click OK.
Rename the Family 1 to ENEMIES.
222
FAMILIES FEATURE
STEP 3
Change the coding in the event Player on collision with enemy by
tight click on theevent
> replace object
> Meteor
> Enemies
STEP 4
Your coding will look like this
Try to play your game and see if the coding is running
appropriately as you program it.
223
SPRITE FONT
We will use Sprite font to display the score in the shooter game!
STEP 1
Add global variable Score, Value: 0
Set to 0 when the layout starts.
STEP 2
Add Event when the Lazer touches Enemy
Add Action
* Score +1
* Lazer Destroy
* Enemy Destroy, show Particle
* Audio sound: “destroy.webm”
STEP 3
Add new object
> Sprite Font
> Insert
> Add on the layout
> Close
Place the Font Sprite on

the top left corner of the
224
SPRITE FONT
STEP 4
Set the Properties as follows
STEP 5
Code to show Score in the Sprite font
Add action pada event Every tick
> Sprite font
> Set text
> “SCORE “ & score
Now let’s try to play

your Shooter game!
Don’t forget to dodge
the obstacles and
shoot the Plane
enemies!
225
EXPLORE
Let’s do an exploration with the Enemy and Sprite fonts that we just
studied!
1. Try to add the following code and see what happens!
In the event sheet, add Event

System
> Compare Variable
> SCORE > 10
Add Action:
Enemy
> Set speed
> 300
2. Try to change the color In the fonts Sprite Properties.

Look at menu Common
> Color
> Click the color box
> choose the color
> OK
3. Coba buat agar laser tidak dapat menembus Meteor
226
What is the function of Family feature on Construct?

Answer : __________________________________________
____________________________________________________
To randomize this sprite which

function do we use? random (2)
or random (3)? Explain why.
Answer : __________________________________________
____________________________________________________
What is the function of Action: Set angle toward

position?
Answer : __________________________________________
____________________________________________________
What it Font Sprite?

Answer : __________________________________________
____________________________________________________
227
MEETING 5
POWER-UP
ITEMS

Adding Items in the Game
Using behavior: Flash
228
Meeting 5 - Power-up Items
ITEMS TO MAKE YOU STRONGER
Let’s remember what we have learned in the previous meeting!
In the previous meeting we have learned to use coding: Random

Do you remember what coding random was used for in the
previous meeting?
In Scratch, what coding has similar function to Coding Random?
Today, we will learn how to add items:
Shield is an item to protect the player or make the player immune

towards enemy’s attack.
Power Score is an item that can double player’s score in the

game.
Life pill is an item that can increase the number of player’s live.
Let’s open again your Shooter game file that you have created in the
previous meeting.
Have you ever used ‘shield’ when playing a game?

What happens when you use it and the enemies are attacking
you?
In the game, there would be

an item that floats and gives the
player a shield if they manage
to get it.
So, we will need to add 2 sprites.

Shield Item sprite that must be obtained by the player; and
Shield sprite that will appear next to the player after the item is
obtained by the player.
229
SHIELD ITEM
STEP 1
Add Shield item sprite, and then add
behavior: Sine with this setting as the
example beside:
And then place the shield item outside the layout
on the left or right side.
STEP 2
We are going to make the shield item move downward 3 pixels each
time.
To the Every tick event, add action:
> Shield item
> Set Y
> Self.Y + 3
STEP 3
Create shield item every 30-60 seconds randomly on the X
coordinate (Horizontal)
Add new Event:

> System
> Every X seconds
> Random (30,60)
Add action
> System
> Create object
> Shield_Item
As follows:
230
SHIELD ITEM
STEP 4
Add Shield sprite and give Behavior:
In the event: On start of layout add:

action
> Shield
Flash is a behavior that makes the sprite blink

(appear and disappear)
Destroy outside layout is used to remove sprites

when outside the layout
STEP 5
When the player obtains Shield Item, the item will disappear
And the the Shield will appear for 10 seconds.
The shield need 1 second flash before it disappears.
The flash will appear when it is done.
231
SHIELD ITEM
STEP 6
Make a shield to follow player’s coordinates by:
Add new action in the event: Every tick
> Shield
> Set position to another object
> Player
STEP 7
Code to make when touching shield
Meteor explodes into particles Enemy explodes into particles

Produces sound: Produces sound
destroy.webm destroy.webm
232
POWER SCORE
Add Power Score item sprite, Place

it outside the layout on the left or
right side.
Add behavior Sine with setting as
written beside:
we will make Power score that moves

downwards every 3 pixels each time.
STEP 1
To the event: Every tick, add action:
> Power score
> Set Y
> Self.Y + 3
STEP 2
Create Power Score every 50-60 seconds randomly on the X
coordinat (Horizontal)
Add new event

> System
> Every X seconds
> random(50,60)
Add action
> System
> Create object
> PowerScore
Add a code so that when the player obtains the power score,
Power Score disappears and score changed by 5 point
233
LIFE PILL ITEM
Add Life Pill item sprite, Place it

outside the layout on the left or right
side.
Add behavior Sine with setting as
written beside:
we will make Life pill that moves

downwards every 3 pixels each time.
STEP 1
To the event Every tick, add action
> Power score
> Set Y
> Self.Y + 3
STEP 2
Create Life Pill every 40-50 seconds randomly on the X coordinat
(Horizontal)
(Horizontal)
Add new event

> System
> Every X seconds
> random(40,50)
Add action
> System
> Create object
Code so that whenever the player gets a Life Pill, Life Pill
disappears and Life changed by 1
234
CHALLENGE
Let’s make your Shooter game as below:
1. The game will start with the Shield active for 5 seconds; after
5 seconds, it will flash for 1 second and then disappears.
2. Each respawn will activate a shield for 3 seconds; After

3 seconds, the shield will flash for 1 second then disappears.
235
Mention all the items that you just added in the

game.
Answer: __________________________________________
____________________________________________________
Explain all the functions of each item that you just

added in the game previously.
Answer: __________________________________________
____________________________________________________
what is the function of the coding below?
Answer: __________________________________________
____________________________________________________
what is the function of the coding below?
Answer: __________________________________________
____________________________________________________
236
MEETING 6
INSTANCE
VARIABLE AND
GAME OVER

Adding Enemy using Instance Variable
Adding Stardust effect with Particles
237
Meeting 6 - Instance Variable and Game Over
ENEMY WITH INSTANCE VARIABLE
The enemy that we are going to create will have Instance Variable
“Life” . It means the player needs to shoot them more than one time to
destroy them.
This enemy will also shoot once when it appears.
STEP 1
Add one shoot enemy sprite to the GAME layout and then
place the sprite outside the lay out on the left/right side.
Add Laser enemy sprite to the GAME layout and then place
the sprite outside the lay out on the left/right side.
STEP 2
One shoot enemy will appear when the score is equal or more than
20.
In the score is equal or more than 20 event add sub event

Coding so that every 4 seconds,
Also add action to create One Shoot Enemy and Laser enemy.
238
STEP 3
Make the Enemy2 and Laser Enemy to move downwards
Add the code to the Event Every Tick
STEP 4
Make the Enemy2 to appear with Random Costume
You can also add Enemy2 and LaserEnemy into the Family to make
the enemy destroy when touching with these enemies.
Right click to the Family “Enemies” an d select edit Family
Enemy2 must be shot several times in order to destroy

We will use Instance variable to give Life to the One shoot enemy
Click One shoot enemy
Click Instance variables pada Properties
> Add new instance variable
239
STEP 5
Give name the variable “enemy_
life” with initial value 4 to create
the enemy to have 4 lifes (must
be shot by the laser 4 times to
destroy)
STEP 6
Add coding to make when the Laser touches One shoot enemy, laser
will destroy and enemy_life decreased by 1
Make the One shoot enemy to destroy when the Life is 0
Use sub event One shoot enemy

> Compare instance variable
Add action to the sub event to make the score added by 2 when
One shoot enemy destroyed
240
STRONG LASER
We will upgrade the laser that will be shot by the player

This time we will learn to change the type of laser that is fired
when the score reaches 50.
We will call this laser as Strong Laser.
STEP 1
Add Laser Strong sprite in the GAME layout
Create with frame and Animation properties as follows:
Place the sprites outside the

layout
The rare lazer will appear when the score is equal to or more
than 50.
In the event sheet: Game

Add new event
System
> Compare variable
> score greater or equal 20
Add action
destroy Laser player
241
STRONG LASER
STEP 2
Add sub event to shoot with 0.2 seconds interval.
Add action create object to shoot Rare laser
Add action play audio laser.webm
STEP 3
In the every tick event,
add the following
action to shoot the
laser.
Make a code in the event sheet Game

When touching Rare laser, make One shoot enemy destroyed,
turn into particles and increase score by 2, play sound effect
“destroy”
242
GAME OVER
Do you remember what we learned in the previous meeting?
In the previous material, we have learned to randomly generate

shield items, life pills, and power scores in shooter games.
Do you still remember the code you use?

What is the function of random coding?
We will add the Game Over

layout which shows Score, High
score, and Replay button in it.
Let’s reopen the game file that you

created in the previous meeting!
Rename Event Sheet 1 to Game
STEP 1
Pada event sheet Game
Tambahkan variable baru “highscore”
243
HIGHSCORE
Add Event
When value score greater than highscore
Add Action
Value highscore become equal to the score value
STEP 2
Add layout baru > Add
event sheet
Rename Layout dan Event sheet that you

just added to “GameOver”
Then put the layout on the end of other
layout
STEP 3
Activate the show grid and snap to grid in the layout to arrange
objects so that they are neatly positioned and can be placed in
the middle
Add Tiled background and put on Layer 0
For sprite text “SCORE 0”, “HIGH SCORE 0”, “GAME OVER !”, dan
button Replay put on Layer 1
Add behavior on button Replay
244
HIGHSCORE
STEP 4
On event sheet Gameover
Add code untuk show
Score and Highscore
Add event
On start of layout
Add action Add action

SpriteFont Score Sprite text HighScore
> Set text > Set text
> “SCORES “&score > “HIGH SCORES “&highscore
STEP 5
Add coding on Event Sheet Game Over
Add Event
when button Replay clicked then move to layout “GAME”
STEP 6
Add Coding on event sheet Game
On sub Event
When Life Player < 1
Add Action
go to layout GameOver
245
STARDUST
Next, we will add Stardust/Snow effect

particles which is a snowy effect that
appears on the start screen.
Create a round particle using a white brush.
Place it in the position of: 384, -128

and Angle 90 degree to create a
falling snow effect.
Set the particles settings as follows to

create white and gray effect towards
the snow.
Additive Mode makes each particle brightens the

background and allows the particles to blend into each
other instead of just overlapping.
This makes the particles look like a light source.
246
STARDUST
To make 50 particles every time

and to create bursting particles
effect simultaneusly
To set the speed, size, opacity of the

particles and also to random ize the
X coordinat of the bursting point of
the particles, also to randomize the
size of the particles
To set the acceleration of the

particles to 0 (constan) and to
increase the gravity towards
the particles.
Play your START layout and see how your particles will look.
247
CHALLENGE
1. Make the enemies lasers unable to penetrate the shield that

protects the player.
2. When touching the shield, make some codes so that:

one shoot enemy destroy;
shows particles;
add score by 2;
add “destroy” sound effect
3. Make the One shoot enemy to appear in different frames

randomly.
4. Add “destroy” sound effect when the player destroys One

shoot enemy.
248
What is the function of Instance Variable on

Enemy2?
Answer : __________________________________________
____________________________________________________
On what particles are arranged so that they can

randomize the position of the burst particles?
Answer : __________________________________________
____________________________________________________
What is the function of the coding below?
Answer : __________________________________________
____________________________________________________
What is the function of the coding below?
Answer : __________________________________________
____________________________________________________
249

Advance Book-Part 1 en

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Advance Book-Part 1 en

Uploaded by

Copyright:

Available Formats

TABLE OF CONTENT - ADVANCE 1

Sprite Movement Using Behavior

Isn’t it fun developing your own game?

Construct 3 is a website specialized in making

You can also make game just like that!

We will start with a Mini Platformer game, listen to the

CREATE NEW GAME

Setting the file

Setting the backup file

Autosave time interval

CREATE NEW GAME

Layout is the arranged location of objects in a game.

Sprite is an element that exist in a game.

Follow these directions below to add Sprites.

We will start by adding a platform sprite

Choose sprite > Insert then click the layout

This is the result

We have added sprites using sprite editor tools in Construct’s and

Next, we will import pictures from the computer as a sprite.

Back to the layout set the size to 50 x 90

Add 2 Carrot sprites using the same methods to add the

Do not Copy-Paste the sprite since we need to add

In Construct 3, Moving sprites will be easier by using various

Behavior is a set of certain actions for the sprites that can

Solid is a behavior which makes an object

After adding behavior, Click Add on

You can check the sprite’s behaviors in the

The result of Copy-Paste an object that already has

Using the same methods, we will give a behavior

Platform is a type of behavior which creates

Next, Let’s set the position of the Carrot

1 Add behavior: Sine

2 Add behavior: Rotate

Sine is a type of behavior that set the object

Rotate is a type of behavior that makes the object

You can check out the effect of the behaviors

Save your Project by clicking

1. Try to add the Sun and 2 Clouds to the layout and

1. Now try to make your layout bigger

2. Try to make platforms with 2 different sprite.

3. Arrange your platforms according to the exampple given.

4. Also add your own player

5. Add some items on the platforms as well.

Move left and

Let’s play Carrot Quest

Move the Rabbit

HOW WAS TODAY’S LEARNING?

What Behaviors we used while making our Mini

Why do you need to add Solid behavior to the

What is the function of Platform behavior on player?

Using Event Sheet

Do you still remember what you have learned in the previous

We will learn how to move characters to various points using a new

Maze Game is a type of game where we need to move in a complex

A maze usually has some obstacles or enemies that must be

Try a maze game in the website below:

FIND YOUR WAY

Choose the level of

Click to show a new

Was the game you played difficult?

Nama project : Maze_[yourName]

Make sure the autosave is active.

Add a blue square sprite