stafford williams

garage: Buttons and Hotkeys

Thu, 18 Feb 2021 00:00:00 GMT

<h2 id="v0-8"><time datetime="2021-02-18">Feb 18</time> Buttons and Hotkeys <span>v0.8</span></h2>

I deleted a lot of code that was used for features from the earlier version as it was hurting my brain understanding what was currently needed to run the game. I also switched out the Speed Dial for normal buttons as it was annoying to have to constantly open it.

I implemented Chad Steele's Hotkey approach and the three buttons can be used to add commands to the players command queue. _Edit: I use a different approach for key presses in another post_.

With that, the first section of the roadmap is complete, the game is nowhere near fun, however some ideas have arisen and part 2 of the roadmap is now up.

- garage v0.8 - Source

garage: Pivot & Go Anywhere

Tue, 12 Jan 2021 00:00:00 GMT

<h2 id="v0-7"><time datetime="2021-01-12">Jan 12</time> Pivot & Go Anywhere <span>v0.7</span></h2>

I decided to thin the project down and focus more on earlier game mechanics. I've raised the most basic of roadmaps and begun implementation. After cleaning up a little of the existing codebase and removing features I don't want to focus on now, I feel like I have something I can iterate on.

The canvas represents now only a player-influenced unit, and the means to direct it via commands. Only one command exists for the moment: Go Anywhere - and it does precisely that.

Play garage v0.7

garage: Graph visualisation

Mon, 31 Aug 2020 00:00:00 GMT

<h2 id="v0-6"><time datetime="2020-08-31">Aug 31</time> Graph visualisation <span>v0.6</span></h2>

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.

Play garage v0.6

garage: Ordering parts, Notifications

Sun, 30 Aug 2020 00:00:00 GMT

<h2 id="v0-4"><time datetime="2020-08-25">Aug 25</time> Ordering parts <span>v0.4</span></h2>

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.Graphics I 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 PIXI.Graphics.

Play garage v0.4

<h2 id="v0-5"><time datetime="2020-08-30">Aug 30</time> Notifications <span>v0.5</span></h2>

I needed stacking toasts/snackbars for a bit more interaction so I turned to notistack and orders enroute are now displayed with a progress bar - they disappear when the order arrives. Visibility of the cash a player has to spend is now visible via App Bar.

Play garage v0.5

garage: Create React App, Pixi floor plan, Material-UI

Sun, 23 Aug 2020 00:00:00 GMT

<h2 id="v0-1"><time datetime="2020-08-20">Aug 20</time> Create React App & Github Actions <span>v0.1</span></h2>

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.

Play garage v0.1

<h2 id="v0-2"><time datetime="2020-08-22">Aug 22</time> Pixi floor plan <span>v0.2</span></h2>

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...

Play garage v0.2

<h2 id="v0-3"><time datetime="2020-08-23">Aug 23</time> Refactoring & Material-UI <span>v0.3</span></h2>

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.

Play garage v0.3