This is my code:

var spriteSheet = new createjs.SpriteSheet({
    images: ["images/mario2.png"],
    frames: {width:24, height:33, regX: 0, regY: 0},
    animations: {
        walk_right:     [5, 9],
        walk_up:        [10, 14],
        walk_down:      [15, 19],
        walk_left:      [0, 4]
    }
});


Player = new createjs.BitmapAnimation(spriteSheet);
Player.name = "Mario";
Player.gotoAndStop("walk_right");
Player.speed = 6;
Player.x = 30;
Player.y = 330;
//Player object toevoegen aan de stage
stage.addChild(Player);

    var monsterspritesheet = new createjs.SpriteSheet({
        images: ["images/MonsterA.png"], //image to use
        frames: {width: 64, height: 54, regX: 0, regY: 0},
        animations: {
            walk: [0, 9, "walk", 4],
            idle: [10, 20, "idle", 4]
        }
    });

Monster1 = new createjs.BitmapAnimation(monsterspritesheet);
Monster1.name = "Monster";
Monster1.gotoAndStop("walk");
Monster1.speed = 6;
Monster1.x = 180;
Monster1.y = 330;
stage.addChild(Monster1);
stage.update();

For hitTest I use the following code:

   var testpos = Player.globalToLocal(Monster1.x ,Monster1.y);

if (Player.hitTest(testpos.x, testpos.y) === true)
{
console.log("HIT");
}

THE PROBLEM: When my player is below my monster, i get the message "HIT" but I would like to get it to work whenever my player hits the monster and not when it is below it. I have been playing with regX and regY of both Player & Monster but it doesn't seem to work. Anyone knows the solution?

This is my code:

var spriteSheet = new createjs.SpriteSheet({
    images: ["images/mario2.png"],
    frames: {width:24, height:33, regX: 0, regY: 0},
    animations: {
        walk_right:     [5, 9],
        walk_up:        [10, 14],
        walk_down:      [15, 19],
        walk_left:      [0, 4]
    }
});


Player = new createjs.BitmapAnimation(spriteSheet);
Player.name = "Mario";
Player.gotoAndStop("walk_right");
Player.speed = 6;
Player.x = 30;
Player.y = 330;
//Player object toevoegen aan de stage
stage.addChild(Player);

    var monsterspritesheet = new createjs.SpriteSheet({
        images: ["images/MonsterA.png"], //image to use
        frames: {width: 64, height: 54, regX: 0, regY: 0},
        animations: {
            walk: [0, 9, "walk", 4],
            idle: [10, 20, "idle", 4]
        }
    });

Monster1 = new createjs.BitmapAnimation(monsterspritesheet);
Monster1.name = "Monster";
Monster1.gotoAndStop("walk");
Monster1.speed = 6;
Monster1.x = 180;
Monster1.y = 330;
stage.addChild(Monster1);
stage.update();

For hitTest I use the following code:

   var testpos = Player.globalToLocal(Monster1.x ,Monster1.y);

if (Player.hitTest(testpos.x, testpos.y) === true)
{
console.log("HIT");
}

THE PROBLEM: When my player is below my monster, i get the message "HIT" but I would like to get it to work whenever my player hits the monster and not when it is below it. I have been playing with regX and regY of both Player & Monster but it doesn't seem to work. Anyone knows the solution?

• javascript
• easeljs
• createjs

1 Answer 1

I think your issue here is that you need a CollisionDetection but hitTest() will only check for one pixel, which is in most cases used for mouse-interaction-detection and is perfect for it. However using it for detecting collisions between two bitmaps might need a little more work than just testing for one pixel. I would suggest you to use my CollisionDetection class for bitmaps and bitmapAnimations, it works with bounding boxes or pixel-perfect and you basically just need to change one line. You can check it out on Github: Bitmap Collision Detection for EaselJS Description is on the github. Page. (just in case you'll use it: let me know if you run into any bugs)