Help in planning the architecture

igabhishek · August 9, 2016

Hey Guys,

I am working on a project which is a 2D side scrolling game with a point and click and dialogue system. There is no fancy physics - only spritesheet based animations. There are also a couple of mini-games that are accessible from this main game world. I am relatively new to Javascript (coming from an Actionscript background). Had a few questions:

Would like to know what and how I should go about managing the code and planning the architecture for my project?
Any areas of implementation that I should watch out for?
Any learnings or resources that I can refer to for execution?
Was planning to use Phaser for rendering. Any other suggested libraries that might serve the purpose?

Look for your guidance! Thanks in advance.

symof · August 9, 2016

Welcome to phaser(and javascript).

http://www.lessmilk.com/tutorial/2d-platformer-phaser

That handy link will get you started with platformers and the phaser examples at http://phaser.io/examples has info on pretty much everything else.

Would like to know what and how I should go about managing the code and planning the architecture for my project?

I recommend using states. The example above uses states, and you can also check the link bellow.

http://phaser.io/news/2015/06/using-states-tutorial

Any areas of implementation that I should watch out for?

Since you are not using physics all you need to pay attention is to how you use the game assets. Make sure you create, and reuse your objects or dispose of them properly.

Any learnings or resources that I can refer to for execution?

https://www.google.co.uk/search?q=phaser+platformer&oq=phaser+platformer&aqs=chrome..69i57j69i60.2464j0j1&sourceid=chrome&ie=UTF-8#q=phaser+tilemap+example+platformer

Was planning to use Phaser for rendering. Any other suggested libraries that might serve the purpose?

I only use phaser, three and direct canvas calls myself, so I can't really help you there. There are a bunch of game engies that you can look into at https://html5gameengine.com/ .

mattstyles · August 10, 2016

Phaser is more than just rendering but it would be a good choice for you to use it all. It implements a structure based around game states, these are generally top-level states, don't confuse it with the 'current' (or actual) game state, they are more akin to 'sections' of your game (like splash, end, title, menu, main game, possibly inventory or chat).

Phaser itself uses Pixi for rendering, if you only wanted rendering then starting there is a good choice. Pixi is structured similarly, based on lessons learnt from ActionScript, and has great documentation, an active community and rocket performance.

Don't be afraid to mingle DOM and Phaser/Pixi/canvas. UI elements are often best done in DOM and a chat dialogue system would probably be easier in DOM, certainly, there is unlikely to be much in Phaser that helps you create decision trees and grab user input to assign action. Having said that adding buttons, text and elements in Phaser or Pixi is fairly straight forward also so its up to you.

Loading patterns can be a pain on the web but for most games users will accept a loading screen to preload all your assets, so long as it doesn't take too long it is by far the easiest solution, just preload everything so that you don't have to worry too much about loading extra stuff as your main game is running. Loading stuff per level, if that makes more sense, would also be good.