Akihabara Tutorial, Part 4.5: Interlude

This is an interlude between parts four and five in our tutorial series where we will teach you how to make an 8-way shooter in HTML5 and JavaScript using the Akihabara framework. Akihabara is a set of Javascript libraries that take advantage of some of HTML5’s unique features to facilitate game creation. One of the best things about writing a game in HTML5 is that it will run in any browser that supports HTML5 on any platform. This includes Chrome, Firefox, Safari, and WebKit browsers on iPhone/iPad, WebOS devices, and other mobile platforms.

What we’re covering in this article is mainly some major tweaks to our game that are going to help us out down the line.

In this tutorial, we’re going to expand the resolution of our game to 640×480, change our map tile resolution to 16×16, remove the camera code, and create a frame counter.

The final product

The end product of this tutorial will look like this. We’ve doubled the resolution and tweaked the map so the tiles are 16×16. It’s not exciting but it’s going to make our lives a lot easier down the road.

Disabling the camera

Because we can now see the entire map in our screen, we have no more need for a scrolling camera. Let’s disable the camera entirely, deleting the entire followCamera function and deleting the followCamera call in addMap so it now looks like this:

[js]// This is our function for adding the map object — this keeps our main game code nice and clean
// For Part 4, we’re adding the "followCamera" line you see in here
function addMap() {
gbox.addObject({
id: ‘background_id’, // This is the object ID
group: ‘background’, // We use the ‘backround’ group we created above with our ‘setGroups’ call.

blit: function() {
gbox.blitFade(gbox.getBufferContext(), { alpha: 1 });
gbox.blit(gbox.getBufferContext(), gbox.getCanvas(‘map_canvas’), { dx: 0, dy: 0, dw: gbox.getCanvas(‘map_canvas’).width, dh: gbox.getCanvas(‘map_canvas’).height, sourcecamera: true });
}
});
}[/js]

Adding a frame counter

A frame counter is a global variable that counts the number of frames that been calculated since the game started. Frame counters are useful for all sorts of things, including tracking the length of an animation or throttling a calculation so that it doesn’t run every frame but rather every 10th frame (for example). It’s pretty simple to implement: set a global variable to 0 and increment it once per frame. The only tricky bit is figuring out when to increment it.

Recall that our ‘background’ group is the first thing to render/calculate. The map is currently the only object in our background group, so we’ll increment the frame counter in its first function. That way the frame counter is incremented as soon as the first object is calculated for that frame.

First we create the global variable frameCount at the top of our code, initializing it to 0 and putting it with our two other globals, map and maingame:

[js] <script>
var maingame;
var map;
var frameCount = 0; // New for Part 4.5[/js]

Next we add a first function to addMap:

[js]// This is our function for adding the map object — this keeps our main game code nice and clean
// For Part 4, we’re adding the "followCamera" line you see in here
function addMap() {
gbox.addObject({
id: ‘background_id’, // This is the object ID
group: ‘background’, // We use the ‘backround’ group we created above with our ‘setGroups’ call.

// A frame counter to be rendered in the map
first: function() {
frameCount++;
},

blit: function() {
gbox.blitFade(gbox.getBufferContext(), { alpha: 1 });
gbox.blit(gbox.getBufferContext(), gbox.getCanvas(‘map_canvas’), { dx: 0, dy: 0, dw: gbox.getCanvas(‘map_canvas’).width, dh: gbox.getCanvas(‘map_canvas’).height, sourcecamera: true });
}
});
}[/js]

All we did was add a first function that increments frameCount. And with that, we have a global frame counter that increments at the beginning of every frame.

Not much payoff but you’ll thank us later…

We know there isn’t a lot of context to what we just did in this tutorial, but it’s going to help us out down the line when we start putting in animations and changing around our game design. You can view the completed program here.

[aki_tut_toc full_url=”“]