Pixi extended - Useful utilities for PixiJS

---

Features

• Enhanced built-in functions
• Convenience functions for creating sprites, texts etc.
• Written in TypeScript
• Zero dependencies

---

API

• resize - Resize the canvas and retain the correct proportions

• getGlobalPosition - Get the global position of a display object

• getOverlappingArea - Get overlapping area of two display objects

• drawHitArea - Debug your display objects hit areas

• onClick - Sets interactive to true, changes mouse cursor to pointer and adds a click listener to the display object.

• handleResize - Make text objects look good even when resized

• getAllChildren - Get all children (including the input display object) from this point in the hierarchy.

• centerX - Center a display object on the horizontal axis.

• centerY - Center a display object on the vertical axis.

• useAutoFullScreen - Automatically resize canvas to be full screen.

• getGameScale - Get the game scale after resize

Constructors

Benefits:

• Always adds the object to a parent
• No need to use the new keyword ("new Sprite" -> "sprite")
• AnimatedSprite auto-plays
• Enforces a TextStyle to be set on Text

sprite(parent: Container, texture?: Texture): Sprite

animatedSprite(parent: Container, textures?: Texture[]): AnimatedSprite

text(parent: Container, textStyle: Partial<ITextStyle>, textContent?: string): Text

container(parent: Container): Container

graphics(parent: Container): Graphics

rectangle(rectangle: {
  x: number
  y: number
  width: number
  height: number
}): Rectangle

Enhanced built-ins

beginFill(graphics: Graphics, color: number): Graphics

Also calls clear

setPosition(
  displayObject: Container,
  position: { x: number; y: number },
): void

Accepts a position object

drawRect(
  graphics: Graphics,
  rectangle: Rectangle | { x: number; y: number; width: number; height: number },
): Graphics

Accepts a Rectangle

Helpers

• getWidth

• getHeight

• centerX

• centerY

• getAllChildren

• centerPivot

---

📦 Install

npm install pixi-ex

---

Example usage

Check out app/index.js for example usages