Let’s go down to the paddling pool with Duggee and have fun racing with the Squirrels. Hey Duggee: The Paddling Badge is the latest addition to the CBeebies website.

Up to four players can compete as they try to beat each other by paddling through a series of fun water courses that Duggee has constructed. Paddle against water rapids as they push your inflatable ring through the course, trigger other water features to block your rivals, and interact with fun physics based obstacles along the way.

The game was developed using JavaScript ES6 and the Phaser game engine. The MatterJS physics engine was used to create ‘realistic’ water rapids and currents that push the game characters through the course.

The game’s environments were designed using the Tiled map editor, with the map data being imported using Phaser’s own Tiled plugin. Various physics data was also embedded within the Tiled maps before being parsed and used at runtime within the game.

We even recreated a few cutscenes that were of a similar quality to the actual cartoon itself. For this we used Adobe Animate CC’s HTML5 framework to load and play the various vector animations that we created.

Core Technologies:

  • JavaScript ES6
  • Phaser framework
  • MatterJS Physics Engine
  • Tiled framework
  • Adobe Animate Canvas framework
  • HTML5 / SASS

Hey Duggee: The Paddling badge is available on the CBeebies website.