Easeljs HitTest и hitRadius

Это мой код:

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();

Для hitTest я использую следующий код:

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

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

ПРОБЛЕМА: Когда мой игрок находится ниже моего монстра, я получаю сообщение «УДАР», но я хотел бы, чтобы оно срабатывало всякий раз, когда мой игрок бьет монстра, а не когда он находится под ним. Я играл с regX и regY как в Player, так и в Monster, но, похоже, это не работает. Кто-нибудь знает решение?


javascript createjs easeljs
person Axel Ardu    schedule 21.01.2013    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Я думаю, ваша проблема здесь в том, что вам нужен CollisionDetection, но hitTest() будет проверять только один пиксель, который в большинстве случаев используется для обнаружения взаимодействия с мышью и идеально подходит для этого. Однако использование его для обнаружения столкновений между двумя растровыми изображениями может потребовать немного больше работы, чем просто тестирование одного пикселя. Я бы посоветовал вам использовать мой класс CollisionDetection для растровых изображений и растровых анимаций, он работает с ограничивающими рамками или с точностью до пикселя, и вам в основном просто нужно изменить одну строку. Вы можете проверить это на Github: Bitmap Collision Detection for EaselJS Описание находится на странице github.com. (на всякий случай, если вы будете его использовать: дайте мне знать, если вы столкнетесь с какими-либо ошибками)

person olsn    schedule 21.01.2013
comment
Это очень полезно! спасибо! Не могли бы вы привести пример CollisionDectetion для двух растровых изображений? Я попробовал это, но это, кажется, не имеет никакого эффекта. (Возможно, я неправильно его использую) - person Axel Ardu; 22.01.2013
comment
В репозитории git есть пример файла, а также есть примеры в файле readme репо. - person olsn; 23.01.2013
comment
Нет, это не будет работать с фигурами, потому что вычислять границы фигуры с помощью JS на холсте очень сложно и требует больших аппаратных средств, по этому поводу было несколько дискуссий - может быть, мы увидим решение в будущем, но на данный момент оно будет работать только с растровыми изображениями (хотя не должно быть слишком сложно сделать обходной путь для кэшированных фигур) - person olsn; 20.08.2013