CBeebies Art Tools
|Released||14th November 2014|
Code - Richard Davey
Graphics - Tom Waterhouse / CBeebiesPLAY
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.
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.
How to play our HTML5 games
While all of our games work in both mobile and desktop browsers a lot of the sites they are embedded in are mobile only.
To get around this either make sure you play our game using a mobile web browser or install a User Agent spoofing extension. We recommend the User-Agent Switcher for Chrome.
If you run into problems playing one of our games please contact us, we'll be only too happy to help.
Make yourself heard
All about Photon Storm and our
HTML5 game development services
Filter our Content
- Cool Links
- Flash Game Dev Tips
- Game Development
- Geek Shopping
- In the Media
- Phaser 3