Forums » Code » Per-Pixel Collision Detection Plugin

Plugin updated to v1.1!

Changelog:

v1.1

- Added initial test to verify in-game collision and that both entities have an associated animation sheet.
- Added comments to code for easier readability

Special thanks to jizaymes for finding this bug.

This plugin enables per-pixel collision detection with ImpactJS.

You can download the plugin on Github.

Nice :) (See, I knew it was possible :P)

Additional caveat, I'm really not sure this will work with iOSImpact. Dom's Drop game on iOSImpact for example doesn't pixify the images on loading the way it does normally nor does it draw at 5px granularity like it does in the regular web version - because I don't think getImageData is exposed via the minimalist canvas object.

So ig.Image.resize() doesn't work in iOSImpact?

Nope. It's actually replaced with a null function as per the plugins.ios.image module, because it's converted on the fly to a native Texture.

After looking Impact's game.js I found that it calls ig.Entity.touches function before it does the bitwise operation to check if the 2 entities can even collide. So if you have entities clustered together defined with:

type: ig.Entity.TYPE.A,
checkAgainst: ig.Entity.TYPE.B,

every unique pair will go through the per-pixel collision detection.

If

entity.type == ig.Entity.TYPE.NONE &&
entity.checkAgainst == ig.Entity.TYPE.NONE &&
entity.collides == ig.Entity.COLLIDES.NEVER

no collision check takes place. Otherwise, .touches() is called prior to .checkPair(). When .type matches .checkAgainst, .check() is called, otherwise it is not. Having .type not match .checkAgainst doesn't prevent the Entity from colliding, it allows for "special collision logic" - see the documentation for .type. But yes, that initial check should probably be rewritten as this:

entity.type == ig.Entity.TYPE.NONE &&
entity.checkAgainst == ig.Entity.TYPE.NONE ||
entity.collides == ig.Entity.COLLIDES.NEVER

This is in ig.game.checkEntities().

I'm having some problems using this code. After added the plugin to the directory structure, adding the requires line, I get the following error. I'm not sure where to start to diagnose this.

Uncaught TypeError: Cannot read property 'sheet' of null perpixel.js:64

            var a = this.currentAnim.sheet.image.alphas,
                b = other.currentAnim.sheet.image.alphas,
                i = yMax - yMin,
...

This was also applying to Entitys that are not visual (trigger zones, etc) so i had to add something like this in the top

if(other instanceof EntityZone ) { return true; }

also, didnt want this function being run for those zones so just put in a hack to skip them if its something used in weltmeister only.

if(this._wmDrawBox == true) { return true; }

Ran into some issues with just blindly returning true so I revamped this to include some of the bits of the original Impact touches function. I think this is good to go now.

        touches: function ( other ) {

		if( other.currentAnim == null || this.currentAnim == null ) {
			return !(
				this.pos.x >= other.pos.x + other.size.x ||
				this.pos.x + this.size.x <= other.pos.x ||
				this.pos.y >= other.pos.y + other.size.y ||
				this.pos.y + this.size.y <= other.pos.y
			);
		 } 

Great catch! I updated the plugin with your changes. Unfortunately, Weltmeister also uses .touches() for selecting an Entity with the mouse, so if you overwrite it, you're screwed. I added a check to the top:

//if in weltmeister or no associated animation sheet for either entity
//call parent method and ignore per-pixel
if( ig.global.wm || this.currentAnim === null || other.currentAnim === null ){
    return this.parent( other );
}

That'll take care of it. I credited you in the changelog. Thanks.

Thanks much quidmonkey, I'll be sure to credit you if I ever finish my game :)

I have a noob question since I'm new to javascript and new to impactjs. How do I use plugins, or how do I hook it up so impact uses it?

The default ImpactJS main.js looks like this:

ig.module(
	'game.main'
)
.requires(
	'impact.game',
	'impact.font',
	'impact.debug.debug'
)
.defines(function(){

MyGame = ig.Game.extend({

Add whatever plugin you'd like to the requires list:

ig.module(
	'game.main'
)
.requires(
	'impact.game',
	'impact.font',
	'impact.debug.debug',

    'plugins.perpixel'
)
.defines(function(){

MyGame = ig.Game.extend({

So this is a really awesome plugin, the only downside is I am trying to resolve the collisions that occur and the ig.Entity.solveCollision code does not take into account this library.

Has anyone encountered this issue and come up with a solution?

At the end of the day my goal is to make the floor of the level be dynamically added in from an unknown source which has the agreement that there will transparent pixels for free space and pixels with value to represent ground surface.

It doesn't work too bad with the built-in collision resolution, which separates entities based on their vel. For the floor, you'll have to cycle through both entities alpha arrays to find the per-pixel distance to move them apart so that your player can stand.

Nice plugin. Would be cool if it had per-pixel collision against the collision map as well, but that might be tricky.

Really new to ImpactJS and i would like to have a sample on how to use this plugin. Do I have to set collides, type and checkAgainst to None? Anyone has a sample project for this? I'm a bit confused...

Nobody?
I've past the weekend trying to figure out on how to use this plugin with 2 simples entity and never worked... I'm lost ;-(

Finally managed to make it work... stupid me was redifining the touches function instead of checking it's result. Great plugin!

Quote from Pat
Really new to ImpactJS and i would like to have a sample on how to use this plugin. Do I have to set collides, type and checkAgainst to None? Anyone has a sample project for this? I'm a bit confused... ...Finally managed to make it work...

Hey Pat, want to post an example of how you made this work? I'm sure people who come across it would be as happy to see an example as you would have when you first stumbled across this post. :)