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.
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.
Spritesheet (mosaic of the original image, http://kernelbook.sourceforge.net/tux.gif).
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.
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 ]
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.
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.
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.
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.
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 create the floors and platforms for the games.
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.
Then the file will appear in the list of the Images bank and must drag it to the Images section in the same window.
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.
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).
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.
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.
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
After this, you will see that the image is not pixelated, because is not scaled, but is copying itself again and again, giving the impression of being the same image.
For this image to be used as tiled sprite, it must be designed in such a way that it may give continuity to both sides.
At the end you get a uniform platform on which it will
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
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.
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:
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.
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.
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 .
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 .