pixi-ex
v0.5.0
Published
Pixi extended - Utility library for Pixi.js
Downloads
21
Readme
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 proportionsgetGlobalPosition
- Get the global position of a display objectgetOverlappingArea
- Get overlapping area of two display objectsdrawHitArea
- Debug your display objects hit areasonClick
- Setsinteractive
to true, changes mouse cursor topointer
and adds a click listener to the display object.handleResize
- 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.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 onText
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
:package: Install
npm install pixi-ex
Example usage
Check out app/index.js
for example usages