This is a technical postSeparating View & StateI'm a web developer so I spend a lot of time with frameworks like React or Vue. These facilitate making data-driven sites where what the user sees is adapted from a 'state' - information held about a user or what they're doing - and a back-end store of data. The pattern is valuable because it allows for a ton of re-usability even in wildly different visual contexts.
Because many games are very much driven by the view, this design pattern doesn't seem to be talked about much in game development. It's definitely used - for dialogue, inventories, etc. But I remember learning about this pattern for the first time and it opening my eyes to some new possibilities, so I thought it might be good to talk about how I'm using it in Chess4X.
Why should you separate?So, one of the main reasons why separating view and state is valuable in games is that you can hang on to a
lot more state without hanging on to a lot of complex objects. In Chess4X I only store the bare minimum to represent a state of the board:
- A 2D array of tiles
- A List of pieces
Tiles simply store a boolean value (true or false) of whether they exist, because the game fully supports 'missing' tiles.
Pieces store a few values:
- the type (pawn, king...), an Enum (basically a list of unique identifiers)
- position, an Array: [x,y]
- last turn the piece was moved, an integer
- the owner, an integer (could be a bool but in any place where it was trivial I have already added support for more players)
You'll notice I'm not storing the actual, visible model at all. Instead, I'm storing the references to the models in the class managing the
representation of the board, and given it the ability to find a piece model by it's location. I then make all gameplay calculations directly to my simplified state, and tell the board to update to match. This ensures that all my models are in sync and lets me, very cheaply, hold on to the entire history of the game and represent it in any other way I want - which you can see in action here:
It also allows me to very easily make an interactive visual board preview in the new 'Game Settings' window re-using the same systems I already developed for the active game (WIP, not all functional yet):
And because this window is data-driven as well, I can add new gameplay options and they will pop up in the list for me 'all by themselves' instead of having to place each one by hand. Speaking of, can anyone recommend any of the Unity HTML/CSS UI assets? I wanted to get a handle on Unity's UI first, but writing in HTML would be so much better.
But my game's state isn't so simple!This is probably true of most games, Chess 4X has an extremely simple state. But even if the pattern doesn't make sense for your game at large, it's worth thinking about how applying it to some of your systems could save you time and effort. Or how recording some subset of your game's state could help you debug and analyze it from different perspectives.