Posts Tagged ‘BBC’
-
How we created the responsive HTML5 Art Tools for the BBC
13th Mar 20154
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. Read More
-
Our largest HTML5 game to date: Wolfblood: The Mystery of Stoneybridge for CBBC
19th Jul 2013
It is with great pleasure I can finally announce that our latest game has gone live. Wolfblood: The Mystery of Stoneybridge (mobile browser only) is a large multi-part adventure game based around the successful BBC TV show. Wolfblood is a fantasy/supernatural TV series focused around the exploits of two ‘wolfbloods’, Maddy Smith (played by Aimee Kelly) and Rhydian Morris (played by Bobby Lockwood) as they struggle living their double-lives as wolfbloods, and keeping the secret concealed from the outside world.
It was commissioned as a mobile browser and desktop HTML5 game, and is part of the BBCs Summer of Mobile campaign. The game involves taking the player through Stoneybridge, the location in which the show is set, as they unlock 19 different puzzles and challenges across the sprawling map. Optional branches allows the player to explore and unlock new areas trying to achieve a perfect rating. Successfully complete the game and you can view some exclusive shots from series 2 of the TV show which is currently in production. Wolfblood: The Mystery of Stoneybridge is a departure from traditional CBBC content in that it relies entirely on brain power rather than brawn. There are no timers or tests of reaction involved, instead you have to solve your way to victory.
Technical Challenges
As with all mobile browser games we had to support a wide range of devices, from top of the line iPads down to lowly Android handsets. All graphics were designed around a 1024 x 672 resolution and careful management of resources was needed to ensure no crashes across mobile. But even then the game was still too large for the Android stock browser to cope with so we had to employ a multi-load system to give the browser a chance to refresh memory and stop the canvas from overloading. Honestly we can’t wait for Chrome to become the default on Android!
As well as the graphics we also had to approach audio carefully. We ended up creating a split audio system supporting both legacy audio tag and the more advanced Web Audio API. So if your browser supports it (for example iOS6) we can overlay great effects on top of the music from the show. On legacy devices we deliver just the music layer. A lot of work went into building the audio subsystem, as you need to take into account mobile locking, file decoding and channel management, but it was time very well spent, and the end result is now part of our Phaser framework.
Masters of the Pixels
Production of a game on this scale was a team effort all around. The consistently excellent artwork was the result of the mad skills of Antony Ward and Tom Waterhouse who went above and beyond to provide on-brand art, UI and animations. I’d also like to thank Ben Harding and Phil Wickliffe who helped produce all of the first round of prototypes from which a lot of the game concepts were born.
All development for the final version was handled by myself. Literally every single line of code for the entire framework and game. We don’t use any 3rd party libraries at all to ensure maximum control over every aspect of the game, and it paid off massively as a result. The desktop version that will launch shortly was built with the KiwiJS framework as we needed IE7/8 DOM support.
Finally I’d like to personally thank Jim Tonge, Jonathan Modley and Simon Clarke at the BBC for running production on such a demanding project.
Watch out for it on TV
Marketing for the game kicks off on the 20th July with promotion across the BBC and CBBC home pages, the CBBC Summer of Mobile TV trail and also an extended game specific TV promotion which we hope to be able to share with you here shortly. It’s always exciting to see work go live. It’s even more exciting to see it go live on major TV channels 🙂
So if you’d like to try and solve the Mystery of Stoneybridge then please point your mobile browser to http://www.bbc.co.uk/cbbc/games/wolfblood-mystery-of-stoneybridge-game.
-
Our Tree Fu Tom: Magic Dash HTML5 game is live
28th Jun 2013
We’re pleased to announce our latest HTML5 game has gone live on the BBC Cbeebies mobile site. Based on the extremely popular Tree Fu Tom TV show, Magic Dash see’s you running and leaping across 4 different stages, collecting magic sap and power-ups as you go. We’ve built a number of games for Cbeebies now and it was really great to do a proper action game.
Development at Photon Storm was lead by Jakub Joras with Tom Waterhouse handling graphics. Jakub pulled out all the stops to ensure the game ran as well as possible in mobile browsers. We were working from an existing Flash game created by Peg Digital, so the fun core game concept already existed as did a lot of the assets. But as is usual in moving from Flash to mobile we had to re-design the level layouts significantly and cut back on a few of the effects present in the desktop version. However we’re very pleased with the end result and what we managed to squeeze out of mobile browsers.
-
Old Jack’s Boat HTML5 game released for CBeebies
23rd Jan 2013
We are pleased to announce that our 4th HTML5 mobile browser game for the BBC pre-school channel CBeebies is now out. Based on the brand new show Old Jack’s Boat, staring Bernard Cribbins, Helen Lederer and Freema Agyeman, it allows little adventurers to peer into the depths of the sea and uncover the colourful characters living down below.
“Old Jack’s Boat is a brand new show on CBeebies and features Children’s TV legend Bernard Cribbins as ‘Old Jack’, a retired fisherman who lives in a little village on the North Yorkshire Coast. Helped along by a cast of colourful characters, ‘Old Jack’ tells tall stories from inside his old fishing boat. The series is a mix of live action and animation which allows Old Jack to wander along the seabed, visit tropical islands and fly high in the air on balloons always accompanied by his faithful dog, Salty.”
As with all CBeebies projects we have to take a very different approach to the design and implementation due to the age ranges involved. For example buttons use iconography, not text, and the game needs to cater for ‘inaccurate’ touch events and other random elements that 3 year old’s can inflict upon your mobile device.
Point your mobile browser at http://bbc.co.uk/cbeebies/ to find the fish.
-
RealTime Kiwi Fusion Christmas Video
23rd Nov 2012A quick summary of what’s going on right now:
Realtime Contest
First of all we’re happy to be one of the judges in the Realtime xRTML 3 contest that is now running. As their name implies Realtime provide some very smart web tech for real time push based messaging. This has massive application in HTML5 based multiplayer gaming. From a simple shared cursor experience to a proper full-on game. There are plenty of code examples on their site – and don’t be put off by the ‘enterprise’ focus either, the free tier has plenty of room to power a popular online game.
Talking at the BBC Fusion Games Summit
I’m pleased to be talking at the BBC Fusion Games Summit next week. I’ll be covering some of the stark realities of building for the mobile web and things to take into consideration when commissioning or pitching for HTML5 game projects. Although my talk is sold-out, if you’re attending the event then please come and say hello!
Sign-up for the Kiwi.js launch
We are getting increasingly close to a release of Kiwi.js, our HTML5 game framework built specifically for mobile browsers. It would be great if you could sign-up on our launch site and help to spread the word. The moment it goes live you’ll be first to know and we may even be throwing in some special offers too 🙂
My onGameStart presentation is up on Vimeo
Back in September I gave a talk at onGameStart about making money from your HTML5 games. The talk was called ‘Insert Coin to Continue’ and much to my dismay they filmed it all and put it online 🙂 So feel free to watch me nervously trying to explain how to get your game sponsored. Despite my obvious nerves in public speaking the feedback I’ve had has been great, so it was worth it! Of course you should also check out the rest of the great videos, especially Rendering Voxel Worlds by Jonas Wagner, if only to see his priceless reaction when his brand new MacBook Pro falls off the lecturn 🙂
Storming Christmas Cards
We just had a bunch of company Christmas cards printed (by the ever excellent moo.com) featuring a cute new piece of pixel art by Ilija. We’ve had more printed than we need to send to clients and don’t want the rest to go to waste. So drop me a line with your name and postal address, and tell us what your all-time favourite game is (and why). Come December we’ll shove one into the mail for you, subject to quantity!
Hire Us
All about Photon Storm and our
HTML5 game development services
Recent Posts
OurGames
Filter our Content
- ActionScript3
- Art
- Cool Links
- Demoscene
- Flash Game Dev Tips
- Game Development
- Gaming
- Geek Shopping
- HTML5
- In the Media
- Phaser
- Phaser 3
- Projects
Brain Food
