Home

Angular2Pixi (a2p) is a library for conveniently creating Pixi applications in Angular2. The ideal goal is that you can create Pixi scenes with markup and minimal coding. a2p provides a set of components and providers for including Pixi in your application and making scenes easily. Generally, the flow is as follows:

• Initialize PixiService
• Load Assets
• Draw Sprites

And that's it! In (somewhat) of pseudo-code, the above would look like:

app.html

<canvas id="worldCanvas"></canvas>

page.component.js

constructor(
pixi: PixiService
){
}

ngOnInit(){

  this.initPixi();
  
  this.assets.loader.add('demo', './assets/demo.json');
  this.assets.loadAssets();
}

initPixi( ){
  this.w = this.platform.width();
  this.h = this.platform.height();
  this.pixi.init(this.w, this.h, document.getElementById("worldCanvas") );	
}

page.html

<sprite
[container]="pixi.worldStage"
frameName="bunny"
></sprite>

The above assume that demo.json is a sprite sheet (made with Texture Packer or the like) that contains an image/frame with the name bunny. You could also use a raw png file as such:

<sprite
[container]="pixi.worldStage"
imgUrl="./assets/bunny.png"
></sprite>

I love Angular 2 and love Pixi and was sad to find out there wasn't a good integration between the two. This is a personal project from me and was created to facilitate the development of a game I am currently working on. a2p is being actively developed and all suggestions and discussion are welcome. If you're interested in contributing, feel free to contact me.