Data-only Components, jQueryUI, JSON, and Networking

My components are comprised of nearly 100% data with no methods. All of the manipulation of the data occurs in my systems. Some of you may be wondering why you need to separate the logic from the data. Doesn’t it just make work and reduce encapsulation? Well… not really. Once you start working with data-only components, you notice that components are able to encapsulate an idea without worrying about the world around them, and each system handles a particular aspect of the game, one to move things, one to build stuff, one to draw, etc. Even though the data and logic are in separate classes, everything has a very clear role: Components store stuff, Systems do stuff.

After following the development of Overgrowth, watching some pretty cool development videos about live-coding and live-editing, and cutting my teeth with some near-live-coding for my web-UI, I thought to myself: “I want that!”, and who doesn’t? Adding a way to view/modify the component data for the selected entity(s) on the fly wouldn’t actually be that hard, I’d just need some web-UI controls. Googling web controls quickly led me to jQueryUI which looks amazing compared with some of the other solutions available. Since I have data-only components, I can easily wrap them up in some JSON, pass a collection of them down to some jQuery that will display the values using jQueryUI controls. When the user changes something, data would travel the other way: jQuery would produce some JSON and pass that up to XNA where the changed data would overwrite the data in the component. So what if XNA were to consume JSON from the UI in the same way it would handle it from the network? Wow, everything just clicks. JSON wins.

Starting from the beginning: I’ll have partial JSON files for each entity type that will define which components to build and any default values for those components. At creation time, I will provide value overrides for real-time values like position and rotation. Since everything is data, that’s all that’s required to construct a new entity. The same JSON used to create the entities will be used to populate things like the selection info panel on the HUD, the entity viewer/editor discussed above, and to transfer new components, or changes to existing components across the network. Since it’s just data, it’s easy to visualize. I better get the last of the logic out of my components before anyone notices.