My First HTML5 Game Project

Before we begin we recommend that you read some of the following topics:

These articles will help you become familiar with using the Booty5 Editor interface as well as some of the core Booty5 concepts and terminology.

Creating a new project

To begin lets create a new project, click the “New” button on the main menu. You will be asked for a location to store the project, select a location from the directory selector then click Ok. This will create an empty scene called gamescene and an empty script file called Common.js. Now save the project by clicking the Save button.

Creating your first scene

Booty5 uses scenes to separate sections of your app into components that contain all of the resources that are specific to that scene. Generally when the scene is loaded all of the resources within that scene will be loaded and when the scene is destroyed, all of the resources that were loaded by the scene will be destroyed. This is a sensible approach to use when developing large apps with many resources as its not usually advisable to load all of your resources when the app starts because this would take a long time and would use large amounts of memory.

When we created a new project Booty5 automatically created an empty scene for us. However, to add new scenes right click on the world tree and select “Scene” from the drop down menu. This will create a scene called “noname” in the world tree, the visual representation of the scene will also appear in the centre of the canvas as a semi-transparent rectangle.

Adding an image resource

Image resources (bitmaps) are basically image files in JPEG or PNG format that can be used to supply the visual representation of a game or app object. To add the image resource to the scene simply drag the image file from explorer and drop it onto the scene in the world tree. After dropping the image onto the scene a small arrow will appear at the side of the scene name informing you that the scene now contains resources. To view the resources, click the arrow at the side of the scene name to expand it. You will see that two resources have been added.

The first resource is the image that you dropped onto the scene and has the same name as the file that you dragged on, whilst the second is a brush of the same name. In order to attach an image to an actor in Booty5 it must have a brush. A brush describes to the editor which image and what portion of the image you would like to display on the actor.

Adding a game object (actor)

Actors are the game objects that make up your game. To create one that displays an image simply drag the brush that was previously created onto the main canvas. This will create a Sprite actor (image based game object) that now exists inside your game scene. You can click on the actor on the main canvas and move it around by dragging it. You can also rotate it by holding down the right mouse button and dragging it, or hold CTRL + right mouse button to scale it.

If you drag the brush onto the canvas again, a new actor will be created. This is the primary way of adding new actors to the scene. You can also use the Resource menu at the top of the screen in the main menu. To do this, click on the resources tab in the main menu then click the Sprite button. This will create a small white square in the centre of the scene on the canvas, this represents an actor with no visible image attached. To add an image to the actor simply drag the brush from the scenes resources onto the actor on the canvas, alternatively drag the brush resource onto the actor on the world tree, this will assign the brush to the actor. Note however that the actors size will remain 32 x 32 pixels in size. In order to change the size of the actor to the new size you require, click on the actor either in the world tree or on the canvas and change the size parameter in the properties panel over on the right.

Running a test

Now that we have a few objects in the scene, lets see how it looks when ran. To test the project click the Test button that is located under the File tab of the main menu at the top of the screen. This will export your project and  open it up in the default web browser.You can use the JavaScript console to view any errors as well as debug output.

Lets make something spin

Animation is a big part of games, Booty5 allows you to set various physical properties of actors such as linear velocity and angular velocity. Angular velocity is the rate at which something is rotating. To make an actor spin, select the actor then locate the Angular Velocity property under the Physics Properties section, you may need to collapse property sections or scroll down the property panel to find it. Enter the value 100 into the property then press tab to ensure that the value has been written. Now click the Test button again, you will notice that this time the object spins to the right at a rate of 100 degrees per second.

You can see an example of this tutorial running here

Related topics:

14,948 total views, 2 views today