Does size really matter?

By Zarrar Chishti

Of course it does. However in this blog we will work out whether size really does matter in HTML5 game development.

The question specifically is referring to what HTML5 game developers need to worry about when developing their game for mobile screens. 

The most appealing feature of developing in HTML5 rather than Native apps^[1] is that your game will be playable on any device or computer that can run a browser. So that means desktops, tablets, phones and even consoles. However there are a number of areas you should be thinking of if you want your game to feel at home when played on a mobile device.

1. Be Responsive

It is common to assume that since responsive web development techniques^[2] exist then that must mean responsive game development techniques must also be widely used.

Yes and No. For the most part your game will scale down as your site would. However for the design aspects you will have coded in JS you will need to address them individually.

I use a technique in my book “Cross over to HTML5 Game Development”^[3] where you would initially store the users screen size as a ratio of a standard size. That ratio would then be globally administered wherever design calls are made in the code.

2. Be Considerate

I love the progress browsers have made to integrate device features that native developers can take for granted. Some of these features you can use to tailor your game in order to give your users a better overall experience. Let’s take a look at a few:

Touch Gestures

HTML5 game developers can embrace touch as it should be i.e. allowing you to intercept and identify complex multi-touch gestures, free-hand drawing etc.

Battery Status

You now have access to the device's power source, battery charge level and expected time of charging or discharging. How cool is that?

Why not build in functionality to help your user? If the battery is getting low then disable non-critical CSS3 and JavaScript animations. Also limit or desist all network activity where possible. Finally you could also disable all sound effects and music.

Device Orientation

Access to the gyroscope and compass data means you can determine the orientation of the user's device in all the three dimensions. Although this will take more planning, consider giving the user a better gaming experience if they do decide to go landscape. Possibly allow them to see more of the background and even interact more on what can be shown on the screen. If you want to be even more adventurous then try and design your game to offer unique interactive features with the gyroscope readings whilst playing!

3. Be Risqué

It is impossible to not feel like a kid in a candy store when looking at all the features available to a HTML5 game developer these days [4]. So let’s take a look at some features that can help make your game even more irresistible to a mobile device user:

Geolocation – find out the location of your user and integrate that into your game.

Vibration – if used sparingly and properly this can considerably enhance your game’s entertainment factor.

Speech Recognition – I do not see this at all however I would love to see it integrated more into game engines. In a game I am currently consulting on, I have advised my client that at the very least they add this feature at the end to allow their users to speak their name for the high score!

Final Thoughts

For the majority of the time you will be approached by a client to specifically develop a mobile HTML5 game. So try and incorporate as many of the new device features available and start building your own libraries for future projects.

However keep checking^[4] if the features are compatible with the popular devices. If a particular feature is only available on say Chrome then either have a message on the screen advising this or disable it if the user is on another browser.

Finally let me know your thoughts on what other device features we should be considering. Catch me on Twitter @zarrarchishti

References

^{[1] Apress, “5 Reasons to Never Go Native” https://www.apress.com/us/blog/all-blog-posts/5-reasons-to-never-go-native/15177102}

^{[2] Google, "Responsive Web Design Basics" https://developers.google.com/web/fundamentals/design-and-ux/responsive/:}

^{[3] Apress, “Cross Over to HTML5 Game Development” https://www.apress.com/gb/book/9781484232903}

^{[4] What Web Can Do Today, “An overview of the device integration HTML5 APIs “ https://whatwebcando.today/}

About the Author

Zarrar Chishti is a software and games development consultant with over 500 games developed for companies around the world. He is sought after to advise on the development of viral games for major marketing campaigns. His consultancy and development firm serve prestigious companies such as Turner Media, British Airways, and Channel 4.  His work can involve him in liaising with marketing directors for new launches and project managing teams of game developers and designers for large scale development projects. He is also involved in organizing and running game development courses and events. During the last five years Zarrar has also helped train developers to crossover and become software game developers. Most of the trainees go on to either work for Zarrar or gain programming jobs in the ever expanding game development community of Scotland.

Want more for Zarrar? Check out his book, Cross Over to HTML5 Game Development.