@pixi/core

Creating a Renderer

This code demonstrates how to create a renderer using @pixi/core. The renderer is responsible for rendering the graphics to the screen. The example creates a renderer with a width of 800 pixels and a height of 600 pixels, and appends the renderer's view (canvas element) to the document body.

const { Renderer } = require('@pixi/core');
const renderer = new Renderer({ width: 800, height: 600 });
document.body.appendChild(renderer.view);

Creating a Texture

This code demonstrates how to create a texture using @pixi/core. Textures are used to apply images to graphics. The example creates a base texture from an image file and then creates a texture from the base texture.

const { Texture, BaseTexture } = require('@pixi/core');
const baseTexture = new BaseTexture('path/to/image.png');
const texture = new Texture(baseTexture);

Creating a Sprite

This code demonstrates how to create a sprite using @pixi/core. Sprites are basic objects for rendering images. The example creates a sprite from a texture, sets its position, and adds it to the renderer's stage.

const { Sprite } = require('@pixi/core');
const sprite = new Sprite(texture);
sprite.x = 100;
sprite.y = 150;
renderer.stage.addChild(sprite);

Rendering the Stage

This code demonstrates how to render the stage using @pixi/core. The stage is the root container for all display objects. The example sets up an animation loop that continuously renders the stage.

function animate() {
  requestAnimationFrame(animate);
  renderer.render(renderer.stage);
}
animate();