JavaScript

Common PIXI.js Rendering Properties

Initiailze a new PIXI application:

const gameApp = new PIXI.Application(500, 700);

Attach the application canvas to the page:

document.body.appendChild(gameApp.view);

Create a new image sprite:

const playerPlane = PIXI.Sprite.fromImage("assets/player-plane.png");

Add the sprite to the root stage for rendreing:

gameApp.stage.addChild(playerPlane);

Create a new text element:

const scoreDisplay = new PIXI.Text("Score: 10000");

Set horizontal position of the text:

scoreDisplay.x = 100;
// Sets the horizontal position of the `scoreDisplay` text to 100 pixels

Set vertical position of the text:

scoreDisplay.y = 200;
// Sets the vertical position of the `scoreDisplay` text to 200 pixels

Update text content:

scoreDisplay.text = "Plane Battle is really fun!";
// Updates the content of the `scoreDisplay` text

Set text color:

scoreDisplay.style.fill = 0xffffff;
// Sets the text color to white (hex value 0xffffff)

Add text to the render stage:

gameApp.stage.addChild(scoreDisplay);
// `gameApp.stage` is the root container for all visible elements; all content must be added here to render
// This line adds the score text to the stage for display

Common Display Element Properties

1. x / y Position

const playerPlane = PIXI.Sprite.fromImage("assets/plane-blue-01.png");
playerPlane.x = 100; // Set horizontal position
playerPlane.y = 200; // Set vertical position
gameApp.stage.addChild(playerPlane);

2. width / height Dimensions

const playerPlane = PIXI.Sprite.fromImage("assets/plane-blue-01.png");
playerPlane.width = 100; // Set custom width
playerPlane.height = 80; // Set custom height
gameApp.stage.addChild(playerPlane);

3. rotation Rotation

const playerPlane = PIXI.Sprite.fromImage("assets/plane-blue-01.png");
playerPlane.rotation = 1; // Set rotation in radians
playerPlane.rotation = 1; // Set rotation in radians
gameApp.stage.addChild(playerPlane);

4. scale Scaling

const playerPlane = PIXI.Sprite.fromImage("assets/plane-blue-01.png");
playerPlane.scale.x = 2; // Scale horizontally to 2x original size
playerPlane.scale.y = 2; // Scale vertically to 2x original size
gameApp.stage.addChild(playerPlane);

Note: Setting a negative scale value (e.g. -1) will flip the element horizontally or vertically.

5. visible Visibility

const playerPlane = PIXI.Sprite.fromImage("assets/plane-blue-01.png");
playerPlane.visible = true;
gameApp.stage.addChild(playerPlane);

6. alpha Transparency

const playerPlane = PIXI.Sprite.fromImage("assets/plane-blue-01.png");
playerPlane.alpha = 0.5; // 50% transparent
gameApp.stage.addChild(playerPlane);

7. text Content (Text Elements Only)

const scoreDisplay = new PIXI.Text("Score: 10000");
scoreDisplay.text = "Plane Battle is really fun!"; // Update displayed text
gameApp.stage.addChild(scoreDisplay);

8. style Text Styling (Text Elements Only)

const scoreDisplay = new PIXI.Text("Score: 10000");
scoreDisplay.style.fill = 0xffffff; // Set text color
scoreDisplay.style.fontSize = 50; // Set font size
scoreDisplay.style.fontWeight = "bold"; // Set bold weight
scoreDisplay.style.fontStyle = "italic"; // Set italic style
scoreDisplay.style.fontFamily = "Georgia"; // Set font family
gameApp.stage.addChild(scoreDisplay);

Common Mouse Events

All interactive elements require enabling interactivity first: element.interactive = true;

1. click Triggers when the element is clicked.

const levelBg = PIXI.Sprite.fromImage("assets/levels/bg-level-3.jpg");
gameApp.stage.addChild(levelBg);
levelBg.inetractive = true;
levelBg.on("click