Digitopolis II: Creation of Videogames With GDevelop [PDF]

Zitiervorschau

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. Digitópolis II : Creation of video games GDevelop - Bogotá : Los Libertadores Fundación Universitaria. Facultad de Ciencias de la Comunicación, Programa de Diseño Gráfico. Centro Producción Editorial, 2016. 125 Páginas. ISBN : 978-958-9146-71-2 1. VIDEOJUEGOS -- DISEÑO. 2.TECNOLOGÍAS DE INFORMACIÓN Y LA COMUNICACIÓN. 3. INNOVACIONES EDUCATIVAS. 4. TECNOLOGÍA EDUCATIVA. I. Autor II Título. 303.4833 / C961c

PRIMERA EDICIÓN: 2016 © Fundación Universitaria Los Libertadores © Jose David Cuartas Correa LOS LIBERTADORES, FUNDACIÓN 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 Gómez Vicerrector Académico Renán Camilo Rodríguez Cárdenas Vicerrector Administrativo Olga Patricia Sánchez Rubio Decana Facultad de Ciencias de la Comunicación María Alejandra Almonacid Galvis Directora Programa Diseño Gráfico Pedro Bellón Director Centro de Producción Editorial Francisco Buitrago Castillo Revisión Editorial Jose David Cuartas Correa Diagramación y diseño 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 Tecnologías para la Comunicación1 (Hitec Lab), which is attached to the Faculty of Communication Sciences at the Fundación 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.

1

Laboratorio Hipermedia de Tecnologías para la Comunicación http://www.hiteclab.co.nr/ Jose David Cuartas Correa - University Los Libertadores -CC

Acknowledgments: To the institutional support received from Fundación 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

1

2

Creation of Video Games with GDevelop

Technology This is the set of technical requirements needed to use the game. In some cases, the technology includes a set of additional peripherals to play. An example is the Wiimote, which is an additional peripheral, but necessary for some games that recognized the movement. In many cases, technology is defined in terms of the configuration of: Equipment - Operating System - Memory It is very important to know the technology for which will develop the game to make the proper developments, because it is not the same to develop for a PC with a (1) Gigabyte RAM and GNU/Linux operating system, than for a cellphone with a four (4) inch display with 256 megabytes of RAM and Android operating system. The display settings change and the texts and graphic elements must be developed separately for each platform. After defining these four (4) elements for the game project, proceed with the development of its graphic elements, then it is the right moment to create the programming, which is performed in this case using GDevelop.

Jose David Cuartas Correa - University Los Libertadores -CC

Creation of Video Games with GDevelop

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

3

Creation of Video Games with GDevelop

4

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

5

6

Creation of Video Games with GDevelop

4. Interface This is the initial interface when GDevelop is open, to begin to work, it is necessary to click on the File menu and then in New, or to click over the New icon.

After this, a new window appears where you must select the type of project that you want to develop, which can be either HTML5 or Native .

Jose David Cuartas Correa - University Los Libertadores -CC

Creation of Video Games with GDevelop

7

GDevelop comes with several examples of games, but to start a new project it is necessary to click on Empty project. After that, the interface should look like this:

1

2

3

4

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

8

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

9

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)

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

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)

M

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