pixi-ex

Pixi extended - Utility library for Pixi.js

Usage no npm install needed!

<script type="module">
  import pixiEx from 'https://cdn.skypack.dev/pixi-ex';
</script>

README

Pixi extended - Useful utilities for PixiJS


Features

  • Written in TypeScript
  • Zero dependencies

API

  • resize - Resize the canvas and retain the correct proportions

  • getTexture - Easily get pre-loaded textures

  • getGlobalPosition - Get the global position of a display object

  • getOverlappingArea - Get overlapping area of two display objects

  • drawHitArea - Debug your display objects hit areas

  • isColliding - Returns true if two display objects are colliding / overlapping

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

  • makeDraggable - Make a display object "draggable". Opacity is set to 0.5 while dragging.

  • makeResizable - 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.

  • getAllTextureIds - Get all file names defined in all of your sprite sheets

  • getGameScale - Get the game scale after resize

  • init - Required to be called before using certain features

Constructors

The purpose of these are:

  1. Always adds the object to a parent
  2. No need to use the new keyword ("new Sprite" -> "sprite")
  3. Animated sprite: Auto-plays
  4. Text: Enforces a text style to be set
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


Example usage

Get a pre-loaded texture

import * as PIXI from 'pixi.js'
import * as ex from 'pixi-ex'

const app = new PIXI.Application()

document.body.appendChild(app.view)

app.loader.add('assets/spritesheet.json')

app.loader.load(() => {
  // Give pixi-ex a reference to the Pixi app. This function needs to be called before any other calls to pixi-ex.
  // It also needs to be called after resources are loaded.
  ex.init(app)
  const square = new PIXI.Sprite(
    ex.getTexture('square'), // Assuming the spritesheet contains a 'square' texture
  )
})

Check out app/index.js for more example usages.


:package: Install

npm install pixi-ex

or

yarn add pixi-ex