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

Как создать игру типа Platformer?

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

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

А также вы можете прочесть Начальная страницу чтобы получить обзор программы. Эта страница дает основною концепцию и описывает интерфейс программы Gdevelop.

Инсталляция GDevelop

Если на вашем компьютере нет программы GDevelop, скачайте ее с официального сайта : http://compilgames.net.
Обязательно скачайте программу GD с этой страницы, чтобы получить последнюю версию.
Установите или распакуйте GDevelop и запустите программу. Начальная страница выглядит так:

При желании вы можете прочесть эту страницу, чтобы получить быстрый обзор интерфейса программы GDevelop. Заметьте, что внешний вид GDevelop может быть изменен: зайдите в File > Options, затем выберите Appearance и, наконец, кликните на желаемый вариант.

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

Нажмите на New вверху для создания нового проекта.
В появившемся окне вам будет предложено выбрать платформу для вашей игры, а также несколько шаблонов. Выберите Web platform, затем Empty project:

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

Подготовка картинок и ресурсов для обучения

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

После того как вы загрузили этот файл, необходимо извлечь его содержимое в папку с проектом.

Создание перемещаемого объекта - Спрайта

Игрок будет контролировать объект, который может прыгать и двигаться на платформах. Мы собираемся создать этот объект.
Выполните щелчок правой кнопкой мыши в центре серой сцены в GDevelop и выберите Add a new object (Вставить новый объект в русскоязыкной версии). Во всплывающем окне выбираем тип создаваемого объекта. В нашем случае выбираем Sprite и жмем Ok.

Открывается редактор объекта. На данный момент объект имеет только одну пустую анимацию. Первое, что нужно сделать, это добавить изображение для этой анимации: выполните щелчок правой кнопкой мыши на белой области в нижней части окна и выберите Add an image from a file:

Выберите изображение с именем p1_stand в папке проекта, и нажмите на кнопку Open. Изображение будет добавлено к объекту. Теперь вы можете закрыть редактор, и посмотреть отображаемый на сцене объект:

По умолчанию объект получил название NewObject Чтобы изменить это, выберите объект NewObject в окне Objects editor в правой части экрана и нажмитеF2. Дайте ему в качестве нового имени имя Player и нажмите Enter.

Добавление платформ

Давайте теперь создадим объект, который будет использоваться для платформ:

Опять жмем правой кнопкой мыши на сцене и выбираем Add an object. На этот раз выберите тип объекта Tiled sprite:

На данный момент строка неактивна. Щелкните по ней и нажмите на появившуюся кнопку Ok, GDevelop спросит у вас разрешение активировать для вашего проекта расширение, содержащее этот объект. Нажмите на Yes.

Откроется редактор объекта. С левой стороны вы видите менеджер ресурсов, показывающий все изображения используемые в проекте. Во- первых, необходимо добавить изображение в список с помощью кнопки + на панели инструментов.

Выберите изображение grassHalfMid.png. Оно будет добавлено в список. Теперь выберите его в списке текстур, затем нажмите на кнопку рядом с текстовым полем в нижней части редактора, чтобы автоматически вставить имя изображения

Теперь вы можете нажать Ok для закрытия редактора.
Объект добавится на сцену, но он очень маленький. Растяните изображение, чтобы поверхность выглядела как платформа.

Не забудьте расположить платформу под игроком, так чтобы игрок не вылетал за пределы экрана после запуска игры.

Теперь в object's editor переименуйте объект так, чтобы он назывался Grass.

Добавление поведения объекту

Движение игрока может быть создано с помощью событий GDevelop, но это довольно долгий и трудный процесс при создании хорошего платформера. Поэтому мы будем использовать модели поведения, которые позволяют добавлять предварительно заданные алгоритмы поведения к объектам.

Сделайте двойной щелчок на объекте игрока на сцене. Это вызовет окно свойств объекта, в нижней части которого находится поведение, придаваемое объекту - Automatizme. Нажмите на Add a behavior:

Отображается список доступных форм поведения. Для этого объекта выберите Platformer object и нажмите кнопку Ok.

Вот и все. Теперь вы можете увидеть в окне свойств, что теперь отображается выбранное поведение, а также появившиеся свойства. Вы можете изменять некоторые свойства, такие как скорость прыжков, установить его, например до 800, так что прыжок будет более мощным.

Мы также должны отметить объекты, являющиеся платформами, в противном случае игрок будет падать, даже при столкновении с объектами, которые выглядят как платформы.
Нажать на платформе на сцене и в окне свойств выберите снова Add a behavior:

На этот раз выбираем поведение Platform и жмем Ok.

Запомните, что поведение применяется ко всем экземплярам объекта, добавленного на сцену: если вы вставите на сцену ещё одну платформу ( Просто перетащите объект из списка объектов на сцену; также вы можете зажать клавишу Ctrl и перетащить платформу, чтобы клонировать её! ), она тоже будет обладать данным поведением - его не нужно добавлять снова.

Предварительный просмотр

Теперь можно проверить как работают выбранные поведения.

На ленте Scene выберите Preview:

Ваш любимый браузер будет открыт, и игра будет запущена
Вы можете перемещать персонажа с помощью клавиш со стрелками и использовать кнопку Shift для прыжка! На данный момент объект не имеет анимации, мы добавим ее позже.

Если объект не движется, убедитесь, что вы добавили правильное поведения. Убедитесь, что вы добавили поведениеPlatform объекту Grass, o в противном случае игрок будет вылетать за пределы экрана.

Добавление других платформ

Мы можем использовать больше чем один тип объектов в качестве платформ. Для того чтобы добавить новый объект, щелкните правой кнопкой мыши на сцене и выберите Add an object.

Выбрать объект Спрайт (Sprite), нажмите Ok, в редакторе добавленное изображение называется Grass.png:

Закройте редактор и переименуйте объект в Platform:

Теперь, добавьте ему поведение Platform так, как мы это сделали раньше ( Двойной клик на объекте на сцене, или выберите его из списка объектов. Теперь, выберите Add a behavior и поведение Platform. ) Теперь этот объект считается платформой: вы можете добавить больше копий данного объекта на сцену, запустить предварительный просмотр и попробовать попрыгать с платформы на платформу.

Прежде чем двигаться дальше, вы можете захотеть изменить цвет заднего фона сцены: в менеджере проектов сделайте правый клик на редактируемой сцене ( “New scene” ) и выберите Properties.

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

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

Прежде чем мы двинемся дальше, давайте сохранимся: в верхнем меню выберите раздел File и затем нажмите Save. Не забывайте это делать как можно чаще!

Changing the animations of the player

For now, the player is always displaying the same image: Using the events, we're going to change its animation according to what he is doing.

Before doing this, we must add the appropriate animations to the Player object: Make a double click on it in the objects list to show the editor.
In the top left part of the window, click on the + in the toolbar to add an animation:

An animation called Animation 1 is added to the list: Click on it to select it. It is empty: In the blank bottom part, make a right click and add the image called p1_jumping.png:

This animation will be used when the object will be in the air.
We also need an animation for when the object will be running on a platform: Add another animation like we did, and, when adding images, select the 5 images p1walk03.png, p1walk04.png, … and p1_walk07.png.

These images will be displayed so as to create the animation. We need to tweak a bit some options: Make a right click on Animation 2 in the list and check Loop the animation. Click then on Time between frames and enter 0.05 in the window so that the animation is faster than when using default options.
You should have this in the editor:

You can preview the animation by clicking on the small “play” button in the toolbar loacted in the top middle part of the editor.
Close the editor when all animations are ok.

Now, we need to change the animation displayed by the object according to what the player do. Go to the events editor by clicking on Events next to the Scene tab:

Then in the ribbon, click on Add an event to create a new event:

The event is created, with an empty list of condition ( on the left part ) and an empty list of actions ( on the right ). Put your cursor over the condition list and choose Add a condition in the context panel that appeared:

In the event, we're going to check if the player is jumping so as to change its animation.

In the conditions list, choose PlatformAutomatism > Is jumping. Then, in the parameter, enter Player as object ( We want to check if the Player object is jumping ) and PlatformerObject as behavior:

Click on Ok to validate the condition.
Now, add an action to the same event:

In the actions list, choose Sprite > Animations and images > Change the animation. Enter Player as object, then = in the second parameter and 1 in the last one.
Click on Ok to validate the action: Now, animation 1 will be launched when the player is jumping.

Create a similar event but with Player is falling as condition ( You can also make a copy-paste of the event and then double click on the condition to change it ):

Then, we have to set the animation 0 when the player reach the floor, and also launch animation 2 when the player start moving.
This could be done using two events: The first one checks if the player is on the ground and if he is moving. In this case, animation 2 is set. The second one checks if the player is on the ground and if he is not moving. In this case, animation 0 is set. Here, we're going to use a nice feature called Sub events: As we're running twice the same condition ( To check if the player is on the ground ), we can insert this condition in an event, and then add sub events to this event: Sub events are only launched when the conditions of their “parent” are fulfilled.

Add an event with Player is on the floor as condition. Then, put the cursor over the event and choose Add a sub event: A blank sub event is added.

In this blank event, add the condition Player is moving. Then, add an action Do =2 to the current animation of player.

Then, create a second sub event. This time, invert the condition so that the condition is true when the player is not moving:

Also change the animation parameter so that animation 0 is set:

Now you can launch a preview and see animation being changed:

If something does not work, make sure your events looks exactly like the events shown above.
You can see that when the player go to the left, the sprite is not mirrored. Fortunately, there is an action that can be used to mirror sprites.

Go back to the events editor and add a new event: Add a condition checking if the Left key is pressed.

Note that instead of writing Left, you can click on the small button next to the parameter, and then simply press the left arrow of the keyboard. GDevelop will automatically fill the parameter.

In the event, add an action to flip the sprite:

Add then another similar event, checking if Right is pressed and reverting the Player object to its initial orientation:

Center the camera on the player

There is more than one way to move the camera so it follows the player. For now, we're going to do it very simply using the action Center the camera on an object. Just add this action in an blank event without any condition:

Note that you can read this thread of the official forum if you want information about how to limit the camera movement to the window size.

Add a 'Jump through' platform

For now, all of the platforms are rock solid, but we can also create platform you can also jump through them:
Create a new Sprite object and add to it image bridge.png :

You can name this object “Jumpthru” for example:

Then, add to it the “Platform” behavior as we did before for the other platform. When it's done, change the Type property displayed in the properties grid, and set it to “Jump thru platform”:

That's all! Now you can launch a preview: The player will be able to jump through these kind of platforms.

Add coins and a score

Let's add some coins to collect in the level: Create a new object called Coin with coinGold.png as image. You can then put several coins in the level: You can either drag the object from the objects list to the scene, or press Ctrl and drag'n'drop an existing object to clone it!

Now, let's destroy the coin object when the player touch them: Add a new event and add an event testing for the collision between coins and the Player object:

Then, add an action to delete the Coin object ( You can find it in All object > Objects > Delete an object ). Note that this action will only be triggered for the Coin that have been “picked” by the conditions, that is to say, only the Coin that are in collisions with the player here! This powerful mechanism allows you to launch actions only on objects that matches the criteria specified by the conditions.

We can also play a small sound when a coin is collected. Add another action to play the coin.wav sound:

Update and display a score

We're going to use a variable to update and remember the score of the player. Variable are useful to remember all kind of information. There are scene variables ( The most used ones ), global variables ( variables that are shared between all scenes of the game ) and objects variables ( which are specific to each instance of an object. There are also very useful and we'll use one for creating an enemy later ).
Add an action in the latest event we've made:

Choose action Variables > Value of a variable. This action will be used to add 100 to the Score variable, so fill the parameter as shown here:

Note that you do not need to declare variables before using them: If you use a variable name that does not exist, GDevelop will create this variable for you. You can also declare and even set an initial value to any variable: To do this, click on the button next to the first parameter to open the list of all declared scene variables.

The event should now looks like this:

To display the variable, we need a text object displaying the score. On the scene, add a new object. This time, choose Text when asked for the type of the object:

Edit the object and change its color so that the text is black and the font is large enough:

When it's done, name this object ScoreText:

Then in the events, add a new blank event. Add to it action Modify the text, inside “Text object” category. Enter the name of the object ( ScoreText ) in the first parameter, then = in the second parameter, and enter the text to be displayed in the last parameter: We want to display “Score:” followed by the value of the Score variable.
To do this, we can write the expression Variable(Score) to get the value of the variable. However, this is a number and we must convert it to a text using ToString function. Finally, the expression and the text must be concatened using a +, like this:

“Score:”+ToString(Variable(Score))

There are a lot of functions available: Just click on the button next to the parameters to show an editor displaying everything that you could use.
Here is how your event should look like:

If you preview the game, you'll notice that the score is updated when you get a coin, and displayed in the text object. However, we want to make sure that the score is always visible.
To do this, go back to the scene editor. We're going to add a layer and put the text on this layer. You can consider layers as being transparent glasses where objects are displayed: By putting the object on a different layer, we'll ensure that it will be always displayed, as long as the camera of this layer is not moved.

Click on Layers' editor in the ribbon to display this editor:

In the layer editor, add a new layer:

Then, select the new layer and move it over the Base Layer:

You can double click on the New Layer so as to rename it ( Name it GUI for example ).
Finally, make a right click on the text object on the scene, and move it to the GUI layer:

Now, the text will be always displayed. Just make sure that it is correctly positioned on the window. You can use the ribbon to center the camera on the scene origin ( Click on Return to the initial position button and then click on Mask to display a mask showing the size of the window:

Add an enemy

Let's end this tutorial by adding an enemy that will be moving on platforms.
In the layers editor, make sure that the base layer is selected ( otherwise, the new objects could be added on the GUI layer, and won't be displayed at their right position ).
Then, add three these objects:

The first one called Bad is the object representing the enemy: It is composed of a animation looping between images slimeWalk1.png and slimeWalk2.png.
The two other objects will be used as markers to make sure that the enemy won't move out of platforms. Put the enemy on a platform. Make sure that it is colliding with one of the marker:

Creating the movement of the enemy

To move the enemy, we'll use the builtin actions allowing to move an object, and each enemy will remember the direction ( Left or Right ) of its movement using an object variable.

Add this event:

Unlike before, we're not changing here a scene variable but an object variable ( The action can be found in All Objects > Variables ). Whenever a Bad object will be colliding with a GoLeft object, its GoLeft variable will be set to 1. We'll add the event to move the enemy in a few moment.
For now, add another similar event to set the variable of the object to 0 if he is colliding with GoRight:

Now that the object is able to remember where he should go, we just have to compare the value of this variable and move the object:
Add an event checking if the variable of object Bad is equal to 0. Then, add an action adding to Bad a force with coordinates being 50 pixels on X axis and 0 on Y axis: Forces are a built-in mechanism allowing to easily move objects on the scene ( The action is available in All Objects > Displacement > Add a force to an object ). Here, the force will move the object to the right at the speed of 50 pixels per seconds:

Add a similar event to move the object to the left when variable GoLeft of Bad is equal to 1:

If you launch the preview, you should see that the enemy is now moving between the markers. If it does not work, check that the object is colliding with one of the marker at the beginning of the scene ( otherwise, it won't move at all! ). Also check that the events are correct.

The markers are visible when we're playing. To hide them, just add this event:

The condition is available inside Scene category, and is true only when the scene begins. The two actions, available in Objects > Visibility are useful to hide an object while making sure it is still on the scene.

Destroying the enemy when jumping on it

To finish this tutorial, the player should be able to destroy the enemy by jumping on it.
This can be done by adding an event with two conditions: The first condition checks if the player is colliding with an enemy. The second condition checks if the player is falling.
If these conditions are true, the enemy object colliding with the player is destroyed and we can even make the player jumping again to give the impression he is bouncing on the enemy:

We have already used the conditions and the first action. In last two actions are available inside the Platform behavior category.

Adding background objects

Adding some objects in the background is really easy: Just add some sprites with the images you wish and put them on the scene.

To make sure that the objects are displayed behind the player, select them in the scene editor and put a negative value as a Z Order: Any object with a greater Z Order value will be displayed in front of them.

Also make sure that these objects are on the Base layer ( The layer property should be empty ).

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 available as a template when you create a new game. You can try it online: http://www.compilgames.net/games/WebPlatformer

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