Chapter 1: Getting Started with Pixi.js
Chapter 2: Understanding the Pixi.js Renderer
In the previous chapters, we explored the basics of Pixi.js and learned about the renderer. Now, it’s time to dive deeper into the world of graphics and visual elements. Pixi.js provides powerful tools for creating and displaying graphics, whether they’re basic shapes, images, or complex textures.
Creating Basic Shapes
Pixi.js makes it easy to create basic geometric shapes, such as rectangles, circles, and polygons. These shapes can serve as the building blocks for your game’s visuals.
Rectangles
To create a rectangle in Pixi.js, you can use the PIXI.Graphics class. Here’s an example of how to draw a blue rectangle:
// Set the fill color and alpha
graphics.beginFill(0x0000ff); // Blue color
graphics.alpha = 0.5; // Transparency
// Draw a rectangle (x, y, width, height)
graphics.drawRect(50, 50, 200, 100);
// End the fill
graphics.endFill();
// Add the graphics object to the stage
app.stage.addChild(graphics);
In this code:
- We create a PIXI.Graphics object, which serves as a container for our shape.
- We set the fill color using beginFill and specify an alpha value for transparency.
- The drawRect method is used to draw a rectangle at coordinates (50, 50) with a width of 200 pixels and a height of 100 pixels.
- We end the fill with endFill.
- Finally, we add the graphics object to the Pixi.js stage.
Circles
Creating circles follows a similar pattern. Here’s an example of drawing a red circle:
// Set the fill color
graphics.beginFill(0xff0000); // Red color
// Draw a circle (x, y, radius)
graphics.drawCircle(150, 150, 50);
// End the fill
graphics.endFill();
// Add the graphics object to the stage
app.stage.addChild(graphics);
This code uses drawCircle to draw a circle centered at (150, 150) with a radius of 50 pixels.
Polygons
Pixi.js also supports drawing polygons. You define the vertices of the polygon using the drawPolygon method:
// Set the fill color
graphics.beginFill(0x00ff00); // Green color
// Define polygon vertices as an array [x1, y1, x2, y2, ...]
const vertices = [100, 100, 200, 50, 300, 100, 250, 200, 150, 200];
graphics.drawPolygon(vertices);
// End the fill
graphics.endFill();
// Add the graphics object to the stage
app.stage.addChild(graphics);
In this example, we define the vertices of a pentagon and draw it with a green fill.
Loading and Displaying Images
Beyond basic shapes, you’ll often want to use images and textures in your games. Pixi.js provides a straightforward way to load and display images.
Loading Images
Before you can display an image, you need to load it. Pixi.js offers the PIXI.Loader for this purpose. Here’s how to load an image:
const loader = PIXI.Loader.shared;
// Add the image to load
loader.add('cat', 'cat.png');
// Listen for when the loader finishes
loader.load((loader, resources) => {
// The image is loaded and available as resources.cat.texture
const cat = new PIXI.Sprite(resources.cat.texture);
app.stage.addChild(cat); // Add the cat sprite to the stage
});
In this code:
- We create a PIXI.Loader instance and add an image called ‘cat.png’ to load.
- We listen for the load event to know when the image is loaded successfully.
- Once loaded, we create a PIXI.Sprite using the loaded texture and add it to the stage.
Manipulating Images
You can manipulate sprites in various ways, including changing their position, scale, and rotation. Here’s an example:
// Position the cat sprite
cat.x = 100;
cat.y = 100;
// Scale the cat sprite
cat.scale.x = 0.5;
cat.scale.y = 0.5;
// Rotate the cat sprite
cat.rotation = 0.5; // in radians
app.stage.addChild(cat);
This code positions the cat sprite at (100, 100), scales it to half its original size, and rotates it by 0.5 radians.
Applying Filters and Blend Modes
Pixi.js allows you to apply filters and blend modes to your graphics and sprites, opening up a world of visual effects and possibilities.
Filters
Filters are a way to post-process the appearance of your graphics. Pixi.js provides various built-in filters, such as blur, color adjustment, and displacement. To apply a filter, create an instance and assign it to a sprite:
const sprite = new PIXI.Sprite(resources.cat.texture);
// Create a blur filter
const blurFilter = new PIXI.filters.BlurFilter();
// Apply the filter to the sprite
sprite.filters = [blurFilter];
app.stage.addChild(sprite);
In this example, we apply a blur filter to the sprite, creating a blurred effect.
Blend Modes
Blend modes control how pixels from different objects are combined when they overlap. Pixi.js supports common blend modes like normal, multiply, screen, and more. To apply a blend mode, set it on a sprite:
const sprite1 = new PIXI.Sprite(resources.cat.texture);
const sprite2 = new PIXI.Sprite(resources.background.texture);
// Set blend modes
sprite1.blendMode = PIXI.BLEND_MODES.MULTIPLY;
sprite2.blendMode = PIXI.BLEND_MODES.SCREEN;
app.stage.addChild(sprite1, sprite2);
In this code, sprite1 uses the “Multiply” blend mode, while sprite2 uses the “Screen” blend mode, creating different visual effects when they overlap.
Conclusion
In this chapter, we’ve explored how to create graphics with Pixi.js, including basic shapes, loaded images, and textures. Additionally, we’ve learned how to apply filters and blend modes to add visual effects to our game elements.
With these tools at your disposal, you can start crafting more complex and visually engaging games and applications using Pixi.js. In the next chapter, we’ll dive into managing game scenes and screens, a crucial aspect of game development.