README

Pixi extended - Useful utilities for PixiJS
Features
- Written in TypeScript
- Zero dependencies
API
resize
- Resize the canvas and retain the correct proportionsgetTexture
- Easily get pre-loaded texturesgetGlobalPosition
- Get the global position of a display objectgetOverlappingArea
- Get overlapping area of two display objectsdrawHitArea
- Debug your display objects hit areasisColliding
- Returns true if two display objects are colliding / overlappingmakeClickable
- Setsinteractive
to true, changes mouse cursor topointer
and adds a click listener to the display object.makeDraggable
- Make a display object "draggable". Opacity is set to0.5
while dragging.makeResizable
- Make text objects look good even when resizedgetAllChildren
- 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 sheetsgetGameScale
- Get the game scale after resizeinit
- Required to be called before using certain features
Constructors
The purpose of these are:
- Always adds the object to a parent
- No need to use the
new
keyword ("new Sprite" -> "sprite") - Animated sprite: Auto-plays
- 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