I need to build out some supporting mechanics, like a tech tree. I want to procedurally generate it, but it’s difficult with no visualisation. Instead rolling my own, I found one already existed for the graph library I’ve integrated. A couple of PRs later and I can pass my own instance of PIXI to the visualiser.
To demonstrate this I’ve passed the underlying graph that represents the garage’s floor plan to the visualiser. It also supports zooming & dragging.
I want to have people walking around the garage performing tasks, like collecting resources and building things. The player won’t have direct control of these people, but will be able to influence their priorities. I’ll need pathfinding and way to manage where things are on the screen. I’ve added nGraph to solve this which I find has a simple API that Just Works™. This also required a refactor to the drawing system so nodes could be drawn indepently from one another.
I implemented buying parts and, upon purchasing, the Orders screen is populated with the expected delivery and it’s arrival time. When the arrival time reaches zero, the parts ordered appear in the drop-off zone. The first idea of currency is implemented and the buy button is disabled when funds are not sufficient. Additionally, should a player cancel an incoming delivery, they’ll be refunded only 75% of it’s original cost.
I hit an issue in pixi.js where a single
PIXI.GraphicsI was drawing to was displaying the wrong color after a call to
beginFill. The issue was sporadic and I was unable to isolate it outside of my code in an Minimum Working Example. The workaround was to split the draws up between
A number of changes over the last couple of days increased the complexity of the project a bit. For one I hugely refactored an old shared library and converted it to a private npm package - this had no noticeable effect on the game but will either save me time in the future for this game or others. To hasten UI development I ninja’d Material-UI into the mix with a Speed Dial and animated Dialog offering the first real bit of user-interaction. I have fond memories of Street Rod and searching the local paper in that game for parts. Likewise, in garage, the player will be able to buy and sell in a similar fashion. Parts to purchase will refresh periodically and currently do so every 10 seconds for demonstration purposes. Even at this early stage, state became difficult to manage, so integrated redux, tho I’m not sure how suited it is to games.
If you didn’t guess by the url already, the game (for now) is called garage. In this game, you’ll have a garage/shed, and you’re going to make stuff in it. For a while, you’re going to need your imagination. I’ve added pixi.js to the project and rendered our first garage. You can render a new one by refreshing the page. And look what happens to the cursor when you move it over the garage…
It’s come around to that time where I feel I need to invest countless hours in writing a game again. I’m going to micro blog it as I go. It starts with create-react-app and a github workflow that will build it and push updates to S3. Here it is, it’s not much, but it had to start somewhere.