Pixi and AngularJS

[syrinx]

Hello!

 

Anyone have any experience getting Pixi.js to work within an AngularJS application? A simple example would be awesome and much appreciated!

 

Thank you.

[mwatt]

The strength of AngularJS is a MVVM architecture wherein the majority of the plumbing between model and view is automated right out of the box.  This works well with data that is textual, though angular does have accommodations for images as well.  To my knowledge, it does nothing special with the canvas.  However, you can use Angular for just a portion of your page display.

 

So I think the bottom line is this;  Pixi and Angular can peacefully coexist, but I don't think you are going to get much if any synergy - per se - out of the combination.  However, If you have heavy HUD or user input needs, the use of Angular might make good sense.  There may be some special approaches needed with mobile apps to minimize the amount of library code used by Angular - I'm not sure.

[talldan]

One idea would be to make an angular directive that embeds a canvas and exposes specific canvas/pixi functionality to a controller:

http://docs.angularjs.org/guide/directive

[syrinx]

Thanks for the replies. I'm building a mobile app using PhoneGap with Ionic / Angular and Firebase. And Pixi A very interesting project. I got a few errors adding the renderer to the dom via $scope, but as the docs point out (thanks talldan) a directive is certainly the way to go. I was just being lazy If any one is interested I'll post the solution when I get back from vacation. Thanks!

[mwatt]

I'm missing the reasoning behind adding another layer of code (the angular directive) to handle the use of Pixi.  Is it just for the sake of wanting to use pure Angular?  What are you getting out of that?

[syrinx]

There's going to be a number of places within the app that will require the use of pixi, and in this case a directive will simply reduce code repetition to something possibly like this, in the HTML templates: <sx-pixi data="{{serviceResult}}" config="{{config}}"/> Although the true implementation of this is still on the drawing board.

[NextGenMiniatures]

Bump !

 

Let us know how you are going with this please, as I am about to do the same thing. 

 

My app is mostly built using angular, as most of the UI consists of buttons, text fields, and data entry at this stage anyway.  Parts of the application will need a more detailed UI sections embedded into the app, which I am planning on using Pixi for.  Angular remains a good choice for the overall framework to manage dozens of screens in the context of a single page app.

 

Earlier prototypes of the system that I built used Kineticjs for the fancy pants-parts of the interface, which I wrapped as angular directives.  Took a few days to get my head around that, but it all worked OK once my brain got into the right gear.  Somewhat messy to code, but working well on the end user's machine.

 

The hardest part is probably getting the "API" right .. by which, I mean how you define the communication between the larger angular app, and the pixijs portion .. since angular has its own way of looking at scopes and models .... getting the correct API can take some trial and error. 

 

Because of that, the "correct" mapping for a Pixi directive will be a little different for different use cases I would guess.

 

Anyway  - as soon as I start getting mine together, I will make the directive a separate project on github, so we can possibly share solutions if you like ?   It would be useful anyway, since its hard to find examples that mix in really cool graphical UI libs with angular. 

[dirkk0]

I would also like to see a solution. Other than that, I guess mwatts view is right.

 

This article was much discussed recently - but it doesn't use pixi.

http://www.ng-newsletter.com/posts/building-2048-in-angularjs.html
 

[panrafal]

Hi! I've used pixi with angular in my project. I went with the directive route, though 99% of the code You'll want to place in your controller.

It's more or less syntactic sugar, but helps to be a little bit less repetitive when you bootstrap another project.

 

Here is the directive:

https://github.com/panrafal/depthy/blob/master/app/scripts/directives/pixi.js

 

And that's how I use it:

<canvas pixi="stage" pixi-render="pixiRender" pixi-transparent="true" pixi-renderer="'webgl'"></canvas>

$scope.stage will contain the stage object when it's constructed. You can provide your own if you want to.

$scope.pixiRender() will be called on every frame. You can return false to skip the render altogether

 

The actual controller that talks with this directive is below. It watches scope with data urls and reloads the textures when needed.

https://github.com/panrafal/depthy/blob/master/app/scripts/directives/depthyViewer.js

 

Disclaimers: This is my first Pixi / webgl project ever; I use angular a lot every day; I don't always follow the patterns. I tend to make my APIs more public than private...

[jdnichollsc]

Hi guys!

Check my example with Phaser and Ionic using services!  http://market.ionic.io/plugins/ionphaser (I'm using an Angular directive to do that)

Regards, Nicholls