Creating Bitmaps

bHive allows you to add bitmaps using GIF, JPEG, PNG, it is up to you which format you prefer for the application you’re trying to create.

Creating a bitmap

To create a bitmap in bHive is very simple, all you have to do is create a bHive bitmap object.

myImage = engine.createBitmap({
    src: 'images/myImage.png',
    x: 10,
    y: 15
});

In the above example we’ve told bHive to create a bitmap object and load in the file myImage.png from images folder. The x and y properties are the initial starting positions of the object, these can be updated at any time during the User Loop.

Load and Error Events

Bitmaps unlike vectors are heavy when it comes to their file size and need time to load into the browser cache before they can be used within bHive.

bHive uses the onload and onerror event handlers of the Image object to fire an event when a bitmap is either successfully loaded or not. You can use these events by binding and event handler to a bHive Bitmap object as shown below.

myImage.addEventListener('onload',myFunction);

In the above example when the bitmap is successfully loaded into the browser cache the function myFunction is called.

Pre-Loading Bitmaps

If you’ve ever worked with Actionscript then you will be familiar with a pre-loader. A pre-loader is a method by which to load objects prior to them being used, bHive is written in Javascript so how you actually write your own pre-loader is completely up to you.

An example of a standard pre-loader is

function myLoaderFunction() {
var images_to_load = 2;
var images_loaded = 0;

myImage = engine.createBitmap({
    src: 'images/myImage.png',
    x: 10,
    y: 15
});

myImage2 = engine.createBitmap({
    src: 'images/myImage2.png',
    x: 10,
    y: 15
});

myImage.addEventListener('onload',increaseLoad);
myImage2.addEventListener('onload',increaseLoad);

setTimeout("checkForLoad()",500);
}

function increaseLoad() {
    images_loaded++;
}

function checkforload() {
    if(images_loaded == images_to_load) {
        engine.theLoop(myUserLoop);
    } else {
        setTimeout("checkforload()",500);    
    }
}

In the above example we’ve created a loading function that waits until all the images are loaded into the browser cache before assigning the User Loop to bHive. If you were to not add a pre-loader you could result in a bitmap not being drawn to the canvas due to it not being available to use.

Drawing Bitmaps to the <canvas>

After all that, the easiest part of using a bitmap is actually drawing it to the canvas, just call it’s draw method.

function myUserLoop() {
    myImage.draw();
}

This will result in myImage being drawn to the canvas. Congratulations you’ve just added you’ve first bitmap using bHive!