Clients Category
-
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 3rd NFL game – Guardian Training: Over Throw is now out
17th Mar 2013
We really enjoy working on the NFL Rush Zone games for CA based agency Brandissimo! So we were very pleased when they asked us to create a third game for them based on the new Rush Zone Season of the Guardians.
Guardian Training: Over Throw was built in HTML5 for desktop and mobile browser. You start in the VR zone where you learn to jump and throw before being unleashed across 4 changing stages. Smash down the blitz bot targets as you go, collecting the power-ups, avoiding the obstacles and seeing if you can smash the other players scores on the site.
In order to maintain performance on mobile browser we used a relatively low resolution (480×320) and up-scaled it for tablet. Working directly with the designers at Brandissimo! we were able to ensure the graphics still looked good scaled up. It also meant performance on lower-end devices was kept responsive, which is vital when you’ve a stack of blitz bots to knock down with your last chain bonus throw. They were able to mock-up the animations and effects in Flash and we translated those into HTML5.
Play Guardian Training: Over Throw on the NFL Rush Zone site.
-
Helping Multiplication.com support their growing mobile traffic
7th Mar 2013
multiplication.com is a site dedicated to helping kids learn multiplication. Like many other sites they use Flash games to do this in a fun and engaging way. But as with many other sites they identified a growing volume of traffic from mobile devices, most notably iPads, so looked for a way to offer their games to those visitors as well.
They contacted us to help convert existing Flash games over to HTML5. They had tried a few times already but the results had been less than satisfactory; the games either not working fast enough or not working across devices. So we took their game Fantastic Fish Shop and ported it over to HTML5, retaining all of the original features of the game such as the transitions, animations, wide variety of character faces and shop upgrades.Site owner Alan Walker had this to say about the experience: “I wanted to drop you a note and let you know how wonderful it was to work with Photon Storm. I am thrilled with the game you converted from flash. I was a bit worried about having work done by a company half way around the world. (I have experienced some major issues in the past.) After my first conversation, I knew you were the people I wanted to work with. Thanks for finishing the job on time and on budget. But most of all, thanks for the amazing work!”
We look forward to helping Alan and his team in the future as they build up their selection of games for mobile visitors. If you’ve got existing games you’d like converted to HTML5 then please get in touch for a free quote.
-
CBeebies First Time Online – Teaching basic mobile interactions through HTML5 games
22nd Feb 2013
If you’ve got smaller children and watch CBeebies in the UK then you’ve probably seen their First Time Online campaign running. The project is aimed both at educating parents about what CBeebies has to offer online, as well as encouraging and explaining to young children how to interact with it. This week the final of the 3 mobile interactions that we built went live.
Created for the mobile/tablet web browser they take the young players through learning about 3 common interactions: ‘Touching’ is introduced via an Abney and Teal bubble popping game. The ‘Swiping’ mechanic is explained by hunting for the Piplings in Waybuloo and flicking the leaves away. And finally Postman Pat: Special Delivery Service introduces the concept of ‘having to wait’ for things to download – an unfortunate but unavoidable event in all online games!
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
