How to use the editor?

Here you will find all the options you need to edit the game scene by scene.

IMPORTANT: To make the game work DO NOT Delete the scenes "start" and "end". START defines the first scene where your audience will land once open the link (usually used for the game cover or welcome page). END is the last scene of the game. Plus, if you use the countdown feature then you need also to have a scene named "GAMOVER" that will be the one used to take the player if they don't get it in time.

So, if you use the countdown feature (in the gamification bar), is mandatory to have the scenes: start, end and gameover.

1. Game title: the name you assigned to the game in the general settings section.

2. Status of the game: whether is published or still as a draft.

3. Preview and publish: in preview you can visualize the scene you are creating. Use the button PUBLISH once the game is finished. From that moment it will be public and you will find it in the "Published games" section at the dashboard.

4. Profile: edit your personal information, subscription plan or change your work space.

5. Library: in this first left side menu you will find a lot of elements you can use to build the scene, such as text, buttons, text boxes, icons, shapes, stickers and characters.

6. Multimedia: here you will be able to upload your own files, image, video, audio and gif.

7. Components: it includes all the interactive tools you can add to your game scenes to create richer and more dynamic experiences.

8. Configuration: the configuration section lets you define the main characteristics of your game, such as its title, cover image, size, and screen orientation. It’s divided into three tabs: General, Canvas and Flow.

9. UfoAcademy: clicking here will take you to this page where you can answer your questions and learn how to use UFOLAB.

10. File Search Bar: type the name of the element you need and all the results will be shown.

11. Tags: you can filter between what you want to find.

12. Subcomponents: once you click on the library or component, menu, here will be shown all the ready to use options, except in Multimedia where you can upload files too.

13. Canvas: this is the scene where you add all the components and multimedia. The scene of the game when is published will look like exactly like you built it here.

14. Saved: when this icon appears disabled it means that the changes in the game have been saved automatically.

15. Resizer: these options are meant to resize or escale the element or component you are using in that moment. The hand icon will help you move the canva.

16. Do/Undo Actions

17. Move forward/backward: send the element you are working with to backward or forward just with one click

18. Element settings: once you click any element in the canvas, this option will be available showing all the features you can set up for it. Most of the times is really important you select the options you need for that element, in order to follow the flow you need for the game.

19. Actions: each element has a set of actions you need to use to create the game. For instance, this determines how and when the game moves to the next scene. It's necessary to stablish actions in each scene to define how to move from one scene to another, otherwise the game flow will be broken and teh player will get stuck.

20. Effects: use this option to set when and how the element will appear and/or dissappear. This option is super useful to create a more dynamic game.

21. Customize texts: This icon allows you to customize the texts of each component for every available language in your game. You can edit and translate the displayed text directly from here to make your project multilingual and more accessible.

22. Opacity and color

23. Properties: here you will find all the properties each element has such as style, appearance or set up in the case of the gamifications components (puzzles, minigames, progress bar, etc...); in this case a purple wheel icon will appear.

24. Thumbnail viewer: by default scenes thumbnails will be visible in this bar. Click on this icon if you need to hide it.

25. Interface layer: this feature is important if you want to keep elements at a fixed place or activated during all the game. This is specially useful if you want to place a logo along all the scenes, or background music in loop, for instance.

26. Interface layer settings: you can create more than one interface layer for different parts of the game, clone them or delete them.

27. Canvas center: click is to center the center to full screen.

28. Zoom in/out

29. Scenes thumbnails: If the thumbnail viewer is on, you can see all the scenes here. Click on "+" icon to create a new scene.

Now you know better all the options in the editor.

It's time to start creating!