Professional Documents
Culture Documents
Digitopolis II: Creation of Videogames With GDevelop
Digitopolis II: Creation of Videogames With GDevelop
9 789589 146637
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
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.
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.
Dedication:
To my wife Shahzadi and my daughter
Helen, who are the treasures that God
gave me to make my life truly happy.
CONTENT
PART ONE: ............................................................... 1
FIRST STEPS ............................................................ 1
1.
2.
3.
4.
Interface ............................................................ 6
a.
b.
c.
d.
e.
f.
g.
5.
Tools ............................................................... 13
a.
b.
6.
b.
c.
d.
e.
f.
g.
h.
i.
j.
k.
l.
m.
n.
o.
p.
q.
PART TWO:............................................................ 37
AUTOMATISMS AND EVENTS ................................ 37
7.
Automatisms .................................................... 37
a.
Types of Automation:.................................... 37
b.
c.
8.
b.
c.
9.
b.
c.
d.
e.
f.
Collisions ..................................................... 56
g.
h.
i.
j.
k.
l.
m.
a.
b.
c.
Create layers................................................ 79
d.
e.
f.
g.
h.
i.
j.
Add scenes................................................... 93
k.
l.
m.
a.
b.
11.
a.
b.
c.
d.
12.
a.
b.
14.
16.
17.
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.
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.
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.
Objects
Sprites
Scenes
Events
Automatisms
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.
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
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
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
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.
11
12
f.
Status Bar
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.
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
13
14
15
16
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 ]
17
18
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.
19
20
21
22
Then the file will appear in the list of the Images bank
and must drag it to the Images section in the same
window.
23
24
After this the window will close and you will see
the image in the scene, like this:
i.
25
26
j.
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.
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.
27
28
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.
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.
29
30
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.
31
32
Rotate Objects
33
34
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.
35
36
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 .
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
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
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.
39
40
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.
41
42
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.
43
44
45
46
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.
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.
Add conditions
47
48
After this, in the events panel you will see two red
arrows, at the beginning of the condition.
Add actions
49
50
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.
51
52
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
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:
53
54
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:
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
55
56
f.
Collisions
57
58
59
60
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.
61
62
i.
External Events
63
64
65
66
j.
Group of events
67
68
69
70
l.
71
72
73
74
PART THREE:
INTERFACE OF THE GAME
10. Instances, layers, order, cameras and scenes
Object
Instance
75
76
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:
77
78
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.
79
80
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.
81
82
83
84
85
86
87
88
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
91
92
i.
j.
Add scenes
93
94
Before
l.
After
Change of scene
95
96
97
98
99
100
101
102
103
104
105
106
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:
107
108
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).
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.
109
110
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").
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.
Top-down
111
112
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
115
116
117
118
Then assign
automatism.
to
the
game
floor
the
Platform
119
120
121
122
At the end you can add an event that, pushing the space
key, then restart the scene (go to Scene1).
123
PART FIVE:
ANNEXS
15. Common problems
Problem
Solution
The Project
manager
disappeared from the
window.
Problems to change
the values in the
Objects properties
window.
124
Solution
The thumbnails do
not appear in
the Objects
Editor.
Does not
start preview of
the game.
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
125