Bundling a Game Made with MonoGame

While developing Vulcard for this year’s iteration of the Game Programming Lab at ETH Zurich, we wanted to integrate the Steam API and package the game for multiple platforms. This process came with a few unexpected hurdles.

In this post, I’ll walk through the complete solution we ended up using. If you’re looking to publish a MonoGame project on Steam, this might save you some time.

Loading Sass files with Lit

Like Polymer before, Lit-Element uses javascript or typescript files for code, templates and styles by default, to enable the use of javascript variables. While this may be useful in some cases, personally I prefer having my style definitions in separate files mainly to benefit from Sass, but also the added benefit of editor assistance like highlighting and autocompletion. Fortunately this can be changed with a bundler like Webpack.

Some technical information about the Polyring widget

As those following the news about the Polyring may have read on xyquadrat, our widget can now be styled with themes. For those interested about the inner workings I will provide some technical information here.

The component makes heavy use of css variables alongside the attribute theme, which can be set on the component. Let’s walk through the needed setup, which consists of both javascript code and css descriptions.

Using steganography to send messages hidden in an image

There are multiple ways to send a secret message. The best known and usually used, especially over the internet, is by encrypting the message and later decrypting it. But it’s not the only possibilty. Steganography is the process of hiding information within another carrier medium, fooling everyone else into thinking that the carrier is the only message.

The basic principle ist simple:

  • Add a start and end tag to our message.
  • Convert the message to a byte string using UTF8.
  • Overwriting the least significant bits in each pixel with our byte string until the whole message is stored.

Let’s look at the last step if we want to use the two least significant bits: As an example we want to store 10 in a channel that currently stores 10100111. First we apply a bit mask with the ‘and’ operation, then we apply our data with an ‘or’ operation. This pixel data is then written back into the image.