Sprites are display objects that render a texture. They take a single texture as a parameter. Like all display objects they need to be added to our stage in order to render.
let sprite = new PIXI.Sprite(texture);
stage.addChild(sprite);Like all display objects in PixiJS you can update their position with their x and y properties. This can also be done by calling set() on the sprite’s position property.
sprite.position.set(100, 100);You can also set the anchor the same way as position. This way if we scale our sprite it will scale it from this anchor point. Allowing us to scale it form center or any other point on the texture. Scaling is a property that takes a PIXI.Point() object, that has x and y values.
sprite.anchor.set(0.5);
sprite.scale = new PIXI.Point(0.5, 0.5);Similar to anchor, pivot allows you to rotate around an arbitrary point.
sprite.pivot.set(100, 100);
sprite.rotation = 1.5;You can also set the sprite’s alpha position which takes a value between 0 and 1. As well as, set a tint to the sprite which takes a hexidecimal color value. PixiJS also has some blend modes available which can be set through the blendModes property on the sprite. You can access the available blend modes through PIXI.BLEND_MODES. Sprites also have a visible property which is a quick way of hiding or revealing a sprite.
sprite.alpha = 0.5;
sprite.tint = 0xff0000;
sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;
sprite.visible = false;We can also make our sprites interactive by using the interactive and buttonMode properties of our sprite. These are simply booleans that can be set to true. This will allow the users mouse to interact with the sprite for things like click events while showing a pointer indicating the sprite can be interacted with.
sprite.interactive = true;
sprite.buttonMode = true;Sprites also have a mask property which can be set to another display object which is then used as the mask.
sprite.mask = myMaskSprite;