• No results found

Digitopolis II: Creation of Videogames with GDevelop

N/A
N/A
Protected

Academic year: 2021

Share "Digitopolis II: Creation of Videogames with GDevelop"

Copied!
137
0
0

Loading.... (view fulltext now)

Full text

(1)

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.

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.

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.

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.

(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.

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.

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”. ISBN 978-958-9146-63-7

(2)
(3)

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 Directora Programa Diseño Gráfico

Pedro Bellón

Director Centro de Producción Editorial

Francisco Buitrago Castillo

Revisión Editorial

Diagramación y diseño portada María Alejandra Almonacid Galvis

Jose David Cuartas Correa

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 125 Páginas.

(4)

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.

(5)

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.

(6)

Dedication:

To my wife Shahzadi and my daughter Helen, who are the treasures that God gave me to make my life truly happy.

(7)

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

(8)

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

(9)

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

(10)

Action: Create objects ... 61

Action: Create objects randomly ... 62

i. External Events ... 63

Create an external event... 63

Insert link to an external event ... 65

j. Group of events ... 66

k. Events to convert data ... 68

Converting a number to text ... 68

Convert text to number ... 69

l. Event to generate random numbers ... 70

m. Event for timing the game ... 72

PART THREE: ... 75

INTERFACE OF THE GAME ... 75

10. Instances, layers, order, cameras and scenes . 75 a. Create instance of an object ... 75

b. Create multiple instances of an object ... 78

c. Create layers... 79

(11)

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

(12)

16. Known Failure Modes ... 124

(13)

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

(14)

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.

(15)

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.

(16)

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

(17)

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.

(18)

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 .

(19)

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:

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

1) Top Panel 2) Project Manager

3) Panel of scene and Events 4) Objects editor

5) Status Bar

2 3 4

1

(20)

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.

(21)

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.

(22)

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 .

(23)

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.

(24)

f. Status Bar

The status bar shows the position of the mouse cursor in the X axis and in the Y axis according to the game window.

g. Coordinate System

The system of coordinates in GDevelop takes the upper-left corner as the coordinate (0,0) and increases its values on the X axis , from left to right and their values on the Y axis, from top to bottom.

(25)

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.

(26)

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.

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.

(27)

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.

(28)

6. First steps

a. First Save the project

This is the first and most important step. To avoid problems with the projects, you must first save the draft and then you can proceed to import the objects. This will prevent problems later.

b. Structure of project folders

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

Desktop

game.gdg

[ images ]

[ sounds ]

(29)

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.

(30)

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.

(31)

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.

(32)

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.

(33)

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.

(34)

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.

(35)

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

(36)

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.

(37)

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).

(38)

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.

(39)

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.

(40)

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

(41)

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.

(42)

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

(43)

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.

(44)

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:

(45)

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.

(46)

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.

(47)

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 .

(48)

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 .

(49)

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

(50)

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.

(51)

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:

(52)

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.

(53)

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.

(54)

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.

(55)

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.

(56)

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 .

(57)

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.

(58)

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.

(59)

 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

(60)

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.

(61)

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.

(62)

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:

(63)

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

(64)

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

(65)

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

(66)

d. Multi-touch Events

There are four (4) types of sub-conditions for multi-touch, which is located inside the conditions of Mouse and touch. The first is to determine if a touch on the screen has ended, the following to determine if it has initiated a new touch, and the other two analyze which position it is where the touch was made, both in the X axis as in the Y axis.

To enable any of these conditions, you must click Add a condition, then click on the triangle that precedes the Mouse and touch condition, then on the triangle that precedes the Multitouch

(67)

sub- 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

(68)

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

(69)

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.

(70)

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.

(71)

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.

(72)

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.

(73)

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.

(74)

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())

(75)

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.

(76)

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.

(77)

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.

(78)

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.

(79)

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.

(80)

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.

(81)

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 .

(82)

l. Event to generate random numbers

To generate random numbers you should use the function:

Random(value)

Which generates random numbers between 0 and the value assigned within the function Random . For this you click Add an action, then click on the triangle that precedes the variables action and then in the option Value of a variable. Select the variable, then select the sign of modification = and finally, in the value box, click the icon of the expression editor that

(83)

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.

(84)

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".

(85)

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).

(86)

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).

(87)

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

(88)

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.

(89)

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

There, you will see that the same object (character) appears, in the same Z order (1), but with different positions on the axis X and Y axis:

(90)

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:

(91)

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.

(92)

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.

(93)

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.

(94)

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.

(95)

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.

(96)

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.

(97)

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.

(98)

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.

(99)
(100)

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,

(101)

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

(102)

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.

(103)

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:

(104)

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

(105)

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

(106)

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.

(107)

k. Establish a global object

By default, each object that is inserted is local to your scene, which means that if you create a new scene, you must insert the same object again. An alternative to avoid doing this is creating it as a global object, which will appear in the Objects Editor of all the scenes and you will recognize it because its name will be in bold. To establish a global object, click with the right mouse button over the object in the Objects editor panel and click Set as global object, and then you should see this option in gray color.

Before After

l. Change of scene

For change of scene, go to the event window and click on Add an action. Then click on the triangle that precedes the Scene action and then the option Go to scene. Finally, you should write between quotation marks the name of the scene that you want to jump to

(108)

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.

(109)

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.

(110)

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.

(111)

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)

(112)

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:

(113)

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 .

(114)

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:

(115)

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

(116)

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.

(117)

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.

(118)

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

(119)

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

(120)

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).

References

Related documents

U usporedbi s analognim modulacijskim postupcima, digitalni modulacijski postupci dosta su praktičniji i velik je broj digitalnih modulacija za kaotične signale

In the Database window, click the button for the type of object (e.g. Tables, Forms) that you want to modify. In the list that is displayed, select the object you want to

From the Smart Objects dialog, select the chosen object from the left- hand pane and click the Insert button.. To insert the object at a default size, position the cursor where

Open the word document and select Insert on the ribbon In the Text group click the dropdown arrow for Object and Select Object The Object dialog box will appear select Create from

An interesting research question pertains to a problem of whether similar influence of WMC, as in abovementioned case of processing relations (e.g., during analogical mapping

Select the embedded object you want to edit On the Edit menu point to object name Object for example Document Object and then click Convert To convert.. Insert an Excel Worksheet into

If your check point object is a Check Point Host, select your object and click the right button on your mouse, then choose Convert To Gateway to change its settings.. On

Click on the Select Elements tool, move it over the selected object, then press the left mouse button and drag the object to the new location.. Once the object is moved to