inventory as a system diagram
january 7, 2021
#design #systemdiagram #gamemechanics
System diagrams illustrate how components interact within a system. It saves so much headache to step back and plan with a system diagram before jumping into code.
stop + plan before coding
I want to move blessfrey's inventory into an app on the player character's smartphone. Before, it was displayed in a random pop-up window. It was poorly planned, so the programmatic inventory and the UI were too tightly coupled to easily pop into the phone screen. Instead of wrestling, it's easier to start over and actually plan before I code this time.
list out your nouns
A simple way to start thinking about a system is to list out its nouns + verbs. Jot down the entities that interact with your system.
For blessfrey's inventory, that's the inventory (programmatic), the player character, the inventory app (UI), and base items. The inventory app is related to the smartphone and inventory items. Items are related to floor items, which are related to rooms.
(blessfrey has three different kinds of items.
- Base Item: holds all the data regardless of how the item is currently expressed
- Floor Item: sits on the ground and gets picked up by characters.
- Inventory Item: displayed in inventories, store windows, containers, etc
Floor + Inventory Items hold a base item inside them that gets popped out and traded around as the item gets expressed in different forms.)
connect your nouns with verbs
I wrote the entities in pink and moved them around until the placement was decently readable. Then I connected the concepts with arrows. These arrows represent the verbs, which I explicitly labeled in yellow.
The flow of these arrows can be very important. If you are modeling AI, for instance, no matter what path the program takes, there shouldn't be dead-ends. Seeing mistakes like that is easier with a diagram than lines of code. Otherwise, the flow is always generally useful for figuring out which methods are needed for each class and how they connect.
write the code
At this point, coding is a bit easier now that it's in some ways a transcription of the diagram. The entities are data (classes or objects), and the arrows are logic (methods).
conclusion
Your diagram doesn't have to be fancy or formal to get the point across to yourself, and it just takes a minute to save all the headache later. Don't skip this step or you'll have to rewrite the inventory system just to display it in a different window.