Category Archives: Programming

computer keyboard

HTML5 Game Development: Using sprite sheets for better performance (and protecting your server)

When I started developing the HTML5 version of Command and Conquer, I never expected more than a few close friends to look at the game. (Based on the experience with my last game, Breakout).

Command and Conquer Javascript ScreenshotSo while I spent a lot of time making the game look as close to the original Command and Conquer as possible, I never spent much time optimizing the code. Most of my development and testing was on my own Macbook, and I didn’t pay attention to the image loading time or network traffic.

Unfortunately, this game uses a lot of images.

Each unit can face 32 different directions. This means at least 32 different images for each unit (more if there are animations like ‘harvesting’).

Buildings need a whole set of images for each state – under construction, regular – with different sets of images for healthy and damaged buildings, and for any additional states (like ‘unloading a harvester’). The Construction Yard for example needs 82 different images for it’s animations.

As a result, when the game loaded, it made nearly 1,000 HTTP requests to load all the assets (including images and sounds).

Since most browsers only make a few simultaneous requests at time, downloading all these images took a lot of time, with an overload of HTTP requests.

While this wasn’t a problem when I was testing the code locally, it was a bit of a pain when the code went onto the server. My patient friends ended up waiting for the game to load for 5-10 minutes (sometimes longer) before they could actually start playing.

AdityaRaviShankar.com - Traffic Screen ShotThe problem came when my game hit the front page of Hacker News and Wired.com on the same night, resulting in a slight spike in traffic :). It then got worse when the game got 1,000+ tweets and 1,000+ FB likes in just a few hours. The last time I checked, searching for my game gave over 5,000 google results.

What this meant was my shared hosting server was getting close to 14,000,000 HTTP requests in one day from just my domain.

I don’t think too many shared hosts are designed to take this kind of load, which resulted in my account being disabled with this interesting email from my provider.

Hello,

Your account adityaravishankar.com on the server quebec.unisonplatform.com was recently found to be causing high load that resulted in slowness/outages of various system services. In order to ensure quality of service to the other clients on this server we regret to inform you that the account had to be disabled to prevent any further interruption of service to our other clients.

If nothing can be done to lower the resource usage you may need to look into purchasing a dedicated server or cloud server which you can find more information about at http://www.eleven2.com. Please contact us as soon as possible to resolve this issue.

I was able to find temporary hosting on another server but the biggest priority was to optimize the way I stored images, which of course brings us to sprite sheets.

Hand of Nod Sprite SheetSprite sheets store all the sprites for an object in a single large image file.

When displaying the images, we calculate the offset of the sprite we want to show and use the ability of the drawImage() method to draw only a part of an image.

//Before: (Load individual images and store in a big array)
// Three arguments: the element, destination (x,y) coordinates.
var image = imageArray[imageNumber];
context.drawImage(image,x,y);

// After: (Load single sprite sheet image)
// Nine arguments: the element, source (x,y) coordinates, 
// source width and height (for cropping), 
// destination (x,y) coordinates, and 
// destination width and height (resize).

context.drawImage(this.spriteImage, 
this.imageWidth*(imageNumber), 0, this.imageWidth, this.imageHeight, 
x, y, this.imageWidth, this.imageHeight);

Creating these sprite sheets is incredibly simple using ImageMagick’s montage command line tool. This single command will convert a folder full of images into a single row sprite sheet.

montage -background transparent -tile x1 -geometry +0+0 construction-yard/*.gif construction-yard-sprite-sheet.png

After comparing PNG and GIF, I found that PNGs tend to compress the sprite sheets a lot more.

The advantages of using Sprite Sheets?

  1. Fewer HTTP requests – The Command Center went from 81 requests to a SINGLE HTTP request
  2. Better Compression – An advantage of storing the images in a single file is that the header information doesn’t repeat and the combined file’s size is much smaller than the sum of the individual files. The command center went from 496KB in 81 files to only 37KB in a single file. (Less than 8% of the original size, which is incredible)
  3. Easier Manipulation – With all the sprites in a single image file, it became easier to do RGB color manipulations, and I was able to optimize the drawing code for performance.

From almost a 1,000 requests to 120 requests in one simple code rewrite. And the total download size went from a few MBs to around 200KB.

Game load time went from 10+ minutes to under a minute. The bandwidth usage dropped to a tenth of the original. The number of requests dropped to a tenth of the original. And now my shared hosting can survive a very decent amount of traffic.

Moral of the story? When developing a large game that is image heavy, track your network usage and when possible use sprite sheets :)

Computer Keyboard

Command and Conquer – Programming an RTS game in HTML5 and Javascript

ANNOUNCEMENT: My Book, Pro HTML5 Games is out!!!

Pro HTML5 Games - Aditya Ravi ShankarA lot of people have been asking me for details on how I built the HTML5 version of Command and Conquer.

Based on my experience developing this game, I have just written a book showing readers how to build a complete RTS game in HTML5.

My book, Pro HTML5 Games takes readers through the process of building two complete games – a Box2D Engine based Angry Birds clone and a realtime strategy (RTS) game with multiplayer support.

This book is now available for purchase at Amazon (Pro HTML5 Games on Amazon), Barnes & Nobles (Pro HTML5 Games on Barnes & Noble) as well as the Apress Site (Pro HTML5 Games on Apress).

If you are interested in building professional looking HTML5 games, you should check the book out. If you know anyone who would be interested in this book, please do share this book URL (http://www.adityaravishankar.com/pro-html5-games/) with them.

Read more details about Pro HTML5 Games here.

————–

After writing my first HTML5 game I decided to take on a more challenging project.

Command and Conquer Javascript ScreenshotMy latest project is a recreation of the original Command and Conquer entirely in HTML5 and Javascript.

Command and Conquer is the grand-daddy of all Real Time Strategy games and is probably the game that made the genre popular. My friends and I spent countless hours playing the original as well as subsequent sequels (Tiberian Sun, Red Alert).

Check out the demo video.

You can play the actual game here. Command and Conquer – HTML5 version

This project was a lot more challenging than my previous game, Breakout. In hindsight, I might have wanted to take smaller steps and make a tower defense game instead of jumping directly into an RTS.

Creating even this simple version of the game covered a lot of things.

  1. Using images to recreate the sidebar and game interface.
  2. Using mouse input for unit selection, panning, attacking and user input
  3. Using images as sprites for unit and building animation, and using sprite sheets for better performance
  4. A lot more sounds for units and buildings
  5. Using a finite state machine for handling unit commands, movement, attacking etc.
  6. Using path finding (A*) to navigate around obstructions like buildings, mountains and trees
  7. Using hidden canvas’s for things like fog of war and image manipulation

Obviously because of the size of the project, trying to do the whole thing in under a month all by myself wasn’t the smartest idea. I ended up spending lots of 18 hour work days during this time.

I used to switch between playing the original Tiberian Dawn in a Wine window on my Mac and my JS version on the browser to make sure my version looked EXACTLY like the original. I spent a LOT of time going through C&C forums to understand how to reverse engineer the Tiberium Dawn files to extract the building/unit sprites and audio and reading up on unit specs to figure out how to make the units behave exactly like the original.

Every little thing took time – things like selecting single units, multiple units, being able to select by drawing the box from left to right or from right to left; making sure the panning was smooth; Figuring out a decent fog of war implementation; Allowing for building construction, dependencies (Power Plant needed for Refinery, which is needed for Factory), building placement (buildings cannot be constructed on top of other buildings); Depth sorting when drawing so units could move behind buildings and trees.

The next big headache was smooth unit movement. I wanted to do better than the original game, and spent a lot of time going through Starcraft 2 videos to see if I could get a smoother movement closer to the way SC2 handles it. Pathfinding using A* can do some of the work, but gives a clunky movement and causes units to take behave badly/take longer routes when going through bottle necks. I decided to mix A* with a repelling force/steering behavior to improve it. It still has some bugs I need to work out.

I had to fine tune the way units behaved (during patrolling, guarding, attacking). Even the fact that a MCV couldn’t attack and turned into buildings.

Harvesting was a whole different pain in the ass since my collision detection and steering code meant my harvester was initially afraid to return to the refinery :).

While a lot of people have been giving me props for just getting this project out, one of the things that I am proud of is that I completed the first version in around 3 and a half weeks, all by myself.

For people who have been criticizing this project, I’ll say this – “I did this, entirely on my own, unpaid, in three and a half weeks – including one week where I had a fever. Give me a break. It isn’t that bad :)”.

The current iteration of the project contains several levels from both GDI and NOD campaigns. I am also currently testing multiplayer using Node.js, which should be coming soon.

Check out the video demo of the new version of this game that I am working on.

This game has got a lot of attention from online media and FB/Twitter/Google+. The extra traffic brought my server down on its knees and got my account temporarily suspended. This forced me to optimize the game using sprite sheets so it could handle requests more efficiently. You can read more about the whole story here – HTML5 Game Development: Using sprite sheets for better performance (and protecting your server)

Real Time Strategy Game - Pathfinding, Collision Detection & Steering Demo - ScreenshotAfter lots of feedback, I’ve specifically researched and worked on improving the pathfinding of the game. Check out the Pathfinding, Collision Detection & Steering Demo. This is a demonstration of the improved unit pathfinding and movement/steering strategies used in RTS games. Units use A* to plot a path and avoid collision using a ‘soft collision’ radius. They also ask static units to move aside.

Here is a video demonstrating all the features of the new pathfinding code.

Check out the demo here. Switch on “DEBUG MODE” to see how it works. This is still a work in progress. Any comments or feedback (including bugs), is appreciated.

Check out some of the HTML5 games I have written. If you are just starting out with game programming, check out my earlier tutorial on developing a simple Breakout game in HTML5.

HTML5 Game Development Tutorial: Breakout Part III – Collisions, Scoring and Sound

Breakout v0.6 ScreenshotThis is the third in a series of tutorials on developing a full featured version of Breakout.

In the second tutorial, we used setInterval() to add some animation and capture keydown and keyup events to respond to user input.

In this tutorial, we will bring back the bricks we drew before, handle the ball colliding with these bricks, and finally increase the score when a brick gets destroyed. We will also add some sound effects to make the game more fun.

We will use the code from the last tutorial as our starting point.

Lets get started.

First we add back two lines at the beginning of the animate() function to draw the scoreboard and the bricks.

function animate () {
	context.clearRect(0,0,canvas.width,canvas.height);
					
	createBricks();
	displayScoreBoard();

Right now the ball will move over the bricks without bouncing off them.

We need the ball to reverse X direction if it hits the sides of the bricks, reverse Y direction if it hits the top or bottom of the bricks and damage the bricks every time it touches them.

Lets create functions to check whether the ball is colliding with a brick along the X or Y direction, and to damage the brick if it collides.


function collisionXWithBricks(){
    var bumpedX = false;	
	for (var i=0; i < bricks.length; i++) {
		for (var j=0; j < bricks[i].length; j++) {
			if (bricks[i][j]){ // if brick is still visible
				var brickX = j * brickWidth;
				var brickY = i * brickHeight;
				if (
				    // barely touching from left
				    ((ballX + ballDeltaX + ballRadius >= brickX) &&
		            (ballX + ballRadius <= brickX))
		            ||
		            // barely touching from right
					((ballX + ballDeltaX - ballRadius<= brickX + brickWidth)&&
					(ballX - ballRadius >= brickX + brickWidth))
					){		
					if ((ballY + ballDeltaY -ballRadius<= brickY + brickHeight) &&
						(ballY + ballDeltaY + ballRadius >= brickY)){													
						// weaken brick and increase score
						explodeBrick(i,j);

						bumpedX = true;
					}
				}
			}
		}
	}
		return bumpedX;
}				

function collisionYWithBricks(){
    var bumpedY = false;
	for (var i=0; i < bricks.length; i++) {
		for (var j=0; j < bricks[i].length; j++) {
			if (bricks[i][j]){ // if brick is still visible
				var brickX = j * brickWidth;
				var brickY = i * brickHeight;
				if (
				    // barely touching from below
				    ((ballY + ballDeltaY - ballRadius <= brickY + brickHeight) && 
				    (ballY - ballRadius >= brickY + brickHeight))
				    ||
				    // barely touching from above
					((ballY + ballDeltaY + ballRadius >= brickY) &&
					(ballY + ballRadius <= brickY ))){
					if (ballX + ballDeltaX + ballRadius >= brickX && 
						ballX + ballDeltaX - ballRadius<= brickX + brickWidth){										
						// weaken brick and increase score
						explodeBrick(i,j);							
						bumpedY = true;
					}						
				}
			}
		}
	}
	return bumpedY;
}

function explodeBrick(i,j){
	// First weaken the brick (0 means brick has gone)
	bricks[i][j] --;

	if (bricks[i][j]>0){ 
		// The brick is weakened but still around. Give a single point.
		score++;
	} else {
		// give player an extra point when the brick disappears
		score += 2;		
	}
}

The collisionXWithBricks() and collisionYWithBricks() functions return true when they bounce against a brick and automatically call explodeBrick() to weaken the brick and update the score. To start using these functions, we modify the collision checking conditions in moveBall() slightly.

// If top of the ball touches the top then reverse Y direction
if (ballY + ballDeltaY - ballRadius < 0 
	// or if ball collides in Y direction with bricks
	|| collisionYWithBricks()){
	ballDeltaY = -ballDeltaY;
}

// If side of ball touches either side of the wall then reverse X direction
	//left of ball moves too far left
if ((ballX + ballDeltaX - ballRadius < 0) ||
	//or right side of ball moves too far right
(ballX + ballDeltaX + ballRadius > canvas.width)
// or if ball collides in Y direction with bricks
|| collisionXWithBricks()
){  
	ballDeltaX = -ballDeltaX;
}

At this point, the ball bounces off the bricks as expected and weakens the brick when it hits them. Once the brick is completely destroyed, it disappears and gives the player an extra points.

Not bad. The game works fine, however there is still something missing.

A little sound tends to give players a much more immersive experience and will make the game more fun. With HTML5 Audio, implementing sound is surprisingly easy.

To play sounds, we load files using the Audio() object and play them using its play() method. Browsers are still a little inconsistent about which formats they support. The OGG file format is an open format supported by both Chrome and Firefox (my favorites), which is why we will stick with them for now.

To create the sound we place the two files at the same location as the HTML file and load them by creating new Audio() objects and storing them in variables. The OGG sound files used here are included with the source code.

var bouncingSound = new Audio("bounce.ogg");
var breakingSound = new Audio("break.ogg");

To play these sounds, all we need to do is invoke the play() method.

We can play the breaking sound whenever a brick is completely destroyed (inside the explodeBrick() function).

function explodeBrick(i,j){
	// First weaken the brick (0 means brick has gone)
	bricks[i][j] --;
				
	if (bricks[i][j]>0){ 
		// The brick is weakened but still around. Give a single point.
		score++;
	} else {
		// give player an extra point when the brick disappears
		score += 2;	
	
		breakingSound.play();
	}
}

And the bounce sound anytime we change X or Y direction for the ball (inside the moveBall() function)

function moveBall(){
// First check if we will bump into something

// If top of the ball touches the top then reverse Y direction
if (ballY + ballDeltaY - ballRadius < 0 
	// or if ball collides in Y direction with bricks
	|| collisionYWithBricks()){
	ballDeltaY = -ballDeltaY;
	bouncingSound.play();
}

// If the bottom of the ball touches the bottom of the screen then end the game
if (ballY + ballDeltaY + ballRadius > canvas.height){
	endGame();
}
// If side of ball touches either side of the wall then reverse X direction
	//left of ball moves too far left
if ((ballX + ballDeltaX - ballRadius < 0) ||
	//or right side of ball moves too far right
(ballX + ballDeltaX + ballRadius > canvas.width)
// or if ball collides in Y direction with bricks
|| collisionXWithBricks()
){  
	ballDeltaX = -ballDeltaX;
	bouncingSound.play();
}

// if bottom of ball reaches the top of paddle,
if (ballY + ballDeltaY + ballRadius >= paddleY){
	// and it is positioned between the two ends of the paddle (is on top)
	if (ballX + ballDeltaX >= paddleX && 
		ballX + ballDeltaX <= paddleX + paddleWidth){
		ballDeltaY = - ballDeltaY;
		bouncingSound.play();
	}
}

// Move the ball
ballX = ballX + ballDeltaX;
ballY = ballY + ballDeltaY;
}

That’s really all there is to it. We have a game with sound effects, animation, keyboard control and increasing scores written entirely in HTML and Javascript.

To make the game more fun, we can add more interesting brick types, sounds and game mechanics.

In my version of the game, the bricks start falling down, we have Cash bricks to give money, Bomb bricks that explode everything nearby, Laser Ammo bricks that let us shoot laser from the paddle and Spider bricks that shriek and start crawling down at the user. Check out the game to see what you think. Leave a comment if you enjoy the game.

I don’t see much point showing people how to implement the exact same features in a game, because at this point it is fairly simple to do. However if you have an interesting idea that you would like to add to the game, leave me a comment below. If we get a few interesting ideas, we can have one more tutorial where we implement the ideas and create our own new version of the game.

If not, stay tuned for my next tutorial series on how to implement a Real Time Strategy game engine entirely in HTML5 and Javascript. Check out Command and Conquer – Programming an RTS game in HTML5 and Javascript.

You can download the finished source code for this tutorial below.

computer keyboard

HTML5 Game Development Tutorial: Breakout Part II – Animation and Keyboard Input

Breakout v0.6 ScreenshotThis is the second in a series of tutorials on developing a full featured version of Breakout.

In the first tutorial we covered drawing primitive objects on the screen using the Canvas element and developing the basic game screen.

In this tutorial, we will use setInterval() to add some animation and capture keydown and keyup events to respond to user input (so we can move the paddle).

We will use the code from the last tutorial as our starting point.

Lets get started.

To animate objects in the game, we need to draw them, move them a little, and then redraw them. To do this, we create an animate() function and place our calls to the drawing functions inside it. For now, lets focus on only the paddle and the ball.

function animate () {
	drawPaddle();
	drawBall();
}

Now we need to figure out a way to call animate() repeatedly at regular intervals. Luckily, Javascript has a function called setInterval() which keeps calling a given function repeatedly at fixed time intervals until the clearInterval() function is called.

function startGame(){
	// call the animate() function every 20ms until clearInterval(gameLoop) is called
	gameLoop = setInterval(animate,20);
}

function endGame(){
	clearInterval(gameLoop);
	context.fillText('The End!!!!',canvas.width/2,canvas.height/2);
}

startGame();

We create two functions called startGame() and endGame() to begin the animation and end it. We can also use startGame() to do any pre-game initialization of variables.

Now that the game loop is setup, we need to start moving the elements during the loop.
We start by creating a moveBall() function and calling it from within animate().

var ballDeltaX;
var ballDeltaY;

function moveBall(){
	// Move the ball
	ballX = ballX + ballDeltaX;
	ballY = ballY + ballDeltaY;
}

function animate () {
	moveBall(); 
	drawPaddle();
	drawBall();
}

function startGame(){
	ballDeltaY = -4;
	ballDeltaX = -2;
// call the animate() function every 200ms until clearInterval(gameLoop) is called
	gameLoop = setInterval(animate,20);
}

The moveBall() function adjusts the ball coordinates by adding the ball speed. We initalize balldeltaX and ballDeltaY when the game starts.

Now that everything is in place, the ball should start moving.
Screenshot
However when we open the file in a browser, we see something weird.

Instead of a moving ball, we have a long black line. The ball keeps moving, however the old balls stay behind, leaving a long trail along the path. We need to clear the earlier objects before drawing new ones.

To do this, we can use the clearRect() method.

function animate () {
	context.clearRect(0,0,canvas.width,canvas.height);

This line clears the entire canvas at the beginning of the animation loop. When we run the code now, it looks like a moving ball instead of a long snake.

The next problem is that our ball doesn’t bounce off the walls. It keeps moving past the edge of the canvas and disappears. To fix that, lets add some conditions to check when the ball is moving outside the boundary.

function moveBall(){
	// First check if we will bump into something

	// If top of the ball touches the top then reverse Y direction (move downwards)
	if (ballY + ballDeltaY - ballRadius < 0){
		ballDeltaY = -ballDeltaY;
	}

	// If the bottom of the ball touches the bottom of the screen then end the game
	if (ballY + ballDeltaY + ballRadius > canvas.height){
		endGame();
	}

	// If side of ball touches either side of the wall then reverse X direction
		//left of ball moves too far left
	if ((ballX + ballDeltaX - ballRadius < 0) ||
		//or right side of ball moves too far right
	(ballX + ballDeltaX + ballRadius > canvas.width)){  
		ballDeltaX = -ballDeltaX;
	}

	// Move the ball
	ballX = ballX + ballDeltaX;
	ballY = ballY + ballDeltaY;
}

Great! Now the ball is bouncing off the walls properly and when it touches the ground the game ends.

Now lets animate the paddle. To move the paddle, we need to first track the left and right keys and keep track of where the paddle should move during the next animate(). We do this by using the keydown() and keyup() jQuery methods to assign event handlers for these events.

var paddleMove;

function startGame(){
	ballDeltaY = -4;
	ballDeltaX = -2;
	paddleMove = 'NONE';
	paddleDeltaX = 0;

	// call the animate() function every 200ms until clearInterval(gameLoop) is called
	gameLoop = setInterval(animate,20);

	// Start Tracking Keystokes
	$(document).keydown(function(evt) {
		if (evt.keyCode == 39) {
			paddleMove = 'RIGHT';
		} else if (evt.keyCode == 37){
			paddleMove = 'LEFT';
		}
	});			

	$(document).keyup(function(evt) {
		if (evt.keyCode == 39) {
			paddleMove = 'NONE';
		} else if (evt.keyCode == 37){
			paddleMove = 'NONE';
		}
	}); 
}

The event handlers check if the key pressed or key released is Left (key code 39) or Right (key code 37) and stores this in a paddleMove variable. We will check this variable every time we animate to see where the paddle needs to move next.

The next thing we need to do is define another movePaddle() function that is called just like moveBall().

var paddleDeltaX;
var paddleSpeedX = 10;

function movePaddle(){
	if (paddleMove == 'LEFT'){
		paddleDeltaX = -paddleSpeedX;
	} else if (paddleMove == 'RIGHT'){
		paddleDeltaX = paddleSpeedX;
	} else {
		paddleDeltaX = 0;
	}
	// If paddle reaches the side of the screen, then don't let it move any further
	if (paddleX + paddleDeltaX < 0 || paddleX + paddleDeltaX +paddleWidth >canvas.width){
		paddleDeltaX = 0; 
	}
	paddleX = paddleX + paddleDeltaX;
}

function animate () {
	context.clearRect(0,0,canvas.width,canvas.height);
	moveBall();
	movePaddle();
	drawPaddle();
	drawBall();
}

We now call this new movePaddle() function from animate() as well.

Great! Now the paddle moves to the left and right when we use the cursor keys.

The last thing we need to do is make the ball bounce if it hits the paddle. We just need to add a condition to the other collision checks in moveBall().

// if bottom of ball reaches the top of paddle,
if (ballY + ballDeltaY + ballRadius >= paddleY){
	// and it is positioned between the two ends of the paddle (is on top)
	if (ballX + ballDeltaX >= paddleX && 
		ballX + ballDeltaX <= paddleX + paddleWidth){
		ballDeltaY = - ballDeltaY;
	}
}

And thats it! The paddle moves perfectly, the ball bounces off the wall and the paddle, and if the ball hits the ground, the game ends.

We have come a long way from an empty rectangle on the browser. Of course, this game is still a little boring with just a ball and paddle.

In the next tutorial, we will bring back the bricks that we drew before, handle the ball colliding with these bricks, and finally increase the score when a brick gets destroyed.

You can download the finished source code for this tutorial below.

Continue to part 3 of this series. HTML5 Game Development Tutorial: Breakout Part III – Collisions, Scoring and Sound

computer keyboard

HTML5 Game Development Tutorial: Breakout Part I – Introduction to Canvas

Breakout v0.6 ScreenshotThis is the first in a series of tutorials on developing a full featured version of Breakout. This tutorial will cover drawing primitive objects on the screen using the Canvas element and developing the basic game screen.

Before we get started, check out the finished Breakout game demo. With flying bats, falling spiders, laser turrets and exploding bricks, its probably a little different from the typical breakout game. We will be recreating this game over the series.

All of our development will be for HTML5 capable browsers that properly support the HTML5 Canvas and Audio tags (Chrome, Safari, Firefox, Opera and maybe Internet Explorer 9). Make sure you have one of these browsers.

Now let’s get started.

First we create a simple HTML file with a canvas inside it.

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.       <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5.       <title>Breakout – A fast fun game</title>
  6.       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7.       <script>
  8.  
  9.         $(function() {
  10.         // All our code will go here. jQuery will run this after the document loads completely
  11.         });
  12.     </script>
  13.   </head>
  14.   <body>
  15.     <style type="text/css">
  16.       canvas {
  17.         border:1px solid black;
  18.       }
  19.     </style>
  20.     <h1>Breakout</h1>
  21.     <canvas id="canvas" width="400" height="500">
  22.       Your browser does not support the HTML5 Canvas feature. This game uses new HTML5 features and will only work on the latest versions of Firefox, Safari or Chrome (and maybe Internet Explorer 9).
  23.     </canvas>
  24.   </body>
  25. </html>

This creates a Canvas element with dimensions 400 x 500 with a black border around it. If you open the HTML page in your browser, all you will see is a black rectangle on an empty white screen. In case your browser does not support HTML5 Canvas, it shows the unsupported feature message.

We also include jQuery to make cross browser development easier.

To start using the Canvas we need to get its 2d context which then gives us access to all the drawing methods we need.

  // this is the same as document.getElementById('canvas');
  var canvas = $('#canvas')[0]; 
  // different browsers support different contexts. All support 2d
  var context = canvas.getContext('2d'); 

With this context object, we now have access to the methods that we will need for our game like fillRect(), clearRect() and drawImage().

Now that we can draw, lets start with creating the paddle.

  var paddleX = 200;
  var paddleY = 460;

  var paddleWidth = 100;
  var paddleHeight = 15;

  var paddleDeltaX = 0;
  var paddleDeltaY = 0;

  function drawPaddle(){
    context.fillRect(paddleX,paddleY,paddleWidth,paddleHeight);
  }

Note that we store all the parameters in variables so that we can easily modify and reuse them later. Drawing the paddle is as simple as using the fillRect() method.

Now lets draw the ball.

  var ballX = 300;
  var ballY = 300;
  var ballRadius = 10;

function drawBall(){
  // Context.beginPath when you draw primitive shapes
  context.beginPath();

  // Draw arc at center ballX, ballY with radius ballRadius, 
  // From 0 to 2xPI radians (full circle)
  context.arc(ballX,ballY,ballRadius,0,Math.PI*2,true);

  // Fill up the path that you just drew
  context.fill();			
}

Drawing the ball requires the arc() method to draw a circular shape and the fill() method to fill the shape we just created. While drawing the arc, the starting angle is 0 and the ending angle is 2xPI radians (or 360 degrees) which makes a full circle.

Now lets draw the bricks on top.

var bricksPerRow = 8;								
var brickHeight = 20;
var brickWidth = canvas.width/bricksPerRow;

// Brick Layout: 1 is orange, 2 is green, 3 is gray, 0 means no brick 
 var bricks = [
	[1,1,1,1,1,1,1,2],
	[1,1,3,1,0,1,1,1],
	[2,1,2,1,2,1,0,1],
	[1,2,1,1,0,3,1,1]
];


// iterate through the bricks array and draw each brick using drawBrick()
function createBricks(){
	for (var i=0; i < bricks.length; i++) {
		for (var j=0; j < bricks[i].length; j++) {
			drawBrick(j,i,bricks[i][j]);
		}
	}
}

// draw a single brick
function drawBrick(x,y,type){	
	switch(type){ // if brick is still visible; three colors for three types of bricks
		case 1:
			context.fillStyle = 'orange';
			break;
		case 2:
			context.fillStyle = 'rgb(100,200,100)';						
			break;
		case 3:
			context.fillStyle = 'rgba(50,100,50,.5)';
			break;								
		default:
			context.clearRect(x*brickWidth,y*brickHeight,brickWidth,brickHeight);
			break;

	}
	if (type){
		//Draw rectangle with fillStyle color selected earlier
		context.fillRect(x*brickWidth,y*brickHeight,brickWidth,brickHeight);
		// Also draw blackish border around the brick
		context.strokeRect(x*brickWidth+1,y*brickHeight+1,brickWidth-2,brickHeight-2);
	} 
}	

First we store the bricks layout in an Array making it easier to visualize and modify. Feel free to try adding a few more rows, or changing the numbers to modify the layout.

We then iterate over each row and column and call the drawBrick() method to place the brick correctly. Within drawBrick(), we use a switch statement to set different fill colors for different types of bricks. This function can be extended to add more brick types.

Finally, lets create a simple scoreboard or status bar below.

var score = 0;

function displayScoreBoard(){
	//Set the text font and color
	context.fillStyle = 'rgb(50,100,50)';
	context.font = "20px Times New Roman";
	
	//Clear the bottom 30 pixels of the canvas
	context.clearRect(0,canvas.height-30,canvas.width,30);	
	// Write Text 5 pixels from the bottom of the canvas
	context.fillText('Score: '+score,10,canvas.height-5);
}

This uses the fillText() method to write text at the bottom of the canvas.

We can check the output of the code so far by calling each of the functions that we wrote.

// Call the methods to make sure they work
drawPaddle();
drawBall();
createBricks();
displayScoreBoard();

Breakout - Tutorial 1 - ScreenshotThis is the final result. We have a complete game screen with all the elements drawn on it programmatically – the bricks, the paddle, the ball and the scoreboard.

It doesn’t seem like much yet. Everything is static. However, because we stored the parameters in variables, all we need to do to move objects around is change the parameter values and call the same functions again. Thats when things start getting interesting.

In part II of this series, we will use setInterval() to add some animation and capture keydown and keyup events to respond to user input.

You can download the finished source code for this tutorial below.

Continue to part 2 of this series. HTML5 Game Development Tutorial: Breakout Part II – Animation and Keyboard Input

computer keyboard

Javascript Game Development with HTML5 Canvas – Breakout released

Breakout v0.6 ScreenshotI started working on my version of the Breakout game as a simple exercise to learn Javascript game programming, using HTML5 Canvas for animation.

The way I see it, Breakout is the “Hello World” of Game development. Pretty much everyone does it when they want to learn the basics. It is probably one of the simplest games to develop though you can choose to make this exercise as easy or as challenging as you like.

In the process of building even the simplest versions of this game you learn most of the essential fundamentals for building any Javascript game, namely -

  1. Drawing primitive objects on the screen using the Canvas element and its Context. (See Introduction to Canvas Tutorial)
  2. Moving objects by using clearRect() and redrawing the object. (See Animation and Keyboard Input Tutorial)
  3. Using setInterval() and setTimeout() to animate objects and run a game loop. (See Animation and Keyboard Input Tutorial)
  4. Capturing keypress, keydown and keyup events and responding to user input. (See Animation and Keyboard Input Tutorial)
  5. And finally rudimentary collision detection. (See Collisions, Scoring and Sound Tutorial)
 If you then decide to put in a little more effort, you also learn -
  1. Using HTML5 Audio for sound effects. (See Collisions, Scoring and Sound Tutorial)
  2. Using bitmaps with drawImage() for better looking graphics.
  3. Animating arrays of objects simultaneously, each with their own life cycle (like bullets)

I expected this game to be a quick learning experience with limited playable value. I never expected the game to be as much fun as it is. Once I decided to put the game up on my website, the positive feedback that I got was  very heartening.

Based on feedback, I have decided to continue adding features and developing the game. If you are interested in game development and the making of this game, you can check out the tutorial series on developing Breakout.

The latest version of the game is available at the Breakout Game page. Please check it out and let me know whether you like it. I would appreciate any suggestions or constructive criticism (as a player or as a developer) – Any bugs or any playability issues that you find.

If you like the game, please do let me know, and do share it with all your friends. You can use the comments form on the game page.

 

computer keyboard

NowJS and Node.js Tutorial – Creating a multi room chat client

Node.js is a server side environment for Javascript. NowJS is a framework built on top of Node.js that connects the client side and server side Javascript effortlessly.

The core of NowJS functionality lies in the now object.The now object is special because it exists on the server and the client.

This means variables you set in the now object are automatically synced between client and server. Also server functions can be directly called on the client and client functions can be called directly from the server.

All in realtime.

You can have a working HTTP server up and running in Node.JS with just a few lines of code. For example -

  1. var http = require('http');
  2. http.createServer(function (req, res) {
  3.     res.writeHead(200, {'Content-Type': 'text/plain'});
  4.     res.end('Hello World\n');
  5. }).listen(8080);

This little snippet of code will create an HTTP server, listen on port 8080, and send back “Hello World” for every request. That’s it. Nothing more needed.

Using NowJS, communication between the client and server side is just as simple.

Client Side:

  1. <script type="text/javascript">
  2. now.ready(function(){
  3.     now.clientSideVariable = 'someValue';
  4.     now.serverSideFunction();
  5. });
  6. </script>

In this code snippet, the client side sets a variable to ‘someValue’ and calls serverSideFunction(), which is declared only on the server.

Server Side:

  1. everyone.now.serverSideFunction = function() {
  2.     console.log(this.now.clientSideVariable);
  3. }

The server side is then able to access clientSideVariable, which is declared only on the client.

All the details such as establishing connections and communicating change of data between the server and client are handed automagically by the framework.

In fact writing code using this framework is so simple, the NowJS hello world example is a working chat client and server written in under a dozen lines of code. Go check it out.

As a simple exercise to get comfortable with the NowJS API, we can modify the chat client example to support multiple chat rooms. Let’s take a look at how easy it is.

Server Side (multiroom_server.js)

1. The first thing we need to do is modify the distributeMessage() function to only send messages to users in the same chat room as the user.

  1. // Send message to everyone in the users group
  2. everyone.now.distributeMessage = function(message){
  3.     var group = nowjs.getGroup(this.now.serverRoom);
  4.     group.now.receiveMessage(this.now.name+'@'+this.now.serverRoom, message);
  5. };

We store the name of the server room on the client side (this.now.serverRoom). When the client calls the distributeMessage() function we send the message to everyone in the same chat room by using getGroup() and using the group.now object instead of the everyone.now object. (everyone is just a group that contains all users connected to the server)

2. Next we need to handle the client changing chat rooms.

  1. everyone.now.changeRoom = function(newRoom){
  2.     var oldRoom = this.now.serverRoom;
  3.  
  4.     //if old room is not null; then leave the old room
  5.     if(oldRoom){
  6.         var oldGroup = nowjs.getGroup(oldRoom);
  7.         oldGroup.removeUser(this.user.clientId);
  8.     }
  9.  
  10.     // join the new room
  11.     var newGroup = nowjs.getGroup(newRoom);
  12.     newGroup.addUser(this.user.clientId);
  13.  
  14.     // update the client's serverRoom variable
  15.     this.now.serverRoom = newRoom;
  16. };

The getGroup() method fetches the group object if it exists and creates a group if it doesn’t already exist. We use the groups addUser() and removeUser() methods to move the client from the old room to the new room.

Thats about it on the server side.

Client Side (multiroom.html)

3. First we add a drop down with the list of server rooms.

  1. <select>
  2.     <option selected="selected" value="room1">Room 1</option>
  3.     <option value="room2">Room 2</option>
  4.     <option value="room3">Room 3</option>
  5. </select>

4. Next we call the server side changeRoom() function when the user first connects and whenever the drop down is changed.

  1. // on establishing 'now' connection, set the server room
  2. now.ready(function(){
  3.     // By default pick the first chatroom
  4.     now.changeRoom($('#server-room').val());
  5. });
  6.  
  7. // On change of drop down, clear text and change server room
  8. $('#server-room').change(function(){
  9.     $("#messages").html(");
  10.     now.changeRoom($('#server-room').val());
  11. });

5. For extra credit, we can allow the server to dynamically provide the list of rooms when the client connects.

The changes required would be -

Server Side:

  1. // Declare a list of server rooms
  2. everyone.now.serverRoomsList = {'room1':'Room 1','room2':'Room 2','room3':'Room 3'};

Client Side:
  1. now.ready(function(){
  2.     // Pick up list of chatrooms from server and populate dropdown
  3.     setServerRoomFromList(now.serverRoomsList);
  4.     // By default pick the first chatroom
  5.     now.changeRoom($('#server-room').val());
  6. });
  7.  
  8. // populate the #server-room dropdown from a list
  9. function setServerRoomFromList(roomList){
  10.     $('#server-room').empty();
  11.     $.each(roomList, function(key, value){
  12.         $('#server-room').
  13.         append($("").
  14.         attr("value",key).
  15.         text(value));
  16.     });
  17. }

That’s really all you need to do. We now have a multi room chat client/server with
i) A drop down on the client side with list of server rooms
ii) On connection with server, client auto populates server room list and enters the first room
iii) Changing drop down changes room
iv) Entering new room clears the screen for the user

This is obviously a fairly barebones version (like the original example), but it serves as a proof of concept of all the essential elements of NowJS communication.

The finished code has some extra comments and a few more features. You can download the complete source code below.