Basic Concepts


Before we look into the Booty5 editor in more depth lets discuss a number of core Booty5 concepts. Booty5 uses a scene hierarchy to store game objects and resources in a way that is optimal for game and app development.


A resource as far as Booty5 is concerned is anything that is added to or created in the editor. Many types of resources are supported including:

  • Image (Bitmap) resources – An image represents an image file

  • Sound resources – A sound represents either a sound effect or streamed audio file

  • Brush resources – A brush represents a rectangular area of an image by way of an ImageAtlas, brushes are generally attached to actors to give them a visual appearance. Brushes enable multiple images to be stored in a single image (sprite atlas)

  • Shape resources – A shape resource represents a physics shape, visual shape or clipping shape. Shapes can be attached to actor based resources such as Sprites (a Sprite is a basic image based game object) and Labels to modify their physics shape in the physics engine and rendered shape. They can also be attached to scenes and actors as clippers to affect how child objects are clipped

  • Material resources – A material resource represents a physics material. Materials can be attached to actor based resources such as Sprites and Labels to affect how they interact with other physical components

  • Script resources – A script resource represents a script file, such as JavsScript, HTML, CSS, XML and other languages

  • Sprite resources – A sprite resource represents an image based game object (actor)

  • Label resources – A label resource represents an image based game or game object that contains text

  • Scene resources – A scene resource represents a game scene / level, a game can contain multiple overlaid scenes

Whilst the following are not resources that sit in the tree hierarchy, they are resources that do play very important roles in Booty5:

  • Timeline resources – Timelines allow you to create complex sets of animations that can target any property of any object. Each scene and actor can contain and manage its own collection of animations
  • Action list resources – Action lists allow you to create game logic and assign it to actors and scenes in a none programmer way, allowing designers to chip into game production without the need for in-depth programming skills


The World Tree

The World Tree is the parent / global controller of everything that exists in the game. The world tree contains all of the scenes that make up the game as well as any global resources that are made available to all resources across the entire game. The world tree is an accurate representation of the scene hierarchy in-code, much like the HTML DOM.

Resource spaces

The editor supports two resource spaces:

  • Local – Any resources located in a local scene resource space (appear in the scenes hierarchy) are generally only available to objects within that scene because local resources will be released when the scene is destroyed
  • Global – Any resources that are placed in the global resource space (outside the scenes hierarchy) are available to every object in the game and are only released when the game shuts down

Global resources are listed in the root of the world tree, whilst local resources are listed within the scene that they belong to. A scene is basically a way to separate out different parts of the game into separate sections You can think of scenes as the unique levels / different overlays in your game. For example you may have a scene that represents the user interface and additional scenes that each represent a unique game level in the game. All scenes appear in the root of the world tree and cannot be made a child of any other resource.



A scene is a container for resources that have limited application life time. The idea is that when the scene is loaded, all of its contained resources will be loaded, created and made available for use. When the scene is destroyed, all of its contained resources will be destroyed freeing up memory to the application. As well as an effective resource management system a scene also manages game objects (referred to as actors) and the cameras view into the world. When a scene is deactivated, all objects, physics, animations etc.. will be paused, when a scene is made invisible actors within the scene will no longer be drawn, by deactivating / hiding scenes that are not currently needed you can improve the performance of your game by many times.


Actors (game objects / sprites) are active resources, in that they have lives of their own; in-active resources are resources such as Images that never or rarely change state. Actors can only exist inside a scene and cannot be created in the global resource space. They can be arranged into hierarchies, with children adopting various properties of their parents, such as transforms, colour etc.. Actors are central to Booty5 as they provide the games core functionality. The general idea is that the editor is used to create and layout actors in a scene, actions and script are then used to modify their behaviours to add game play and app functionality. Booty5 supports a variety of different types of actor that can draw bitmaps, shapes and text.


The Booty5 editor / engine handles animation in 4 different ways:

  • Simple velocity – This is where you simply set a linear or angular velocity to an object and the object will move based on that velocity, this offers a limited sort of animation such as drifting and spinning objects
  • Bitmap animation – This is frame based bitmap animation that can be accomplished using brushes. The current bitmap animation frame can be changed over time to change the brush that is displayed on the object
  • Creating animation timelines in code – If you are using the Booty5 engine then you can use the Animation and Timeline classes to create complex re-usable and throw-away animations
  • Create animation using the timeline editor – The editor has a built in animation editor that uses timelines to create and preview animations, making animation creation very simple and easy to use


Action Lists

Actions are pieces of pre-defined logic that can be added to Actors and Scenes to extend their functionality. Actions can be grouped together into a list of actions that are executed one after the other. Booty5 ships with a number of pre-defined actions that can provide additional complex functionality to objects. For example, there are actions for forcing an object to follow another, tween and set properties of an object, play sounds and more. A complete list of available actions can be viewed in the Booty5 API Reference.

Exported Data

When Booty5 exports its data (when you hit test or run in the editor) it exports to the “html” sub folder in your project. The following files will be exported:

  • index.html – A basic html page that can be used to view your game
  • styles.css – A basic style sheet
  • main.js -This loads and starts the Booty5 engine
  • game.js – This is your main game entry point which loads the global resources and scene jSON files that were exported from the Booty5 editor
  • globals.js – JSON that represents the global resources in your project
  • <scene names>.js – A JSON file for each scene in your project that represents all of the objects and resources in each scene. Note that if a scene is marked as “Load” in the Booty5 editor then it will be loaded on boot up by game.js. If you wish to late load a scene then you should untick the “Load” property of the scene
  • lib/engine – This folder contains the source to the Booty5 game engine
  • lib/Box2dWeb-2.1.a.3.min – If you have opted to use Box2D physics in your game then this file will be exported
  • Other files – The file based resources that are part of your project such as images, scripts and sounds. If you have set the destination folder for any resources then they will be exported to that sub folder

Note that the JSON data files that are exported from the Booty5 editor are loaded using the XOML loader (xoml.js).

Next topic:

8,342 total views, 3 views today