Download: CocoonJSAudioPlugin

How to use: Just put the CocoonPlugin as the first entry to register and you can use everything else of the SoundJS-library just as is in CocoonJS now.

createjs.Sound.registerPlugins([createjs.CocoonJSAudioPlugin]);

//this will allow me to play 3 parallel instances of jump.ogg
  createjs.Sound.registerSound('jump.ogg','jump', 3);

direct link: http://labs.indiegamr.com/olines/index.html

For bluring I used this filter: Link – but still: For those kind of operations HTML/JS is unfortunately still way behind flash in terms of performance.

Download: easeljs_cocoonjs_touchfix.js

(updated version to work with EaselJS 0.7+, thx to Jonny)
How to use: Download JS-fix and implement it through a script-tag somewhere after the EaselJS-script-tag and your done!

Hope this helps someone, comment for any issues,cheers!

If you use an older version of EaselJS: easeljs_cocoonjs_touchfix_pre_0.7.js (for pre-EaselJS 0.7)

Github: https://github.com/olsn/SublimeText2-EaselJS-Completion

DemoImage: 

Here is an example (play around with the alpha threshold and toggle the detection mode):

// Rect Collision
var intersection = ndgmr.checkRectCollision(bitmap1,bitmap2);
// intersection is null if no collision, otherwise a {x,y,width,height}-Object is returned

// Pixel Perfect Collision
var collision = ndgmr.checkPixelCollision(bitmap1,bitmap2,alphaThreshold);
// true or false
// alphaThreshold default is 0, set to higher value to ignore collisions with semi transparent pixels

The result:

Background Parallax

self.createBgGrid = function(numX, numY) {
	var grid = new Container();
	grid.snapToPixel = true;
	// calculating the distance between
	// the grid-lines
	var gw = w/numX;
	var gh = h/numY;
	// drawing the vertical line
	var verticalLine = new Graphics();
	verticalLine.beginFill(Graphics.getRGB(101, 60, 176));
	verticalLine.drawRect(0,0,gw * 0.02,gh*(numY+2));
	var vs;
	// placing the vertical lines:
	// we're placing 1 more than requested
	// to have seamless scrolling later
	for ( var c = -1; c < numX+1; c++) {
		vs = new Shape(verticalLine);
		vs.snapToPixel = true;
		vs.x = c * gw;
		vs.y = -gh;
		grid.addChild(vs);
	}
	// drawing a horizontal line
	var horizontalLine = new Graphics();
	horizontalLine.beginFill(Graphics.getRGB(101, 60, 176));
	horizontalLine.drawRect(0,0,gw*(numX+1),gh * 0.02);
	var hs;
	// placing the horizontal lines:
	// we're placing 1 more than requested
	// to have seamless scrolling later
	for ( c = -1; c < numY+1; c++ ) {
		hs = new Shape(horizontalLine);
		hs.snapToPixel = true;
		hs.x = 0;
		hs.y = c * gh;
		grid.addChild(hs);
	}

	// return the grid-object
	return grid;
}

And when the game is initialized, don’t forget to add the grid to the stage:

// setting up 'constants' for the number of vertical
// and horizontag background lines - play around with those values
var	GRID_HORIZONTAL = 8,
	GRID_VERTICAL = 4;

// and the following will be added to 'self.initializeGame'
background = self.createBgGrid(GRID_HORIZONTAL,GRID_VERTICAL);
stage.addChild(background);

To emphasize movement we will make the background move with about 50% of the world-movement creating a parallax-effect. We accomplish that by adding the following to the ‘self.tick’-method:

// the background 'moves' about 45% of the speed of the world-object
// and it's position snaps back to zero once it's reached a limit 
background.x = (world.x * .45) % (w/GRID_HORIZONTAL); // horizontal
background.y = (world.y * .45) % (h/GRID_VERTICAL);   // vertical

Note: This is pretty much the most simple way to make a background move seamlessly as the world moves, however if you have a more complex background you will probably have to use either a greater modulo(%) or handle you background-movement individually.

The changes above should already result in something similar to this:

Pretty simple – right?

More Background Parallax

self.createPixelLine = function(width) {
	// adjusting the width to the games scale
	// but not smaller than 1px and round it
	// to only have full pixels to render or
	// anti-aliasing will slow everything down
	width = Math.max(Math.round(width * scale),1);

	// drawing the line
	vl = new Graphics();
	vl.beginFill(Graphics.getRGB(255,255,255));
	vl.drawRect(0,0,width,h);

	lineShape = new Shape(vl);
	lineShape.snapToPixel = true;
	// the thinner the line, the less alpha
	// to make it look like it's further away
	lineShape.alpha = width * .25;
	// if it's further away, make it move slower
	lineShape.speedFactor = 0.3 + lineShape.alpha * 0.3 + Math.random() * 0.2;
	// the range defines when the line will be
	// moved back to the end of the screen
	lineShape.range = w + Math.random() * w * .3;
	// every line needs an offset, so they
	// don't start off at the same position
	lineShape.offsetX = Math.random() * w;
	
	return lineShape;
}

And when we initialize the game, we will just create 4(or how many we want) of those lines:

// create and add another background-
// /parallax-layer
background_2 = new Container();
stage.addChild(background_2);
for ( var c = 0; c < 4; c++) {
	// create a line/ distant waterfall
	var line = self.createPixelLine((Math.random()*3+1)|0);
	// add it to the scene
	background_2.addChild(line);
	// and push it to the parallaxObjects
	// don't forget to initialize that array
	parallaxObjects.push(line);
}

And now we will make those lines move, just we like we made the grid move (it’s a little more complex this time, but the basic idea behind it, is the same):

l = parallaxObjects.length;
for ( c = 0; c < l; c++ ) {
	p = parallaxObjects[c];
	// just change the x-coordinate
	// a change in the y-coordinate would not have any
	// result, since it's just a white line
	p.x = ((world.x * p.speedFactor - p.offsetX) % p.range) + p.range;
}

And voila – now we got a pretty decent looking parallax-background already, of course with this way, it’s pretty simple to use just any graphic instead of white line, just add some vertcal-movement as well, and it should be good to go. The current result after adding all parallax elements looks like this:

Animations

The basic way for creating a SpriteSheet-Animation in EaselJS looks like this:

// defining the spriteSheetData
// this whole object can also be
// stored in a JSON-file, however
// by resizing my assets with my
// custom algorithm this would make
// things more complicated
var waterFallSpriteSheetData = {
	images: [assets[WATERFALL_IMAGE]],
	frames: {
		// dimensions of the animation
		height: 256 * scale,
		width: 8 * scale,
		// number of frames
		count: 3
	},
	animations: {
		// we call this animation 'default'
		default: {
			// it contains all 3 frames
			frames:[0, 1, 2],
			// and it runs with a decent speed
			frequency: 5
		}
	}
}
// ...

// and now we can initialize an animation at any time
var spriteSheet = new SpriteSheet(waterFallSpriteSheetData);
var waterfall = new BitmapAnimation(spriteSheet);
waterfall.snapToPixel = true;
waterfall.gotoAndPlay('default');

CAUTION: EaselJS version 0.4.2 does NOT support Canvas-Elements in SpriteSheets, however our scaling-algorithm creates a Canvas-Element, meaning that we have to UPDATE our version of EaselJS – you can download the “NEXT-Version” on github.com/CreateJS/EaselJS – However, be aware, that this version uses namespacing, the simplest fix to get our game running with the “NEXT-Version” is to add the following into our index.html BEFORE loading EaselJS:

<script>
	var createjs = window;
</script>
<!-- now your can load the rest -->
<script src="js/easeljs-NEXT.min.js"></script>
<script src="js/utils.js"></script>
<script src="js/hero.js"></script>
<script src="js/jumpy.js"></script>

Note: The SpriteSheet-Data CAN also be stored and loaded from a JSON – but in this case the SpriteSheet-Data contans dynamic values, like the size and the image, that’s why I prefer to just initialize the whole thing within a JS method. For a more detailed view on all the possible attributes of a SpriteSheet, please refer to: http://createjs.com/Docs/EaselJS/SpriteSheet.html.

As my next step I created a new layer in the front to add the waterfalls to and added a method that would add a waterfall to every platform with a probability of 35%. Since this is just placing and moving objects, I’m not going into detail about what lines of code I added where – for details please download and view the sourcecode.

As a final step I then added a fly to fly around our hero, it’s based on a simple 2-frame animation, and its movement is the following:

// the movement of the fly
// calculate an offset to create a "swirling-like" behaviour
fly.offsetX = ( Math.cos(ticks/10) * 10) * scale;
fly.offsetY = ( Math.sin(ticks/ 7) *  5) * scale;
// smoothly follow the hero by 10% of the distance every frame
fly.x = fly.x + (hero.x - fly.x) * .1 + fly.offsetX;
fly.y = fly.y + (hero.y - fly.y) * .1 + fly.offsetY;

• Part 1: User-Input (Keystrokes, MouseClick, Touch)  & Movement
• Part 2: Collisions between objects
• Part 3: Movement&More Collision
• Part 4: Adjustments for mobile devices
• Part 5: Polishing up the game with animations & eye candy

Open this http://demos.indiegamr.com/jumpy/part4/index_nearestNeighbor.html in a new browser-window and see how it adjusts to your window-size as you reload the page after resizing the window.

As allways: There are many ways to do this, all will pros and cons, I’m going to explain two (fairly simple) ways to do this.

Method I – Linear Scaling: Easy&straight forward

1. Calculate the minimum-scale from the width&height based on a default-width & default hight
2. Multiply every (scale-relevant) value of the game with that scale(e.g: dimensions of objects, velocities, ect..)

Calculating the scale is just one line: Okay in my case it’s 3, because I added variables for the default-dimensions:

/* defined globally */
var BASE_WIDTH = 800,
    BASE_HEIGHT = 400;
// this was new to me here: i tried using 'const' for those values, instead
// of 'var' which was working fine until i tried it with ...guess what: IE!

/* when initializing the _game() */
var w = getWidth(),
    h = getHeight(),
    scale = Math.min(w/BASE_WIDTH,h/BASE_HEIGHT);

// to make the scale accessbile from the 'outsite' through
// Game.scale, we assign it to the Game-object
self.scale = scale;

So now that we have our scale-value: We are going to multiply every value, relevant to the scale, with it. As this involves quite a few parts of the code, instead of posting the whole updated source-code I’m going to list a few examples, and you can download the full source as always at the end of the page.

// e.g: when setting up the objects or position them
hero.x = 50 * scale;
hero.y = h/2 + 50 * scale;
hero.scaleX = hero.scaleY = scale;

// or when resetting attributes like velocity
Hero.prototype.reset = function() {
    this.velocity = {x:10*Game.scale,y:25*Game.scale};
    this.onGround = false;
    this.doubleJump = false;
};

// or when updating values
this.velocity.y += 1 * Game.scale;

Adjustments

function getBounds(obj,rounded) {
  /* 
     I left out the calculation of the bounds, this is
     described in Part2
  */
  // and now round everything to get integer values
  if ( rounded ) {
    bounds.x = (bounds.x + (bounds.x > 0 ? .5 : -.5)) | 0;
    bounds.y = (bounds.y + (bounds.y > 0 ? .5 : -.5)) | 0;
    bounds.width = (bounds.width + (bounds.width > 0 ? .5 : -.5)) | 0;
    bounds.height = (bounds.height + (bounds.height > 0 ? .5 : -.5)) | 0;
  }
  return bounds;
}

You don’t have to fully understand bitwise operations, but as a basic fact you should know, that with any bitwise operation all decimals will be erased. However, for optimizing code it is allways helpfull to know how bitwise works!

So all values from the returned bounds-rectangle will be integer values, to prevent the method from not detecting a collision, but then moving the object for example 0.5px too far, thus creating a collision-situation.
Rounding values like the position or the velocity of an object is in 90% of the cases a good thing to do, as it is basically impossible to spot a difference between rounded- and non-rounded pixel-values while it is (on most platforms) way faster for the canvas to render on pixel instead of subpixel values. So: use integer-values or for EaselJS-Objects: myObject.snapToPixel = true; – it is faster and in most cases you won’t see the difference.

That’s it with Method I of adjusting a canvas-app to the screen-size, you might think: ‘Looks good to me, why should I use anything else?!’ – here’s the reason: The following image shows two scaled versions of Method I and Method II – and since we are building a retro-/pixel-style game, guess which method we are going to use

Method II – Nearest Neighbor Scaling: keep hard pixel-edges

function nearestNeighborScale(img, scale)
{
  // to have a good looking scaling
  // we will snap all values to 0.5-steps
  // so 1.4 e.g. becomes 1.5 - you can also
  // set the snapping to 1.0 e.g.
  // however I would recommend to use only 
  // a multiple of 0.5 - but play around
  // with it and see the results
  scale = snapValue(scale,.5);
  if ( scale <= 0 ) scale = 0.5;

  // the size of the "pixels" in the new images
  // will be rounden to integer values, as drawing
  // a rect with 1.5x1.5 would result in half-transparent
  // areas
  var pixelSize = (scale+0.99) | 0;

  // getting the data-array containing all the pixel-data
  // from our source-image
  var src_canvas = document.createElement('canvas');
  src_canvas.width = img.width;
  src_canvas.height = img.height;
  var src_ctx = src_canvas.getContext('2d');
  src_ctx.drawImage(img, 0, 0);
  var src_data = src_ctx.getImageData(0, 0, img.width, img.height).data;
  
  // setting up the new, scaled image
  var dst_canvas = document.createElement('canvas');
  // just to be sure, that no pixel gets lost, when
  // we scale the image down, we add 1 and floor the
  // result
  dst_canvas.width = (img.width * scale+1) | 0;
  dst_canvas.height = (img.height * scale+1) | 0;
  var dst_ctx = dst_canvas.getContext('2d');

  // reading each pixel-data from the source
  // and drawing a scaled version of that pixel
  // to the new canvas
  var offset = 0;
  for (var y = 0; y < img.height; ++y) {
      for (var x = 0; x < img.width; ++x) {
          var r = src_data[offset++];
          var g = src_data[offset++];
          var b = src_data[offset++];
          var a = src_data[offset++] / 255; // the alpha value needs to be divided
          dst_ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
          dst_ctx.fillRect(x * scale, y * scale, pixelSize, pixelSize);
      }
  }

  return dst_canvas;
}

function snapValue(value,snap)
{
  var roundedSnap = (value/snap + (value > 0 ? .5 : -.5)) | 0;
  return roundedSnap * snap;
}

So when the game gets initialized, we scale any bitmap loaded:

self.initializeGame = function() {
  assets[HERO_IMAGE] = nearestNeighborScale(assets[HERO_IMAGE], scale);
  assets[PLATFORM_IMAGE] = nearestNeighborScale(assets[PLATFORM_IMAGE], scale);
  // ...
  // see source for the rest of initializing part(no changes there)

And then again, like with ‘Method I’ we have to adjust every scale-relevant value, like velocities, positions EXCEPT for any scaleX or scaleY values, because our nearsetNeighborScale-method did that already. Also, just to be on the save side, we also do the collision-detection adjustments here (see bounds-rounding further up in the article).

Compare both methods side by side

Download the sources: here.

Agenda

• Part 1: User-Input (Keystrokes, MouseClick, Touch)  & Movement
• Part 2: Collisions between objects
• Part 3: Movement&More Collision
• Part 4: Adjustments for mobile devices
• Part 5: Polishing up the game with animations & eye candy

So this is going to be the result of this part:

Refining the collision detection

Even though the collision detection works fine with one other object, there are some flaws that you will notice when adding more than one object the hero can collide with. So for example in the last part I described how we can prevent the hero from “ghosting through” an obstacle when he’s going really fast – and the described way to check this works fine, so I checked if the hero’s y-position changes to the other side of the obstacle without him detecting a collision – however what I forgot to check there was whether the hero was even  on the same x-position as the obstacle. I now created a new method for the utils-class called ‘calculateCollision’, that I will also use for calculating horizontal collisions later:

function calculateCollision(obj, direction, collideables, moveBy)
{
      moveBy = moveBy || {x:0,y:0};
      if ( direction != 'x' && direction != 'y' ) {
        direction = 'x';
      }
      var measure = direction == 'x' ? 'width' : 'height',
        oppositeDirection = direction == 'x' ? 'y' : 'x',
        oppositeMeasure = direction == 'x' ? 'height' : 'width',

        bounds = getBounds(obj),
        cbounds,
        collision = null,
        cc = 0;

    // for each collideable object we will calculate the
    // bounding-rectangle and then check for an intersection
    // of the hero's future position's bounding-rectangle
    while ( !collision && cc < collideables.length ) {
      cbounds = getBounds(collideables[cc]);
      if ( collideables[cc].isVisible ) {
        collision = calculateIntersection(bounds, cbounds, moveBy.x, moveBy.y);
      }

      if ( !collision && collideables[cc].isVisible ) {
        // if there was NO collision detected, but somehow
        // the hero got onto the "other side" of an object (high velocity e.g.),
        // then we will detect this here, and adjust the velocity according to
        // it to prevent the Hero from "ghosting" through objects
        // try messing with the 'this.velocity = {x:0,y:125};'
        // -> it should still collide even with very high values
        var wentThroughForwards  = ( bounds[direction] < cbounds[direction] && bounds[direction] + moveBy[direction] > cbounds[direction] ),
          wentThroughBackwards = ( bounds[direction] > cbounds[direction] && bounds[direction] + moveBy[direction] < cbounds[direction] ),
          withinOppositeBounds = !(bounds[oppositeDirection]+bounds[oppositeMeasure] < cbounds[oppositeDirection])
                    && !(bounds[oppositeDirection] > cbounds[oppositeDirection]+cbounds[oppositeMeasure]);

        if ( (wentThroughForwards || wentThroughBackwards) && withinOppositeBounds ) {
          moveBy[direction] = cbounds[direction] - bounds[direction];
        } else {
          cc++;
        }
      }
    }

    if ( collision ) {
      var sign = Math.abs(moveBy[direction]) / moveBy[direction];
      moveBy[direction] -= collision[measure] * sign;
    }

    return collision;
}

 
I won’t go much into detail about the method, as there is just one major change, beside the fix of “ghosting” that I mentioned above: The method now takes care of the ‘moveBy’ object, e.g.: If your hero wants to move by {x:0, y:15} and there is a collision detected at y=5, the method changes the move by to {x:0, y:5} so you allways automatically know how far you can move the hero until it collides.
This makes the hero’s tick-method a lot cleaner:

Hero.prototype.tick = function () {
	this.velocity.y += 1;

	var moveBy = {x:0, y:this.velocity.y},
		collision = null,
		collideables = Game.getCollideables();

	collision = calculateCollision(this, 'y', collideables, moveBy);
	// moveBy is now handled by 'calculateCollision'
	// and can also be 0 - therefore we won't have to worry
	this.y += moveBy.y;

	if ( !collision ) {
		if ( this.onGround ) {
			this.onGround = false;
			this.doubleJump = true;
		}
	} else {
		// the hero can only be 'onGround'
		// when he's hitting floor and not
		// some ceiling
		if ( moveBy.y > 0 ) {
			this.onGround = true;
			this.doubleJump = false;
		}
		this.velocity.y = 0;
	}
        // and now handle the x-movement
	moveBy = {x:this.velocity.x, y:0};
	collision = calculateCollision(this, 'x', collideables, moveBy);
	this.x += moveBy.x;
};

Movement

this.velocity = {x:10,y:25};

We need more platforms!

// add a platform for the hero to collide with
self.addPlatform(50 - assets[PLATFORM_IMAGE].width/2, h/1.25);

// the number of platforms to be added depends on the screen-width
var c, l = w / assets[PLATFORM_IMAGE].width * 1.5,
    atX=0,
    atY = h/1.25;

for ( c = 1; c < l; c++ ) {
	// define a random x-koordinate relative to the last one
	var atX = (c-.5) * assets[PLATFORM_IMAGE].width*2 + (Math.random()*assets[PLATFORM_IMAGE].width-assets[PLATFORM_IMAGE].width/2);
	// define a random y-koordinate relative to the last one
	var atY = atY + Math.random() * 300 - 150;
	// add the platform
	self.addPlatform(atX,atY);
}

Now that we’ve added all the platform, we can jump around, however our hero still keeps running out of the view, to follow the hero with the camera, we simply reposition the “world” every frame according to the hero’s position – add this to the main-tick-method:

// if the hero "leaves" it's bounds of
// screenWidth * 0.3 and screenHeight * 0.3(to both ends)
// we will reposition the "world-container", so our hero
// is allways visible
if ( hero.x > w*.3 ) {
	world.x = -hero.x + w*.3;
}
if ( hero.y > h*.7 ) {
	world.y = -hero.y + h*.7;
} else if ( hero.y < h*.3 ) {
	world.y = -hero.y + h*.3;
}

Now we have: a few platforms, the “camera” following our hero, but the course is not infinite yet!
There are a quite a few ways to make the course infinite, I’m just going to describe one: Since the hero cannot walk to the left, everything to the left of the visible screen can be “thrown” away, since it won’t become visible again! – However we are not going to throw away the platform that move out of the screen, we are just going to reposition them at the end of the track:

So in the jumpy.js with every tick() we also execute this check:

for ( var c = 0; c < collideables.length;; c++ ) {
	var p = collideables[c];
	if ( p.localToGlobal(p.image.width,0).x < -10 ) {
		self.movePlatformToEnd(p);
	}
}

and then we of course need to define the method “movePlatformToEnd()”:

self.movePlatformToEnd = function(platform) {
	platform.x = self.lastPlatform.x + platform.image.width*2 + Math.random()*platform.image.width*2 - platform.image.width;
	platform.y = self.lastPlatform.y + Math.random() * 300 - 150;
	self.lastPlatform = platform;
}

As you can see – the platform will be positioned according to the “lastPlatform’s” position and then made the ‘lastPlatform’ itself – so when we first create all the platforms with ‘addPlatform()’ we also have to add this last line self.lastPlatform = platform;.

And that’s pretty much it – to round everything up, you can add a “reset()” method – to reset everything once the hero drops below a certain y-koordinate for example. Such a method should be rather trivial, so I’m not gonna go into detail here but I implemented such a method, so checkout the sources if you want to take a look at it.

Download the sources: here.

Agenda

• Part 1: User-Input (Keystrokes, MouseClick, Touch)  & Movement
• Part 2: Collisions between objects
• Part 3: Movement&More Collision
• Part 4: Adjustments for mobile devices
• Part 5: Polishing up the game with animations & eye candy

Types of Collision Detection

There are several types of collision detection methods, I’m going to explain two of the most commong ways to detect a collision – if you want more/detailed information on the subject I would encourage you to google for it or try this article as an introduction to the topic.

1) Distance Based- or Circle-Collision

This is probably the simplest type of collision detection. What you basically have to do is to set a collision-radius for each object, then calculate the distance between the objects and see if the distrance is lower than the radii combined. However the following image shows, that this kind of detection won’t be suitable for our platform game:

As you can see, with this method, a collision is detected way before an actual collision occures. This is due to the fact, that the platform has a very different hight and width. However a circle-collision-detection would be perfect for any Pool-game for example.

2) Bounding-Box-Collision

This type of  detection is (is many cases, not all) more accurate than the circle-based detection and it basically works by defining a rectangle of the boundaries for each object and then check if those two rectangles intersect in any way.

There are two(or probably more, but i’m only going to point out two of them) ways to collect a collision this way.

The first method is actually not checking for a collision, but for non-collisions. This simply requires four if clauses:

• a) is the space between rect1.left and rect2.right ?
• b) is there space between rect1.right and rect2.left ?
• c) is there space between rect1.top and rect2.bottom ?
• d) is there space between rect1.bottom and rect2.top ?

If any (1 or more) of the statements above are true, then there is no intersection between the rectangles, however if all of the statements are false, there must be an intersection.

And here is the according piece of code:

function checkRectIntersection(rect1,rect2) {
  if ( rect1.x >= rect2.x + rect2.width    // a)
    || rect1.x + rect1.width <= rect2.x    // b)
    || rect1.y >= rect2.y + rect2.height   // c)
    || rect1.y + rect1.height <= rect2.y ) // d)
      return false;

  return true;
};

Even though this method looks super-simple – we are unfortunately NOT going to use this method. Instead we will use a method that checks for an intersection AND returns the size of the intersecting area.

To explain this a little better i drew up a graphic for this:

So what we are going to do, is calculate the X- and the Y-overlapping value, if both values are greater than 0, there is an intersecting area.

dx = |cx1 - cx2| - (hw1 + hw2)
dy = |cy1 - cy2| - (hh1 + hh2)

=> if  d_x < 0 and d_y < 0 then there is a collision, in this case we can return -d_x and -d_y as overlapping values

And the method in JS looks like this – I also added two parameters x and y, to calculate where the rect1 wants to move to:

function calculateIntersection(rect1, rect2, x, y) {
  // prevent x|y from being null||undefined
  x = x || 0; y = y || 0;

  // first we have to calculate the
  // center of each rectangle and half of
  // width and height
  var dx, dy, r1={}, r2={};
  r1.cx = rect1.x+x+(r1.hw = (rect1.width /2));
  r1.cy = rect1.y+y+(r1.hh = (rect1.height/2));
  r2.cx = rect2.x + (r2.hw = (rect2.width /2));
  r2.cy = rect2.y + (r2.hh = (rect2.height/2));

  dx = Math.abs(r1.cx-r2.cx) - (r1.hw + r2.hw);
  dy = Math.abs(r1.cy-r2.cy) - (r1.hh + r2.hh);

  if (dx < 0 && dy < 0) {
    return {width:-dx,height:-dy};
  } else {
    return null;
  }
}

This is also the method we are going to use in the game. There are plenty of other methods that are probably more accurate(a mix of Circle/BoundBox-collision, Pixel-perfect collision ect.), but usually take longer for their calculation. And for the sake of keeping everything simple our current method will do a pretty good job and you won’t really notice any flaws of the collisions in the game. I could spend a lot more time on figuring out a pixel-perfect collision algorithm ect., just to get rid of the last “free spaces” – however it won’t look that much more realistic to be worth the effort. This is actually a good tipp for new game-developers:

Go with simple!:
In 90% of the cases a simple version works just (almost) as good as a ‘perfect’ version, that would have taken much much longer to develop. The same with making a method as universial as possible because you say “I might need it later for something else” – there’s a very good chance, that you will not need it- and if you do: Do it when you need it, you won’t loose any time.

So now we’ve got our collision-method – how do we use it in the game?

Implementation

Before we can acutally use the detection-method in the game, we need the bounding rectangle of our EaselJS DisplayObject – however since EaselJS is not providing such a function(yet?), we will use the method from here and put it into our utils.js(included in the zip-file from Part 1) as well as the “calculateIntersection()” method.

We then will update the tick-method of our Hero-class with the following:

Hero.prototype.tick = function () {
    this.velocity.y += 1;

    // preparing the variables
    var c = 0,
        cc = 0,
        addY = this.velocity.y,
        bounds = getBounds(this),
        cbounds,
        collision = null,
        collideables = Game.getCollideables();

    cc=0;
    // for each collideable object we will calculate the
    // bounding-rectangle and then check for an intersection
    // of the hero's future position's bounding-rectangle
    while ( !collision && cc < collideables.length ) {
			cbounds = getBounds(collideables[cc]);
			if ( collideables[cc].isVisible ) {
				collision = calculateIntersection(bounds, cbounds, 0, addY);
			}

			if ( !collision && collideables[cc].isVisible ) {
				// if there was NO collision detected, but somehow
				// the hero got onto the "other side" of an object (high velocity e.g.),
				// then we will detect this here, and adjust the velocity according to
				// it to prevent the Hero from "ghosting" through objects
				// try messing with the 'this.velocity = {x:0,y:25};'
				// -> it should still collide even with very high values
				if ( ( bounds.y < cbounds.y && bounds.y + addY > cbounds.y )
				  || ( bounds.y > cbounds.y && bounds.y + addY < cbounds.y ) ) {
					addY = cbounds.y - bounds.y;
				} else {
					cc++;
				}
			}
		}

    // if no collision was to be found, just
    // move the hero to it's new position
    if ( !collision ) {
        this.y += addY;
        if ( this.onGround ) {
            this.onGround = false;
            this.doubleJump = true;
        }
    // else move the hero as far as possible
    // and then make it stop and tell the
    // game, that the hero is now "an the ground"
    } else {
        this.y += addY - collision.height;
        if ( addY > 0 ) {
            this.onGround = true;
            this.doubleJump = false;
        }
        this.velocity.y = 0;
    }
}

now we have to add a platform for the hero to collide with, I therefor create a method called “addPlatform”, that should mostly explain itself:

this.addPlatform = function(x,y) {
    x = Math.round(x);
    y = Math.round(y);

    var platform = new Bitmap(assets[PLATFORM_IMAGE]);
    platform.x = x;
    platform.y = y;
    platform.snapToPixel = true;

    world.addChild(platform);
    collideables.push(platform);
}

also I did update the javascript-file holding the main methods and the game loop ect. quite a bit(to make the post not too big, I left out a few parts – download the ZIP-file to get the full source):

var  HERO_IMAGE = 'assets/hero.png',
     PLATFORM_IMAGE = 'assets/platform.png';

function _game()
{
    window.Game = this;
    var self = this, ticks = 0, canvas, stage, world, hero,
        w = getWidth(), h = getHeight(), assets = [], keyDown = false;

    // holds all collideable objects
    var collideables = [];
    this.getCollideables = function() { return collideables; };

    // starts to load all the assets
    this.preloadResources = function() {
        self.loadImage(HERO_IMAGE);
        self.loadImage(PLATFORM_IMAGE);
    }

    var requestedAssets = 0, loadedAssets = 0;
    // loads the assets and keeps track 
    // of how many assets where there to
    // be loaded
    this.loadImage = function(e) {
        var img = new Image();
        img.onload = self.onLoadedAsset;
        img.src = e;

        assets[e] = img;

        ++requestedAssets;
    }
    // each time an asset is loaded
    // check if all assets are complete
    // and initialize the game, if so
    this.onLoadedAsset = function(e) {
        ++loadedAssets;
        if ( loadedAssets == requestedAssets ) {
            self.initializeGame();
        }
    }

    this.initializeGame = function() {
        /* setting up stage&listeners - download ZIP */

        // creating the Hero, and assign an image
        // also position the hero in the middle of the screen
        hero = new Hero(assets[HERO_IMAGE]);
        hero.x = w/2
        hero.y = h/2;
        world.addChild(hero);

        // add a platform for the hero to collide with
        self.addPlatform(w/2 - assets[PLATFORM_IMAGE].width/2, h/1.25);
    }

    this.tick = function(e)
    {
        ticks++;
        hero.tick();
        stage.update();
    }

    // this method adds a platform at the
    // given x- and y-coordinates and adds
    // it to the collideables-array
    this.addPlatform = function(x,y) {
        x = Math.round(x);
        y = Math.round(y);

        var platform = new Bitmap(assets[PLATFORM_IMAGE]);
        platform.x = x;
        platform.y = y;
        platform.snapToPixel = true;

        world.addChild(platform);
        collideables.push(platform);
    }

    /* input-listeners - download ZIP */

    self.preloadResources();
};

new _game();

When you try this out – it should look similar to this:

Some of you might noticed that, the hero is also able to jump twice now: I removed the reset()-method from Hero.js and replaced it with a similar jump()-method:

Hero.prototype.jump = function() {
    // if the hero is "on the ground"
    // let him jump, physically correct!
    if ( this.onGround ) {
        this.velocity.y = -17;
        this.onGround = false;
        this.doubleJump = true;
    // we want the hero to be able to
    // jump once more when he is in the
    // air - after that, he has to wait
    // to lang somewhere on the ground
    } else if ( this.doubleJump ) {
        this.velocity.y = -17;
        this.doubleJump = false;
    }
}

And that’s pretty much all there is to get a basic collision detection working – Again: There are PLENTY of other methods, some of them maybe better in performance and/or accuracy, however I find this approach to be both fairly simple, effective and easy to follow – but suggestions for different approaches are allways welcome, just leave a comment!

The sources for this part can be found right here: Download Part2.zip

Agenda

• Part 1: User-Input (Keystrokes, MouseClick, Touch)  & Movement
• Part 2: Collisions between objects
• Part 3: Movement&More Collision
• Part 4: Adjustments for mobile devices
• Part 5: Polishing up the game with animations & eye candy