Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
gdevelop5:interface [2017/11/19 00:49]
ddabrahim
gdevelop5:interface [2019/08/16 07:32] (current)
4ian
Line 1: Line 1:
 # GDevelop interface # GDevelop interface
 +
 +The working interface of GDevelop is based around editors that are displayed in tabs. These editors allow you to change different parts of your game. 
  
 {{ :​gdevelop5:​screen_shot_2017-09-18_at_01.30.20.png?​nolink |}} {{ :​gdevelop5:​screen_shot_2017-09-18_at_01.30.20.png?​nolink |}}
  
-This page is still under construction! It will describe the different editors of GDevelop.+## Start Page
  
-> You can contribute by editing this page and writing a first version.+The initial Start Screen is displayed when you first launch GDevelop. It is here that you create your projects, load previously saved projects, or load tutorials.
  
 +{{ :​gdevelop5:​gdevelop5startpage.png |}}
  
-## Start page+At the startup, GDevelop will check for new updates. If a new update is available, the update will automatically be downloaded.
  
-The start page is displayed when GDevelop is opened. ​You can create a new project or load an existing one from there.+You can see [[gdevelop5:​interface:​updates|the progress by clicking on About GDevelop]].
  
-====== ​Project manager ​======+## Project manager
  
 When a project is opened, you can click on the top-left button to access to the project manager. When a project is opened, you can click on the top-left button to access to the project manager.
 {{ :​gdevelop5:​project-manager-button.png?​nolink |}} {{ :​gdevelop5:​project-manager-button.png?​nolink |}}
-The project manager shows the structure of your game.+ 
 +The project manager shows the structure of your game:
 {{ :​gdevelop5:​project-manager-tab.png?​nolink |}} {{ :​gdevelop5:​project-manager-tab.png?​nolink |}}
-You can fold and unfold each category by clicking on the small arrow. 
  
-  *** Resources:​** this is where GDevelop stores all the images and sounds used in your game.+Using the project manager, you can add new elements to your game and open editors. 
 +Learn more about [[gdevelop5:​interface:​project-manager|the content of the project manager here]].
  
-   * **Scenes:** scenes are basically the different levels of your game but not only that, in GDevelop everything is a scene, the main menu, splash screen, credits screen all of them are scenes. +## Scene editor
- +
-  *** External events:** to make the development of our game more flexible, we can make often used events external and link to them whenever we need them. Think of them as methods in programming but if you are not familiar with the term, just remember that if you need to use a collection of events often and different places, you can make them external and call them when you need them.  +
- +
-  *** External layouts:** similar to events, you can design often and repeatedly used external layouts to be loaded even multiple places in your scene. +
- +
-In the **desktop** version, the File menu allows you to save your game, open another one or close it. You can also [[gdevelop5:​publishing|export your game]].  +
-{{ :​gdevelop5:​file-menu.png?​nolink |}}  +
-In the **web app**, these options are at the top of the project manager. +
-{{ :​gdevelop5:​web-project-manager-tab.png?​nolink |}} +
- +
-====== ​Scene editor ​======+
  
 When opening a scene (or an external layout), a scene editor opens. When opening a scene (or an external layout), a scene editor opens.
 This is where you can design and build your game levels and menus by creating and adding objects to the scene. This is where you can design and build your game levels and menus by creating and adding objects to the scene.
    
-We have a selection of tools and editors available in the scene editor +[[gdevelop5:interface:​scene-editor|Learn more about using scene editors]].
-{{ :gdevelop5:​scene-editor-toolset.png?​nolink ​|}} +
-## Objects editor +
-You can find the objects editor on the right side. This is where you can see all the objects used in your scene and add new ones. +
-{{ :​gdevelop5:​objects-manager-tab.png?​nolink |}} +
-In case you closed this bar, you can re open it by using the button on the top +
-{{ :​gdevelop5:​objects-manager-button.png?​nolink&​200 |}}+
  
-## Object properties +## Events editor
-You can find the object properties on the left side, below the Project manager. Close the Project manager if you can't see it. +
-{{ :​gdevelop5:​object-properties-bar.png?​nolink |}}  +
-Here you can change the properties of the selected objects such as position, scale, Z-order. +
- +
-If you have closed this bar, you can open it by clicking the button on the top +
-{{ :​gdevelop5:​object-properties-button.png?​nolink&​200 |}} +
- +
-In this case the bar may open on the right side, you can move and scale any element on the screen by dragging and moving. +
- +
-## Objects Groups editor +
-In the Objects Groups editor we can find the list of groups we have in our scene and we can create new ones.  +
-{{ :​gdevelop5:​objects-groups-editor.png?​nolink |}} +
-To open the editor we need to click the button on the top +
-{{ :​gdevelop5:​objects-groups-editor-button.png?​nolink&​200 |}} +
- +
-Object groups allow us to collect objects in to groups and inside our events refer to a group instead of individual objects.  +
- +
-## Instances editor +
-The instances editor display a list of all instances we have present in our scene and we can select any instance from the list and see their position, angle, layer and Z order in our scene. +
-{{ :​gdevelop5:​instances-editor.png?​nolink |}} +
- +
-We can open the Instances editor by clicking the button on the top +
-{{ :​gdevelop5:​instances-editor-button.png?​nolink&​200 |}} +
- +
-## Layers editor +
-The layer editor display the list of layers in our scenes and allow us to add new ones, change their order, hide them and delete them. +
-{{ :​gdevelop5:​layers-editor.png?​nolink |}} +
- +
-We can open the layers editor by clicking the button on the top +
-{{ :​gdevelop5:​layers-editor-button.png?​nolink&​200 |}} +
- +
-## Toggle window mask +
-By clicking the toggle window mask button on the top, we can turn the black border in our scene on and off which is indicating the size of our game window. +
-{{ :​gdevelop5:​toggle-window-mask-button.png?​nolink&​200 |}} +
- +
-## Toggle/Edit grid +
-By clicking the toggle/edit grid button on the top we get two options: +
-{{ :​gdevelop5:​toggle-grid-button.png?​nolink&​200 |}} +
-  * **Toggle grid:** it is allow us to turn the grid in the scene editor on and off, the grid is useful when we need to place objects accurately or we are dealing with tile sprites. +
-  * **Setup grid:** it is allow us to customize the size of the grid +
- +
-## Change editor zoom +
-By clicking on the Change editor zoom button, we can change the zoom level inside the scene editor +
-{{ :​gdevelop5:​toggle-zoom-button.png?​nolink |}} +
- +
-## Launch preview of the scene +
-By clicking on the Preview button, we can launch a preview our game and test it before exporting it +
-{{ :​gdevelop5:​preview-button.png?​nolink&​200 |}} +
- +
-====== ​Events editor ​======+
  
 When opening a scene (or when opening external events), an events editor is also opened. This is where you can use the events to create the actual gameplay and allow players to interact with your game and play it.  When opening a scene (or when opening external events), an events editor is also opened. This is where you can use the events to create the actual gameplay and allow players to interact with your game and play it. 
-The events editor is a tool that allow you to visually program your game without any programming knowledge or experience ​required so anyone with any background can make a game in GDevelop. +The events editor is a tool that allow you to visually program your game without any specific ​programming knowledge or experience. ​
- +
-To switch between the Scene editor and the Events editor you can use tabs on the top +
-{{ :​gdevelop5:​scene-events-tab.png?​nolink |}} +
- +
-When you switch to the event editor, you may notice we have a different selection of tools available +
-{{ :​gdevelop5:​events-editor-toolset.png?​nolink |}} +
- +
-## Add event +
-We can add an event by clicking the add event button +
-{{ :​gdevelop5:​add-event-button.png?​nolink&​200 |}} +
- +
-By clicking this button a blank event appear in our editor +
-{{ :​gdevelop5:​blank-event.png?​nolink |}} +
- +
-We can add any number of event blocks to our editor and add various condition and actions to each event block to make our logic. You can learn more about events, on this page: [[gdevelop5:​events|]] +
- +
-## Add sub event +
-By clicking the add sub-event button, we can add a child event block to the selected event.  +
-{{ :​gdevelop5:​sub-event-button.png?​nolink&​200 |}} +
- +
-After clicking the button, a blank sub event appear below our selected event +
-{{ :​gdevelop5:​blank-sub-event.png?​nolink |}} +
- +
-Sub events are executed only if the parent event is executed, this way we can brake up our events and trigger events only when/if it is necessary and do not trigger them if it not.+
  
-## Add a comment +Learn more about [[gdevelop5:interface:​events-editor|its usage on this page]] or check [[gdevelop5:events|the help about events]]
-By clicking the add comment button, we can add comments to our events so we can remember which events fit what purpose.  +
-{{ :gdevelop5:add-comment-button.png?​nolink&​200 ​|}} +
-Of course, most events are self explaining but in huge, complex games it is always useful to add comments to remind us what is that part is doing exactly. +
-{{ :gdevelop5:comment-in-editor.png?nolink |}}+
  
-## Add special events +## Top menus
-By clicking the add an event button, along with the ones we already mentioned, we have access to some special events +
-{{ :​gdevelop5:​add-special-events.png?​nolink |}}+
  
-  * **For each object:** this event is going to be triggered on every single instance ​of an object one by one and make sure the actions applied to every and each instance individually. +The menu at the top of the screen (only on the desktop version) ​allow to opensave and [[gdevelop5:publishing|publish a game]].
-  * **Group:** Groups ​allow us to sort events in to groupsit helps with make our events more organized +
-  * **Javascript code:** it is allow us to use Javascript code inside the event editor +
-  * **Link:** we can link an external event by using this option +
-  * **Repeat:** this event is going to be repeated at specified number of times. +
-  * **While:** this event is going to be executed while a certain condition is met+
  
-## Delete selected events +You can also open GDevelop preferences or see [[gdevelop5:interface:​profile|the profile associated to your GDevelop account]].
-By clicking the delete selected events button, we can do exactly that +
-{{ :gdevelop5:delete-selected-events-button.png?​nolink&​200 ​|}}+
  
-## Undo/Redo changes +## Interface Themes
-By clicking the Undo or Redo changes button, we can do exactly that +
-{{ :​gdevelop5:​undo-redo-buttons.png?​nolink&​200 |}}+
  
-## Search in events +You can choose a theming according to your choice. GDevelop has a default set of 2 themes, the **Default White Theme** ​and the **Dark Theme**. To change to a different theme, you need to navigate to **File**->​**Preferences**. 
-By clicking the search in events button, we can do just thatsearch for any expression in the events ​and find what we looking for +You can also create themes of your own to use and share. Learn more about creating a theme [[gdevelop5:all-features:​themes|here]].
-{{ :gdevelop5:search-events-button.png?​nolink&​200 ​|}}+