sajmoni / pixi-ex

Pixi extended - Utility functions for pixi.js

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

pixi-ex's Issues

Idea: Prefix texture name with sprite sheet name, to allow for duplicates across sprite sheets.

ex.getTexture('square') => ex.getTexture('main/square')

fromHex should have return type 'number'

Remove "init" function

Update docs

Convert to typescript

drawHitArea is not taking parent scale into account?

Also needs to use hitArea x and y

Add makeHoverable

Update tsconfig to support flatMap

Feature idea: Show grid

Add gifs that showcase functionality

makeResizable should use the original fontSize instead of 1

In the future, remove flatMap polyfill

It makes the library size 5 times bigger. (25kb instead of 5)

Unit tests are broken

Reason: Importing pixi in src/index.ts to get type definitions breaks tests since it's not possible to import pixi in node (needs access to window object).

Possible solutions:

• Is it possible to import the pixi types separately from the rest of the project?
• Polyfill window?

onHover, make callbacks optional

Feature idea: Display all hitboxes

Grid needs to take resolution into account

Docs should explain how to use the library without PIXI.Application

Deploy example project

Use GitHub pages

Add Text example where scale is not 1

Improve getAllChildren

Rename makeDraggable functions

onDragStart => onStart

Fix tests

Need to be able to run pixi in node

Remove fromHex function since the function exists in pixi utils

Enable setting alpha on grid

Remove "isColliding"

This is built into pixi now

Display info about display object on hover

For example:

• Position
• Name
• Type?