Collision of two spine objects

starWars · January 31, 2021, 11:48am

I don’t understand how to properly collide two objects. I am using spine objects.
I want the gift object to disappear when the hero collides with the object.
I tried different ways, but it doesn’t work. maybe I went wrong in some place, and this code is wrong …

 var HeroControls = pc.createScript("heroControls");

  HeroControls.prototype.initialize = function () {
      this.state = "idle";
  };

  HeroControls.prototype.update = function (dt) {
    var keyboard = this.app.keyboard;
    var spine = this.entity.spine;
    
    if (keyboard.isPressed(pc.KEY_SPACE)) {
      if (this.state !== "attack") {
        spine.state.setAnimation(0, "bunny_with_gun", true);
        this.state = "attack";
      }
    } else if (keyboard.wasPressed(pc.KEY_DOWN) || app.keyboard.isPressed(pc.KEY_S)) {
      if (this.state !== "down") {
        spine.state.setAnimation(1, "down", false);
        this.state = "down";
        console.log("dkljsfoasdhf")
      }
    } else if (keyboard.isPressed(pc.KEY_UP)|| app.keyboard.isPressed(pc.KEY_W)) {
      if (this.state !== "up") {
        spine.state.setAnimation(2, "jump_slow", false);
        spine.state.setAnimation(3, "run_slow", true);
        this.state = "up";
      }
    } else {
      if (this.state !== "idle") {
        spine.state.setAnimation(0, "bunny_idle", true);
        this.state = "idle";
        }
      }
    }

    // Create the hero character
    var hero = new pc.Entity();
    hero.addComponent("spine", {
      atlasAsset: assets[1].id,
      skeletonAsset: assets[2].id,
      textureAssets: [ assets[3].id ]
    });
    hero.addComponent("script");
    hero.script.create("heroControls");
    app.root.addChild(hero);
    hero.translate(-4, -2, -2);


    hero.spine.state.defaultMix = 0.2;
    hero.spine.state.data.setMix("bunny_idle", "run_slow", 0.2);
    hero.spine.state.data.setMix("bunny_idle", "bunny_with_gun", 0.2);

    hero.spine.spine.skeleton.setSlotsToSetupPose();
    hero.spine.state.setAnimation(0, "bunny_idle", true);
    hero.spine.state.data.skeletonData.animations[0];
    
  
    hero.spine.states[1] = new spine.AnimationState(hero.spine.spine.stateData);


    btn_play.addEventListener('click', function(){
    
      bg.spine.state.setAnimation(0, "fence_base_slow", true);
      
      // gift
      var giftControls = pc.createScript("giftControls");

      giftControls.prototype.initialize = function() {
        this.leftSide = false;
        this.secsSinceLastFlip = 1;
      }
      
      
      giftControls.prototype.update = function(dt) {
        if (this.secsSinceLastFlip > -10) {
          this.leftSide = !this.leftSide;
          this.secsSinceLastFlip = 0;
        }
      
        if(this.leftSide){
          this.entity.translate(-12*dt,0*dt,0);

        } else{
          this.entity.translate(1*dt,0*dt,0);
        }
        this.secsSinceLastFlip += dt;

      }

  
        var gift = new pc.Entity();
        gift.addComponent("spine", {
          atlasAsset: assets[8].id,
          skeletonAsset: assets[9].id,
          textureAssets: [ assets[10].id]
        });

        gift.addComponent("script");
        gift.script.create("giftControls");
        app.root.addChild(gift);
    
        gift.translate(13, -3, -1);
        gift.spine.states[1] = new spine.AnimationState(gift.spine.spine.stateData);
        gift.spine.state.setAnimation(0, "gift_idle", true);
        gift.spine.spine.priority = 2;

        hero.spine.state.setAnimation(0, "run_slow", true);
        document.getElementById("btn_play").style.display = 'none';

      });
  
      hero.spine.spine.priority = 3; var HeroControls = pc.createScript("heroControls");

  HeroControls.prototype.initialize = function () {
      this.state = "idle";
  };

  HeroControls.prototype.update = function (dt) {
    var keyboard = this.app.keyboard;
    var spine = this.entity.spine;
    

    if (keyboard.isPressed(pc.KEY_SPACE)) {
      if (this.state !== "attack") {
        spine.state.setAnimation(0, "bunny_with_gun", true);
        this.state = "attack";
      }
    } else if (keyboard.wasPressed(pc.KEY_DOWN) || app.keyboard.isPressed(pc.KEY_S)) {
      if (this.state !== "down") {
        spine.state.setAnimation(1, "down", false);
        this.state = "down";
      }
    } else if (keyboard.isPressed(pc.KEY_UP)|| app.keyboard.isPressed(pc.KEY_W)) {
      if (this.state !== "up") {
        spine.state.setAnimation(2, "jump_slow", false);
        spine.state.setAnimation(3, "run_slow", true);
        this.state = "up";
      }
    } else {
      if (this.state !== "idle") {
        spine.state.setAnimation(0, "bunny_idle", true);
        this.state = "idle";
        }
      }
    }

    // Create the hero character
    var hero = new pc.Entity();
    hero.addComponent("spine", {
      atlasAsset: assets[1].id,
      skeletonAsset: assets[2].id,
      textureAssets: [ assets[3].id ]
    });
    hero.addComponent("script");
    hero.script.create("heroControls");
    app.root.addChild(hero);
    hero.translate(-4, -2, -2);


    hero.spine.state.defaultMix = 0.2;
    hero.spine.state.data.setMix("bunny_idle", "run_slow", 0.2);
    hero.spine.state.data.setMix("bunny_idle", "bunny_with_gun", 0.2);

    hero.spine.spine.skeleton.setSlotsToSetupPose();
    hero.spine.state.setAnimation(0, "bunny_idle", true);
    hero.spine.state.data.skeletonData.animations[0];
    
  
    hero.spine.states[1] = new spine.AnimationState(hero.spine.spine.stateData);


    btn_play.addEventListener('click', function(){
         
      // gift
      var giftControls = pc.createScript("giftControls");

      giftControls.prototype.initialize = function() {
        this.leftSide = false;
        this.secsSinceLastFlip = 1;
      }
      
      giftControls.prototype.update = function(dt) {
        if (this.secsSinceLastFlip > -10) {
          this.leftSide = !this.leftSide;
          this.secsSinceLastFlip = 0;
        }
      
        if(this.leftSide){
          this.entity.translate(-12*dt,0*dt,0);

        } else{
          this.entity.translate(1*dt,0*dt,0);
        }

        this.secsSinceLastFlip += dt;

      }

  
        var gift = new pc.Entity();
        gift.addComponent("spine", {
          atlasAsset: assets[8].id,
          skeletonAsset: assets[9].id,
          textureAssets: [ assets[10].id]
        });

        gift.addComponent("script");
        gift.script.create("giftControls");
        app.root.addChild(gift);
    
        gift.translate(13, -3, -1);
        gift.spine.states[1] = new spine.AnimationState(gift.spine.spine.stateData);
        gift.spine.state.setAnimation(0, "gift_idle", true);
        gift.spine.spine.priority = 2;

        hero.spine.state.setAnimation(0, "run_slow", true);
        document.getElementById("btn_play").style.display = 'none';

      });
  
      hero.spine.spine.priority = 3;

yaustar · January 31, 2021, 12:38pm

What are you using/doing to check for collision?

starWars · January 31, 2021, 12:53pm

I suppose I need to account for the distance to these objects, if so how should I do it?

if (hero >= gift) {
 console.log("1");
}

yaustar · January 31, 2021, 1:41pm

You can get the position of the two objects, get the difference between the positions and compare to a value.

var distance = entityA.getPosition().distance(entityB.getPosition());
if (distance <= someNumber) {
 // collided
}

starWars · January 31, 2021, 2:51pm

Shouldn’t the radius of objects be specified in someNumber? But it doesn’t work

var someNumber = hero.radius + gift.radius
var distance = hero.getPosition().distance(gift.getPosition());

if (distance <= someNumber) {
 console.log('1');
}

yaustar · January 31, 2021, 3:27pm

What values are you getting? Where is radius defined?

starWars · January 31, 2021, 3:33pm

My radius is not determined, since I use spine. I do not know how to correctly specify the size of an object, so that it would be possible to further prescribe conditions upon collision with it.

yaustar · January 31, 2021, 5:10pm

You could add a script to the spine objects that allow you to define the radius of the object.

That way, when you do this check, you can get those values from the scripts.

starWars · January 31, 2021, 5:14pm

How to do it correctly?

yaustar · January 31, 2021, 9:11pm

Are you using the engine only or the online editor?

starWars · February 1, 2021, 7:04am

I am only using the engine.

yaustar · February 1, 2021, 8:24am

In which case you set the radius on entity as a new property for ease.

hero.radius = 10;
gift.radius = 3;

I don’t think there is a way to get the size/bounds from spine.

starWars · February 4, 2021, 7:28am

Please tell me how to make such a debug

yaustar · February 4, 2021, 8:09am

You can use https://developer.playcanvas.com/en/api/pc.Application.html#renderLine to render the lines but working out the bounds will require working through the spine integration source and/or adding that functionality yourself.