HTML5 games in Mind Candy

HTML5 games in Mind Candy

HTML5 Games has always been a bit of a grey area, with the decline of the Flash Platform it still felt like Web Technologies were lagging behind what the Flash and Unity Player could do in the browser.

Over the last year or two this has all changed, since Steve Jobs declared war on Flash it’s been a bit of a bumpy ride but with companies such as Google, Mozilla, and Microsoft all getting behind HTML5, W3C finally declared the standard as ‘complete’ it suddenly feels like the technology has grown up.

HTML Games have also grown up, with Nintendo partnering with Unity and ImpactJS for their Web Framework, as well as the BBC and Nickelodeon investing a lot of money in to converting their existing Flash games to create new and exciting experiences for users on a wider range of devices.

Here at Mind Candy we always want to push things and try new technologies, however we also feel like whatever we do try has to work in a real world scenario and while HTML5 has been around for a while, we’ve never felt it a good fit for us until now.

Why HTML5?

With PopJam growing as a platform we always wanted to deliver games to our audience, however with the App store submission times releasing content frequently making the games natively within the App was completely out of the window, also having to support multiple platforms we needed something that was write once and deploy across all, this is where HTML5 came in for us.

Cross Platform

One of the huge benefits of using HTML5 was that it is truly cross platform, and while the performance of native will always be far greater, porting the games over to each platform would’ve destroyed us as a team.

When starting out with HTML5 we instantly noticed that even though we were cross platform, there were still hoops we needed to jump through to make things work in the way that we wanted, the main pain point being audio.

As we were targeting a mass of devices we needed to make sure that our games worked on all resolutions and inputs worked as expected, however it felt that once we’d broken this barrier we’d be okay.

iOS provided a UIWebView we could use out of the box, however we decided to use the Crosswalk Project for Android as it allowed us greater control than the one that comes built in to Android.

Fast Iterations

Using HTML5 means we were not bound by the App Store restrictions, meaning we can push new games and updates out incredibly fast. It’s not only deployments that are faster either, on of the most powerful things with making HTML5 games is that it’s a link to a page and the game can be played.

With JavaScript there is no compilation time, and you can debug in real time within the browser. This also meant we could develop some pretty cool in house tools that would speed up the development of our games and systems, whilst running within PopJam.

Starting out

One of the things with making HTML5 games is that there are so many things that need to be considered, such as asset loading, memory management, input, physics, 3D, 2D, animations and many more, we had to decide on the best way to deliver our games in the most optimal way possible.

On top of all of these decisions there are also multiple ways to render content within the browser:

  1. CanvasStarted as an experiment by Apple, is is now possibly the most widely supported standard for generating graphics on the web. Using canvas also eliminates a lot of cross compatibility issues that other methods may have. Performance tests on both iOS and Android worked out quite well for us.
  2. WebGLWebGL offers hardware accelerated graphics within the browser and on mobile is really still early days, while iOS implemented full support it still comes with some very interesting edge cases. Android support for WebGL is very different world as we found out when targeting low end devices.
  3. Divs / CSS TransitionsThe method of updating divs that are rendered on the page is an interesting one as it allows for nice affects using CSS3 transitions, however the lack of support across mobile browsers and different versions of mobile operating systems was a problem.

We tried all of the above methods and ultimately we ended up utilising all of them, it really came down to the content that was being presented to the user. We used WebGL where we could, and anything that didn’t support it we fell back to Canvas.

Anything that had relatively simple content we ended up manipulating divs and using various methods for transitioning elements to fix cross compatibility issues.

Choosing a Game Engine

One of the things that stood out when looking for a game engine is that there is a lot of them, and not only engines, there are also products out there that known as ‘Game Makers’ allow you to make games with little to no code such as Construct, Game Maker, and Game Salad. If you’re looking for something to try I can highly recommend this website.

We actually tried a couple of different engines, as well as allowing people who weren’t developers to use the ‘Game Makers’ to prototype ideas and test performance.

After evaluating our choices we decided to use Pixi.js from Goodboy Digital, an incredibly lightweight engine that offers an ActionScript like API as well as many other features such as:

  • Asset management
  • Multi Touch for Mobile
  • Sprite Sheet support
  • Full Scene Graphs
  • Third Party Libraries (Spine, Tiling)

it also allowed us to toggle effortlessly between Canvas and WebGL to allow for support on lower end devices.

Another thing that Pixi has is thorough tutorials, incredible documentation and a very active community which goes a long way when choosing something like an engine to use be it for games or software in general.

At the time of writing this article, Pixi have just announced v3 of the engine, and have provided a benchmark test to show off the performance. I would strongly urge you go check it out, even on a low end device it’s pretty impressive.

Tools

One of the things that came as a breath of fresh air when venturing in to the world of JavaScript is how far it’s come since I last used it, for the last few years I’ve had my head firmly planted in AS3 and Unity with C#.

With tools such as:

  1. YeomanYeoman allows you to start new projects, choosing from hundreds of generators that have been created it, you are able to scaffold new projects quickly whilst prescribing best practices and tools.
  2. BowerThis is one of the most lightweight package managers along with NPM I’ve used in my career, allowing us to manage dependencies across projects effectively and also allowed us to keep our repositories incredibly small.
  3. GruntUsing Grunt as our build system was one of the best decisions we made, allowing us to move incredibly fast when building our games, and automate a lot of tasks that done manually would’ve been incredibly laborious.

We were able to create a solid work flow from starting a project to releasing our content on to PopJam.

As well as using these tools, the JavaScript community is an incredibly talented community with a lot of libraries out there to use that help in every day web development.

It’s not all rosy

As amazing as things have been making games over the past few months, it has not been without its headaches and hair pulling moments, but this is why we love what we do, right? If it wasn’t a challenge then it would be boring.

Targeting multiple platforms comes with its own problems, however some of the biggest problems we had was with the hardware on Android, as there are a lot of cheaper low end devices that are prime for parents to buy for their children we encountered devices claiming they supported certain features however when running in the browser would crash the PopJam instantly leaving us in a state of flux and no logs to go on. We found a lot of this came down to the chipsets that the cheaper devices use.

It wasn’t only Android that caused us problems either, with the iPod Touch 4G being one of most used devices amongst children and some only supporting iOS6 this left us not being able to push performance as much as we wanted, as well as the iOS6 UIWebview implemented being very temperamental about what standards it supported.

The one thing that caused us the most headaches out of everything though was Audio, HTML5 Audio is still very limited and even more so on some of the cheaper devices with some only supporting the WAV format which means larger file sizes, any other format used would cause the whole application to crash as no other codec was available. It is recommended to use the

Conclusion

We’ve had some amazing fun creating some interesting games for PopJam using HTML5, not only because we got to make games but we also got to build some awesome internal technology and tools, create a pipeline from concept to production in just a few months, and most importantly we got to create some engaging experiences for our PopJam users.

 

 

 

FOWD 2012: Future of Web Design

The Future of Web Design is one of the biggest and well respected annual web conferences in the world and recently the Mind Candy web team (Davide, Leo, Jenny, James and David) had the pleasure of attending. What follows isn’t a full-on summary of the event as that wouldn’t do it justice. It’s very well documented over the internet already. Instead, in a Q & A interview style, we talk about what areas of the conference stood out most for each of us.

FOWD 2012

Q. What was your favourite talk and why?

David: I particularly enjoyed Mark Boulton’s talk about “Failing and Doing It Well”, he highlighted the importance of embracing failure and maximising the learning process by taking risks and understanding that part of that, is not always succeeding. Putting the emphasis on learning creates for a better work environment and ultimately better work :).

He also highlighted issues with what he perceives as an issue of being overly ambitious; in the sense that you can never achieve your goal and be satisfied. He advises “don’t be ambitious, be a dreamer” because dreamers try to change the world but are content if they don’t succeed.

Jenny: I had a few, but the stand out ones tended to encapsulate my own current position in the industry, and my own future ambitions. I’d say a heady mix of Remy Sharp’s “Dr Weblove / How I learned to stop worrying about Photoshop and love designers”, Jonathan Berger’s “Code Literacy for Designers”, Sarah Parmenter’s “Future of Beautiful iOS Design”, and Jon Tan’s talk on Web Typography.

James: Laura Kalbag gave a great talk, I found her approach to adaptive responsive design both practical and pragmatic. She gave some great advice, such as: design around your images, don’t design straight into the browser because you’ll end up with blocky designs and it’s OK to design the desktop version of a site first.

I also really enjoyed Jon Tan’s talk on web typography, he made the point that badly set type isn’t harder to read, it just puts the user in a bad mood, which makes them much less likely to do what you want them to do.

Davide: The talks given by Bill Buxton and The Standardistas: they were inspiring: the former because it was a clear push toward the future and gave me an insight on how and were new ideas are born; the latter, because in an overconnected society like ours, we easily run the risk of simply collecting superficial information (like the squirrel) without digesting anything and missing the true power of a learning experience: incubation.

Q. Most exciting thing that you’re looking forward to?

Davide: The BIG Innovations intruduced in The HTML5 JS API: Geolocation, WebWorkers, WebSockets, Canvas, Local Storage, Indexed DB; Pushing forward for bringing Javascript in the Backend with NodeJS (Railway, Express etc..); Moreover, the wide adoption of CoffeeScript as the official successor for Javascript and seeing it supported natively by browser implementors.

Jenny: The final death throes of Internet Explorer 6.

Leo: Martin Beeby is a Microsoft web evangelist/developer and his talk blew me away! He introduced one of Microsoft’s current HTML5 developments: ‘Soundwave – Using the Doppler effect to sense gestures’ and if it realises its promise then I think it’s going to revolutionise the way we interact with the web.

In Microsoft’s words, SoundWave is a real-time sensing technique that leverages a device’s speaker and microphone to robustly sense in-air gestures and motion. So via clever use of existing device sensors, we can start to imagine and define new ways to touch, speak, move and interact with a web app as demonstrated in the link below.

http://www.youtube.com/watch?v=rFM59B3tYI4

Muscle memory is quicker and more intuitive than keyboard/mouse alone so in future I fully expect faster and richer human interactions with HTML5 web apps. Add to this the cutting edge advances in utilising a computer’s webcam via getUserMedia(), and the possibility of all these sensors working together in future, we can really start to imagine more involved and immersive web experiences and interactions. It’s still early days, but very exciting!

Q. What is the future of web design?

Davide: Maybe to change and include one of the new trends, that see Web Applications becoming more and more full fledged ‘Desktop’ Applications simply running into a web container. Web Design, in this perspective, will become more of a ‘Web’ branch of ‘application’ design.

Jenny: It’s everywhere we look and in everything we do. It’s a wealth of information made beautiful to look at. It’s the internet in our pocket and the world at our fingertips. It’s us, totally involved.

James: That there is no set best process for designing flexible adaptive sites – this is something I find incredibly exciting.

Q. Will this change the way you work/think in future?

Jenny: It’d be difficult for it not to. The arena we throw ourselves around in is constantly in a state of update, and it’s really important to keep our eyes open for the game-changing stuff :)

I personally came away with a whole bunch of practices and angles that I’d not thought about before, and that are already making a big difference. The speakers at FOWD know their onions, it’d be silly not to take notice!

Davide: Yes; I’ll start looking around me for hints of the future (see Bill Buxton talk) and I’ll probably try to focus on one topic at a time instead of consuming most of my time wandering around and ammassing information (that I never consume).

Q. Tweet or quote of the day?

Leo: “Don’t think. FEEL. It’s like a finger pointing at the moon. Do not concentrate on the finger or you will miss all of the heavenly glory!” Bruce Lee

Jon Tan talked about the emotive qualities of typography and how it is felt rather than just seen, so I think using a Bruce Lee quote to end a talk on Web Typography was awesome!

Jenny: I have a few…! I’ll settle with these:
“No matter what the tech is now, no matter what it is in the future, it will always be about communicating” – @blueleafchris

“Ideas don’t form in a vacuum. Without constant input, the outputs will inevitably remain the same” – @standardistas

David: “Now we can do anything, what should we do?” – Bill Buxton

Bill Buxton’s talk was one of the most future driven and he highlighted that technology is rarely what holds back progress; the limiting factor is often our imaginations.

Q. The one thing that you took away from the conference?

Jenny: I’m really big on learning new skills and becoming better at ones I already have. I like to be an InfoSponge™.

So I love how those in our industry (and especially the startup tech world) are excited to share information and fresh thinking – I believe we encourage that more than any other industry. It’s given me a lot of motivation to do the same, and rather wonderfully, learn a lot in the process.

Q Are you a superstar, ninja or rockstar?

Davide: Ninja, quickly moving in the shadows and sharpening my blades for the big battles to come.

James: I like to think of myself as a tramp with a house and a job.

Jenny: I’m just a massive nerd, and damn proud of it.

All in all, it was a brain-cramming, eye-opening and inspirational 2 days that provided a lot of insight and food for thought. Here at Mind Candy, we’ve already started to modify our design/development processes as a result of what we learnt and the results so far have been massively positive! With so much going on and so much to look forward to, it also ignited a renewed sense of excitement and enthusiasm for the web. So for these reasons alone, it’s been a highly invaluable experience and we’re very much looking forward to the next one! Roll on, FOWD 2013!

We now have access to all the videos so get in touch if you’d like to talk more! In the meantime, here are several interesting people to e-stalk:

@standardistas
@mrjoe
@USA2DAY
@rem
@jontangerine
@sazzy
@markboulton
@laurakalbag
@boagworld
@ryancarson
@Dstroii
@hellofisher

Google and HTML5 – Simplicity, Security and Speed

HTML5

HTML5 has been around for a while, but only since recent times however, has it emerged as the major web technology of choice moving forward. Browsers are catching up, increasingly adding HTML5 feature support and there is an emergence of tools offering near-comprehensive compatibility with older browsers and platforms. Not to mention the massive support and investment from tech powerhouses such as Google and Apple, HTML5 really is fast becoming the defacto standard for building powerful, cross-compatible web apps.

This new age of HTML5 powered web apps means we can recreate a seamless native app experience from within the browser. However this time, there’s no flash, no plugins, nor any downloads. Instead, with the help of new HTML5 features such as drag and drop, local storage, multimedia (canvas, svg, video and audio), geolocation, offline and real time communication (webRTC), along with CSS3 and various Javascript API’s, we now have one technology stack that is usable across multiple platforms and devices.

Google

Google have pioneered in this area for a while, having led the way with a plethora of powerful, game-changing, web apps such as Docs and Sites to name but a few. They recently invited a group of geeks/web developers to their London offices in Victoria for a talk about HTML5 and some of the things they’ve been working on. I was part of this group.

The offices are pretty cool. From the famous Google ‘don’t be evil’ posters to the life-size London red bus to the fully catered kitchen and astro-turfed meeting room. It all supported the fun, creative and inspiring vibe floating around the place and this is what Google is about from a cultural point of view. What Google are all about technologically, can be loosely categorised into 3 areas: simplicity, security and speed. These are the primary focuses for the Chrome OS and also for their user-centric designs.

Simplicity

New breed of Web apps: One technology stack that is interoperable between multiple devices and platforms without the need for downloads or cross platform and OS adaptations. Add powerful features such as offline use, canvas and touch event API’s, and the categorisation between a website and web app becomes more converged. FT and Kindle are good examples of this new breed of HTML5 web app.

Chromeframe:  There are a lot of cool new HTML5 features which aren’t compatible with older browsers such as Internet Explorer 6 & 7 and this can be costly to support for developers. One option to reduce this headache is to prompt users to install Google Chromeframe which enables Chrome to work inside Internet Explorer. Instant compatibility.

WebIntents: Web Intents make it easier to share data and web services across apps. E.g. ‘share a link with Twitter’ or ‘edit a photo with image editor before sending’. Instead of integrating each and every one of these web services with your app, the user is empowered with their own choice. The idea is that your service registers an intent to handle an action such as sharing or editing, and the system will learn to find the appropriate services for the user to use based on the user’s preferences. Less integrating, more sharing.

Security

Content Security Policy (CSP): CSP tackles malicious cross site scripting by allowing web pages to limit where external content can be loaded from. Additionally, inline javascript and CSS are not allowed. As well as providing a good security measure, this also helps maintain good semantics.

3Dtin: This is an entirely web based 3D modelling app where anyone can jump in and start creating 3D models. If extra functionality is required, it offers an openID signup using Google Identity Toolkit which adds a layer of security onto the login part of the process. This ‘try now, sign in after’ approach enhances the user experience by allowing users to first engage, then commit after.

Browsers: A good browser makes all the difference. Chrome pushes updates automatically which ensures that the user always has the latest version with all the latest security patches. It also offers comprehensive sandboxing and plugin security for extra layers of protection.

Speed

Offline: HTML5 provides a better way of implementing offline availability and local storage. Previously this was done using cookies and offline emulation (gears). Now, it can be done using application caching and HTML5 storage. Application Cache is like a beefed up implementation of the browser cache, storing references to all required resources in a cache manifest file. HTML5 storage includes API’s such as Web Storage and IndexedDB, which store user state (such as state of play in a game) on the user’s local database for later use.

Frameworks/Templates: The idea of using frameworks and templates isn’t new, nor are they a requisite for building HTML5 web apps, but the ‘do more with less code’ benefits are certainly worth a mention. For Javascript, popular MVC frameworks include Backbone.js and Javascript MVC. SASS and LESS are some of the more well known CSS frameworks. Underscore and Mustache are great for templating. If you want to start building an HTML5 website from a template, then HTML5 Boilerplate is the daddy.

Bleeding Edge Technologies: This is what the Google developers refer to when talking about work on more-cutting-than-cutting-edge technologies (i.e. not well supported!) These include:

  • pageVisibility API: This determines if your web app is actively in view of the user. If not (i.e. user is on another tab), then the non-active pages are paused, hence optimising performance.
  • prerendering API: This predicts where the user will navigate next and pre-loads the page so that it appears to load instantly when it is clicked.
  • Fullscreen API: Fullscreen without the need for flash. All individual DOM elements are styleable which leads to lots more control and customisation.
  • Gamepad API: With powerful multimedia capabilities such as canvas and SVG gaining momentum, games running in the browser are only going to get more sophisticated. This API maps gamepad button events and empowers the user with a more traditional gaming experience.
  • webRTC: This is real time communication through browser alone i.e. plugin-free. It’s based on p2p and a handshake through to the server, and uses the getUserMedia API to talk to the user’s camera/microphone. This has the possibility to create much richer web-browser social video based experiences than was possible before.
  • Speech Input API: With the ability to transcribe voice into text, this will be a game-changer… once the voice recognition technology improves. An extremely exciting prospect for the near future.
  • Video subititles: Using the <track> tag and a linked .vtt file, video subtitles can be implemented. Great for accessibility, with potential for timed metadata and deep-linking into exact points on a video. Perhaps, on-the-fly localised subtitles using multiple .vtt files and the speech input API in the near future?

Conclusion

Technology moves fast. In my time at Google, buggy demos were shown, Chrome extensions were written on the fly and new features were released that the top developers didn’t even know about. The motto of the day seemed to be ‘There are a few bugs, but it works’ and ‘That’s a bug, I’ll fix it’. It’s what happens when you’re at the front of a new technology. But it’s through innovation and fast-paced iterations in which cool things develop…

So it’s a wonder why Microsoft have been so slow in providing HTML5 support for Internet Explorer. With its large market share, mainstream adoption of HTML5 has been massively held back. However, this is all set to change, with the imminent arrival of IE10. Less time will be spent dealing with cross platform and device issues, messing with legacy browser woes and hacking polyfiller shims together. More time will be spent innovating, and building richer, more sophisticated web apps that run through the browser alone. Exciting times to be a web developer! Developers are just scratching the surface of what is possible and as the HTML5 standard matures, as will our web apps. And if we adhere to the 3 S’s and acknowledge that users want things simple, secure and speedy, the future of the web is already in better shape. Exciting times ahead indeed!

Many thanks to Google and the team Sam Dutton, Paul Kinlan, Ido Green and Alex Russell

Useful Links