Jump to content

Code Organization


Recommended Posts



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?



Link to comment
Share on other sites

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:



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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

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.


  • Recently Browsing   0 members

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