You are on page 1of 138

- - - - -

- - -
-
- - -
-
-
- - - -
- -
-
---------

-
- - -- -
- - - - - -
- - - - - -
- - - - - - - - -
-
-
-
-
-

-
-
-
- - - - - -
---

- - - - - - -
- -

--
- - -- -
-
-
-

-
- -

Jose David CUBtas C


-

- - - -
- -
-

-
- - -

- - - -
-
-
--- -
-

-
- - - -
--- - - - - - - -
- - -

CFEATION OF VIDEO GAVIES


VVITH- G|DEVEL OF

Los Libs
II T L T ||P. T. L. E.

JOse David CUatas CO ea

CFEATION OF \/|DEO GAN/IES


\/\/ITH GDEVELOF

& e Fundacin Universitaria

Hite: Los Libertadores


Cuartas Correa, Jos David. Digitpolis II: Creation of video games GDevelop --
Bogot : Los Libertadores Fundacin Universitaria. Facultad de Ciencias de la
Comunicacin, Programa de Diseo Grfico. Centro Produccin Editorial, 2016.

125 Pginas.
ISBN: 978-958-9146-71-2

1. VIDEOJUEGOS -- DISEO. 2.TECNOLOGAS DE INFORMACIN Y LA


COMUNICACIN. 3. INNOVACIONES EDUCATIVAS. 4. TECNOLOGA
EDUCATIVA. I. Autor II Ttulo.
303.4833 / C961c

PRIMERA EDICIN: 2016


Fundacin Universitaria Los Libertadores
Jose David Cuartas Correa

LOS LIBERTADORES, FUNDACIN UNIVERSITARIA


Bogot D. C., Colombia
Cra 16 No. 63 A - 68 / Tel. 2 54 4750
www.ulibertadores.edu.co

Juan Manuel Linares Venegas


Presidente del Claustro
Sonia Arciniegas Betancourt
Rectora

Orlando Salinas Gmez


Vicerrector Acadmico
Renn Camilo Rodrguez Crdenas
Vicerrector Administrativo
Olga Patricia Snchez Rubio
Decana Facultad de Ciencias de la Comunicacin

Mara Alejandra Almonacid Galvis


Directora Programa Diseo Grfico
Pedro Belln
Director Centro de Produccin Editorial
Francisco Buitrago Castillo
Revisin Editorial
Jose David Cuartas Correa
Diagramacin y diseo portada

Licencia Creative Commons by-sa 4.0


http://creativecommons.org/licenses/by-sa/4.0/deed.es
INTRODUCTION
This book aims to respond the growing interest about
video game design, by designers, publicists,
communicators and artists. It is proposed as an easy and
intuitive guide, which facilitates processes for rapid
development of video games, using free software tools. In
order to foster and promote projects of entrepreneurship,
within the sector of creative and entertainment industries.

Is not intended to be a book that contains all the


information about what can be done with GDevelop, but
an introductory guide that focuses on exploring the basic
features of this software.

Thus, this project arises from the desire to offer a quality


text about GDevelop and which was developed by the
Laboratorio Hipermedia de Tecnologas para la
Comunicacin1 (Hitec Lab), which is attached to the
Faculty of Communication Sciences at the Fundacin
Universitaria Los Libertadores.
Jose David Cuartas Correa
Bogota, Colombia
June 2015

Note: The examples in this text were tested in the GDevelop version 6.3.80.
For the creation of this book was used some of the pictures from the
GDevelop examples, particularly the example platformer.

1Laboratorio Hipermedia de Tecnologas para la Comunicacin


http://www.hiteclab.co.nr/

Jose David Cuartas Correa - University Los Libertadores -CC


Acknowledgments:

To the institutional support received from


Fundacin Universitaria Los
Libertadores, the Faculty of
Communication Sciences, the Graphic
Design Program, the General
Directorate of Research and the
Research Coordination at the
Communication Sciences Faculty, thanks
to whom this work has been possible.

Jose David Cuartas Correa - University Los Libertadores -CC


Dedication:

To my wife Shahzadi and my daughter


Helen, who are the treasures that God
gave me to make my life truly happy.

Jose David Cuartas Correa - University Los Libertadores -CC


CONTENT
PART ONE:...............................................................1
FIRST STEPS............................................................1
1. Basic theory about Videogames..........................1

Mechanics.............................................................1
Story..................................................................... 1

Aesthetics..............................................................1
Technology...........................................................2
2. What is GDevelop?............................................3
3. Basic Elements in GDevelop...............................4

4. Interface............................................................6
a. Top Panel ...................................................... 8
b. Project Manager........................................... 10
c. Objects editor..............................................10

d. Scene Tab....................................................11
e. Events Tab...................................................11
f. Status Bar....................................................12
g. Coordinate System ....................................... 12
5. Tools...............................................................13
a. Image converter........................................... 13

b. Converter sound files....................................15


6. First steps........................................................ 16
a. First Save the project.....................................16

Jose David Cuartas Correa - University Los Libertadores -CC


b. Structure of project folders............................ 16
c. Define size game window.............................. 17

d. Scroll and Zoom the scene............................ 17


e. Change the background color...................... 18
f. Insert an object............................................ 19
g. Change the name of the object..................... 22
h. Insert an Image object.................................. 22
i. Insert an object type Text............................... 24
j. Insert Tiled Sprite.......................................... 26
k. Scale objects................................................ 30
l. Rotate Objects............................................. 32

m. Activate Preview........................................ 34
n. Activate Play in window................................. 34
o. Stop the preview (native mode).................... 35
p. Export project to the Web.............................. 35
q. Export Native project (Windows).................... 36

PARTTWO:............................................................ 37
AUTOMATISMS AND EVENTS................................ 37
7. Automatisms....................................................37
a. Types of Automation:.................................... 37
b. Add an automatism...................................... 39
c. Eliminate automatism................................... 41

Jose David Cuartas Correa - University Los Libertadores -CC


8. Management of Variables.................................42
a. Creation of a global variable ........................ 42

b. Creation of scene local variable....................43


c. Creation of object local variable....................44
9. Events programming ........................................ 46

Add conditions.............................................47
Add actions..................................................48
Add a comment between events....................49
a. Scene events................................................51
Condition: At the beginning of the scene...........51
Action: Change background color....................51
b. Special Events..............................................52
Condition: Trigger once while true.................... 52
c. Mouse Events...............................................53
d. Multi-touch Events........................................54
e. Keyboard Events...........................................55

f. Collisions.....................................................56
g. Sound and music events................................57
Action: Play a sound......................................... 58
Action: Stop a sound........................................58
Action: Play music in the background................59
Action: Stop music........................................... 60

Jose David Cuartas Correa - University Los Libertadores -CC


h. Object Events............................................... 60
Action: Delete Objects..................................... 60
Action: Create objects...................................... 61
Action: Create objects randomly....................... 62

i. External Events............................................. 63
Create an external event...................................63
Insert link to an external event........................... 65
j. Group of events........................................... 66

k. Events to convert data................................... 68


Converting a number to text............................. 68

Convert text to number..................................... 69


l. Event to generate random numbers............... 70

m. Event for timing the game.......................... 72

PART THREE:......................................................... 75
INTERFACE OF THE GAME ..................................... 75
10. Instances, layers, order, cameras and scenes. 75
a. Create instance of an object......................... 75
b. Create multiple instances of an object........... 78
c. Create layers................................................ 79
d. Select object layer and Z order...................... 81

e. Move the camera with the character.............. 84


f. Show numbers and text on the screen............ 85

Jose David Cuartas Correa - University Los Libertadores -CC


g. Creation of HUD (status bar)........................ 88

h. Creation of buttons.......................................89
i. Hide and show objects..................................92
j. Add scenes...................................................93
k. Establish a global object...............................95
l. Change of scene.......................................... 95

m. Open an URL or file.................................. 96


a. Create Windows (Native mode).....................97
b. Execute commands (Native mode).................99
11. Animated Sprites......................................... 101
a. Create animated Sprite object.....................101
b. Playback speed of the Sprite........................ 103
c. Select the animation of the character...........104
d. Flip the animation of a Sprite.......................106

12. Files in Native mode...................................107


a. Read file....................................................108
b. Save file.....................................................110
PART FOUR:.........................................................111
Examples.............................................................111
13. Game of collisions......................................111
14. Creation of enemies...................................116
PART FIVE:...........................................................123

Jose David Cuartas Correa - University Los Libertadores -CC


ANNEXS.............................................................. 123
15. Common problems....................................123

16. Known Failure Modes................................. 124


17. References.................................................125

Jose David Cuartas Correa - University Los Libertadores -CC


Creation of Video Games with GDevelop 1

PART ONE:
FIRST STEPS

1. Basic theory about Videogames

Before starting to create any game, it is important to know


the four basic elements for the development of video
games, proposed by Jesse Schell, in the book The Art
of Game Design, which are:

Mechanics
Story
Aesthetics
Technology

Mechanics

Defines the rules for the game and are reflected in the
goal or objective of the game.

Story

Is the set of situations and events that constitute the


guiding thread of the actions of the character within the
game.

Aesthetics

It is defined by the sound and graphic settings of the


game, which grants its identity and should be in
accordance with the Story.

Jose David Cuartas Correa - University Los Libertadores -CC


2 Creation of Video Games with GDevelop

Technology

This is the set of technical requirements needed to use the


game. In some cases, the technology includes a set of
additional peripherals to play. An example is the Wiimote,
which is an additional peripheral, but necessary for some
games that recognized the movement. In many
cases, technology is defined in terms of the configuration
of:

Equipment - Operating System - Memory

It is very important to know the technology for which will


develop the game to make the proper developments,
because it is not the same to develop for a PC with
a (1) Gigabyte RAM and GNU/Linux operating system,
than for a cellphone with a four (4) inch display with 256
megabytes of RAM and Android operating system. The
display settings change and the texts and graphic elements
must be developed separately for each platform.

After defining these four (4) elements for the game project,
proceed with the development of its graphic elements, then
it is the right moment to create the programming, which is
performed in this case using GDevelop.

Jose David Cuartas Correa - University Los Libertadores -CC


Creation of Video Games with GDevelop 3

2. What is GDevelop?

GDevelop is a free and open source software, available


for the creation of all types of 2D gaming, which can be
exported for web platform (HTML5), and for native
platforms (Windows, GNU/Linux and Mac OS). This
software does not require its users to have knowledge in
a specific programming language. In GDevelop all the
game logic is constructed through an intuitive and
powerful graphical interface that is based on the control
of events.

Florian Rival is the creator of GDevelop, and since


2008 gives support and enhances it. Until now (2015),
is studding Mathematics and Computer Science at the
Institut Polytechnique de Grenoble in France.

The official website of the project is www.compilgames.net


from where is possible to download GDevelop for the
operating systems Windows and Ubuntu. For Mac
OS, they are developing an official version, but until
now has not been released.

Jose David Cuartas Correa - University Los Libertadores -CC


4 Creation of Video Games with GDevelop

3. Basic Elements in GDevelop

To begin the process of creating a videogame, it is


essential to know the main elements that can be used
with GDevelop:

Objects
Sprites
Scenes
Events
Automatisms

Each of these elements has a special function in the


process of the construction game and allows to define
the logics, mechanics, aesthetics and story of the
game.

Objects: They are the building blocks of the


game. In GDevelop, all the elements that compose
the scene are considered as objects. Some are not
visible, as the keyboard; and others are visible, as the
characters, backgrounds, texts, or others. Each object
has multiple properties, such as position, size, layer, and
so on.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 5

Sprites: Are graphical objects that show static images


or animations, which are composed of multiple images.
Depending on the state of an object, they can be set up
by different animations (standing, running, destroyed) or
depending on the direction in which the object is in
moving (forward, backward).

Scenes: This is where you define the spatial


configuration of the elements, and where you will be
shown the actions to be developed in the game. The
scenes may be constituted by several layers in which you
can have different types of graphical elements, such as:
background, characters, platforms, status bar (HUD).

Events: They give life to the game. These are activated


when you meet certain conditions established within the
game programming, according to which certain actions
are performed. For example, an object can move,
appear or change its movement direction.

Automatism: Are a set of properties that can be


assigned to an object to have a particular behavior.
There are different types: platform, movement in X and
Y axis, movement of draggable object, pathfinding, and
others. The automatisms facilitate the process of
creating games, and solve the process of programming
of the behavior of the characters, according to the user
interaction with the game.

Jose David Cuartas Correa - University Los Libertadores -CC


6 Creation of Video Games with GDevelop

4. Interface

This is the initial interface when GDevelop is open, to


begin to work, it is necessary to click on the File
menu and then in New, or to click over the New icon.

After this, a new window appears where you must select


the type of project that you want to develop, which can
be either HTML5 or Native.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 7

GDevelop comes with several examples of games, but


to start a new project it is necessary to click on Empty
project. After that, the interface should look like this:

2 3 4

5
1)
The graphical interface of an empty project in
2)
GDevelop is composed of the following main panels:

3) Top Panel
Project Manager
4) Panel of scene and Events
Objects editor
5) Status Bar

Jose David Cuartas Correa - University Los Libertadores-CC


8 Creation of Video Games with GDevelop

a. Top Panel

The top panel is where one can select the different


functions that GDevelop offers , which are sorted
according to the following categories:

Projects
Images bank
Scene
Events
Objects
Code
File

This tab is where you save or open a project, the


extensions can be activated, and the conversion tools
for which images and sounds can be opened.

In this tab you can add or delete images at the images


bank of the project.

In this tab you can activate the preview of the project,


open the objects and layers editors, the list of instances,
and select the zoom to visualize the scene.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 9

In this tab you can add new events, sub-events,


comments and link external events.

In this tab you can add objects or groups of objects and


also rename, copy and paste them.

In this tab you have access to the advanced features of


code, that will not be explored in this book.

This is the menu that pops up when you click on the


File tab, from here you can open or save the projects
and have access to the main configuration options of
GDevelop.

Jose David Cuartas Correa - University Los Libertadores-CC


10 Creation of Video Games with GDevelop

b. Project Manager

Project Manager is the panel that is located on the left


side of the window. It has the following folder structure:

Images
Scenes
External events
External layouts
Extensions

From here you can change the screen resolution of the


project, create scenes, change the background color of
each scene, create external events, and so on.

c. Objects editor

This is the panel that is located on the right side of the


window. It has a structure that is composed by objects
and groups.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 11

d. Scene Tab

The Scene tab is where you can see all the graphic
objects that compose the game scene and you can edit
its properties by clicking on each one of them.

e. Events Tab

The Events tab is where you can see the different


events used to code the behavior of the game.

Jose David Cuartas Correa - University Los Libertadores-CC


12 Creation of Video Games with GDevelop

f. Status Bar

The status bar shows the position of the mouse cursor in


the X axis and in the Y axis according to the game
window.

g. Coordinate System

The system of coordinates in GDevelop takes the upper


left corner as the coordinate (0,0) and increases its
values on the X axis, from left to right and their values
on the Y axis, from top to bottom.

In this example, the position of the character would be


in the position (400,300) of the screen.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 13

5. Tools

In the Projects tab (top panel), are two tools which are
of great utility to format the files that can be
used in the projects. One is to convert images and the
other to convert sound files.

a. Image converter

To convert an animated GIF in to Sprites, click over


the Projects tab, next over the Image
converter icon, and then over Decompose an
animated GIF option.

After this there will appear a window like the following,


where you have to select the animated GIF file to
convert, and then click on Decompose.

Jose David Cuartas Correa - University Los Libertadores-CC


14 Creation of Video Games with GDevelop

Another option that GDevelop offers is to decompose a


spritesheet, which is a single image, where each frame
of the animation is placed according to a precise grid.

Spritesheet (mosaic of the original image, http://kernelbook.sourceforge.net/tux.gif).

To make use of this tool do click on the Projects


tab and then click the icon Image converter and then
in the option Decompose a Spritesheet. This action
opens a window in which you select the Spritesheet
and also where you can set the size of the grid. After
this, click on Decompose, and multiple images are
generated, corresponding to trimmed fragments from
the original image.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 15

b. Converter sound files

To convert an MP3 audio file (which does not


work with GDevelop) into an OGG or WAV format,
click the Projects tab and then click the Converter
icon.

This opens the window of the converter, you have to


select the file to transform and click the bottom,
depending on the type of file you want to obtain,
either OGG or WAV. The converted file will be saved
in the same folder and with the same name as the
original file, but with extension OGG or WAV. The
OGG files will be much smaller in size than the original
file and the WAV will have a much larger size.

Note: Another option is to use the Audacity free software.

Jose David Cuartas Correa - University Los Libertadores-CC


16 Creation of Video Games with GDevelop

6. First steps

a. First Save the project

This is the first and most important step. To avoid


problems with the projects, you must first save the draft
and then you can proceed to import the objects. This
will prevent problems later.

b. Structure of project folders

Another important step is to create a basic folder


structure to store images, sound files and other
elements. This is due to the folders not being created in
the same place as the project; if you change the file
location, links to the folders get lost and later will not let
you open the project. To avoid this, and allow for
moving the project, it is suggested that you generate a
folder for images, another for sounds, and others that
could be necessary. In this way in the same folder will
be the project file (which has extension .gdb) and the
project folders. A structure would be as follows:

Desktop game.gdg
[images ]

[sounds ]

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 17

c. Define size game window

In the Project manager panel, right click on Project.


This pops up a menu from which you must click on Edit
the property of the game. After this, another window
opens in which you can modify the width and height
values over the Window section.

d. Scroll and Zoom the scene

The scene is displayed, by default at 100% of the size of


the game window. But sometimes it is necessary to view
the items that are placed around the scene, for this is
very useful to increase or decrease the size of the scene
visualization, or scroll the scene toward the sides, or up
or down.

Jose David Cuartas Correa - University Los Libertadores-CC


18 Creation of Video Games with GDevelop

To control the size how it is displayed on the scene, you


can click on the Scene tab and then click in the Initial
zoom icon.

Another option is to click on the scene, press the Ctrl


key and move the mouse scroll wheel.

To scroll toward the sides of the scene, you must click


on it, press the Alt key and move the mouse scroll
wheel. To move up or down on the scene, you must
click on the scene, press the Shift key and move the
mouse scroll wheel.

e. Change the background color

Do click with the right button on the desired scene that


appears in the Project manager (left panel). After this
is, a menu pop up will appear, and click where it
says Edit the properties.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 19

After this, another window opens, where you must click


in the square that appears in front of the Background
color option.

f. Insert an object

To insert an object, you must click, with the right mouse


button over the scene window and then select the
option Insert a new object.

Jose David Cuartas Correa - University Los Libertadores-CC


20 Creation of Video Games with GDevelop

After this, a window will pop up and show the different


types of objects that can be created. Only appearing in
color, the Sprite object.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 21

This means that the other types of objects have never


been used in the project still, and that must be
activated. For this, you must select the new object type
and respond positively to the question if you want to
activate it (in the window that appears after you select
it).

Below are six (6) types of objects that can be


inserted (both HTML5 mode and Native mode):

Sprite: is for inserting single images or sequences of


images.

Panel Sprite: allows you to insert images that can be


scaled by the shape, independently of its padding.

Shape Painter: allows you to draw simple geometric


shapes.

Text Entry: enables the option to enter text using the


keyboard.

Text: allows you to display text information on the


screen.

Tiled Sprite: allows you to insert images that get


repeated when you try to stretch it. With this you can
create the floors and platforms for the games.

Jose David Cuartas Correa - University Los Libertadores -CC


22 Creation of Video Games with GDevelop

g. Change the name of the object

To change the name of an object, right click on the


desired object over the Objects Editor panel, which is
located in the left side of the interface. Then click
Rename and you can write the new name. Another way
to do this is to press F2.

h. Insert an Image object

To create an image object, click with the right mouse


button within the scene window, select the option Insert
a new object and then click Sprite. This
opens the window Edition of a Sprite object. In this
new window you should click on the + icon to add an
image to the library.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 23

Then the file will appear in the list of the Images bank
and must drag it to the Images section in the same
window.

Jose David Cuartas Correa - University Los Libertadores-CC


24 Creation of Video Games with GDevelop

After this the window will close and you will see
the image in the scene, like this:

i. Insert an object type Text

To create a Text object, click with the right mouse


button within the scene window, select the option Insert
a new object and then click Text.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 25

After this, a window opens that asks if you want to use


this extension, which needs to be answered
affirmative to activate it.

Once the new object is activated, a new window opens


in which there is a box to write text, and at the bottom
are few options to give format to the text (color, size,
font).

Jose David Cuartas Correa - University Los Libertadores-CC


26 Creation of Video Games with GDevelop

j. Insert Tiled Sprite

A tiled sprite is used to build the floor of platforms for


the game, which have a small size, and is repeated
many times and seems to be a single image:

Original Sprite Tiled Sprite

For this you should click with the right mouse button
within the scene window, and select the option Insert a
new object and then click on Tiled Sprite.

After this, a new window will pop up that asks if you


want to use this extension and you should answer
affirmative to activate it.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 27

Once the new object is activated, open the window


Settings of the Tiled Sprite Object and click on the +
icon of the Images Bank Editor to select the image to use.

Then the image will appear in the list of the Images bank.
After, do click on the image and then in the green +
icon to select it, and finally in OK.

Jose David Cuartas Correa - University Los Libertadores-CC


28 Creation of Video Games with GDevelop

In the scene you will see something like in this image:

You can then scale the image, taking care to not pull
the square that has a line connected to the center of the
image, since it is the one that controls the angle for
rotating the Sprite.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 29

After this, you will see that the image is not pixelated,
because is not scaled, but is copying itself again and
again, giving the impression of being the same image.
For this image to be used as tiled sprite, it must be
designed in such a way that it may give continuity to
both sides.

At the end you get a uniform platform on which it will


move our characters, once you assign to these objects
the necessary automatisms.

Jose David Cuartas Correa - University Los Libertadores-CC


30 Creation of Video Games with GDevelop

k. Scale objects

To scale an object, click with the left mouse button on


it, and you should see a box with small white squares in
the corners and in the middle of each side.

Then you should click on some of the squares, and


while clicking, move them to obtain the desired size. To
scale in a single axis you should move the
square located in the middle of the figure (blue circles)
and to scale both axis, use the squares in the corners of
the figure (green circles).

Scaling can be used to enlarge or reduce the size of the


object. In this case, when you scale the object, it looks
larger, but pixelated. This is due to GDevelop only
working with bitmap images and when scaled they
become pixelated. For this reason, this procedure is not
recommended, but only to create the image at the
correct size.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 31

If you scale an image by mistake and want to return to


the original size, you must to do so by double clicking
on the object, to open the properties window, and
disable the checkbox Custom size?

Once this is done, the size becomes the original of the


image.

Jose David Cuartas Correa - University Los Libertadores-CC


32 Creation of Video Games with GDevelop

Note: When you scale an image, you should be careful


not to pull the square that has a line connected to its
center, as this is which controls the angle to rotate the
Sprite .

l. Rotate Objects

To rotate an object, click with the left mouse button on


it and a box should appear, with small white squares in
the corners and in the middle of each side, and one
square that has a line connected to the center of the
image.

You should move this square connected to the center of


the image upward, to rotate the object in the opposite
direction of the hands of the clock. And you should
move it downward to rotate it in the same clockwise
direction:

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 33

If you have a rotation by mistake and want to return to


the original position of the image, it must be done by
double clicking on the object, to open the properties
window and the put the value 0 in the Angle box.

Jose David Cuartas Correa - University Los Libertadores-CC


34 Creation of Video Games with GDevelop

m. Activate Preview

To activate the preview of the game, you must click in


the Scene tab and then on the icon that has a white
triangle inside a blue circle. This will open the browser
(if it is in HTML5 mode). Otherwise, it will display the
preview directly in the window of the scene.

n. Activate Play in window

This option only appears when you have enabled


the preview in native mode. To activate Play in
window you should click on the respective icon.

After this, a window will open that displays the preview


of the game.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 35

o. Stop the preview (native mode)

You should click on the scene tab and then on the


Stop the preview icon.

p. Export project to the Web

To export the project to the web, click on File tab and


then in Export to the web option.

After this a new window will open which will ask the
folder where you want to save the project to be
exported, and then you should click on Export.

Jose David Cuartas Correa - University Los Libertadores-CC


36 Creation of Video Games with GDevelop

q. Export Native project (Windows)

To export Native project (Windows), you must click on


the File tab and then Compile to a native
executable.

After this, a new window will open which will ask what
the folder is where you want to save the project to
be exported, then you should click on Compile.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 37

PART TWO:
AUTOMATISMS AND EVENTS

7. Automatisms

Automatism offers a set of properties that can be


assigned to an object to have a particular behavior.
This makes the process of creating games much easier,
because you directly solve the programming of the
behavior of the characters, according to the interaction
of the user with the game.

a. Types of Automation:

GDevelop offers eight (8) types of automatism that can


be assigned to an object in both modes (HTML5
and Native):2

Destroy when outside the screen


Draggable object
Pathfinding
Obstacle for pathfinding
Physics engine
Platform
Platformer character
Top-down movement (4 or 8 directions)

2
In native mode there are more types of automatism, but will not be
explored in this introductory text.

Jose David Cuartas Correa - University Los Libertadores -CC


38 Creation of Video Games with GDevelop

Destroy when outside the screen: destroys the


object automatically when this comes out of the screen.

Draggable object: enables the option to drag the


object within the screen.

Pathfinding: allows you to move objects and avoid


obstacles.

Obstacle for pathfinding: Configures the object as


an obstacle for characters with Pathfinding automatism.

Physics engine: applies the laws of physics to the


object movement.

Platform: Configures the object as a platform on which


you can jump and/or run.

Platformer character: is the one who can jump and


run on platforms.

Top-down movement (4 or 8 directions):


Configures the object so it can move by the keyboard
arrows.

Jose David Cuartas Correa - University Los Libertadores -CC


Creation of Video Games with GDevelop 39

b. Add an automatism

For adding an automatism to an object, you click with


the right mouse button over it, and select the
option Add an automatism to the object.

After this, a new window opens and shows the different


types of automatism that can be assigned, and you must
select one of them. Below a window can be seen with
the HTML5 automatism available to use:

Jose David Cuartas Correa - University Los Libertadores-CC


40 Creation of Video Games with GDevelop

After this, a new window opens that asks: Do you


want to use this extension in your game?, and
you must answer affirmatively.

After this, the object Properties window will open, where


you can see in the final section, the selected
automatism options. There you can configure the main
properties of the automatism behavior.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 41

c. Eliminate automatism

To delete an automatism you must double-click the


object, and the object properties window will open. In
the final section of this window are the properties of the
assigned automatism, and you should click on Delete.
After this another window will open that asks you which
automatism to eliminate, and you should click OK.

Jose David Cuartas Correa - University Los Libertadores-CC


42 Creation of Video Games with GDevelop

8. Management of Variables

A variable is a space in memory that can store


alphabetic values, numeric values, or character strings.

In GDevelop there are two types of variables: local and


global. Global variables are those available for all
the objects and scenes, and that are destroyed only
when the game quits.

Local variables are those that belong to a scene or an


object, and that are available only for that scene or
object. They are created when you open the scene or
create the object and are destroyed when you close the
scene or destroy the object.

a. Creation of a global variable

To create a global variable you should right-click


on Project, within the panel Project manager. Having
done this, a menu appears and you must click on
Modify global variables.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 43

Then, open Variables edition window and click on


the icon with the plus shape (+) to create a new
variable, then you must assign a name in the window
that pops up and then click OK.

b. Creation of scene local variable

To create a scene local variable, you should right-click


on Project, within the Project manager. After this, a
menu appears in which you should click on Modify
initial variables.

Jose David Cuartas Correa - University Los Libertadores-CC


44 Creation of Video Games with GDevelop

After this, the Variables edition window will open and


you should click on the icon in the shape of a plus
(+), to create a new variable, then you must assign a
name in the window that pops up and then click OK.

c. Creation of object local variable

To create an object local variable, click with the right


mouse button on the object over the Object Editor.
After this, it displays a menu in which you must click
on Other properties.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 45

Then, a new window opens in which you have to click


on the option Click to edit, in the Object variables
section.

After this, a Variables edition window will open and


you should click on the icon in the shape of a plus
(+), to create a new variable, which must be assigned a
name in the window that pops up after, and then click
OK.

Jose David Cuartas Correa - University Los Libertadores-CC


46 Creation of Video Games with GDevelop

9. Events programming

To insert an event, you must first click the Events


tab and then click on the icon that says Add an
event, which creates a new line in the Event window.

Each event begins with a number that identifies it, and is


divided into two parts: the first where the conditions
are defined, and the second where the actions are
defined to be executed when the conditions are met.

Conditions Actions

Note: The actions and conditions of the events that will be presented
below are available in both modes (Native and HTML5). There are more
types of actions and conditions in the native mode, but only a few will be
explored in this introductory text.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 47

Add conditions

To add a condition, double-click in the first rectangle of


the event or click the tab that is displayed when the
mouse is placed on the rectangle.

After this, another window unfolds that displays the


different conditions that can be added. Below you can
see the conditions window for the HTML5 mode:

All the conditions have a box that says: Invert the


condition; if this box is checked, GDevelop will make
the opposite of what the condition says.

Jose David Cuartas Correa - University Los Libertadores-CC


48 Creation of Video Games with GDevelop

After this, in the events panel you will see two red
arrows, at the beginning of the condition.

Add actions

To add an action, you double-click on the second


rectangle of the event or click the tab that is displayed
when the mouse is placed on the rectangle.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 49

After this, another window unfolds that displays the


different actions that can be added. Below you can see
the actions window for the HTML5 mode:

Add a comment between events

Before you start adding events it is very important to


acquire the habit of adding comments between events.
This is very useful for documenting each project. Each
comment gives clues about how each part of the code
works. In this way, when you need to change
something, it doesn't need to study all of the code, but
go directly to the part that requires a change.

Jose David Cuartas Correa - University Los Libertadores-CC


50 Creation of Video Games with GDevelop

To add a comment, you must be in the Events tab and


click on Add a comment.

After this, a new window opens in which you can edit


the comment and select the background and text color.

After this, will appear in the Events panel the


commentary that was added, which could be seen in
the following way:

In the following pages you will see a presentation of


some of the main conditions and actions available to
create events in GDevelop:

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 51

a. Scene events

Condition: At the beginning of the scene

This condition is activated by clicking on Add a


condition, then click on the triangle that precedes
the Scene condition and then the option At the
beginning of the scene.

This condition is used to make actions, just in the


moment when the scene starts.

Action: Change background color

To change the background color of the scene you click


Add an action, then click on the triangle that precedes
the Scene action and then over the option Change
background color.

Jose David Cuartas Correa - University Los Libertadores-CC


52 Creation of Video Games with GDevelop

b. Special Events
On some occasions, an event has actions that should
not be activated several times in succession. What is
needed is that the actions of the condition run only the
first time that this condition is fulfilled.

A case to use for this condition is with the action to play


a sound. Sometimes there is no sound, because the
condition is fulfilled many times and this does not
allow the sound to be played.

Condition: Trigger once while true

This condition is activated by clicking on Add a


condition, then by clicking on the triangle that
precedes the Advanced condition and then over the
option Trigger once while true.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 53

c. Mouse Events

There are four (4) types of conditions for the mouse.


The first is to determine which mouse button was
pressed, and the other two, to analyze which is the
position of the mouse, both in the X axis as in the Y axis.

To enable some of these conditions you must click


Add a condition, then click on the triangle that
precedes the Mouse and touch condition, and then in
any of the following options:

Mouse Button down or touch held


The cursor/touch is on an object
Cursor X position
Cursor Y position

Jose David Cuartas Correa - University Los Libertadores-CC


54 Creation of Video Games with GDevelop

d. Multi-touch Events

There are four (4) types of sub-conditions for multi


touch, which is located inside the conditions of Mouse
and touch. The first is to determine if a touch on the
screen has ended, the following to determine if it has
initiated a new touch, and the other two analyze which
position it is where the touch was made, both in the X
axis as in the Y axis.

To enable any of these conditions, you must click


Add a condition, then click on the triangle that
precedes the Mouse and touch condition, then on the
triangle that precedes the Multitouch sub
condition and then click in any of the following options:

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 55

A touch has ended


A new touch has started
Touch X position
Touch Y position

e. Keyboard Events

There are three (3) types of conditions for the keyboard.


The first is to determine if any key was pressed, the
second is to evaluate if an alphanumeric key was
pressed, and the third determines which keys are
pressed. Even the control keys as Enter, Shift, Ctrl, and
so on.

To enable any of these conditions you must click Add a


condition, then click on the triangle that precedes

Jose David Cuartas Correa - University Los Libertadores-CC


56 Creation of Video Games with GDevelop

the Keyboard condition and then in any of the


following options:

Any key is pressed


A key is pressed (text expression)
A key is pressed

f. Collisions

To create a condition of collision you should click Add


a condition, then click on the triangle that precedes
All Objects condition, click on the triangle that
precedes the Collision sub-condition and then in the
option Collision. In the window you must select the two
objects that will be evaluated if they are on a collision
or not.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 57

g. Sound and music events

The sound events are those that are used to play sound
effects that are repeated each time the user makes an
action. For example, the gunshot sounds (for a war
game) or the sound of the character jumping (in the
case of a platform game).

The music events are those that are used to play a track
or song, which will sound in the background, giving
the game some kind of sound atmosphere. For
example, you can use this event to inform
the player that he had little time left to finish the level,
making the rhythm of the music, play much faster.

Jose David Cuartas Correa - University Los Libertadores-CC


58 Creation of Video Games with GDevelop

Action: Play a sound

To play a sound, click Add an action, then click on


the triangle that precedes the Audio action, click on
the triangle that precedes the Sounds on channels
sub-action -and then the option Play a sound at a
channel.

Action: Stop a sound

To stop a sound, click Add an action, then click on


the triangle that precedes the Audio action, click on
the triangle that precedes the Sounds on
channels sub-action and then the option Stop the
sound of a channel.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 59

Action: Play music in the background

To play music in the background, click Add an action,


then click on the triangle that precedes the Audio
action, click on the triangle that precedes the Music on
channels sub-action and then the option Play a
music on a channel.

Jose David Cuartas Correa - University Los Libertadores-CC


60 Creation of Video Games with GDevelop

Action: Stop music

To stop the background music, click Add an action,


then click on the triangle that precedes the Audio
action, click on the triangle that precedes the Music on
channels sub-action and then the option Stop the
music on a channel.

h. Object Events

Action: Delete Objects

To remove objects, click Add an action, then click on


the triangle that precedes All the objects action, click
on the triangle that precedes the Objects sub-action,
then in the option Delete Object. After this, select the
object to be deleted.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 61

Action: Create objects

To create objects, click Add an action, then click on


the triangle that precedes All objects action, click on
the triangle that precedes the Objects sub-action and
then in the option Create object. After this, select the
object that is going to be created and define its position
in the X axis and the Y axis.

Jose David Cuartas Correa - University Los Libertadores-CC


62 Creation of Video Games with GDevelop

Action: Create objects randomly

To create objects randomly, click Add an action, then


click on the triangle that precedes All objects
action, click on the triangle that precedes the
Objects sub-action, and then in the option Create
object. After this, select the object that is going to
be created and define its position in the X axis a
random value and for the Y axis the middle position of
the screen. See the following example:

Here is generated a random value in the X axis, with the


statement:

Random(SceneWindowWidth())

And for the position in the Y axis is set in half of the


height of the window, with the statement:

SceneWindowHeight() /2

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 63

Note: In case you use keyboard or mouse events, for


the random creation of objects, it is recommended to
add the condition Trigger once while true, since the
application runs so quickly that many objects are
generated by simply pressing a key or a mouse button.
So the event should look similar to this:

i. External Events

Create an external event

The external events allow you to divide the game code


into sections that make specific activities (such as for
example, control the enemies), which facilitates
understanding and studies the code later.

To add an external event do so by right-clicking on


External events within the Project manager and then
over the option Add external events.

Jose David Cuartas Correa - University Los Libertadores-CC


64 Creation of Video Games with GDevelop

After this, a new item will appear in the external events


called External events, which you should rename
according to the activity that this will carry out. To do
this, right-click on the newly created external
events item and click Rename.

GDevelop also offers the option to Edit as if the


events were included to scene. If you want to use
this option, then select one of the scenes.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 65

Insert link to an external event

If you want to make use of an external event within a


scene, you must insert a link to the external event. For
this you click on the Events tab, then
click Add and finally in Link.

After this, a new window appears where you can select


the external event to be used, which in this case would
be menu.

And in the events panel would be as follows:

Jose David Cuartas Correa - University Los Libertadores-CC


66 Creation of Video Games with GDevelop

j. Group of events

A group of events is a strategy to sort the code, which


allows a set of events that will be included within the
same group, with which you can hide or show the
events that contains each event group. Normally the
event groups are created by affinity. One group may
contain the input events, another group the sound
events, another can contain the collision events, and so
on.

To create a group of events you need to click the


Events tab, then click Add and finally in Group.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 67

Then a new window opens in which you should assign a


name to the group and select a background color:

After this, appearing in the events panel, the created


group (in this case keyboard):

If you click the triangle at the beginning of the group


you can show or hide the events that contains.

Jose David Cuartas Correa - University Los Libertadores-CC


68 Creation of Video Games with GDevelop

k. Events to convert data

Converting a number to text

To convert a number to text you should use the


function: VariableString(variable name)

An example to use this function would be to assign a


text object the value of a numeric variable, to be shown
as text. For this you click Add an action, then click on
the triangle that precedes the Text object action and
then Modify the text. There you should select the text
object, then the sign of modification = and finally, in
the text box, add the line VariableString(counter). In
this case counter is the name of the variable.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 69

Convert text to number

To convert text into a number you should use the


function:
ToNumber(VariableString(txt))

An example to use this function would be to assign a


numeric variable the contents of a text variable. For this
you click Add an action, then click on the triangle that
precedes the variables action and then in the
option Value of a variable. There you should select
the numeric variable, then select the sign of
modification = and finally, in the text box, add the
line ToNumber(VariableString(text)). In this case
text is the name of the text variable .

Jose David Cuartas Correa - University Los Libertadores-CC


70 Creation of Video Games with GDevelop

l. Event to generate random numbers

To generate random numbers you should use the


function:
Random(value)

Which generates random numbers between 0 and the


value assigned within the function Random . For this you
click Add an action, then click on the triangle that
precedes the variables action and then in the
option Value of a variable. Select the variable, then
select the sign of modification = and finally, in the
value box, click the icon of the expression editor that
looks like an M lying down .M

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 71

After this, the window Edit the expression will open,


here you need to click over Random, within the Other
functions panel and the in the option random value.

This generates an expression of the following type:

Random()

And then within the parenthesis type the expression:

SceneWindowHeight()

At the end will look like this:

Random(SceneWindowHeight())

And finally you click OK on all the windows.

Jose David Cuartas Correa - University Los Libertadores-CC


72 Creation of Video Games with GDevelop

m. Event for timing the game

For timing the game, you must create a condition that


measure the time for a specific period. In this case we
are going to create a stopwatch that counts seconds.
For this, click Add a condition, then click on the
triangle that precedes Timers and time condition and
then in the option Value of a timer. There you must
define for how long the time will be measured, in this
case the value 1 to measure second by second, and
then you put a name to the stopwatch, in this case:
"secondstimer".

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 73

Following this, you must click Add an action, then


click on the triangle that precedes the Timers and
time action and finally in the option Reset a timer.
This allows you to reset the counter once the condition
is met for each period (in this case, second by second).

Jose David Cuartas Correa - University Los Libertadores-CC


74 Creation of Video Games with GDevelop

Then you must create another action that allows you to


increase in one (1) the value of the variable that is
counting the time in seconds. For this you must click
Add an action, then click on the triangle that precedes
the variables action and then in the option Value of
a variable. There you should select the variable, the
sign of modification + and finally add the value 1.

This expression assigns to the seconds variable the


value stored plus one (+1).

Finally the code might look like this:

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 75

PART THREE:
INTERFACE OF THE GAME

10. Instances, layers, order, cameras and scenes

For the development of the interface of a game, you


can make use of different resources, among which are
the instances, the cameras, the scenes and the layers.

a. Create instance of an object

An instance is a copy of the same object, with different


settings. Which means that looks just like the original,
but can have different size and position or be in a
different layer (among other properties). In the
following image you can see an example of object
instance to which was assigned the name character.

Object

Instance

Jose David Cuartas Correa - University Los Libertadores-CC


76 Creation of Video Games with GDevelop

To create an instance you should make a copy of the


object, by clicking with the right mouse button and
select the copy option.

Then move the mouse to another position, click with the


right button and select paste option.

After this you should see something as below:

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 77

You can see that this is the same object (character), but
they are two different instances. To confirm this, we can
open the list of instances on the Scene tab .

There, you will see that the same object (character)


appears, in the same Z order (1), but with different
positions on the axis X and Y axis:

Jose David Cuartas Correa - University Los Libertadores-CC


78 Creation of Video Games with GDevelop

b. Create multiple instances of an object

To create multiple instances of the same object


automatically, you should copy the instance:

Then you should use the Special paste option, and in


the new window that appears you should select the
number of copies in width and height. In addition, there
is the option to gradually apply an angle that rotates
each copy:

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 79

In this case, the result is 10 copies, distributed in 2


rows, with a progressive change in its angle (5
degrees).

c. Create layers

Layers allow you to define the arrangement of position


for the objects to be in front or behind others. Then you
can select how much forward or backward by placing
the objects regarding the background of the scene.

To create a layer, click in the Scene tab and then the


Layers editor icon.

After This action, another window opens up, that is the


Layers editor, in which you must click the + icon
to add a new layer.

Jose David Cuartas Correa - University Los Libertadores-CC


80 Creation of Video Games with GDevelop

Subsequently, a new layer appears that you must


rename to be able to recognize it more easily. For
this, you click with the right mouse button and select the
option Edit the layer properties.

Then another window opens in which you can enter the


name of the layer and set other options, such as custom
size or area of vision.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 81

Once you have assigned the new name to the layer (in
this case HUD) click on the OK button and return back
to the Layers Editor window, where you will see the
layer with the new name.

d. Select object layer and Z order

In GDevelop a scene can have multiple layers, but at


the same time, each layer can have different Z order.
With this resource it is possible to arrange different
objects spatially in the scene and define what is ahead
and back.

Jose David Cuartas Correa - University Los Libertadores-CC


82 Creation of Video Games with GDevelop

All of the objects by default are located in the base


layer of the scene, but what changes is the z order in
which it is located. This means that the larger
numbers correspond to the positions located more
forward and smaller numbers or negative, to
the positions located further back on the scene.

In the following example, if you open the properties of


the selected character, you can see that its layer has
nothing specified, which means that it is in the base
layer. And it is noted that the Z order is 2.

On the other hand, if the shrub is selected, you will see


that it is in the base layer, since there is

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 83

nothing specified, and as in the Z order have the value


1, the shrub is placed behind the character, which is on
a position with a greater numeric value.

To assign a different layer to any of the objects in a


scene, you must click on this, open its properties and in
the layer box, put the name of the layer that has been
created. In this case is HUD, since it is the layer that was
created earlier.

Jose David Cuartas Correa - University Los Libertadores-CC


84 Creation of Video Games with GDevelop

e. Move the camera with the character

To move the camera with the character, you must create


an event without condition, with the purpose that it will
run all the time, and the position of the camera always
put the character in the center of the game scene. For
this, you must click Add an action, then click on
the triangle that precedes the Layers and
cameras action and finally, in the option Camera
center X position.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 85

The event would be as follows:

The previous example moves the camera in the base


layer, because it was not modified as the Layer box. If
you click the Layer box, you could select the layer over
which will be made the movement of the camera.

f. Show numbers and text on the screen

For use of an event to show alphanumeric data in a text


object, click on Add an action, then click on
the triangle that precedes the Text object action and
finally in the option Modify the text. In this window,
you must first select the text object, then the sign of
modification = and finally add the text that you want to
view.

Jose David Cuartas Correa - University Los Libertadores-CC


86 Creation of Video Games with GDevelop

It is important to remember that in order to use the


Modify text action, previously you must create a text
object in the scene. Otherwise, the Text object will not
appear in the actions window.

In the next example the expression is used:

"Coins: " +VariableString(counter)

Which is made with a static string (in this


case, "Coins:"), then the + sign, which allows you to
join to this static string with the value from the variable
counter. To create this line, you simply click on the txt
icon.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 87

After, a new window will open.

Jose David Cuartas Correa - University Los Libertadores-CC


88 Creation of Video Games with GDevelop

In this window select the Scene variable, in this


case counter, and then add to the beginning of the
expression the following text: "Coins: "+.

After this, if you make a preview of the game, you


should see something like this:

g. Creation of HUD (status bar)

One of the main elements that makes the part of the


interface of any game, is the HUD (which
translates Heads-Up Display) and which is no more than
the status bar of the game. There, the status of the main
features of the character are displayed, as can be the
energy level, blood, weapons, or the number of lives,
among others.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 89

To create a HUD or status bar, what you need to do is


create a layer for this function and assign to this layer
each object that will be used to display the information
of the character.

For this, each object in the HUD must be placed on that


layer, by modifying its properties:

h. Creation of buttons

To create buttons, you must first insert in to the scene an


object that will have a button function, and after
this one event with two conditions. One condition is to
check if the cursor is over the object and the other is to
check if it was clicked. To replicate the following
example, you should create a text object that says
Sound and assign to it the name button.

Jose David Cuartas Correa - University Los Libertadores-CC


90 Creation of Video Games with GDevelop

Then you should go to the event window and click


on Add a condition. After this, click on the triangle
that precedes the Mouse and touch condition and
click on the option The cursor/touch is on an
object.
Finally select the object that is used as a button and
click OK.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 91

After this, assign an action to the event, for example,


activate a sound. With this, you will get as a result that
each time you place the cursor over the object (in this
case, the text Sound) the action will be performed.

But for making it work as a real button, you should add


another condition (to the same event) that activates the
action only when the user clicks-on the object. For this
you should use the Mouse Button down or touch
held condition and will look like this:

Note: In the example above, you must meet the two


conditions to activate the sound.

Jose David Cuartas Correa - University Los Libertadores-CC


92 Creation of Video Games with GDevelop

i. Hide and show objects

To hide an object, you must go to the event window


and click on Add an action, then click on the triangle
that precedes All objects action, then click on the
triangle that precedes the Visibility sub-action
and subsequently in the option Hide. Finally, you
should select the object that has to be hidden and click
OK.

To display an object, you must go to the event window


and click on Add an action. Then click on the triangle
that precedes All objects action, then click on the
triangle that precedes the Visibility sub-action and
subsequently in the option Visible. Finally, you should
select the object that has to be visible and click OK.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 93

Continuing with the previous example (create button),


you could define that when the mouse is over
the button, it plays a sound and displays a text object;
and also you could add the same condition, but
inverted (red arrows). Then the text object will be
hidden when the mouse cursor is not over the button.
The code would be more or less as follows:

j. Add scenes

The scenes allow you to define different places or


moments in the same game, which may have its own
background color, layers and levels. To create a scene,
click in the Scene tab, then within the project manager,

Jose David Cuartas Correa - University Los Libertadores-CC


94 Creation of Video Games with GDevelop

right-click on Scenes, and from this a menu pops up in


which you must click on Add a scene.

After this, will appear a new scene on which you must


click with the right mouse button (or use the key F2), to
rename the scene. This will let you identify the scenes
from the game easier, and have no confusion when you
will try to go from one scene to another within the
game.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 95

k. Establish a global object

By default, each object that is inserted is local to your


scene, which means that if you create a new scene, you
must insert the same object again. An alternative to
avoid doing this is creating it as a global object, which
will appear in the Objects Editor of all the scenes and
you will recognize it because its name will be in bold.

To establish a global object, click with the right mouse


button over the object in the Objects editor panel and
click Set as global object, and then you should see
this option in gray color.

Before After

l. Change of scene

For change of scene, go to the event window and click


on Add an action. Then click on the triangle that
precedes the Scene action and then the option Go to
scene. Finally, you should write between quotation
marks the name of the scene that you want to jump to
(in this case "Level1 ") and click OK.

Jose David Cuartas Correa - University Los Libertadores-CC


96 Creation of Video Games with GDevelop

m. Open an URL or file

For opening an URL or file in a browser (either if it is in


Native mode or HTML5 mode), you should go to the
event window and click on Add an action. Then click
on the triangle that precedes the Files action and then
the option Open an URL or file. Finally, you should
write between quotation marks the URL or the HTML file
you want to open and click over OK.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 97

a. Create Windows (Native mode)

To create windows in Native mode (Windows), you


should select the Projects tab in the top panel and click
on the icon of Extensions and platforms.

In the section of Extensions available, you should


activate the option Common dialogs.

Jose David Cuartas Correa - University Los Libertadores-CC


98 Creation of Video Games with GDevelop

Then, in the events panel, select any of the actions


available in the option Interfaces, among which are:

Show a message box


Show a window to choose of files
Show a window to enter a text
Display a YES/NO message box

You should click in the option Display a YES/NO


message box and write between quotation marks the
message and the window title.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 99

In the event window you should see something like this:

According to the previous example, if you run the


preview of the game and press any key, then you would
see the following window:

b. Execute commands (Native mode)

To run commands in Native mode (Windows), you


should go to the events panel and click Add

Jose David Cuartas Correa - University Los Libertadores-CC


100 Creation of Video Games with GDevelop

an action, click on the triangle that precedes the


Files action and then in the option Execute a
command. Finally, you should write between quotation
marks the command to execute and click OK.

In this case, the command is notepad.exe, which


opens the Windows text editor. And the event would
look like this:

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 101

11. Animated Sprites

An animated Sprite is the animation that is performed


by the different characters or elements of the
game, according to their status. For example the
animation of the character walking or jumping. Each
one of these animations is activated in response to the
events that evaluate the different states of the game.

a. Create animated Sprite object

To create an animated Sprite object, you must click with


the right mouse button within the scene window, select
the option Insert a new object, and then click Sprite.
After this, the Edition of a Sprite object
window opens. There you should add in the images
bank, all the images for each animation, by clicking on
the + icon .

Jose David Cuartas Correa - University Los Libertadores-CC


102 Creation of Video Games with GDevelop

To add the other animations of the same character, you


should click on the + icon, over the Images
bank, and drag the images of each animation to the
Images panel.

Repeat the same procedure for each animation of the


same character:

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 103

Once the images for each animation are added, then


proceed to enable the display loop mode, for which you
must click the icon with a concentric arrow shape
located next to the icons + and -. Also, it is possible to
watch a preview of the animation in a small window,
click in the blue icon with a white triangle.

b. Playback speed of the Sprite

In the Edition of Sprite object window, click on


the clock icon that appears at the top left of the
window.

Jose David Cuartas Correa - University Los Libertadores-CC


104 Creation of Video Games with GDevelop

After this, another window opens in which you must


enter the speed. By default, the speed is one (1) frame
per second. If you want to increase the speed, you must
enter numbers smaller than 1 (for example 0.5 would
be half a second or 0.1, a tenth of a second).

c. Select the animation of the character

To activate animations of the character you must go to


the event window and click the automatism condition
that you have assigned to the character in the game. In
the case of this example, you should click on Add a
condition, then click on the triangle that precedes the
Top-down movement condition, and then in the
option Is moving.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 105

Finally, select the character (in this case character) and


click the automatism: TopDownMovement.

Then you must click Add an action, then click on


the triangle that precedes the Sprite action, then on the
triangle that precedes the Animations and images
sub-action, and then over the option Change the
animation. Finally, select the object corresponding to
the character, then the modification sign = and put the
number of the animations that you want to activate, in
this case animation 1.

Jose David Cuartas Correa - University Los Libertadores-CC


106 Creation of Video Games with GDevelop

After this, copy the previous event, but invert the


condition of movement, so in that way when you are not
moving the character, the active animation will be 0
(which is the default animation corresponding to when
the character is motionless). Finally, these two
events would be as follows:

d. Flip the animation of a Sprite

To flip the animation of a Sprite whit this change of


movement direction, go to the event window and click
on Add an action, then click on the triangle that
precedes the Sprite action, after on the triangle that
precedes the Effects sub-action. And later over the
option flip the object horizontally. Finally, you

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 107

should select the object that corresponds to the


character to flip and click the yes icon to enable the flip
action.

For this example was created a condition


that evaluates if the left key is pressed, then the
Sprite will be flipped horizontally and the event would
be as follows:

12. Files in Native mode

The files are useful for saving the records of best scores,
or to save the settings for each player. In
GDevelop managing files, to save and load data is
done by files in XML format

Jose David Cuartas Correa - University Los Libertadores-CC


108 Creation of Video Games with GDevelop

a. Read file

To read a file go to the event window and click on Add


an action, then click on the triangle that precedes the
Storage action and then in the option to Read a text.
Finally, write the file name in double quotes, which in
this case has the name "game.txt". (Note: this file
contains multiple labels or groups with values assigned
to each one of them). After, you should add the group
between quotes (which corresponds to the label of the
value to read within the file, in this case "record") and
finally select the variable where you are going to save
the information that will be read from the file (the
variable, in this case, has the name oldrecord).

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 109

To show the value that was recovered from the file, you
can use the variable oldrecord to store the value tha
is read from the file to display its content in the text
object filecontent.

Finally, you can assign a condition to activate the


reading of the file at the beginning of the scene. Then
you should add a second event, that would show on the
screen this value all the time, since there is no
condition, will make the action all the time. Finally, the
two events would be as follows:

Jose David Cuartas Correa - University Los Libertadores-CC


110 Creation of Video Games with GDevelop

b. Save file

To save file, go to the event window and click on Add


an action, then click on the triangle that precedes the
Storage action and then in the option Write a text.
After this, you should enter the file name in double
quotes (in this case "game.txt"), then enter the group
between quotation marks (which corresponds to the
label of the value to write, in this case "record") and
finally enter the value to save between quotation marks
(in this case "5").

Finally, you can add a condition that checks if any key


is pressed then save the file game.txt. Finally, the
event would be as follows:

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 111

PART FOUR:
Examples

13. Game of collisions

To create a small game of collisions, you can use


images and sounds available in the examples of
GDevelop. In this example, you can use the elements of
the example Platformer. First, add to the scene one
character, one coin and one text object.

After, you must add an


automatism Top-down
movement to the main character.

Jose David Cuartas Correa - University Los Libertadores-CC


112 Creation of Video Games with GDevelop

Then, create a variable to count the number of coins


collected, which must be initialized with the value
0. Then create two variables to save the values of the
position of the coin, in the X and Y axis.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 113

Making sure that the window of this game is 800 by


600 pixels, the first step that must occur to program the
game, is to initialize the variable X with a random
value of maximum 750, to ensure that the coin is not
going to be created outside the window.

Then you must locate the position of the coin in X


axis, using the value of that variable X.

Then you must add an event without condition (to run


all the time) that increases the value stored in the
variable Y, with an increase that makes use of the
expression 600*TimeDelta(). With this expression is
controlled how fast you want the object to move , if for
example it increases the value from 600 to 1200, the
speed of movement of the coin would increase. On the
contrary, if its reduced from the value 600 to 300, then
the movement would be slower.

During the same event you must add the action to


change the position of the coin, in accordance with the
value that is stored in the variable Y.

Finally, you will add to this event another action that will
allow to update the content that will be displayed over

Jose David Cuartas Correa - University Los Libertadores-CC


114 Creation of Video Games with GDevelop

the text object (called coins), using the value stored


in the variable of the coin counter (in this case call:
counter). It would be as follows:

Then, you must add another event to evaluate the


value stored in the variable Y, with respect to the limit
of the window, which is 600 pixels in the Y-axis. With
this condition, it will be evaluated if the object falls to
the floor. If this condition is met, then you must
initialize the variable X with a random value maximum
of 750, and then assign the new value to the
position X of the coin and assign it to the variable Y the
value 0, to put it in the top of the window to let it fall
again.

Then you must add another event to check if the coin


collides with the character, so that if this condition is
met, then increase the counter variable by 1. After, you
must initialize the variable X with a random
value maximum of 750, then assign the new value to
the position in X of the coin, and assign it to the
variable Y the value 0, to put it in the top of the window
to let it fall again.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 115

Finally the full code, by adding comments, would be as


follows:

Jose David Cuartas Correa - University Los Libertadores-CC


116 Creation of Video Games with GDevelop

14. Creation of enemies

To create enemies for platform games, the first thing


you must do is create the scene and add a tiled
image, to create the floor of the game.

Then insert two image objects, which will serve as limits


to the movement of the enemy. In this case, use the
same objects from the example Platformer.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 117

Then add the sprite of the enemy.

After, you must generate the animations of the enemy,


putting in the animation 0 which corresponds when
the enemy is walking.

Then add the animation 1, which corresponds when the


enemy is eliminated.

Jose David Cuartas Correa - University Los Libertadores-CC


118 Creation of Video Games with GDevelop

After, add the main character of the game.

Later, assign to the main character the Platformer


character automatism.

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 119

Then assign to the game floor the Platform


automatism.

Later, you must create a variable to know the movement


direction of the enemy. In this case, you should create
the variable dir and initializes it with -1.

Jose David Cuartas Correa - University Los Libertadores-CC


120 Creation of Video Games with GDevelop

Then you can start the programming of the game.


First, create an event that hides the two objects that are
working as limits to the enemy movement. For this, you
should use the condition At the beginning of the
scene.

Then create another event that every 0.05 seconds will


add to the position in X (of the enemy) the value that
has at that moment the variable dir. This means that if
the value is -1, then subtract one unit to the position in
X (of the enemy), if the value is 1, then it will add one
unit to the position in X (of the enemy).

After, add two events which evaluates whether the


enemy is in collision with some of the bound objects.
And if in case one of the conditions is true, then change
the status of the variable dir, according to each
situation. It will be assigned 1 if it collides with the left

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 121

boundary or will be assigned -1 if it collides with the


right limit.

Then, you will have to evaluate if the character is in


collision with the enemy and also if the character is
falling. This happens if the character has jumped with
the intention of killing the enemy, falling from above. If
this condition is met, then the animation 1 of the enemy
is activated, and that perfoms the death of the enemy.

Another event that is necessary to add is when the


animation 1 of the enemy has been activated, (which is
the result of the previous event) and check also that the
animation is finished. After this, the enemy will be
deleted.

In an additional event, you must check whether the


character collides with the enemy from the side, for
which is necessary to analyze if the character is not
falling, and if the animation of the enemy is not the
number 1 (that is activated when it is killed by the
character). In this case, if this condition is met, the
character must deleted since it was touched by the
enemy.

Jose David Cuartas Correa - University Los Libertadores-CC


122 Creation of Video Games with GDevelop

At the end you can add an event that, pushing the space
key, then restart the scene (go to Scene1).

By adding comments, the complete code would be as


follows:

Jose David Cuartas Correa - University Los Libertadores-CC


Creation of Video Games with GDevelop 123

PART FIVE:
ANNEXS

15. Common problems

Problem Solution
The Objects editor You need to click the scene
disappeared from the tab and then click on the icon of
window. the Objects Editor.
The Project
manager You need to click the Projects
tab and then click on the icon
disappeared from the of Projects.
window.

To change a value in the


Objects properties window, you
Problems to change must first click on another
the values in the box, before closing the
Objects properties properties window. If this is not
window. done and you close the window
before doing this, then the last
change is not applied.

Jose David Cuartas Correa - University Los Libertadores -CC


124 Creation of Video Games with GDevelop

16. Known Failure Modes

Fails Solution

Errors
saved project.
opening the You need to correct the paths of
all files. For this, it is better to
erase all the objects in the
Images bank and add them
again. In the case of having
sound events, you must do the
same procedure to add each
audio file again.

the
not Objects
appear in
Editor. You must select each item in
the Objects Editor and
click with the right button in the
The thumbnails do Edit After this,
option.
the Edition of a Sprite object
window will open, and then close
it. After this, the thumbnail of
each object in which you do this
procedure, will appear.

Check if in the Images bank


there are images not found that
Does not were deleted from the project
startgame.
the preview of
directory or that have special
characters, which you must
delete from the Images bank.

Jose David Cuartas Correa - University Los Libertadores -CC


Creation of Video Games with GDevelop 125

17. References

Rival, F. (2015). GDevelop [Homepage]. Retrieved


from http://www.compilgames.net/

Rival, F. (2015). GDevelop GitHub Repository.


Retrieved from https://github.com/4ian/gd

Rival, F. (2015). Concepts. Retrieved


from http://wiki.compilgames.net/doku.php/en/gam
e_develop/documentation/manual/pres_concepts

Rival, F. (2014). GDevelop Wiki. Retrieved from


http://www.wiki.compilgames.net/doku.php/en/
game_develop

Rival, F. (2014). Tutorial on making a multiplayer


racing game. Retrieved
from http://www.wiki.compilgames.net/doku.php/en
/game_develop/tutorials/multiplayer_racing_game

Rival, F. (2013). Creating buttons for a menu. Retrieved


from
http://www.wiki.compilgames.net/doku.php/en/
game_develop/articles/creatingbuttons

Schell, J. (2008). The Art of Game Design. Burlington:


Elsevier

Jose David Cuartas Correa - University Los Libertadores -CC

You might also like