FIXME This page is not fully translated, yet. Please help completing the translation.
(remove this paragraph once the translation is finished)

Пошаговое руководство GDevelop для начинающих

Этот урок поможет Вам начать использовать GDevelop:
Мы создадим простую игру, в которой будем взрывать врагов, движущихся к нам, расстреливая их.

Вы также можете прочить руководство по созданию платформера!

Note that you can read the Getting Started page so as to get an overview of the software: It explains the main concepts and describe the interface of GDevelop.

Загрузка GDevelop

Скачать GDevelop можно с официального веб-сайта : http://compilgames.net.
Всегда скачивайте GDevelop только с официального сайта, чтобы иметь самую новую версию.
Установите или распакуйте GDevelop и запустите его. После запуска Вы увидите начальную страницу:

Страница обзор интерфейса предназначена для краткого ознакомления с интерфейсом GDevelop.

Создание новой игры

Нажмите Новый (New) на вкладке Проекты (Projects) для создания нового проекта:

Появится окно создания нового проекта, в котором предлагается выбрать платформу и шаблон. Выберите платформу HTML5 (Web and Android games), а затем Пустой проект (Empty project):

Выберите каталог и имя для Вашей игры, и нажмите ОК.
Первая сцена создается автоматически после создания проекта:

Картинки и ресурсы необходимые для урока

Прежде чем продолжить, нам понадобятся картинки для нашей игры.
Скачать их можно здесь : http://www.compilgames.net/dl/BeginnerTutorial2Images.zip.

После того, как вы загрузили архив, распакуйте его в каталог с проектом.

Создание игрока (турель)

Игрок будет управлять турелью, чтобы стрелять по врагам.
Нажмите правой кнопкой мыши в любом месте сцены и выберите Вставить новый объект (Insert a new object). Появится окно выбора типа объекта:

Выберите Спрайт (Sprite) и нажмите кнопку Ok. Автоматически откроется редактор объекта:

Первое, что необходимо сделать, это добавить изображение турели. Для этого, кликните правой кнопкой мыши в нижней части окна, и выберите из контекстного меню Добавить изображение из файла (Add an image from a file):

Выберите изображение турели в каталоге проекта, и нажмите Открыть (Open): Изображение добавится к объекту.

После этого, Вы можете закрыть окно редактора объекта и вернуться в редактор сцены. Объект появится в месте, в котором Вы вызвали контекстное меню:

Вы можете переместить объект, зажав левую кнопку мыши над объектом.

По умолчанию, объект называется “Новый объект”. Чтобы переименовать его, выберите объект в правой части экрана и нажмите “F2”. Введите новое имя, например “Turret” и нажмите “Enter”.

События

Мы создадим события, которые используются для анимации во время игры.
Во-первых, пушка турели должна быть обращена в сторону курсора мыши.

Перейдите во вкладку “События”:

На ленте выберите Добавить событие (Add an event) для создания нового события:

Событие создается с пустым списком условий (слева) и пустым списком действий (справа). Поместите курсор мыши в список действий, и появившемся контекстном меню выберите Добавить действие (Add an action):

Первое действие будет поворачивать турель в сторону мыши. В появившемся окне, выберите Все объекты > Угол > Поворот по позиции (All objects > Angle > Rotate toward position).
При выборе действия, в правой части окна показывается название, а также параметры действия. В первый параметр введите Turret (Также Вы можете выбрать объект из списка, нажав на кнопку рядом с параметром). В следующие параметры введите MouseX() и MouseY() чтобы объект поворачивался к позиции курсора мыши. После запуска игры, эти функции будут заменены на координаты курсора мыши.

MouseX() и MouseY() одни из некоторых функций, доступных из параметров.
Click on the button next to a parameter waiting for an expression to open the Expression editor which will be display lists with all the available functions.

Нажмите Ok. Действие добавится к событию.
As there is not any condition, the action will be repeated each time the screen is refreshed ( About 60 times per seconds ). The turret will thus be always oriented toward the mouse.

You can launch a preview of the game: Just go back to the scene editor ( Click on the Scene tab next to the Events tab ) and then, in the ribbon, click on Preview.

GDevelop will launch your default browser and open your game:

Стрельба из турели

The player must be able to shoot some bullets on the enemies.
First, we need a Bullet object: In the objects list on the right, make a right click on an object and choose Add an object. Choose a Sprite object as before and name the object Bullet ( Right click on the object > Rename ).

Then, make a double click on the object to edit it. Add an image to the object: Right click on the white area on the bottom, choose Add an image from a file and choose the bullet image in the project folder.

Close the window. You will notice that the object does not appear on the scene as we added it thanks to the list.

Go to the events tab, and add a new event ( When you're in the events tab, choose Add an event in the ribbon ) and then a new action.
The first action will be a Create a new object action, which is available in the All objects > Objects category.

The first parameter must be Bullet, as we want to create a bullet object.
The other parameters are the position of the turret: Enter Turret.X() and Turret.Y() in the 2nd and 3rd parameters.

Click on Ok to finalize the action.
Then add another action after this first action ( Do not create another event! ). This time, choose the action called All objects > Displacement > Add a force ( Angle ).
GDevelop provide a built-in forces system allowing to easily move the objects. This action will be used to move the bullet toward the mouse when fired. As the first parameter, enter Bullet so that GDevelop will move the bullet just created in the last action. Enter then Turret.Direction() in the 2nd parameter to use the turret direction. For the 3rd parameter, enter 400 so that the bullet will move with a speed of 400 pixels per seconds. Finally, enter 1 in the last parameter so that the bullet will keep moving after the moment it was created.

Our two actions must be launched only when the player is firing ( i.e: Pressing the left button of the mouse ).
To do that, add a condition to the event ( Put the cursor over the empty condition list of the events we're creating, and choose Add a condition ):

Choose the condition Mouse > A button is pressed. Write Left in the parameter ( or click on the button on the right of the parameter to display an helper ) and close the window by clicking on Ok.
The condition is now added to the event.

If you preview the game now, you'll see that we have two problems: The bullet are fired too fast, and the appear at the object's origin, which is not very realistic.

To address the first issue, we're going to use a timer: Add a condition to the last event we've created. Choose the condition Timers > Timer's value and enter 0.25 in the first parameter, and “FireRate” in the second parameter, which is the name of the timer we're going to use ( Do not forget the quotes around the timer's name! ).

Then, add an action Timer > Reset a timer in the same event, with “FireRate” as parameter ( again, beware of the quotes! ). This pair of condition and action will ensure that the actions used to fire the bullet are repeated when at least 0.25 seconds is elapsed since the last bullet creation :

We must now ensure that the bullets are fired from the canon of the turret. Make a double click on the Turret object in the objects list to edit the object. Then, in the toolbar in the top part of the window, click on the second tool to open a window containing the list of the points available for the object: By default, there is only the origin and the center of the object.

Add a point by clicking on the + in the toolbar of the Points window. Name the new point Canon. When it is created and renamed, make sure it is selected in the list ( Simply make a click on it ) and then click on the image to change its position:

You can now close the window. We must now tell to GDevelop to create the bullets at the position of the point:
In the events editor, put the cursor on the Turret.X() parameter and make a click: A text field will be shown. Use it to replace the parameter by Turret.PointX(Canon) and click anywhere to close the text field. Modify also the Turret.Y() parameter to replace it by Turret.PointY(Canon) :

You can now preview the game ( Go to the scene editor by clicking on the Scene tab, and click on Preview in the ribbon ).

Создание врагов атакующих турель

First, we must create the objects used for the enemies: Add an object to the object list ( Right click on an existing object > Add an object. Choose a Sprite object as before. ). Name it Enemy.

Edit the object ( Double click on it in the list ) and add to it two images: tank2fr1.png and tank2fr2.png. Then, make a right click on Animation 0 in the list of animations on the left part of the window, and change the time between the images: Set it to 0.05 for example. Check also Loop the animation to ensure that the animation is repeated:

Close the editor when you're done.

Самое время сохраниться!

Прежде чем продолжить, запомните, сохраняйте свои проекты как можно чаще. На ленте кликните по кнопке Файл (File), а затем Сохранить (Save):

Ok, go back to the game

Let's go back to the game. We want to create enemies going toward the turret: Go to the event editor and add a new event.
The creation of an enemy must happen each 1 seconds for example: Add a condition Timer > Value of a timer. Enter 1 in the first parameter and “EnemyCreation” for the name of the timer. Add then in the same event an action to reset the timer ( Action Timer > Reset a timer with “EnemyCreation” as parameter ):

We can then add another action to create an Enemy object: Add an action All objects > Objects > Create an object. Enter Enemy in the first parameter. For the second parameter, the X position of the new object to be created, enter Random(800): This will return a random number between 0 and 800, so that the created enemy will have a different position when they are created. For the Y position, enter -50. This will create the enemy outside the screen, so that the player won't have the feeling that an enemy tank just appeared from nowhere.

For now, the enemies are created but are not moving. Add another event without any condition. Add then an action: We want the enemy to move toward the player. Choose the action All objects > Displacement > Move an object toward another. For the first parameter, enter Enemy, and Turret for the second parameter. Enter a length of 150 for the force, and a damping of 0, as the force will be continuously applied.

Thanks to the last event, enemy will be moving. One last thing is to make sure that enemies are oriented toward the turret: Add a second action called All objects > Angle > Rotate toward position. Enter Enemy as first parameter. Then, we want the Enemy to turn toward the position of the Turret, so set Turret.X() and Turret.Y() respectively in the next two parameters. These two expressions returns the X and Y position of the Turret. We can improve this action by setting Turret.X(Centre) and Turret.Y(Centre) instead so as to turn the Enemy towards the centre position of the Turret.

Here is what you should have:

If you launch a preview, you will see that enemies are created and are moving. If it doesn't work, double check your events: Check that the timer's name is correct and is the same in the condition and in the action. Also check that the last parameter of the action used to move the enemies is 0.

Добавление взрывов

It's time to add explosions ^_^ Let's first create the explosion object: Add a new Sprite object called Explosion:

Edit it, and add to it all the images called Explosion_something. When you add the image, just select them all:

When the images are added, change the time between the images ( Right click on Animation 0 to display the options of the animation ).

Set a time of 0.01 for the explosion. You can preview the explosion by clicking on the Preview button in the toolbar at the top of the editor.

The explosion object is now ready. Close the editor and go back to the events editor.
We want enemies to explode when a bullet is hitting them. Add a new event.

Add then a condition: Choose the condition All objects > Collision > Collision. Enter Bullet and Enemy in the parameters.

When the condition is done, add an action to create an object Explosion. For the position, enter Enemy.X() and Enemy.Y() to create the explosion at the tank position.
Add another action called All objects > Objects > Delete an object. As parameter, enter Enemy so that the tank will be destroyed.

You can now preview the game:

You may have noticed that explosions objects are not destroyed when their animation is over! This can be a problem as they stay on the scene, making the game less efficient. We must always clean our garbage: Add a new event. Add a condition Sprite > Animation > Animation is over. Enter Explosion as parameter: The condition will be true when an explosion's animation will be over. Add an action to the event to then destroy the Explosion object:

Adding more explosions and a Game Over

Until now, the player could not die. We want the player's turret to be destroyed when an enemy tank is hitting it.
First, add a new event, and do as we did for the event used to destroy the enemies: Add a condition testing for a collision between a tank and the turret. Then create an explosion at the turret position. Finally, add an action to destroy the turret:

It would be interesting to display a “Game Over” text when the turret is destroyed: Add an object to the object list. This time, choose a Text object. Name it GameOver.

Edit it ( Double click on it in the objects list ) and modify the text. Also click on Choose the font and select the font that was in the resource archive that you extracted in the project folder. Finally, you can increase a bit the size of the text:

When you're done, click on Ok to close the editor of the object. Go to the scene editor and put the text on the scene: Just drag it from the objects list to the scene ( Put the cursor hover the object in the list, make a left click and keep pressing the left button of the mouse, then move the cursor to the scene and release the button to put the object ).

For now, the object is always displayed. Go to the events editor and add a new event. Add a condition Scene > At the beginning of the scene and an action All objects > Visibility > Hide an object, with GameOver as parameter. Thus, the text will be hidden when the game will be launched.

To display the text when the turret is destroyed, add another event. Add a condition All objects > Objects > Number of objects. Enter Turret as the first parameter, then = in the second parameter and 0 for the third: The condition will be fulfilled when the number of turret of the scene will reach 0, that is to say when the player will be destroyed.

Add then an action to show the GameOver object ( All objects > Visibility > Show an object ).
Here are all the events created so far:

It would be also interesting to add a small delay before showing the GameOver text: Add an action to reset the timer called “GameOver” in the event where the turret is destroyed.
Then add a condition to the last event to compare if the “GameOver” timer has reached 0.5 seconds for example:

Finally, an interesting effect is to stop the game when the Game Over is displayed. Add one more action to the last event: Choose the Timers and time > Time scale action and enter 0 as parameter to pause the game.

Here are all the events:

You can preview the game and see that the text is displayed and the game is stopped when the turret is destroyed:

Deleting the bullets going out of the screen

Remember that we always must destroy our garbage so as to prevent the game to be flooded with tons of objects doing nothing except slowing down the whole thing. That's why we take care of deleting the explosions when the animations is over. But what about the bullets? When they go outside of the screen, they still exists and the computer must update them each time the screen is refreshed: This can become a performance bottleneck.

We could add an event to destroy the bullets when they are too far from the turret, that is quite easy. But we can also use a behavior: An behavior is used to add a specific behavior to an object. Here, we are going to use a behavior that will automatically destroy the object when it goes outside the screen.

Make a right click on the object in the object list and choose Other properties:

A grid with properties is shown. At the bottom of the grid, you can see the behaviors of the objects: There is nothing for now. Click on Add:

A list of the available behaviors is displayed: Choose the Destroy when outside screen behavior:

That's all: You can now see that the behavior is added to the object:

And when a bullet object will be outside the screen, it will be destroyed.

Adding a background

One last thing to make the game good looking is to add a background.

Add a Sprite object called background. Edit it and add to it the background image. Then, drag it from the objects list to the scene:

The background is displayed above the other objects :-( To change this, double click on it to display it properties. You can also make a right click on it and choose Properties:

Simply change its Z order: Enter a negative number to ensure that the other objects ( which have a positive Z order ) will be displayed after the background. ( Objects with a greater Z order are displayed below the other objects. By default, the Z order of an object is simply 0 ).
Also change the position of the object to set its X and Y coordinates to 0:

You can now test your game with a nice background:

Enhance the game

That's all for this tutorial! You can download the game here if necessary, if you want to compare with your version or if something does not work.
A enhanced version of the game is also in this archive. You can try it online: http://www.compilgames.net/games/EnhancedTutorial

Let's discover GDevelop by yourself

You can browse the others tutorials or read the Getting started page.
There is also lots of examples bundled with GDevelop and templates available when you create a new game.

If you have any problem, you can send a message on the official forum.
If you have any remarks about the tutorial, do not hesitate to also send a message on the forum, or even fix the tutorial by yourself: You just have to create an account on the wiki 8-)