Main Canvas Area


Overview

The canvas is the main editing area located in the middle of the editor where game and app layouts are created and edited. The canvas shows a visual representation of scenes and their actors. Most of your time will be spent working between the canvas and the Properties Panel.

The main canvas contains of the following basic visual aids:

  • Grid – The grid’s purpose is to give spatial and scale feedback
  • Origin – The origin is displayed using horizontal and vertical solid lines that intersect the origin of the world at 0,0
  • Mouse cross-hair – The cross hair intersects the mouse position to aid positioning and alignment
  • Virtual screen – A filled light blue semi-transparent rectangle is used to show the virtual screen dimensions. This is useful when docking objects to the edges of the display
  • Selection boxes – When an object is selected on the canvas it is highlighted with a flashing box to show that it is selected
  • Snap markers – When moving objects around on the canvas they can be snapped against vertices and edges of other objects when the user holds down the control key (CTRL). Snap markers appear when objects are about to snap to show how they will snap
  • Selection rectangle – When holding the shift key and dragging the mouse a selection rectangle will be shown that allows selection of multiple items
Booty5 2D HTML5 game editor screenshot

Booty5 2D HTML5 game editor screenshot

Current Scene

To make editing easier the Booty5 editor uses a currently selected scene concept to de-clutter the screen. The currently selected scene will be made visible, whilst all other scenes will be hidden from view. This enables scenes to be created and worked on in the same screen space without having to manually hide / show different scenes to move them out of the way.

 

Drag and Drop

The canvas supports drag and drop from the world tree view. Resources can be dropped onto either the scene / main canvas or actors within the scene. The following drag and drop functions are supported:

  • Adding new image based actors (Sprites) – Dragging brushes from the world tree onto the canvas or a scene will create a new Sprite actor with the brush assigned to it. This is a great way to quickly get content into the canvas.
  • Changing an actors brush – Dragging a brush from the world tree onto an actor or collection of actors will assign the bush to the actor(s)
  • Adding physics fixtures to actors – Dragging either a material or shape onto an actor or collection of actors will create a new physics fixture and attach it to the actor or selected actors.

 

Editing on the Canvas

Creating and modifying layouts is done primarily on the canvas, selecting a scene or actor on the canvas will select the scene or actor in the world tree and change the properties panel to show the scene or actors current properties. If multiple actors are selected then the properties for the last selected actor will be shown. You can select multiple objects by holding down the left shift key and dragging the mouse over the objects that should be selected. You can also toggle selections on and off by holding down shift and clicking an object. Note that if you select an actor that is a child of another actor then the parent will automatically be deselected. Clicking on an empty part of the canvas will deselect all objects on the canvas. Note that we use object to denote either a scene or an actor.

The canvas can be panned and zoomed to show more / less of the world. The following mouse actions and keys can be used to modify the camera:

  • Middle mouse – Holding down the middle mouse button and dragging in a direction will move the camera in that direction
  • Mouse wheel – Zoom in and out, hold down left control key to slow down zoom
  • Ctrl + cursor keys – Move around the canvas, hold down left shift key to slow down movement step
  • Numeric pad + / – Zoom in and out, hold down left shift key to slow down zoom

When editing actors or scenes mouse and keyboard actions are:

  • Left mouse button – Select / move selected object(s)
  • Alt + Left mouse button – Clone selected object(s)
  • Right mouse button – Drag to rotate selected object(s)
  • Ctrl + right mouse button – Drag to scale selected object(s)
  • Cursor keys – Move selected object(s), hold down shift to slow down movement
  • Z/X – Rotate selected object(s), hold down shift to slow down rotation
  • Page Up / Page Down – Scale selected object(s) up and down, hold down shift to slow down scaling
  • Delete – Delete selected object(s)

Other useful actions and keys that can be used on the canvas include:

  • Ctrl + Z – Undo the last action or set of actions
  • Ctrl + N – Creates a new project
  • Ctrl + S – Save project
  • Ctrl + O – Open project
  • Ctrl + C – Copy object
  • Ctrl + V – Paste object
  • Ctrl + X – Cut object
  • Ctrl + Tab – Switch between current and previously selected resource
  • F1 – Moves to next actor in scene
  • F2 – Moves to previous actor in scene
  • F3 – Moves to next scene in world
  • F4 – Moves to previous scene in world
  • F5 – Test project
  • Ctrl + F5 – Run project
  • Keys 1-0 – Go to bookmark
  • Ctrl + Keys 1-0 – Set bookmark

Note that for key based actions to work, the canvas must have the focus

 

Bookmarks

To aid navigation of larger game worlds the Booty5 editor uses a bookmark system. You can bookmark the camera at a specific position and scale. Using Ctrl + keys 1 to 0 will store the current position and scale of the camera. To return to that position and scale in the future press a key from 1 to 0 to go back to that bookmarked point.

 

Object Cloning

The Booty5 editor provides a very handy tool that enables layouts to be generated very quickly using cloning. By holding down the left Alt key whilst selecting an actor you can create a clone of that actor or group of selected actors. Depending upon which side of the actor you click, the cloning will be done in a specific direction. For example, if you “Alt + click” the right hand side of an actor then the new actor will be cloned to the right of the clicked actor; cloning also works with groups of actors. The newly created actors will be selected so that they can be cloned in the same direction again. This tool enables rapid generation of environments.

 

Object Alignment and Spacing

A number of tools are provided in the tools menu to aid alignment of objects by their edges or centres. The following alignment tools are currently available:

  • 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 of 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

A number of tools are provided in the tools menu to aid spacing of objects:

  • 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

Both sets of tools enable rapid production of tidy layouts, which is especially useful when creating user interfaces.

 

Edge and Vertex Snapping

When moving objects around on the canvas, holding down the left control key will put Booty5 into snapping mode. There are two types of snapping modes supported:

  • Edge snapping – In this mode, the edges of the currently selected object will be snapped against the edges of other objects on the canvas. This is especially useful for stacking objects side by side, on top of or underneath each other. Note that when you drag an object close to the snapping edge of another object, guides will be displayed that show where the snap will take place
  • Vertex snapping – In this mode, the vertices of the currently selected object will be snapped against the vertices of other objects on the canvas. Note that when you drag an object close to the snapping vertex of another object, guides will be displayed that show where the snap will take place

Note that snapping only occurs between objects in the same parent of an hierarchy, so for example you cannot snap a child of one actor to the child of another actor, although you can snap the parents.

The current type of snapping that will be used can be changed from the Tools menu.

You can change the range at which objects will be considered for snapping by changing the inclusion range in the World settings. You can quickly switch between small and large inclusion ranges by selecting Small or Large from the Tools menu. You can also change the distance at which edges will be considered for snapping by changing the X and Y snap ranges in the World settings. Note that you can view World settings by clicking on an empty space on the canvas or by clicking the World button at the top of the canvas.

Next topic:

 

1,982 total views, 2 views today