You are on page 1of 137

GDevelop is a free and open source

software, available for the creation of all


kinds 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 hace
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.

This book aims to respond the growing interest


about video game design, by designers, publicist,
communicators and artists. It is proposed as an
easy and intuitive guide, which facilities 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.

Jose David Cuartas Correa is Visual


Designer student of a PhD in Design and
Creation at the University of Caldas
(Manizales, Colombia). Full time professor
in the Graphic Design program and
director of the Hitec Lab (Hypermedia
Laboratory of Communication
Technologies, at Los Libertadores
University (Bogot, Colombia) and
part-time professor for the Industrial
Design program at Jorge Tadeo Lozano
University (Bogot, Colombia).
Promoter of the use and development of
free software, free culture and emerging
technologies in the field of art, design
and entertainment. Free software user
since 1999 with experience in multimedia
programming and creation of interactive
installations.

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.

Among the main research areas in which


he works, are tangible and perceptual
user interfaces; specifically, he has
several developmentsaround the
Augmented Reality Technology, such the
ATOMIC Web Authoring Tool software
and the ATOMIC Authoring Tool
Software.

This book is divided into five (5) parts,


the first deals with the basic aspects of
using GDevelop, the second part covers
aspects of the automatisms and events,
the third part covers aspects of the
creation of the game interface, the fourth
part presents two examples of
mini-games and the fifth are the annexes.
ISBN 978-958-9146-63-7

9 789589 146637

In 2009 he was an exchange student in


the Advanced Diploma in Experimental
Media Arts en CEMA (Center of
Experimental Media Art) at the Srishti
School of Art, Design and Technology, in
Bangalore, India, where was also
professor of the course Design of
Interface and Interaction on the Web.

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.

Laboratorio 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

PART TWO:............................................................ 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.
m.

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


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

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

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

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

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

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

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

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:

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

Top Panel
Project Manager
Panel of scene and Events
Objects editor
Status Bar

Jose David Cuartas Correa - University Los Libertadores -CC

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

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

Creation of Video Games with GDevelop

10

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

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

11

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 upperleft 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

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

13

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

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

15

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:

game.gdg
Desktop

[ images ]
[ sounds ]

Jose David Cuartas Correa - University Los Libertadores -CC

Creation of Video Games with GDevelop

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

17

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

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

19

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

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

21

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

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

23

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

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

25

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

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

27

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

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

29

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

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

31

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

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

33

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

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

35

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

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)

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

37

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

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

39

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

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

41

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

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

43

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

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

45

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

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

47

Creation of Video Games with GDevelop

48

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

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

49

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

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

51

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

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

53

54

Creation of Video Games with GDevelop

d. Multi-touch Events
There are four (4) types of sub-conditions for multitouch, 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 subcondition and then click in any of the following options:

Jose David Cuartas Correa - University Los Libertadores -CC

Creation of Video Games with GDevelop

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

55

Creation of Video Games with GDevelop

56

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

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

57

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

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

59

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

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

61

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

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

63

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

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

65

Creation of Video Games with GDevelop

66

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

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

67

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

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

69

Creation of Video Games with GDevelop

70

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 .

Jose David Cuartas Correa - University Los Libertadores -CC

Creation of Video Games with GDevelop

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

71

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

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

73

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

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

75

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

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 .

t
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

77

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

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

79

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

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

81

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

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

83

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

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

85

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

After, a new window will open.

Jose David Cuartas Correa - University Los Libertadores -CC

87

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

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

89

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

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

91

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

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

93

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

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

l.

After

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

95

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

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

97

Creation of Video Games with GDevelop

98

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

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

99

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

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

101

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

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

103

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

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

105

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

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

107

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

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

109

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

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


movement to the main character.

Top-down

Jose David Cuartas Correa - University Los Libertadores -CC

111

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

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

113

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

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


follows:

Jose David Cuartas Correa - University Los Libertadores -CC

115

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

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

117

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

Then assign
automatism.

to

the

game

floor

the

Platform

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

119

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

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

121

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


disappeared from the
window.

You need to click the scene


tab and then click on the icon of
the Objects Editor.

The Project
manager
disappeared from the
window.

You need to click the Projects


tab and then click on the icon
of Projects.

Problems to change
the values in the
Objects properties
window.

To change a value in the


Objects properties window, you
must first click on another
box, before
closing
the
properties window. If this is not
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 opening the


saved project.

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 thumbnails do
not appear in
the Objects
Editor.

You must select each item in


the Objects
Editor and
click with the right button in the
Edit
option.
After
this,
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.

Does not
start preview of
the game.

Check if in the Images bank


there are images not found that
were deleted from the project
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

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

125

You might also like