Getting Started

In this guide, I’ll show you how to get started with PixiJS. This guide will cover creating graphics and making them move. We’ll also explore collision detection between graphics objects.

Graphics

First, we need to initialize a Square object and implement its movement. But before that, let’s create the graphics.

// Create a Graphics object, draw a rectangle and fill it
let obj = new Graphics()
  .rect(0, 0, 100, 100)
  .fill("#FFA09E")
//  position, center of the screen
obj.x = app.screen.width / 2.5;
// Add it to the stage to render
app.stage.addChild(obj);

rect() is a function to create a Rectangle, and fill() is a function to fill the Rectangle with a color. Then we need to add it to the stage to render.

Result:

Animate

Now let’s make it move! Animation in PixiJS uses Ticker callbacks. A Ticker is a function that will be called every frame.

app.ticker.add(() => {
    // Infinite loop
})

When you log something inside the ticker callback, you’ll get a log entry for every frame. Let’s implement this with our current graphics object:

let obj = new Graphics()
  .rect(0, 0, 100, 100)
  .fill("#FFA09E")

app.ticker.add(() => {
    obj.x += 1
})

Result:

Memory Management

We need to release memory when we no longer need to render objects that have moved off-screen. Let’s add conditions to check if the shape has moved out of the screen boundaries. There are two methods I typically use:

Graphics.destroy()

This is useful when you don’t need the graphics object anymore. In games, you can think of this as something like a bullet or projectile.

if (obj.x >= app.screen.width || obj.y >= app.screen.height || obj.x < 0 || obj.y < 0) {
 obj.destroy()
}

App.ticker.stop()

This approach is useful when you need to refresh the animation, such as when you want to restart the animation like the example on this page.

if (obj.x >= app.screen.width || obj.y >= app.screen.height || obj.x < 0 || obj.y < 0) {
 app.ticker.stop()
}

const handleRefresh = () => {
    // Get the current graphics in the stage and set the beginning position  
    app.stage.children[0].position.set(0,0)
    // Start from the beginning 
    app.ticker.start()
}

Collision Detection

In this section, we’ll look at how to detect basic collisions between a graphics object and the edge of the screen in PixiJS.

A common method for detecting collision is by checking whether the object touches or crosses the boundaries of the screen.

To do this, you need:

• The size of the screen (app.screen.width and app.screen.height)
• The size of your graphics object (sprite.width, sprite.height)
• The current position of the object (sprite.x, sprite.y)
• You can then write conditions to detect when the object reaches the edge.

if (obj.x >= (app.screen.width - 100)) { // Remember we define rect(0,0,100,100) ? The third parameters is the width of the object {
 obj.x -= 1 // Move to the left 
}

if (obj.x <= 0) {
 obj.x += 1 // Move to the right
}

Here’s an example:

Summary

This guide introduces the basics of working with PixiJS, covering how to create and animate graphics, manage memory, and implement simple collision detection.

Graphics

PixiJS Graphics is used to build geometric shapes like rectangles. These are added to the stage to be rendered.

Animation

Movement is achieved using app.ticker, which runs every frame and updates the object’s position.

Memory Management

You can free up memory by destroying objects with Graphics.destroy() or stopping the animation loop using app.ticker.stop().

Collision Detection

Since PixiJS doesn’t provide built-in collision detection, manual checks against screen boundaries using object position and size are used to detect and respond to collisions.

That’s it! Now you’re ready to start creating graphics and animations in PixiJS!