Booty5 HTML5 Game Engine Introduction


Introduction

Booty5 is two technologies fused into a single product to bring easy HTML5 2D game development to HTML5 game developers. The first technology is the HTML5 game engine written using JavaScript which is free and open source (hosted on Github). The second technology is a professional level game editor, which is based on the original Goji Editor but re-purposed to provide an HTML5 2D game development environment.

Booty5’s current set of features include:

  • Free and open source
  • Its tiny and fast, under 120k! (under 90k without pre-defined action)
  • Support for mobile and desktop
  • Global and local resource management
  • Scene and Actor (sprite game object) management
  • Particle systems
  • Tiled and collision maps
  • Animation via Timeline and tweening
  • Support for Action Lists
  • Image, text and geometric shape rendering, including rounded rects
  • Physics using Box2D via Box2DWeb including multiple fixtures, joints, materials and shapes
  • Sprite atlas and frame based bitmap animation
  • Game object docking to scene edges and other game objects
  • Scene and game object clipping, including to circular and polygon shapes
  • Scene and game object touch detection
  • Scene cameras and touch panning
  • Scene and actor local layering
  • Image and gradient brushes, shadows, composite operations
  • 3D sprite depth
  • Touch event handlers
  • Keyboard support
  • 2D canvas
  • Audio play back
  • Support for tasks and user events
  • Support for automatic scaling / resizing to fit different sized gaming displays
  • Support for cached rendering to speed up shape / gradient / font rendering etc..
  • Support for Booty5 game Editor / IDE

To see an overview of the functionality that is available to use take a look at Booty5 API Reference.

To get a rough idea of what the Booty5 game engine can do, take  look at the demos that is exported from the Booty5 game editor.

Overview

Booty5 is small, simple to use and object oriented by design so you can either use objects as is or derive your own versions and add custom functionality.

Booty5 starts with the main app object (App) which you create and then populate with resources and scenes. The App can be thought of as the main game controller and has the following features:

  • Manages global resources
  • Manages global animation timelines
  • Manages a collection of Scenes
  • Handles touch input
  • Finds which game object was touched
  • Main loop processing
  • Automatic resizing / scaling of canvas

Booty5 uses an actor-scene paradigm, where scenes represent a collection of game objects and game objects are represented by actors (note that Actor and game object will be used interchangeably throughout this text). The game display can consist of multiple scenes overlaid (for example a game HUD and the main game world) or scenes can be used like views on mobile devices where each scene represents a single screen of functionality. Actors are your game objects that provide the interactivity between you game and the user. 

Scenes come with a lot of functionality out of the box including:

  • Manages scene local resources
  • Manages scene local timeline animations
  • Manages scene local action lists
  • Manages a collection of game object (actors)
  • Supports a camera
  • Camera can target game object and follow them on x and y axis
  • Touch panning (user can drag the camera around)
  • Box2D world physics
  • Extents which limit camera movement
  • Can detect when a game object in the scene has been touched
  • Clipping of child actors against scene, also supports clipping shapes
  • Scene wide opacity
  • Layering

Actors also come with a lot of functionality out of the box including:

  • Position, size, scale, rotation
  • Can be represented visually by arcs, rectangles (included rounded), polygons, bitmaps and labels
  • Support for a virtual canvas that can scroll content around
  • Absolute (pixel coordinate) and relative (based on size of game object) origins
  • 3D depth (allows easy parallax scrolling)
  • Angular, linear and depth velocity
  • Box2D physics support (including multiple fixtures and joints)
  • Bitmap frame animation
  • Sprite atlas and gradient brush support
  • Child actor hierarchy
  • Begin, end and move touch events (when touchable is true), also supports event bubbling
  • Canvas edge docking with dock margins
  • Can move in relation to camera or be locked in place
  • Can be made to wrap with scene extents on x and y axis
  • Clip child actors against the extents of the parent with margins and shapes
  • Opacity / alpha
  • Actors can be represented by arcs, rectangles, polygons, bitmaps or labels
  • Support for cached rendering
  • Layering

A multitude of different events can also be tapped into including:

Scenes:

  • onCreate() – Called just after Scene has been created
  • onDestroy() – Called just before Scene is destroyed
  • onTick(delta_time) – Called each time the Scene is updated (every frame)
  • onBeginTouch(touch_pos) – Called when the Scene is touched
  • onEndTouch(touch_pos) – Called when the Scene has top being touched
  • onMoveTouch(touch_pos) – Called when a touch is moved over the Scene

Actors:

  • onCreate() – Called just after game object has been created
  • onDestroy() – Called just before game object is destroyed
  • onTick(delta_time) – Called each time the game object is updated (every frame)
  • onTapped(touch_pos) – Called when the game object is tapped / clicked
  • onBeginTouch(touch_pos) – Called when the game object is touching
  • onEndTouch(touch_pos) – Called when the game object has top being touching
  • onMoveTouch(touch_pos) – Called when a touch is moved over the game object
  • onCollisionStart(contact) – Called when the game object started colliding with another
  • onCollisionEnd(contact) – Called when the game object stopped colliding with another

 Particle Systems:

  • onParticlesEnd() – Called when The particle system has finished and no particles are left
  • onParticleLost(particle) – Called each time a particle is lost

Timelines:

  • onEnd() – Called when the animation ends
  • onRepeat() – Called when the animation repeats
  • Event handlers can also be called at the beginning of each frame

 

Adding Booty5 to a Project

To add Booty5 to your project simply add the following line to the head section of your HTML file, e.g:

If you would also like to the use Box2D physics features of Booty5 then you should also include Box2D web, e.g:

 

Using Booty5

Setting up Booty5 is very simple, a small Hello World style example can be viewed here. Lets take a quick look at the source in main.js:

The first and most important part of using Booty5 is setting up the App within the window.onload() function. The App is the main app controller that manages game scenes:

In the section of code we create the app, passing in the canvas element that will be used to render the game. Note that some internal parts of the engine will write debug output to the console, by setting debug to false we will prevent this from being written. We tell the app to clear the canvas each frame, you can set this to false if your game covers the entire area of the canvas to save a bit of time.

In the above section of code we tell Booty5 to scale the canvas so that it best fits the browser window, this will scale the canvas to fit either the entire height or width of the window.

Next we create a Scene that can host our game objects then add that to the app for processing. Note that until you add the scene to the app no processing of any actors within the scene will take place. You can think of a scene as a view into the canvas:

Next we create an arc actor (an ArcActor can draw circles) then add it to the scene for processing. Note that until you add the actor to the scene it will not be processed or rendered:

In the above code we also attach an onTick event handler, all Actors and Scenes support the OnTick event which is called each time it is updated (every frame). This is the code that makes the circle wrap around and bounce.

Next we create a Bitmap object:

Then we create an image based Actor to render the bitmap:

Finally we start the apps main loop going with:

Booty5 2D Game Editor 

The easier way by far of using Booty5 is to use it conjunction with the 2D Game Editor. The Editor is a game iDE and Flash style animation editor that enables you to create games visually and includes script editing capabilities for creating more powerful games. The editor exports JSON that can be loaded by the engines XOML loader (xoml.js). You can include this JSON either directly or load it asynchronously.

Related topics:

7,457 total views, 8 views today