Angular 2 and Pixi.js Magic
Interested in game development or making something with Pixi? Love Angular 2 like me? Well, hopefully I'm about to save you a bunch of time.
I wanted to contribute something to the opensource web dev community, so here's my first go. Now, you can use markup to make beautiful HTML5 scenes. That's right, life should now be as easy as:
<sprite
[imgUrl]="url">
</sprite>
and voila! Okay, well I lied - it's not quite that easy but you can learn more here (I promise, it is pretty simple).
In case you're interested in more of the conceptual aspects, basically what I'm doing is creating a few re-usable (and extensible) components:
- Renderer
- Sprite
- Text
They are configurable by some built in Inputs (scale, imageUrl, x, y, etc.) and may be extended if that is not sufficient. There are also some built in services:
- Pixi
- Scene
- Asset
The Pixi service starts up the Pixi app, Scene service provides some utilitarian transition functions, and the Asset service makes loading and managing assets easier.
I have not tested this module extensively, but I'm currently using it in a full fledged mobile game I am working on and things have been going very smooth so far. Expect plenty of active development, demos, and tutorials in the comings months. I would not suggest using this module in production for now, but feel free to install it and give it a whirl. Any and all feedback is appreciated, but please be nice :) This is my first opensource project.
On the roadmap for development I hope to set up some automagic sizing mechanics, better out of the box transitions and animations, and more components.
If you are interested in contributing, feel free to check out the Github and fork me. It is still in the very early stages (version 0.0.1) but hopefully given some time it can streamline the game development pipeline for others. My apologies for the lack of documentation right this second, but it's coming.
Enjoy!
Github: https://github.com/Shadowstep33/Angular2Pixi
NPM: https://www.npmjs.com/package/angular2pixi
Like this post?
Upvote and follow
@stonedbenots!
Tip me btc
1AQsGJ7x5HJ7rAqb589BUypyMuUV4wyUE
Hi! This stuff is very interesting to me (as a js gamedev)!
I'm curious about the shortcomings phaserjs has that made you want to build a framework ontop of PIXI.
To be honest, Pixi.js is just my area of specialty. I've been using it for the past 3 years (with about a 1 year gap, so I'm still catching up on their updates) so it's just what I know. Theoretically, it should be easily adaptable to Phaser also; I know there's a lot of similarities.
I've been in contact with one of the Pixi.js developers over the years and he's a genius of a programmer (he has set up a lot of cool 2.5d/3d stuff with Pixi.js) and helped me personally with projects so that adds to my preference too.
Let me know if you get a chance to play around with a2p or have any suggestions :) If you'd be interested in adding Phaser support the contributions would be greatly appreciated as I know 0 about Phaser haha