Detecting the collision

This content show you how to detecting collision between elements in your game.

Create element classes

The collision between elements that created by SetCollisionBound and AddCollisionTarget method. We have two class like as following.

class Fish:

// file: fish.js
import {Carem, CAREM_LIMIT_BOTTOM} from '@bapquad/carem'

export default class Fish 
{
  constructor(asset, scene) 
  {
    let fish = new Carem.StaticSprite(asset, 0, 0, 201, 120, scene);
    fish.SetCollisionBound(0, 0, 100, 60);
    fish.SetOrgin(100, 60);
    fish.SetScale(0.5, 0.5);
    fish.SetPosition(320/2, 0);
    fish.HorizontalFlip();
    fish.SetGravity(2.0);
    fish.EnableGravity();
    fish.SetWorldLimit(0, 0, 320, 480);
    fish.SetWorldLimitTest((limit) => this.worldLimit(limit, fish));
    this.source = fish;
  }
	
  worldLimit(limit, fish) 
  {
    if(CAREM_LIMIT_BOTTOM==limit) 
    {
      fish.DisableGravity();
      fish.AddPositionY(-1);
    }
  }
	
  addTarget(target) 
  {
    this.source.AddCollisionTarget(target.source, () => {
      target.source.Hide();
    });
  }
}

class YellowFish:

// file: yellow-fish.js
import {Carem, CAREM_LIMIT_BOTTOM} from '@bapquad/carem'

export default class YellowFish 
{
  constructor(asset, scene) 
  {
    let fish = new Carem.StaticSprite(asset, 0, 0, 180, 115, scene);
    fish.SetCollisionBound(0, 0, 90, 58); 
    fish.SetOrgin(180/2, 115/2);
    fish.SetScale(0.5, 0.5);
    fish.SetPosition(320/2, 480/2);
    fish.HorizontalFlip();
    this.source = fish;
  }
}

We use the box for checking the collision between objects.

The collision callback function

In the case that the fish collision with the yellow fish, the yellow fish would be hide from the scene.

this.source.AddCollisionTarget(target.source, () => {
  target.source.Hide();
});

You can build the application and view the result on your browser.

Good luck and see you at other guide.