pixi-ex
v0.5.0
Published
Pixi extended - Utility library for Pixi.js
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- Setsinteractiveto true, changes mouse cursor topointerand 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
newkeyword ("new Sprite" -> "sprite") AnimatedSpriteauto-plays- Enforces a
TextStyleto be set onText
sprite(parent: Container, texture?: Texture): SpriteanimatedSprite(parent: Container, textures?: Texture[]): AnimatedSpritetext(parent: Container, textStyle: Partial<ITextStyle>, textContent?: string): Textcontainer(parent: Container): Containergraphics(parent: Container): Graphicsrectangle(rectangle: {
x: number
y: number
width: number
height: number
}): RectangleEnhanced built-ins
beginFill(graphics: Graphics, color: number): GraphicsAlso calls clear
setPosition(
displayObject: Container,
position: { x: number; y: number },
): voidAccepts a position object
drawRect(
graphics: Graphics,
rectangle: Rectangle | { x: number; y: number; width: number; height: number },
): GraphicsAccepts a Rectangle
Helpers
getWidth
getHeight
centerX
centerY
getAllChildren
centerPivot
:package: Install
npm install pixi-exExample usage
Check out app/index.js for example usages
