Panic Spiral: Mapping the Ship

Before I get into the main subject of this post, I’d like to outline a quick change to the way I post about my game dev journey. I still intend to do weekly posts where possible. However, I am aware that a lot of my posts are quite technical, and I often don’t showcase the actual game I’m building. So, going forward, I will be doing one post per month where I focus more on the overall progress made rather than an in-depth technical dive on one or two features.

Based on this change, next week’s post will be the first Panic Spiral demo post.

And now, back to my regular game dev journey post.

In my last post, I mentioned that I’d created the basic ship map for Panic Spiral in the game. I also said that this was not as straightforward as I’d anticipated due to the lack of collision logic and tile grids in PixiJS. Today’s post is going to take a look at how I built the tools needed to make the map in the game. I’m also going to talk about the way I’ve designed the map and how I hope that will affect gameplay.

Map layout and tile grids

What is a tile grid?

For Panic Spiral, I’m using free asset packs from itch.io. I could have looked for an image of a spaceship interior and used that as my map – fitting my game to work with that map. But that doesn’t really sit right for me. I want to be able to modify my map to fit the needs of the game. So, instead, I looked for tile sets.

A tile set is designed to work with a grid layout – usually in one of three patterns: a square grid, an isometric square grid, or a hexagonal grid. The idea is that you set your grid to have repeating tiles of a set size and then you can place a tile in every position. Because the tiles are all the same size, they will then fit together perfectly and without needing to set the exact pixel position of each tile.

Many game engines have a visual editor that lets you build on a tile grid.

PixiJS, unfortunately, doesn’t even have a grid component.

Making a tile grid in PixiJS

Fortunately, it’s actually very easy to make your own tile grid. You need to define three things:

1. The shape of your tiles. As I mentioned previously, most tile sets are squares or hexagons, but you could use any shape you want so long as it fits together in a regular grid
2. The size of your tiles. Your tiles should be the same size. Some of your assets could take up multiple spaces on the tile grid, but on the grid itself they should all be the same size
3. A coordinate system. This should probably follow the convention of the x and y coordinates starting at 0 at the top left of the grid, with x increasing as you move right, and y increasing as you move down

For Panic Spiral, I found a spaceship tile set with square tiles, so the code for my tile grid is very straightforward.

import { Container } from "pixi.js";

class TileGrid extends Container {
  // this gives us a tileSize property that the rest of the 
  // class can access
  constructor(public tileSize: number) {
    super();
  }

  public addTile(tile: Container, x: number, y: number) {
    // set the x and y coordinate based on tile size
    tile.x = x * this.tileSize;
    tile.y = y * this.tileSize;

    // add the tile to the grid
    this.addChild(tile);
  }
}

Using this TileGrid component, I added 32 x 32 pixel squares with their coordinates on top of a scaled up version of the ship from the title screen so I could see how much space I have to work with.

At this point, placing individual tiles is easy – I have a coordinate system and the tiles.

Map Design

I’d previously sketched out a quick map design for Panic Spiral on a sheet of paper. With the coordinates for a grid of useable space defined though, I decided to use a grid made in Google Sheets to map out the spaceship properly.

You’ll notice that I’ve not used the whole grid – I’m trying to follow the shape of the spaceship a bit. You might also notice that the doors are placed so that navigating the ship isn’t quite as straightforward as it could be. And, for the most part, systems aren’t right next to the entrance door.

These are all part of me attempting to design a map that is:

• Simple to understand
• Slightly frustrating to navigate

Each system has its own room, which will, eventually, be clearly labelled. This fulfills the idea that the map should be simple to understand. If the engine breaks, the player should immediately know where they need to go to fix it.

The doors between rooms making the ship a bit of a maze fulfills the second point – that the ship should be slightly frustrating to navigate at the best of times. Ideally, when multiple systems break down in quick succession, the frustrating navigation through the ship should come to the forefront and add to the feeling of panic that the player is feeling. Which system need fixing first? How do I get there quickest? Should I change my path to fix something else en-route?

Obviously, this second concept will need plenty of play testing. Something I find frustrating might actually be easy for the majority of players. Or, the more likely outcome, what I find easy because I’ve been testing it myself for so long might actually be too frustrating.

For now, however, I’m happy with the map design, and I’ve added it to the game. Minus the doors, because I don’t have door logic yet, and that’s not an urgent feature right now.

The next steps

Now that I have a map, which has proper collision logic so the player can’t just float through it, I’ve been able to move on to adding the systems which break down. A few bugs have reared their ugly heads too, but I’ve been taking note of them so I can squash them down though.

Once the systems have been added, I can create a score component, and something to track the ship and player health. These will need hooking up to the system breakdown and repair events so that I can track when the game should end. And at that point, the minimum viable version of Panic Spiral will be ready for play testing.

Overall, despite this game having a much smaller scope than my turn-based tactics/strategy game, it is still taking longer than I anticipated. But I’m hopeful that I’ll finish it soon and let people play it so I can get feedback.

Next week, as I mentioned at the start, my update post will be a high level summary of how the game is progressing along with a demo of the current gameplay.