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.

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

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

window.onload=function()

{

// Create the app

varapp=newb5.App(document.getElementById('gamecanvas'));

b5.app=app;

app.debug=false;

app.clear_canvas=true;

// Tell Booty5 to scale canvas to best fit window

app.setCanvasScalingMethod(b5.App.FitBest);

// Create a scene

varscene=newb5.Scene();

// Add scene to the app

app.addScene(scene);

// Create an arc actor

varactor=newb5.ArcActor();

actor.fill_style="rgb(80,80,255)";

actor.x=100;

actor.y=100;

actor.vx=100;

actor.radius=100;

// Add the actor to the scene

scene.addActor(actor);

// Attach an OnTick handler which gets called each frame

actor.onTick=function(dt){

if(this.x&gt;200)this.x=-200;

this.y=Math.sin(this.frame_count/20)*100+100;

}

// Create a bitmap

varbitmap=newb5.Bitmap("crate","crate.png",true);

// Create an image based actor

varactor=newActor();

actor.x=200;

actor.y=100;

actor.w=100;

actor.h=100;

actor.vr=10;

actor.bitmap=bitmap;

// Add the actor to the scene

scene.addActor(actor);

// Start main loop

app.start();

};

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:

1

2

3

4

5

// Create the app

varapp=newb5.App(document.getElementById('gamecanvas'));

window.app=app;

app.debug=false;

app.clear_canvas=true;

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.

1

2

// Tell Booty5 to scale canvas to best fit window

app.setCanvasScalingMethod(b5.App.FitBest);

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:

1

2

3

4

// Create a scene

varscene=newb5.Scene();

// Add scene to the app

app.addScene(scene);

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

// Create an arc actor

varactor=newb5.ArcActor();

actor.fill_style="rgb(80,80,255)";

actor.x=100;

actor.y=100;

actor.vx=100;

actor.radius=100;

// Add the actor to the scene

scene.addActor(actor);

// Attach an OnTick handler which gets called each frame

actor.onTick=function(dt){

if(this.x&gt;200)this.x=-200;

this.y=Math.sin(this.frame_count/20)*100+100;

}

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:

1

2

// Create a bitmap

varbitmap=newb5.Bitmap("crate","crate.png",true);

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

1

2

3

4

5

6

7

8

9

10

// Create an image based actor

varactor=newb5.Actor();

actor.x=200;

actor.y=100;

actor.w=100;

actor.h=100;

actor.vr=10;

actor.bitmap=bitmap;

// Add the actor to the scene

scene.addActor(actor);

Finally we start the apps main loop going with:

1

2

// Start main loop

app.start();

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.