Tiled-Based Stations

I’m hoping to release v0.4 of Masteroid next Friday, October 27th.

One of the things I really wanted to indicate artistically in Masteroid is the huge disparity in scale that can exist in space. The initial player ship is very small, less than 16×16 pixels! I like the idea of players being a spec in space compared to some of the other ships and structures. I want each sector to feel like a distinct place with it’s own sense of purpose. So, in this build I wanted to make stations much larger and also more unique.

Stations in Masteroid were originally two large sprites that are layered together and slowly rotate. These are time consuming to create and take up a large amount of space on the spritesheet.

Initially stations in Masteroid were comprised of two sprites: a foreground and a background piece. Having stations be one single sprite has a lot of problems:

1. It takes up a lot of space on the spritesheet
2. It’s time consuming to create a large, unique sprite for each station
3. Distinct stations will still have a lot of common features and redrawing/copying these into separate sprites is a waste of time and pixels

One idea I had was to make stations be component based. I could create a series of common components and stations could just be data structure that defines what and where each component is. This has potential because stations could sort of grow over time, adding components. Player actions could even contribute to this. However, it still takes up a lot of spritesheet space and stations would still be pretty similar…it’d be harder to make stations really stand out or have a style.

Even this small tileset allows the creation of huge, interesting-looking stations with a distinct footprint in space!

So, I landed on using Tiled. I have worked with Tiled a lot when creating levels, especially for platformers or orthographic top-view games. But I’d never used Tiled and tilemaps to define a single game entity. FlatRedBall also did not completely support this initially, although it was pretty simple to get that all wired up. Ultimately, tile-based stations give a ton of flexibility while occupying minimal spritesheet space. In addition to using tiles for the visual appearance, I also wire up some game-specific functionality to some of Tiled’s capabilities.

Station layout in Tiled. Multiple layers at custom Z positions gives stations volume and dimension while still using 2D sprites!

Some Masteroid-specific Tiled features:

1. I add an “EntityToCreate” property to special tiles. Masteroid replaces these tiles with an actual game entity during the loading process. For example, station docks appear as a red tile with a dock icon in Tiled but in game those are replaced with a Station Dock.
2. The special tiles are a part of a separate tileset shared between all of the tmx files I create. This means I only have to define special tiles in one place, the tile set, and they work the same in all of my tile maps.
3. I assign a PositionZ custom property to the Tiled layers. The game renders that tile layer at the specified position during the loading process. This allows me to create station chunks on a variety of layers, giving the stations dimensional volume without actually using 3D models.
4. I separate station lights from station structure in the tiles. This allows me to layer different light patterns over tiles adding visual variety to a fairly-small tileset

I have plans to add a lot more tile variety over time, including creating different tile styles for the various factions. But for this release I’ll at least have some unique stations that feel really large and complex! Here’s what a test station looks like in game: