Jump to content

Pixi and AngularJS


syrinx
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

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. 

Link to comment
Share on other sites

  • 2 weeks later...

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...

Link to comment
Share on other sites

  • 2 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...