This is the final version, where I put together a nice-looking rotating star map with some well-known stars mapped out.

https://github.com/tornseglare/ShootThemAll/releases/tag/v1.8

For this star map, I created the star map background image and five semi-transparent images with the star names on a sign. One of them has a blue outline to pretend it's highlighted somehow, as in a game.

As always, the art must be imported through the ShootThemAll.mgcb file, nothing out of the ordinary here:

/build:Art/star_map.png
/build:Art/Sagittarius.png
/build:Art/Cassiopeia.png
/build:Art/Eridanus.png
/build:Art/Corvus.png
/build:Art/Grus.png

Then the images .xnb-files gets loaded into the game, in Art.cs:

  StarMap = content.Load<Texture2D>("Art/star_map");
  Sagittarius = content.Load<Texture2D>("Art/Sagittarius");
  Cassiopeia = content.Load<Texture2D>("Art/Cassiopeia");
  Eridanus = content.Load<Texture2D>("Art/Eridanus");
  Corvus = content.Load<Texture2D>("Art/Corvus");
  Grus = content.Load<Texture2D>("Art/Grus");

Now when all images are loaded, let's see how the signs are created:

  readonly List<PositionTexture> signPositions = new();
  Color signColor = new(255, 255, 255, 210);

The list signPositions keep our signs' positions on the star map. The signColor is white, with the alpha channel a bit transparent. This will make the signs slightly transparent when drawn on the star map which looks nice.

In LoadContent() we create the positions of the signs:

  int w = Art.StarMap.Width / 2;
  int h = Art.StarMap.Height / 2;
  mapCenter = new(w, h);

We want the signs on top of the starmap, spread out all around, so let's have the centre of the map as well as the w and h giving how far off from the centre the signs can spread.

  Vector2 signCenter = new(Art.Eridanus.Width / 2, Art.Eridanus.Height);

signCenter give the signs' rotation centre. We want it to be at the centre-bottom where the arrow in the image is.

  signPositions.Add(new PositionTexture()
  {
      position = new(randomizer.Next(-w, w), randomizer.Next(-h, h)),
      texture = Art.Eridanus,
      center = signCenter,
  });

Add the Eridanus star sign.

  signPositions.Add(new PositionTexture() { position = new(randomizer.Next(-w, w), randomizer.Next(-h, h)), texture = Art.Sagittarius, center = signCenter });
  signPositions.Add(new PositionTexture() { position = new(randomizer.Next(-w, w), randomizer.Next(-h, h)), texture = Art.Cassiopeia, center = signCenter });
  signPositions.Add(new PositionTexture() { position = new(randomizer.Next(-w, w), randomizer.Next(-h, h)), texture = Art.Corvus , center = signCenter });
  signPositions.Add(new PositionTexture() { position = new(randomizer.Next(-w, w), randomizer.Next(-h, h)), texture = Art.Grus , center = signCenter });

Repeat the same code for the remaining four stars.

In Update() we rotate the star map by increasing mapRot. I have cheated a bit here, as I don't care about different framerates, but that is easy to fix. (see the other examples where I have the code for it)

  mapRot += 0.01f;

Draw() is calling DrawRotatingMap() where the magic happens:

  Matrix RotMatrix = Matrix.CreateRotationZ(mapRot);
  Matrix ScaleMatrix = Matrix.CreateScale(0.8f);
  Matrix PosMatrix = Matrix.CreateTranslation(windowedWidth / 2, windowedHeight / 2, 0);

This time I wanted all the components in place; the rotation, scaling and positioning of the map.

The rotation matrix RotMatrix rotates around the Z-axis, the ScaleMatrix is a scale matrix set to scale 0.8, and the PosMatrix is a translation matrix which positions at the centre of the window.

  spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.NonPremultiplied, null, null, null, null, RotMatrix * ScaleMatrix * PosMatrix);

Here we multiply our matrixes and give it to the spriteBatch.Begin(). The matrix multiplication requires some explanation. The multiplication order is important when working with Matrixes, if you change the order you get entirely different results.

  RotMatrix * ScaleMatrix * PosMatrix

This can be translated into:

1. Rotate the 'world'. (all images are rotated around 0,0)
2. Scale the world. (scaling down all the images to 80%)
3. Move the world 500,500 pixels. (This is not scaled down as we put it last in the multiplication)

Now we are ready to draw everything:

  spriteBatch.Draw(Art.StarMap, Vector2.Zero, null, mapColor, 0, mapCenter, 1.0f, 0, 0);

First draw the star map. We tint it with a cold green-blue colour given in mapColor.

The mapCenter is given as the origin of the image. In this case, it is exactly the centre of the image which will make it rotate around its centre. Try fiddling with the origin parameter!

Then we draw the map icons on top of the star map. The map icons follow the map rotation. To make it look more google-maps alike their images are not rotated but kept straight.

  foreach (PositionTexture pt in signPositions)
  {
      // We 'undo' the rotation of the images by subtracting the angle here. If you leave angle at zero the images will be rotated too.
      spriteBatch.Draw(pt.texture, pt.position, null, signColor, -mapRot, pt.center, 0.6f, 0, 0);
  }

As seen in the comment, we subtract the map rotation before drawing the images. They still rotate around the star map as our matrix tells them to, but since we 'undo' the rotation by drawing them rotated exactly the opposite angle everything is rotated with, they appear to be drawn straight up all the time. (It sure took me some time to get this right!)

I decided to scale down the size of the signs a bit more, giving 0.6f as the scale parameter.

That's it! It should conclude my little monogame 2D-school for now, hope it has been of any use to you or at least inspired you to get started with monogame!

Back to index