I was happy to make this project happen using only Three and TypeScript. If Babylon.js is the "batteries included framework" then Three is the dog help me framework. It gives you literally nothing besides the scene graph, a vector library and the WebGL comms layer. It is the dev's responsibility to create all textures, sound files, gltf files, game logic and plug it all into a requestAnimationFrame heartbeat. I am not complaining, I tried other libraries and they were bloated. Three gave just the right amount of functionality and let me code the rest. But its not necessary to get into the weeds about it either.
You find yourself in the browser having to built a UI, and there are APIs for that, just look on Mozilla Developer Network (MDN). I've seen the question what is the best toolkit for UI creation? I like HTML for that. Since the flexbox specification, it's no longer simply a typesetting language, and there is a rich set of widgets to build up your UI the way you want. I did look at Tailwind CSS and it seems promising for the next project. For now, I just set properties of htmlelement.style and called it a day. Tightly-coupled, yes but I had no good reason to spend extra time factoring a small portion of it all to a stylesheet.
TypeScript provides static type-checking at design time, which is one more way I put guardrails around myself. JavaScript is a duck-typed language which puts the emphasis on the shape of objects, but still allows any value assignment to any property. TypeScript will at least yell at me if I try to make an unusual assignment.
On the subject of guardrails, the unit tests are also coded in TypeScript. I lean to the Detroit school of testing which is a closer approximation to real world use. It can be more difficult to maintain several significant test-only composition roots and it is brittle but I like brittle. I do not mind "coding it twice" if it means I can catch a problem before it goes out the door.
Did you like this post? Tell us
Leave a comment
Log in with your itch.io account to leave a comment.