Founder and Programmer, Russ Clarke, explains the creation of TerraTech's unique method of content sharing.
Download and play the TerraTech E3 2014 Demo now!
TerraTech is a game about creativity and expression. Shared experiences are central to o23ur vision, but full-on network play is a big feature, and right now what we have is a single-player demo. We want to give our community a taste of social interaction through the game, by sharing and showing off their creations, but how?
This question has vexed us for a while. It's tough, as a small team, when you have limited time resources to spend and lots of really important things to do! It's always easy to come up with ideas that would be cool; much harder to find ideas that are cool and practical, without sacrificing other priorities.
The idea of a vehicle design sharing system had been on our minds for a while, and in principle sounds simple enough, but any kind of digital sharing requires network communications and online back-end services, and the prospect of building then maintaining these systems (even using existing components) is not really viable at present.
Then, on the way back from MCM Expo: London Comic Con a few weeks ago, we had an idea: what if we could run it through an existing social network, like Twitter? If we can send our vehicle designs in tweets, then Twitter provide us with a reliable hosting solution, and built-in social sharing and virality.
Of course, 140 characters is not much data to work with, but tweets can link to other services. What kind of free public service could we piggyback on to host small packages of binary data? Well, a picture sharing service would be perfect. So all we'd need is to encode our vehicle designs into a nice, arresting image (say, a screenshot of the vehicle in question), and we're golden.
And as it turns out, there exists a technology that does exactly that! And it has an amazing name...
Steganography
The concept of encoding information in a picture goes back at least 500 years in recorded history, and has typically been used as a form of cryptography. The Greek roots of the word mean "hidden writing", and the appeal of the technique for secret communications stems from the fact that a picture can seem innocuous, where a block of coded text may arouse suspicion by being obviously secretive.
In the digital era, it's easy to disguise data very thoroughly, as the human eye is incapable of distinguishing tiny variations in the colours of 32-bit pixels. Tools for doing this are freely available. Here for example is an online demo that will encrypt and decrypt messages in pictures:
Below is a before-and-after picture of a stegosaurus (see what I did there?) containing the opening scene from a well-known movie script encoded using the mobilefish demo. The difference is clearly imperceptible. Try saving the second image and decoding it yourself, using the mobilefish link above: the password is "clevergirl" (no prizes for guessing the movie!)
Of course, we are not trying to do anything secretive - we're just using a picture as a carrier for a payload of non-secret data. This means for TerraTech's vehicle sharing system I can implement a very rudimentary form of steganography.
Basic implementation
In the game, we already have tech to encode a vehicle design in a reasonably economical manner: a list of piece names, each with a position and a rotation. So, having saved the current player vehicle into one of these, I just need to serialise it into a byte stream, which is easy with standard .NET classes, and then encode the bytes into pixels of a screenshot.
The latter step uses the exact, very basic, algorithm described on Wikipedia's page on steganography - encode 1 bit of information in the least significant bit of each colour value of each pixel. That's 3 bits per pixel: we'll ignore alpha, because we don't want any partial transparency causing unexpected effects.
Then we encode the result into a PNG file ready to save, upload or otherwise share. This last step again is easy with the built-in Unity API.
The reverse process is equally straightforward. Load an image, extract pixel data and reconstruct a stream of data by concatenating a single bit from each R, G and B value. Finally, deserialise the resulting stream into the structure that represents a vehicle design, which can then be spawned as a brand new vehicle.
Making it better
We now have the ability to save a vehicle design embedded in a screenshot. This is great, but what happens if we decide to add more information into the tank design, like a callsign, or custom livery? All our old saves will break if we change the format. To guard against that, it's important to build in a versioning system. It doesn't take a lot of work, I just prepend the stream with a version identifier that we'll update if we change the implementation. I'm using the letter "A".
If I decide to compress the saved data scream in future, I'll update this to "B". My decoding logic first checks the version identifier, and then decides which decoding algorithm to use based on that. Right now, of course, there's just one.
It's all very well having some code that works, but we need to present the feature clearly so it feels nice to use. This means adding a button on the GUI, firstly, and we'll also crop the screen capture to a central region, framing the vehicle, rather than grabbing the whole screen. To emphasise this, we'll fade the non-captured screen area and add a camera flash effect and shutter sound.
Grab the demo build if you want to see it in action! Of course, saving vehicles isn't much use without being able to browse and load them too, so we'll need a scrolling menu, to select an image to load from the contents of a folder.
Future improvements
At the top of this post, I said we came up with this feature in order to share designs on twitter. We're still working on the Twitter part. Watch this space! Right now we can load and save the images to disk, but in our next build update you should be able to tweet your vehicles, and access other player's designs by retweeting them (the game will load from your personal stream).
We also have a little more work to do to polish the presentation, like explaining the capture button in the tutorial, allowing players to name their creations (with a caption on the screenshot) and also automatically suggesting the capture when the player breaks a record in one of our challenge modes.
We'll get as much of that as we can in the next release. Thanks for reading!
Download and play the TerraTech E3 2014 Demo now!
Thanks for writing this kind of behind the scenes stuff. I'm dumb as a stump but fascinated with how smart you guys/girls are and good info for gamers who have no idea what goes into making a game. Now get this thing kickstarted!!
Thanks mik3k! Kickstarter is happening very soon: Monday June 23!
where on the website you linked do we go to decode that image?
I'll check with the programmer and get back to you :)
Here you go.
Mobilefish.com