Jump to content

Code organization


mariogarranz
 Share

Recommended Posts

After developing some small games without paying much attention to code organization I'm about to stat a little project for a game jam and would like to have the code tidy and clear. I am used to ImpactJS code organization with different files for entities, etc. and would like something similar. Yet, I could not find any examples of big projects like this to see a proper way to do the same with Phaser.

 

Anyone knows about any source code to help me get started with this?

 

Thank you in advance :)

Link to comment
Share on other sites

Phaser does not include any kind of module code or dependency management like impact does, which unfortunately means that your options for organising a large project are a little more limited.

 

There is nothing stopping you from organising your code into separate class files like Impact does, but you would have to include them all into the page yourself via script tags.

 

I don't know if Rich has any plans in this area to help out people using Phaser for larger projects, perhaps he can chime in?

Link to comment
Share on other sites

I would say that because I don't enforce anything your options are actually increased, because you can pick whatever method you prefer rather than being forced to use just one approach like impact does. I've no plans to change this to be honest.

 

All that can really be done is to provide more Project Templates showing how to use different methods - which is a matter of finding the time to create them (something in short supply right now)

 

For my larger projects I split States down to single files, and large objects within those States into their own file again. For example a "Pause Menu" isn't a State in its own right, but is too large to fold into the core of a game, so I single it out. Also objects that are re-used across States are split out as well. Yes I do then manually add them to an index file (as script tags). It takes about 10 seconds doing this at most, and avoids all the cruft that comes with requireJS or similar. imho it's unnecessary and loses sight of the final form the game will take: one single minified js file. This is how portals and clients like to receive games, so multiple script tags in an index file is as close as you can get it during development while retaining easy debugging and not needing a separate build step (or grunt watch / build step).

 

Not that I've used it for a while, but TypeScript did do a great job of allowing you to split up your project like this easily.

Link to comment
Share on other sites

The mess of script tags is fine for prototyping, or for small projects or one man teams, but beyond that it gets unwieldy quickly.

 

I've been involved in a few large scale javascript apps in the last few years, and several times they needed a huge refactoring part way in to the project to add in a dependancy system, so I am now a big fan of considering this from the start.

 

I agree that Phaser is fine as it is though, it's up to each developer to choose how they want to work.

 

One thing we could consider adding though is a bit of code to export Phaser as a standard module, so that it can be used in requireJS projects. A lot of libraries do this (see jQuery for a good example), it's unobtrusive, doesn't affect people who don't care about it, but helps out those who do.

Link to comment
Share on other sites

Be careful where you blur the lines between a web app and an html5 game. They need very different approaches imho, despite sitting on the same base platform. Not that I've anything against using modules (and if the game is large enough I do so) but I'd say that right now 99% of HTML5 games don't need it at all (I came to that figure by looking at the Showcase here, scrolling down and seeing if I could find any that I'd consider "large" games :) )

 

The Phaser grunt script adds the stuff needed to the dist files to use it as a module. Having said that I've never actually tested it as it was oofleurent who added it. Maybe someone ought to :)

Link to comment
Share on other sites

You should perhaps be aware that the AMD wrapper in the Grunt script makes other global objects (in particular, PIXI) unavailable if you use the minified JS.

 

Isn't that the idea though? I would have assumed the Phaser module should only define and expose one variable, ie Phaser? Which is what it does at the moment.

Link to comment
Share on other sites

  • 1 month later...
 Share

  • Recently Browsing   0 members

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