Learn PixiJS – Collision detection

instructions

Collision detection, used to check whether two sprites contact.

Pixi does not have a built-in collision detection system, so here we use a library called Bump, which is a lightweight library of easy to use 2D collision methods that can be used with the Pixi rendering engine. It provides all the collision tools needed to make most 2D action games.

useBump 库

To get started with Bump, start by importing the JS file directly with the script tag

<script src="https://www.kkkk1000.com/js/bump.js"></script>
Copy the code

Then create an instance of it

let b = new Bump(PIXI);
Copy the code

The variable B now represents the Bump instance. You can use it to access all of Bump’s collision methods.

useBumpCollision method of

hit

The HIT method is a general-purpose collision detection feature. It automatically detects the type of Sprite used in the collision and selects the appropriate collision method. This means that you don’t have to remember which of the many collision methods in the Bump library to use, you just need to remember one hit. But in case the hit method doesn’t end up doing what you thought it would, it’s a good idea to learn about the other methods in the Bump library.

Here’s the simplest way to use the hit method:

b.hit(sprite1, sprite2);
Copy the code

Return true if the sprites collide, false if they don’t.

See the sample

Bump’s method defaults to rectangular sprites for collision detection, using the rectangular collision detection algorithm. If you want the method to treat a Sprite as circular, you need to set the circular property of the Sprite to true.

anySprite.circular = true;
Copy the code

If you use the hit method to detect whether two circular sprites collide, you will also need to set the DIAMETER property of both sprites to true.

See the sample

If you want sprites to react to collisions so that they do not overlap, set the third parameter to true.

b.hit(sprite1, sprite2, true);
Copy the code

This overlap prevention feature is very useful for making walls, floors, or any other type of border.

See the sample

If you want the Sprite to bounce after collision, set the fourth parameter to true.

b.hit(sprite1, sprite2, true.true);
Copy the code

Note: If Sprite bounce is required, sprites must also have speed attributes, namely vx and VY attributes.

See the sample

Set the fifth argument to true so that the hit method uses the global coordinates of the Sprite. This is useful when detecting collisions between sprites from different parent containers.

b.hit(sprite1, sprite2, true.true.true);
Copy the code

The global coordinates of the Sprite are relative to the top left corner of the canvas. The local coordinates of the Sprite are relative to the upper-left corner of its parent container.

To check whether a point object collides with a Sprite, take the point object as the first argument, as shown below:

b.hit({x: 200.y:120}, sprite);
Copy the code

A point object is an object with attributes X and y, which represent the coordinates of a point on the canvas.

See the sample

The hit method also allows you to check for collisions between sprites and groups of sprites. Just make the Sprite group the second argument. In this example, the Sprite group is spriteArray.

b.hit(sprite, spriteArray, true.true.true);
Copy the code

You’ll see that the hit method automatically traverses all sprites in the Sprite group and detects them based on the first Sprite in the argument. This means you don’t have to write your own for loop or forEach loop.

See the sample

You can also use the callback function as the sixth argument. This is especially useful for checking for collisions between individual sprites and groups of sprites. If a collision occurs, the callback function will run and you can access the return value of the collision and the sprites involved in the collision. Here’s how to use this feature to detect collisions between a Sprite called Sprite and a Sprite group called spriteArray.

b.hit(
    sprite,
    spriteArray,
    true.true.true.function (collision, platform) {
        // Collision indicates which side of the Sprite has a collision
        // Platform represents the Sprite in the Sprite group that the Sprite is colliding with
        console.log(collision);
        console.log(platform); });Copy the code

It’s a neat way to perform complex collision detection that gives you a lot of information and low-level control without having to manually iterate through all the sprites in a set.

See the sample

The return value of the hit method matches the type of Sprite you are checking. For example, if both sprites are rectangles, and the third argument to hit is true, the return value is the side of the argument on which the first rectangle collided, or undefined if no collision occurred.

Example:

let collision = b.hit(rectangleOne, rectangleTwo, true);
message.text = "The collision side of the first rectangle in the argument is:" + collision;
Copy the code

See the sample

The hit method is just a high-level wrapper around Bump’s many low-level collision methods. If you prefer to use lower-level methods, all of them are listed below.

hitTestPoint

The most basic collision detection is to check whether a point object collides with a Sprite. The hitTestPoint method will help you solve this problem. The hitTestPoint method takes two arguments:

The name of the	describe
point	A point object with attributes x and y that represent the coordinates of a point on the canvas
sprite	The elves

Example:

let collision = b.hitTestPoint(
    { x: 180.y: 128 },  // Point objects with x and y attributes
    sprite          // The Sprite to check
)
Copy the code

The hitTestPoint method returns true if the point object collids with the Sprite, false otherwise.

See the sample

The sprites in the above example are treated as rectangular, but the hitTestPoint method also works with round sprites. If the Sprite has the RADIUS attribute, the hitTestPoint method assumes that the Sprite is round and applies the circular collision detection algorithm to it. If the Sprite does not have a RADIUS attribute, the method assumes it is a rectangle. You can give any Sprite a RADIUS attribute. An easier way is to give the Sprite a circular property and set it to true.

anySprite.circular = true;
Copy the code

The Sprite then applies the circular collision detection algorithm and has a RADIUS property with a value equal to half the Sprite width.

See the sample

hitTestCircle

The hitTestCircle method is used to detect collisions between two round sprites.

b.hitTestCircle(sprite1,sprite2)
Copy the code

Sprites passed in as arguments to the hitTestCircle method need to have the RADIUS attribute, which returns true if sprites collide, so you can use it with the if statement to detect collisions, as follows:

if(b.hitTestCircle(sprite1,sprite2)){
	message.text = "Collision!";
	// After collision, set vx to 0 and stop moving
	sprite1.vx=0;
}
Copy the code

See the sample

circleCollision

When a moving round Sprite encounters a non-moving round Sprite, you can use the circleCollision method to create a collision reaction.

Parameters:

The name of the	The default value	describe
circle1		Moving round sprites
circle2		No moving round sprites
bounce	false	Used to determine whether the first Sprite should bounce when it hits the second
global	false	Whether to use the global coordinates of the Sprite. This is useful if you want to detect collisions between sprites that have different parent containers

Note: If you want the first Sprite in the argument to bounce when it hits the second Sprite, the first Sprite must have speed properties, namely vx and VY properties.

See the sample

movingCircleCollision

The movingCircleCollision method causes two moving round sprites to bounce apart when they collide, and they transfer speed to each other in a very realistic way, causing them to bounce apart.

Parameters:

The name of the	The default value	describe
circle1		Moving round sprites
circle2		Moving round sprites
global	false	Whether to use the global coordinates of the Sprite. If you want to detect collisions between sprites with different parent containers,

b.movingCircleCollision(circle1, circle2)
Copy the code

If round sprites have the mass attribute, this value is used to help determine how much force round sprites should bounce off each other.

See the sample

If you have a heap of moving round the elves, you want all these elves to rebound after the collision, this time you need to put these two checks, whether they collide, the need to put these elves in an array, use two layers for loop, and the inner for loop counter is greater than the outer for loop 1, This allows you to detect collisions with all round sprites.

for (let i = 0; i < container.children.length; i++) {
  // The first round Sprite used in collision check
  var c1 = container.children[i];
  for (let j = i + 1; j < container.children.length; j++) {
	// The second round Sprite used in the collision check
	let c2 = container.children[j];
	// Check for collisions, if sprites collide, pop sprites awayb.movingCircleCollision(c1, c2); }}Copy the code

You can see that the inner counter for the loop starts with a number larger than the outer one:

let j = i + 1
Copy the code

This prevents multiple collision detection on any pair of sprites.

The Bump library also has a handy method called multipleCircleCollision, which can be used as an alternative to the for loop. This method automatically calls movingCircleCollision for each pair of sprites, causing them to bounce off each other. You can use it in the game loop to check all sprites in the array, but be careful that the sprites in the array are not duplicated.

Example:

b.multipleCircleCollision(container.children);
Copy the code

See the sample

hitTestRectangle

To determine if two rectangle sprites collide, use the hitTestRectangle method:

b.hitTestRectangle(rectangle1, rectangle2)
Copy the code

The hitTestRectangletrue method returns true if the rectangles collide, false if there is no collision.

Example:

if(b.hitTestRectangle(sprite1,sprite2)){
	message.text = "Collision!";
}else{
	message.text = "Didn't touch it.";
}
Copy the code

See the sample

rectangleCollision

The rectangleCollision method makes rectangular sprites behave as if they have mass. It prevents the two rectangle sprites in the argument from overlapping.

Parameters:

The name of the	The default value	describe
rectangle1		Rectangular elves
rectangle2		Rectangular elves
bounce	false	Used to determine whether the first Sprite should bounce off the second
global	true	Whether to use the global coordinates of the Sprite

The return value:

If the sprites hit, the rectangleCollision method returns a string that tells you which side of the first Sprite hit the second. The value can be left, right, top, or bottom. Undefined if there is no collision with the return value.

Example:

let collision = b.rectangleCollision(sprite2, sprite1);

// On which side of rectangle 1 (the first argument) the collision occurred
switch (collision) {
    case "left":
        message.text = "The left side of the first Sprite in the parameter has collided.";
        break;
    case "right":
        message.text = "Collision to the right of the first Sprite in the parameter";
        break;
    case "top":
        message.text = "A collision occurred over the first Sprite in the parameter";
        break;
    case "bottom":
        message.text = "A collision occurred below the first Sprite in the parameter";
        break;
    default:
        message.text = There was no collision.;
}
Copy the code

This sample code prevents the rectangles from overlapping and displays the collision side in a text Sprite named Message.

The rectangleCollision method has very useful side effects. The second Sprite in the argument pushes the first Sprite away. This can be useful if you need a feature like the one in a box pushing game.

See the sample

hitTestCircleRectangle

The hitTestCircleRectangle method checks for collisions between circular and rectangular sprites.

Parameters:

The name of the	The default value	describe
circle		The circular elves
rectangle		Rectangular elves
global	false	Whether to use the global coordinates of the Sprite

The return value:

If the Sprite hits, the hitTestCircleRectangle method also returns a string value telling you where the round Sprite touched the rectangle. The value may be topLeft, topMiddle, topRight, leftMiddle, rightMiddle, bottomLeft, bottomMiddle, or bottomRight. Undefined if there is no collision with the return value.

Example:

let collision = b.hitTestCircleRectangle(circle, rectangle);
if (collision) {
    message.text = "Of the round elf." + collision + "Side, collision.";
} else {
    message.text = There was no collision.;
}
Copy the code

See the sample

circleRectangleCollision

Use the circleRectangleCollision method to bounce a round Sprite off the side or corner of a rectangular Sprite.

Parameters:

The name of the	The default value	describe
circle		The circular elves
rectangle		Rectangular elves
bounce	false	Whether to cause the Sprite to bounce
global	false	Whether to use the global coordinates of the Sprite

Example:

b.circleRectangleCollision(circle, rectangle, true);
Copy the code

See the sample

contain

Contain can contain sprites in a rectangular area.

Parameters:

The name of the	The default value	describe
sprite		The elves
container		Container, which is an object with x, y, width, and height attributes that represent a rectangular region.
bounce	false	Determines whether sprites should bounce when they touch the container boundary.
callbackFunction		Contain callback function, which is called when a Sprite hits the edge of a container and passes the return value of the contain method as an argument.

The return value:

If the sprit touches the edge of the container, the contain method will return a Set object that tells you which side the sprit touched. It may contain left, right, top, or bottom. If the sprit does not contain the edge of the container, the return value is undefined.

Example:

let collision = b.contain(sprite, { x: 0.y: 0.width: 512.height: 512 }, true, callbackFunction);

// The callback function when a collision occurs
function callbackFunction(collision) {
    console.log("collision", collision);
}

// If there is a collision, show which side of the boundary is colliding
if (collision) {
    if (collision.has("left")) {
        message.text = "Collision to the left of the boundary.";
    };
    if (collision.has("right")) {
        message.text = "Collision on the right side of the boundary.";
    };
    if (collision.has("top")) {
        message.text = "There was a collision above the boundary.";
    };
    if (collision.has("bottom")) {
        message.text = "There is a collision under the boundary.";
    };
}
Copy the code

The above code limits the Sprite to 512 x 512 pixels within the object definition. If the Sprite hits the boundary of the container, it bounces and shows which boundary it hit, and the callbackFunction (fourth argument) runs.

See the sample

Another feature of the contain method is that if the Sprite has mass, this value will be used to contain the Sprite in a very natural way.

Note:

When using the Bump library, it’s a good idea to give sprites the speed attribute (vx, VY), because many of the Bump library methods require these two attributes for their effects.

PixiJS – Tween animation

Next, learn about PixiJS – Interactive tools