Goodboy technical partner Mat Groves talks about the joy of building HTML5 games for browsers
Mat Groves – Cofounder and technical partner at goodboy
Q. Welcome Goodboy. You are HTML5 specialists with a strong focus on games. Tell us a little bit about yourselves.
Goodboy are a young agency which came into being as we primarily wanted to turn the tide on the dearth of interactive/entertainment web content in the immediate aftermath of Flash’s decline. Back then, the Internet was full of colour, interaction and expression. For a short while it seemed that we couldn’t do anything interactive or playful if we were to reach some mobile users as Flash wasn’t on iPhones.
Having been tinkering with HTML5, we could see it was powerful enough to create amazing content whether that be for storytelling, gaming or brand engagement. We get to make awesome stuff, but now it works on all platforms.
Q. ‘We make one product that works everywhere’ is the stance at Goodboy. What does this mean and how difficult is this to implement?
At Goodboy we’ve developed tools and a workflow so that our team can focus on making great content and not get hung up on device specific issues.For us there are three key challenges: browser quirks and inconsistencies, performance capabilities (from desktop powerhouse rig to Grandma’s Android) and resolution/fluid design.
To combat browser quirks, most of our content is created using a single canvas element. Using open source engine Pixi.js as a foundation means that straight off the bat we know that everything will be supported. In terms of performance capabilities, we solve these issues by building our content with layers. First up is the core experience which remains constant on all platforms and devices. Next we add visual and aesthetic layers on top: these are nice to have but they aren’t essential. This means that on a powerful device we can offer the webGL mega version and as the device’s performance features degrade, we can switch off these layers until a nice balance is reached.
Resolution goes hand in hand with fluid design and designing for all screen sizes can be a major headache! One thing we do with games is design for mobile (Retina) first as their assets are spot on for desktop. Just be aware of the reduced physical scale and remember things like buttons, to be pressed by big, fat fingers, need to be twice as big as those created for little mice cursors.
Q. Other than HTML5, what key technologies do you use?
Adobe CC features heavily and we use After Effects for creating animations/video editing, Maya for 3D models and animations to feed into Pixi, Texture Packer for Sprite Sheets and Flash which is very handy for laying out levels for JSON output. As with any technology, the real answer is not the tools themselves but how we deploy and synchronise them.
Q. You have worked with some very big global brands. How did you get involved with these projects?
The work with McDonald’s/Razorfish came through a more classic industry story of knowing someone in the company who was prepared to take a punt on our new outfit. Our very first piece of client work was 100 McDonald’s Moments which won a whole bunch of awards (including an FWA Adobe Cutting Edge Award) and cemented us as a trusted pair of hands. We’ve scooped more awards since.
BBC was a more direct take on a new business acquisition. Basically, we wanted to work with them so we skinned one of our games into one of their brands. That worked out well enough to get our first pitch, which resulted in the All At Breakfast game.
Q. Any advice for budding HTML5 games designers?
Don’t underestimate the power of this medium! It’s far better and more powerful than most people think!
There are loads of great engines out there that will give you a head start such as Phaser or Panda.js. As with all things code, the best advice I could give is to roll up your sleeves, get stuck in and have fun! Making games is as enjoyable as playing them!
Embrace failure – if you aren’t hitting walls (but ultimately smashing through them) you’re probably not trying hard enough. Or you’re a genius.