Shape Editing and Tracing

Booty5 contains a built in shape editor that can be used to create / edit shapes as well as generate shapes from bitmaps using bitmap contour tracing. To open the shape editor, select a shape in the world tree then change its type in the shapes property panel to “Polygon”, this will enable the “Edit Shape” button, click this button to edit the shape.

The shape editor looks as follows:

Booty5 HTML5 shape editor

Booty5 HTML5 shape editor

The shape editors canvas looks much like the main canvas with a grid background and origin. You can use the following controls for navigating the shape editor as you can with the main canvas:

  • 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 to slow down zoom

Shapes created in the shape editor can be used as clipping regions for game objects and scenes, to represent game objects visually, as physics fixtures and as paths. Note that you do not need to worry about creating concave physics shapes as the editor will automatically break them into convex shapes during export.

Basic operations in the shape editor are as follows:

  • Select a node by clicking on the node, dragging the node will move it to the new position
  • Adding a new node can be done by either clicking the add node button to insert a node at the end of the node list or by double clicking on the canvas. Double clicking on the canvas will insert the node at the position of the mouse click
  • Deleting a node can be done by selecting a node and then clicking the ‘Remove’ button or by pressing the ‘Delete’ key
  • Clicking the ‘Save Changes’ button will write shape modifications that were made within the shape editor back to the main editor shape and close the shape editor. To discard the changes simply close the shape editor

Vertices can be snapped to an invisible grid by setting the snap vertices to a value other than 0, vertices will be snapped to the nearest grid line when dropped.

Generating Shapes from Bitmaps

Shapes can be generated by tracing a bitmap and converting the generated perimeter to a shape.

To generate a shape from a bitmap select a brush from the drop down brush list then click the ‘Trace Bitmap’ button to generate the shape. A shape with a maximum of 20 sides will be generated by default, you can change the maximum number of sides that the shape will be made from by typing the number of sides into the ‘Edge Count’ box. You can also use the +/- buttons situated at the side of the ‘Edge Count’ box to adjust the maximum number of edges.

During bitmap edge tracing the alpha channel within the bitmap is used to determine edges. You can set a minimum alpha that will be used to consider pixels as solid by entering the value into the ‘Min Alpha’ field.

When a shape is attached to a physics fixture it will be exported as multiple shapes if the shape is concave. You can calculate how many shapes will be exported for a fixture by clicking the ‘Count Fixtures’ button.

If a shape is to be used as a path then ensure that you set the IsPath property of the shape to true.

Next topic:


1,463 total views, 4 views today