Phaser Classes / Files organization

Hi,

I’m a happy new user of Phaser3 for adventure game. Great Engine!! I have a question about organization.

Life Cycle

I created this life cycle for game. I think that all fine:

phaser-lifecycle

Grey boxes are scenes, “Game” is more complex:

  • Room Loader is component for select room and load background and room logic.
  • Items Loader is component for create items for a specific room.
  • Music Manager is component for preload/play/pause music for a specific room.
  • Char Loader is component for create chars for a specific room. Chars can be player (playable) or NPC.
  • Particles is a component for ParticleEmitters for items/characters.

What would be a good way to organize all this?

The Phaser examples I see are very small and have everything in the same file. I understand that all blue boxes extends Scene, and it has to be the same Scene so that the camera can interact correctly with them.

1 Like

My suggestion would be to have your 5 scenes that you have in life cycle extend Phaser.scene. Then in your more complex game scene create instances of all your other classes such as your room/items/music loader and pass them a a reference to the game scene through their constructors. They do not need to extend Phaser.scene as they all need to just alter the game scene.

2 Likes

I agree with @funnythat - I would have all of those blue boxes as classes that your Game Scene interacts with, in order to build-up the game display, handle room movement, etc. They don’t sound like scenes to me, but game systems.

Your Grey boxes are what I call game phases – to avoid confusion with Phaser terminology. Your blue boxes are “things” (or as the “smarty-pants” say objects) in your game. Everything could be a “module” (a separate JS file) which would be consolidated into one monolithic file when you’re ready to release to the apps stores.

What’s cool about Phaser III is you can have multiple “scenes” inside a single game phase. I like to think of them as “Flash MovieClips” is that helps?

{width:80%}

Some of your blue boxes are “visible” things, others are “data things” or JSON outputs from your backend database. I like to separate “what is seen” from “meta-data” about it. Perhaps this might help …
{width:80%}

Thank you all for the answers.

I explain a bit the scheme I have so far (suggestions and comments on this matter are welcome to improve it):

Scenes

  • Game Scene: Here, all game content.
  • Weather: Here, a scene with weather content (rain, snow, daylight, etc…)
  • UI: A layer with text data and related (at the moment, debug info only that I save in Phaser registry)

Game (global)

I’m using Vue + Phaser (with Webpack) for build my game. At the moment, router and store unused (maybe use in future or remove Vue if no need).

Vue loaded base concepts (webfontloader, config Phaser, etc…) and run in GameScreen scene.

File organization

I’m using this scaffolding:

Managers

  • Manager files are a custom class that export a new object.

  • RoomManager preload scenary and items data, current player and scenary music.

  • PlayerManager preload player, animation and input controls.

  • ItemManager preload items and build Item instance

  • Item a custom class for every item

  • Features files are a custom function exported and injected on class Items that have this behaviour (for example, a bubble item have a fly behaviour, a tree item not have a fly behaviour)

I appreciate any comments or suggestions for improvement.
I’m especially interested in improving the organization of code and files.

1 Like

hi,

Sorry to not answer your question but how do you generate these gray box ? Wich program ?

Thanks

Hi espace,

I’m using Inkscape (vectorial image editor) with “EnterCommand” font.

Thanks i believied that was draw.io
Inkscap is great also

take a look at “code2flow.com” It’s one of my favorites

2 Likes

wouah cool ! Tks for this

1 Like

If you thought “code2flow.com” was great … you simply love “StarUML.io”. I use version 2 because It will write OOAD/OOP classes into JavaScript; I merely draw my class relationship and WHAM, I get the JS code. Nothing is more simple than this “forward engineering”!. (There’s also an extension for Typscript too) All my students use this because it also generates documentation for their SQL and advanced SQL Security courses. It just “Boogles” my mind why software engineers can’t write documentation when the tools are available to build documentation website is MarkDown.

1 Like

Please, could we return to my previous question? :rofl: :rofl: :rofl: