How we created the responsive HTML5 Art Tools for the BBC

We were very pleased to be able to create the responsive HTML5 version of the CBeebies Art Tools for the BBC. The CBeebies site had long had a Flash based art tool that allowed children to paint and draw in the browser. The BBC had also released a native app on mobile which offered a similar painting experience on mobiles.

However with the shift of their web site to a responsive layout they required a new art tool – one that was built using HTML5 technologies, that ran across desktop and mobile browsers, and that combined the best elements from both the native app and Flash versions.

Easy to re-skin

One of the primary requirements of the new Art Tool was that it should be easy for their editorial teams to re-skin it. This needed to be possible without having to edit any source code or recompile. To achieve this we built a power JSON data file structure and easy way of managing assets. This allows the BBC to create a brand new re-skin of the Art Tools by simply modifying a single json file and associated graphics. Full sets of PSD templates were created to streamline this process and a comprehensive 80+ page user manual was written for internal staff.

You can see a re-skin of the Art Tools for the show Hey Duggee. As you can see it’s visually quite different from the screen shots above, however it’s all running from the same single code base.

Here’s a small snippet of the configuration file showing how to place an art tool:

"icon": {
    "position": { "x": -40, "y": 140 },
    "selected": { "x": 60, "y": 170 },
    "scale": 1,
    "angle": 120,
    "defaultColour": 1,
    "audio": { "over": "paintbrush", "select": false }
}

Dynamic Brush Colours

It was important for us that the editorial team didn’t have to create all of the tools in Photoshop in each of the different colours they wanted to allow the children to paint with. So we built a system where-by the tools were split into parts – the “handles” and the colour masks:

The mask (the white image above) was created to be full white and sit perfectly below the overlay image on the left. We then applied a tint to just the mask.

Having done this just one per tool, we then allowed them to set the colours in the configuration file and dynamically created the tools when the app first loads. The end result is a dynamic colour swatch all using the same single base asset, capable of changing to any colour:

We employed a similar effect to this across all of the tools – from the brush textures to the animated help screen.

Lots of fun tools!

There’s no point creating an art tool for children unless you make it fun. To achieve this we created a whole range of creative tools – from the traditional Brushes, Pencils and Stickers, to tools we’ve never even seen in any art package before, such as the really fun ‘sticky tape’ and even a pair of walking shoes, that stomp paint all over your picture.

We built in full support for textured brushes, as you can see in the shot below. This allowed the editorial teams to create really interesting and fun brushes with just a base PNG, as the colours are applied dynamically at run-time:

Our ‘sticky tape’ tool allows the children to drag out pieces of textured tape onto their images. The textures can be anything – from transparent (like sellotape) to patterned as seen in Washi Tapes:

These allowed the children to really go to town with their creations!

Frames, Webcams and Print Outs

Once the child is happy with their creation they have the ability to either print it our or save it to a local file. Before they do this they can choose from a range of frames to put around the picture. Again all of these settings are driven from the configuration file. If the editorial team decide they don’t want to offer the ‘frame’ feature at all, it can be simply deactivated with a single line in the configuration file.

We also built in support for grabbing from webcams – allowing the children to grab a frame from their webcam and then draw all over the top of it. This can be especially fun when adding stickers.

Overall we were very pleased with how the art tools turned out. It was a nice change from straight game development for us, and helped us also push our framework Phaser in directions it had never been used before.

Happy to work on your HTML5 project

If you need an HTML5 game or app developed then please get in touch. From mini-games and promotional campaigns to creative tools, we have the experience to be able to help.

Posted on March 13th 2015 at 12:35 pm by Rich.
View more posts in Clients. Follow responses via the RSS 2.0 feed.