@pixi/core

What is @pixi/core?

@pixi/core is a core module of the PixiJS library, which is a fast, lightweight 2D rendering engine for creating interactive graphics, games, and other visual content using WebGL and HTML5 canvas.

What are @pixi/core's main functionalities?

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();

Other packages similar to @pixi/core

three

Three.js is a popular 3D library that provides a wide range of features for creating 3D graphics and animations. While @pixi/core focuses on 2D rendering, Three.js is designed for 3D rendering and offers more advanced features for 3D graphics.

phaser

Phaser is a fast, free, and fun open-source framework for Canvas and WebGL-powered browser games. It provides a comprehensive suite of features for game development, including physics, input handling, and asset management. While @pixi/core is more focused on rendering, Phaser offers a complete game development framework.

babylonjs

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. It is designed for creating 3D games and experiences, offering a wide range of features for 3D rendering, physics, and more. Compared to @pixi/core, Babylon.js is more focused on 3D graphics and game development.

README

@pixi/core

Installation

npm install @pixi/core

Usage

import * as core from '@pixi/core';