Code Organization

[talon876]

Hello,

 

I am coming from a C#/XNA and Java/libGDX background. Using those libraries/languages I usually end up with each game object being its own class with an update and render method that get called in the game loop. The game is then divided up in to screens which are each represented by their own class. This makes it easy to keep individual sections of the game (menu, level select, game, options, credits, etc) nicely organized.

 

Is there a similar way of organizing code for use with pixi? Ideally I'd like to keep objects fairly separate and unfortunately it seems most of the tutorials end up putting everything for the entire game in one file. I'd also like an easy and clean way to keep different screen's logic separated from one another with a way to transition between them.

 

Are there any general guidelines or best practices for doing this? Or perhaps any code examples I could take a look at?

 

Thanks

[xerver]

Everything you described that you are familiar with will work fine in pixi.js as well. I recommend using commonJS and browserify for modulization and building (it is what we do in pixi.js). If you are feeling saucy you can also look into es6/babel.

[fire7side]

I've been bumping up against the same thing and it looks like a lot of people use state machines.  The gameloop is on a main file and fills the stage and does the update which it pulls from different state objects which are separate files.   To see an example done in Phaser look at this site:

http://perplexingtech.weebly.com/software-blog/using-states-in-phaserjs-javascript-game-developement

 

You can basically do the same thing in pixi.  So far I have a main file which loads and then goes to a game loop.  The game loop runs states that are objects in other js files in the form of list objects which are loaded in the index file before the main file so they can be called from the main file.  In the main file I call a window.onload(function) to kick it all off.  I'm still working on it, so I can't say I have a full working game yet, just a small demo.

 

For a tutorial on using states in pixi see this:

kittykatattack/learningPixi · GitHub

[d13]

The game is then divided up in to screens which are each represented by their own class. 

Pixi is is just JavaScript, so any JavaScript architectural style you want to use (and there are many!) will work with Pixi.

Just organize your game logic into any modular code units, like functions or classes, that make sense to you, and keep these as independent files.

Then just load these files into your HTML application as you need them.

You can either do this with good old fashioned <script> tags, or use one of very many module systems out there, as mentioned above.