Editor Layout


Overview

The Booty5 Game Editor layout is split into a number of sections as is illustrated in the image below:

Booty5 2D HTML5 game editor screenshot

Booty5 2D HTML5 game editor screenshot

  • Main Menu – The main menu bar is the panel that runs across the top of the window and contains a tabbed view with different options. Clicking a tab will change the displayed menu
  • World tree – To the left of the window is the world tree panel, this panel displays all resources, scenes and actors that make up the game
  • Properties – The properties panel is situated to the right of the window and displays the properties associated with the currently selected resource
  • Main Canvas – The canvas panel is situated in the centre of the display and shows the currently selected game scene and all of its resources
  • Animation Editor – The animation editor is situated at the bottom of the window and is used to create, edit and preview timeline based animations of scenes and objects
  • Output window – The output window is situated at the bottom of the window and is used to display output messages from the editor

The Main Menu

The main menu bar displays a tabbed view with each tab section representing different grouped functionality. The following tabs are currently available:

  • File – Deals with file operations such as New, Open, Save, Save As, Import, Export and Testing
  • Tools – Provides useful tools that can be used to aid editing such as edge / vertex snapping, spacing and alignment
  • Resource – Provides tools for creating new resources

The File Menu

The file menu provides a number of functions including:

  • New – Creates a new project
  • Open – Opens up an existing project from disk
  • Append – Opens up an existing project from disk and appends it to the current open project
  • Save – Saves the current project to disk
  • Save As – Saves the current project to disk under a new name
  • Test – Exports the current project and launches the test version of the project, displaying debug output to the JavaScript console
  • Run – Same process as Test except compiled no debug output will be displayed to the JavaScript console
  • Project – Project and deployment settings
  • Open in IDE – This will open the exported HTML5 project in JetBrains WebStorm Note that if you want to change this then can change the path to the editor of your choice in the project settings
  • Help – Shows Booty5 main help documentation
  • Tutorials – Opens the tutorial section of the Booty5 web site
  • Community – Opens up the Booty5 community web site
  • About – Shows information about the editor

The Tools Menu

The tools menu provides a number of tools that can be used to aid editing of games. The following tools are provided:

  • Edge – Switches to edge snapping mode where edges of objects are snapped to the edges of other objects on the canvas when the left control key is pressed whilst moving objects around
  • Vertex – Switches to vertex snapping mode where vertices of objects are snapped to the vertices of other objects on the canvas when the left control key is pressed whilst moving objects around
  • Small – Sets a small inclusion area. The inclusion area is the area that the snapped objects must fall inside of to be included in snapping calculations
  • Large – Sets a large inclusion area. The inclusion area is the area that the snapped objects must fall inside of to be included in snapping calculations
  • Space H – Spaces the selected objects horizontally, starting with the first selected object
  • Space V – Spaces the selected objects vertically, starting with the first selected object
  • Left – Aligns the left edge of all selected objects with the left edge of the first selected object
  • Right – Aligns the right edge of all selected objects with the right edge of the first selected object
  • Top – Aligns the top edge all selected objects with the top edge of the first selected object
  • Bottom – Aligns the bottom edge of all selected objects with the bottom edge of the first selected object
  • Centre – Aligns the horizontal centre of all selected objects with the centre position of the first selected object
  • Middle – Aligns the vertical middle of all selected objects with the middle position of the first selected object

The Resource Menu

The resource menu supplied a group of tools that deal with creating and managing resources. The following tools are provided:

  • Scene – Creates a new scene resource
  • Image – Creates a new image (bitmap) resource
  • Sound  – Creates a new sound resource
  • Brush – Creates a new brush (ImageAtlas) resource
  • Font – Creates a new font resource
  • Shape – Creates a new shape resource
  • Material – Creates a new physics material resource
  • Sprite – Creates a new image actor resource
  • Label – Creates a new label actor resource
  • Script – Creates a new script resource

Note that when you add a new resource, if you have a scene or a resource within a scene selected in the world tree then the new resource will be placed into that scene. This applies to all resources except scenes themselves.

Next topic:

 

2,488 total views, 1 views today