Tile elves

Tile sprites are special sprites that can repeat a texture within a certain range. You can use them to create background effects with infinite scrolling. To create a tile Sprite, use the TilingSprite class (pixi.extras.tilingsprite) with three parameters

Usage:

let tilingSprite = new PIXI.extras.TilingSprite(texture, width, height);
Copy the code

Parameters:

The name of the The default value describe
texture Tile Sprite texture
width 100 Width of tile Sprite
height 100 The height of the tiled Sprite

In addition, tile sprites have all the same properties as regular sprites and work in the same way as regular sprites. They also have fromImage and fromFrame methods, just like regular sprites. Here’s how to create a 200 x 200 pixel tile Sprite using a 100 x 100 pixel image named brick.jpg. And offset 30 pixels from the top left corner of the canvas.

Here’s the key code:

let tilingSprite = new PIXI.extras.TilingSprite(
 PIXI.loader.resources[imgURL].texture, 200.200
);
tilingSprite.x = 30;
tilingSprite.y = 30;
Copy the code

The image below shows the brick.jpg image and the effect of the code above.

You can use the tilePosition.x and tilePosition.y properties to move the texture used by tiling sprites. Here’s how to move the texture used by tile sprites by 30 pixels.

tilingSprite.tilePosition.x = 30;
tilingSprite.tilePosition.y = 30;
Copy the code

This is not moving the tile Sprite, but the texture used by the tile Sprite. Below is a comparison of the two cases.

You can also use tileScale. X and tileScale. Y properties to change the proportion of textures used by tiling sprites. Here is the key code to increase the size of the texture used by tile sprites by 1.5 times:

tilingSprite.tileScale.x = 1.5;
tilingSprite.tileScale.y = 1.5;
Copy the code

A comparison of the original image to the effect achieved by the code above:

TileScale and tilePosition both have a set method that sets x and Y properties in one line of code.

Parameters:

The name of the The default value describe
x 0 New x property value
y 0 New y value

Usage:

tilingSprite.tilePosition.set(30.30);
tilingSprite.tileScale.set(1.5.1.5);
Copy the code

Tiling sprites are a convenient way to create repetitive image patterns. Because you can move textures around, you can use tile sprites to create seamless scrolling backgrounds. This is useful for many types of games. Let’s look at how to do this.

First, start with a seamless tiled image. Seamless images are images in which patterns match in all aspects. If copies of the images are placed side by side, they look like one large continuous image, like the brick.jpg image used in the example above.

Next, use this image to create a tile Sprite. Then update the tilePosition.x property of the Sprite in the game loop.

Key code:

function play() {
 tilingSprite.tilePosition.x -= 1;
}
Copy the code

Effect:

See the sample

You can also use this feature to create a pseudo-3D effect called parallax scrolling. The idea is to stack multiple such tiled sprites in the same place and make the image that looks farther away move more slowly than the one that looks closer. Like the example below!

Two images for tiling sprites:

The effect of the implementation:

See the sample

coloring

Sprites have a TINt property, and assigning a hexadecimal color value to this property changes the tone of the Sprite.

Let’s try it!

Key code:

sprite.tint = 0xFFFF660;
Copy the code

A comparison of the original image to the effect achieved by the code above:

See the sample

The default tint property for each Sprite is white (0xFFFFFF), meaning there is no hue. If you want to change the tone of a Sprite without completely changing its texture, use shading.

The mask

Pixi allows you to mask any sprites or containers with nested sprites using Graphics objects. A mask is the shape of any part of the Sprite that is hidden outside the shape area. To use masks, create sprites and Graphics objects. Then set the mask property of the Sprite to the Graphics object you created.

Example:

First, create a Sprite with pikachu’s image. Then create a blue square and position it above the Sprite (the color of the shape doesn’t matter). Finally, the Sprite’s mask property is set to the square object created. This will only show images of sprites in the square area. Any part of the Sprite outside the square is invisible.

Comparison of the original image with the mask:

Key code:

// Create a Sprite
let Pikachu = new PIXI.Sprite(PIXI.loader.resources[imgURL].texture);

// Create a square object
let rectangle = new PIXI.Graphics();
rectangle.beginFill(0x66CCFF);
rectangle.drawRect(0.0.200.200);
rectangle.endFill();
rectangle.x = 100;
rectangle.y = 100;

// Mask the Sprite
Pikachu.mask = rectangle;
Copy the code

See the sample

You can also animate masks to create some interesting effects. And if you’re rendering in WebGL, you can also use sprites as masks. The following example is an example of using three images to make a Sprite, then using a Sprite as a mask, and animating the mask.

Effect:

See the sample

Mixed mode

The blendMode property determines how the Sprite mixes with the underlying image.

They can be applied to sprites as follows:

sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;
Copy the code

Here is the full list of 17 hybrid modes that can be used:

No mixed

  • NORMAL.

Contrast comparison (Saturation mode)

  • SOFT_LIGHT
  • HARD_LIGHT
  • An OVERLAY.

Contrast comparison (difference set mode)

  • DIFFERENCE = DIFFERENCE
  • The EXCLUSION of the communist party

Dodge effect (Brightening mode)

  • LIGHTEN up
  • COLOR_DODGE (color dodge)
  • SCREEN (color filter)
  • ADD (Linear Dodge)

Burn effect (Darken mode)

  • DARKEN (DARKEN)
  • COLOR_BURN (color burn)
  • MULTIPLY (MULTIPLY)

Color Effects (Color mode)

  • HUE
  • SATURATION
  • COLOR (COLOR)
  • The LUMINOSITY

These blend modes are the same as those used in image editors like Photoshop, if you want to try each one, you can open up some images in Photoshop, apply these blend modes to the images and see the effect.

Note: WebGL renderers only support NORMAL, ADD, MULTIPLY and SCREEN blending modes. Any other mode will look like NORMAL.

See the sample

A filter

The Pixi has a variety of filters that can apply special effects to sprites. All filters are in the Pixi.filters object. Filters are one of Pixi’s best features, as they allow you to easily create special effects that would otherwise be possible only through complex low-level WebGL programming.

Here’s an example of how to create a BlurFilter (the other filters follow the same format) :

// Create a blur filter
let blurFilter = new PIXI.filters.BlurFilter();

// Set the blur filter properties
blurFilter.blur = 20;

// Add the blur filter to the Sprite filter array
sprite.filters = [blurFilter];
Copy the code

All Pixi display objects (Sprite and Container objects) have an array of filters. To add a filter to a Sprite, create a filter, and then add it to the Sprite’s Filter array. You can add as many filters as you want.

sprite.filters = [blurFilter, sepiaFilter, displacementFilter];
Copy the code

Use it just like any other normal array. To clear all Sprite filters, simply clear the array.

sprite.filters = [];
Copy the code

In addition to these attributes, all filters also include additional padding and IMAGINATIVE attributes. Padding increases the space around the filter area. An IMAGINATIVE is an object that can be used to send extra values to the WebGL renderer. In everyday use, you never need to worry about setting up an IMAGINATIVE property.

In version 4.0.0, PixiJS moved non-core filters to a new package called Pixi-filters. PixiJS now has the following built-in filters.

  • AlphaFilter The filter used to modify the transparency of an object. In some other documents, you may see the VoidFilter filter, because AlphaFilter was added in PixiJS version 4.6.0 and VoidFilter was deprecated.

  • BlurFilter BlurFilter applies Gaussian blur to objects. You can set the blur intensity for x and y axes respectively.

  • BlurXFilter Applies horizontal Gaussian blur to objects.

  • BlurYFilter BlurYFilter applies vertical Gaussian blur to objects.

  • ColorMatrixFilter The ColorMatrixFilter class allows you to apply a 5×4 matrix transform to the RGBA color and alpha value of each pixel on a displayObject. To generate a set of results with a new RGBA color and alpha value. It’s very powerful! Use it to achieve black and white, adjust brightness, adjust contrast, color, gray, adjust tone, and many other effects.

  • DisplacementFilter The DisplacementFilter class uses the pixel values in the specified texture, called a displacement map, to perform the displacement of an object. You can use this filter to achieve the distortion effect. I’ve already covered DisplacementFilter in this article, and there’s a good example.

  • FXAAFilter fast approximate anti-aliasing filter.

  • NoiseFilter is a noise effect filter.

Note: Pixi’s filters only work for WebGL rendering, because the Canvas drawing API is too slow to update them in real time.

Here is an example that contains most of the filters in Pixi.

See the sample

Video texture

You can use videos as textures for sprites just as easily as images. Use the fromVideo method of the Texture class to create a video Texture.

videoTexture = PIXI.Texture.fromVideo(videoUrl);
videoSprite = new PIXI.Sprite(videoTexture);
stage.addChild(videoSprite);
Copy the code

Alternatively, you can create a video texture from a URL using the fromVideoUrl method.

The video texture is just a normal HTML5

let videoSource = videoTexture.baseTexture.source;
Copy the code

You can then control the video using the properties and methods of any HTML5

videoSource.play();
videoSource.pause();
Copy the code

See the full specification of the HTML

See the sample

Suitable for multiple resolutions

If you are not familiar with terms such as physical pixel, device independent pixel, device pixel ratio, etc., this article is a good place to start.

Pixi automatically adjusts the pixel density to match the resolution of the device on which the content is running. All you have to do is provide different images for high and low resolution, and Pixi will help you choose the right image based on your current device pixel ratio.

Note: When you create a high-resolution image, you can add “@2x” to the end of the image file name to indicate that the image supports high-resolution screens, for example, Retina screens. At the same time. This will set the elves baseTexture resolution attributes (Sprite. Texture. BaseTexture. Resolution).

The first step is to find out the current device pixel ratio. You can do this using the window.devicepixelRatio method. Assign this value to a variable.

let displayResolution = window.devicePixelRatio;
Copy the code

DisplayResolution is a number that describes the pixel ratio of the device. It is automatically provided by the device running the application. 1 is the standard resolution; 2 is high density resolution; More and more you will find some reports of 3 ultra high density monitors.

The next step is to assign this value to the Resolution property of the render option. Do this when creating the Pixi application, as shown below:

// Some parameters needed to create a Pixi application
let option = {
   width: 640.height: 360.transparent: true.resolution: displayResolution
}
// Create a Pixi application
let app = new PIXI.Application(option);
Copy the code

Then select the correct image based on the device pixel ratio to load into the texture. As follows:

let texture;
if (displayResolution === 2) {
    // Load a high-resolution image
    texture = PIXI.Texture.fromImage("[email protected]");
} else {
    // Load normal resolution images
    texture = PIXI.Texture.fromImage("normalResImage.png");
}
let anySprite = new PIXI.Sprite(texture);
Copy the code

If you need to know how much is loading device pixel texture than, you can use the texture baseTexture. Resolution attributes (texture. BaseTexture. Resolution) to find out.

See the sample

Rope (the Rope)

Another interesting effect is the Rope. It allows the Sprite to oscillate like a wave or glide like a snake, as shown below.

First, start with an image of the thing you want to transform. The slithering snake is actually a simple straight line image, as shown below.

Then decide how many segments you want to move the snake independently. The snake image is 600 pixels wide, so about 20 fragments will produce a good result. Divide the image width by the number of segments, which is the length of each rope segment.

let numberOfSegments = 20;
let imageWidth = 600;
let ropeSegment = imageWidth / numberOfSegments;
Copy the code

Next, create an array of 20 Point objects. The x position of each Point (the first parameter) will be separated by a ropeSegment distance from the next Point.

let points = [];
for (let i = 0; i < numberOfSegments; i++) {
 points.push(new PIXI.Point(i * ropeLength, 0));
}
Copy the code

Now use the pixi.mesh.Rope method to create a new Rope object. This method takes two arguments:

  • One is the texture used by the Rope object
  • One is an array containing Point objects
let snake = new PIXI.mesh.Rope(PIXI.Texture.fromImage('snake.png'), points);
Copy the code

Add the snake to a container so it’s easier to locate. Then add the container to the stage and position it.

let snakeContainer = new PIXI.Container();
snakeContainer.addChild(snake);
stage.addChild(snakeContainer);
snakeContainer.position.set(10.150);
Copy the code

Now animate the Point object in the game loop. The for loop moves each Point in the array along an ellipse to create a wave effect.

count += 0.1;
for (let i = 0; i < points.length; i++) {
    points[i].y = Math.sin((i * 0.5) + count) * 30;
    points[i].x = i * ropeLength + Math.cos((i * 0.3) + count) * numberOfSegments;
}
Copy the code

See the sample

Here’s another interesting article about using a Rope to create the effect of swimming koi.

conclusion

This article focuses on tiling sprites, shading, masks, blending modes, filters, video textures, adapting multiple resolutions, ropes, and more.

If you feel that the explanation is not clear, you can click on one or more examples in each section, and the comments in the examples are clear. Also, the PixiJS API changes frequently, so pay attention to the version of PixiJS. Most of the examples in this article use the version 4.8.2. If you try to use PixiJS and find that it is not the same as the example, you can check the version first.

If there are mistakes in the article, please also point out small partners, thank you very much.

Last time we learned about PixiJS – Particle effects

Next, learn PixiJS – Tween animation