Make a time-reversal mechanic straight out of the 2008 indie hit, Braid. Mark Vanstone has the code, straight out of the March edition of Wireframe magazine, available now.

How many times have you played a game and wish you’d done the last move differently? In 2008, Braid answered thanks to designer Jonathan Blow’s ingenious time-reversal mechanic. If you jumped at the wrong time and fell down a hole, you could rewind time and try again.

Braid’s graphics were created by artist David Hellman, who’s generously made the artwork available for download from his website – we’ve used these to recreate the Braid time mechanic with Pygame Zero. There’s also a Game Developers Conference video where Jonathan Blow describes how he coded the time reversal part of the game, so we have a good idea of how to approach this challenge. We’ll just make a small section of the game here, but it could easily be expanded using materials provided by the original creators.

Before we get to the reversing time bit, we’ll need to create a basic platformer game screen. Braid has a parallax scrolling background with organic-looking foreground elements. We can’t really make the game environment out of separate blocks, as we might in other retro platformers, so we’ll just have one large image for the background and one for the ‘platforms’ in front, and this will form the environment which protagonist Tim runs around in. We also need another invisible image for collision detection, to test where Tim’s moving and whether his path is blocked. On our collision image, white pixels can be moved in, black ones are the platforms, and the blue area represents a rope ladder that Tim can climb.

We’ll move Tim left and right with the arrow keys. This scrolls the environment along with the background moving half the speed of the foreground to create a parallax effect. There are several frames of animation, both left-facing and right-facing, for Tim running, so we cycle round those while the arrow keys are pressed. We need to check if Tim’s standing on a platform, so we check the pixel under his feet on the collision image, and if it’s not black, we apply some gravity to him. There’s a bit of a fiddle on the gravity to enable Tim to run up inclines. If we move Tim up a pixel before we apply gravity, then that will allow for shallow slopes during movement. We’ll also stop Tim from running through walls by checking the direction he’s moving in for collision too. We can get Tim to jump with the SPACE bar by activating a jumping countdown, with Tim moving upwards as the counter counts to zero, before the gravity calculation kicks in again.

Now we can deal with the time-shifting element. To make the game run backwards, we’ll make a list of all the things that are changing on the screen each frame. In this case, there are only a few movable elements, but in the original game, there were many things that needed to be remembered, so it would’ve started to take up quite a bit of memory. All we need to save in our version is the position, direction, and frame number associated with Tim, and the position of the background and platforms. We put all this data into a list and keep adding to it. We can also put a count of how many seconds have passed (at 60 frames a second) at the top of the screen.

Pressing BACKSPACE switches on rewind. We now look at the last entry in our list and set Tim’s attributes and the environment position to reflect that data. We then delete the last entry of the list and move the time counter back. We can actually move two spaces back in the data list and have the rewind happen twice as fast as the normal game speed. And that’s about it. The original game had many more complex elements for Tim to contend with, but we’ll leave you to have a go at adding them to this quirky, fascinating platform puzzler.

Get your copy of Wireframe 60

You can read more features like this one in Wireframe issue 60, available directly from Raspberry Pi Press – we deliver worldwide, and there are plenty of subscription offers to save you money on the price of an issue.

And if you prefer your magazines in digital form, you can also download Wireframe issue 60 as a free PDF!