Example

a2p is focused on getting up and running with Pixi quickly and easily. We want to take as much off of your mind as possible. So without further ado, here is a working minimal example of rendering a static png. The src code of the entire app can be found here.

This wiki page is assuming you have already successfully imported a2p into your application. It also assume you have a png called 'koffing.png' in your assets folder. You can replace that with a path or URL to another file if you so desire.

This is also built using the latest a2p (v0.5 as of writing this on 4/30/2018). Please make sure to use that version as it has the most consolidated and optimized code.

app.component.ts

import { Component } from '@angular/core';
import * as PIXI from 'pixi.js';
import { PixiService } from 'angular2pixi';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mainStage: PIXI.Container;
  
  constructor(
    public pixi: PixiService,
  ) {
  }
  
  ngOnInit(){
    //Init renderer
    this.pixi.init(
      500,
      500, 
      document.getElementById("worldCanvas") 
    );
    
    //Init layers
    this.initLayers();    
  }
  
  initLayers(){
    this.mainStage = new PIXI.Container();
    
    this.pixi.worldStage.addChild(this.mainStage);   
    console.log(this.mainStage);
  }
}

app.component.html

<div>
  <h1>A2P Demos:</h1>
  
  <canvas id="worldCanvas"></canvas>
  
  <sprite 
    imgUrl="./assets/koffing.png"
    [container]="mainStage"
    x="0"
    y="0"
    [anchor]="{ x: 0, y: 0 }"
  >
  </sprite>
</div>