Sprite Component

This is the main player of a2p. It allows you to add sprites to a container. It is suggested for more complex and custom needs to extend this component. Currently, SpriteComponent comes supplied with some built in convenience functions for common animations and actions.

Important note on inheritance: if you extend the class, building with the prod flag will no longer work for your application. There are some incompatibilities with AOT compiling and inheritance

Member Variables

  @Input() handleClick = null;
  @Input() imgUrl: string = '';
  @Input() frameName: string = '';
  @Input() scale: number = 1;
  @Input() anchor = { x: 0.5, y: 0.5 };
  @Input() tAnchor = { x: 0.5, y: 0.5 };
  @Input() font: string = "Arial";
  @Input() interactive: boolean = true;

  @Input() _x: number = 0;
  @Input() set x(val: number) / get x(): number 
  @Input() _y: number = 0;
  @Input() set y(val: number) / get y(): number

  @Input() text: string = '';
  @Input() container: PIXI.Container = null;
  @Input() anim: string = '';
  @Input() anchor = { x: 0.5, y: 0.5 };
  @Input() tAnchor = { x: 0.5, y: 0.5 };
  
  spriteStage: PIXI.Container;
  textSpr: PIXI.Text = null;
  spriteObject: PIXI.Sprite = null;

Component Functions

  init(){
  addSprite(img){
  positionSprite(){
  addText(text){
  addInteraction(cb){
  slowHover(){
  hoverUp(){
  hoverDown(){
  explodeOut(){
  ngOnDestroy(){

Example

	<sprite
		[x]="0"
		[y]="0"
		scale="1"
		imgUrl="./assets/image.png"
		[container]="yourContainer"
		anim="hover"
	></sprite>