While trying to create an FPS I have many problems on how my code is going to be structured.
I try to split most things in ES6 classes and it seems that I can’t figure out many things.
Like I don’t know how am I supposed to connect classes and mostly important how to update things through classes the various classes to show the appropriate results in the scene.
Any suggestions for codebases to look at ? Mostly JS(and even BabylonJS) preferred so it will be easily transferable.
So please if anyone who is experienced can give some pointers, cause I think I’m getting into a rabbit hole cause already I want to implement simple animations for the gun and don’t know how to do it properly if the gun belongs to the player class but the shooting is happening using the engine class and all that is getting too confusing for me. The result is this game which works perfectly as of now but I’m getting demotivated cause I want to add more things and it seems kinda scary.
[EDIT] It took me a long time to think of the answers everyone provided in the comments and I have to say that indeed there is no size fits all in this case. But every comment had something to provide in the grand scheme of things.
I guess I go by feel right now and implement first in a way that comes to me naturally even though it’s gonna look a bit stupid but will work. I’m a beginner so probably I will have time for all of this when I’m more experienced.
Thanks everyone but I hope there will come some tutorials about making a game with babylonjs with nice code design that will serve as a reference for other devs.
No expert, but I would keep all your DOM setup stuff (event listeners) separate from everything as a part of an init function, and have your main game logic (engine) separated from the graphics engine.
BJS is so all encompassingly full featured, but without coddling you (like unity might), that it seems to allow some very muddled app structure. (I.e.e.g. you can accomplish a lot with very little.)
Anyways, I think the idea is to init your app, then launch into your own game loop, where you process inputs, update the game world, then finally call render.
Very complexe problem with no simple response, it all depends on what style of coding you like, size of the team, complexity of algorithms, kind of interactions with the dom, etc.
But to keep it simple, at first I would :
Make a Manager (or Engine) for high level tasks with static methods
Use custom events system or Observables to communicate between entities
I think there’s quite a few things you could do but I would first look at implementing InverisfyJS. Rather use a proper IoC for injecting dependencies.
Also try make your classes follow SRP (Single Responsibility) as much as possible as this would prevent some of the issues you’re having. Your engine should definitely not handle the gun shooting. As sharp mentioned using Observables to communicate between components would be much better.
Honestly I don’t like using ES5/ES6 as I feel it’s open to writing chaos. I have a TypeScript “scaffold” repo with Inversify that I’m working on improving so that when I fire up any project I can follow SOLID principles straight away.
Also avoid mixing ES5 and ES6 as I see you’re using prototypes and classes. Stick to one approach.
I personally also avoid inheritance and OOP at all costs especially when it comes to something like a game.
Unfortunately I don’t have anything substantial to show you as I’m still experimenting with all the features to make a game work like imported 3D meshes, texturing, a good scaffold (TypeScript, DI etc.), lighting, socket server, socket client (the game itself), physics, animation. Once I’ve got all these experiments down I’m going to start piecing the game together. Actually… I do still have a big task ahead of generating my stages from a JSON file instead of actually manually building them in Babylon. Once that’s done I’ll probably start making something that resembles a game.
I have another experiment I was busy with that may give you some kind of idea what I’m talking about: Solar-System/src/app at master · Wancieho/Solar-System · GitHub but there are a few things I would change for eg. I think the generating of the skybox should actually maybe be inside a Milky Way/galaxy component which injects the solar system component. The entry point is the app.ts.
