I’ve been playing a lot of Bubble Bobble recently and to improve my skill at the game I’ve written a React application. Often it helps to see how other people are playing the game. New techniques, strategies and tips can be picked up by watching people play through levels. However, play-throughs can often be very long, and coming back to specific parts of a play-through quickly becomes a hassle.

Watching Clips

To solve this, I wrote a React application called clip-navigator. It’s open source and, you can see it in action here. clip-navigator lets you select a video of someone playing a game and allows easy navigation through various points of the video, for example, levels within the game.

Screenshot of clip navigator

As the video increases in time, the level selection updates to reflect the current level. Importantly, selecting another while one is playing loads the new video at the same level the previous video was playing. This lets a gamer quickly review strategies for a single level across multiple videos and play-throughs.

The level drop-down and previous/next buttons allow easy navigation throughout the levels and the application also listens to right/left keyboard arrows to seek the player forward/back five seconds.

Creating Data

You can right-click YouTube videos to a link that includes the current timestamp. However, doing this many times across each video is tedious. clip-navigator reads from a JSON file that includes the metadata for each video and clip. To make clip creation easier, the last clip of any video shows the clip tools.

Screenshot of clip tools

The clip tools let you quickly add and remove clips to the end of the clip list at the current timestamp. The generated JSON can then be extracted from the browser’s local storage.

New Features

There’s a bunch of features that could be added to clip-navigator to make it more usable and accomplish different things. For now however, the application serves its purpose and lets me quickly review different strategies to completing Bubble Bobble levels. Future features and suggestions can be added and reviewed via the project’s GitHub Issues.