Posted on by & filed under Content - Highlights and Reviews, Mobile Development.

This post will walk you through laying the foundation for a canvas-based mobile web game. I’ll be touching on some tips and tricks that can be used to create a polished, full screen web app that feels a native game or app, right in the browser.

Basic tips

Many features in mobile browsers are great for viewing web pages, but less ideal for web apps. These features can be easily tweaked for a better user experience on app-like sites.

You can control the size of the browser viewport with a meta tag in your <head>. To fit the viewport to the device and disable pinch zooming, use something like the following:

Mobile browsers will automatically turn text that look like phone numbers into links. If your application shows a lot of text, especially user-generated text, you may want to turn this off. You can still create these links manually with the following:

iOS allows users to save web apps to their home screen. There are a few tags that customize how that behaves. The most important being “apple-mobile-web-app-capable” which launches your app fullscreen instead of in the browser. In practice, Android supports most of these tags as well.

If you’ve ever tapped and held on an image on a webpage (a long tap), you’ll notice that a context menu appears. This can be disabled with some CSS to make your app a little less browser-y:

Speaking of long taps, the same thing happens when long tapping text for copy-pasting. This tends to be less useful for UI, and can be disabled:

Selectable text can be individually enabled by styling blocks with -webkit-user-select: text.

When tapping on a link, browsers will draw a colored border around it. Assuming you will have UI that responds to touch events, you should turn this off by making the border transparent:

Browsers may adjust font sizes to make desktop sites look better on mobile. Since you’re building a mobile site, this can be turned off if you want full control over how your app looks:

Going Full Screen: Hiding the Address Bar

Mobile Safari and the stock Android browser both include a rather large address bar at the top of the screen. Again, very useful for navigating the web, but not so useful for single-page games and apps that need as much screen space as possible. Fortunately, the address bar hides itself when the page is scrolled, and we can make this happen automatically with some JavaScript.

And let’s properly handle touch events:

All of the Pixels: Using the Retina Display

Modern devices tend to have high density displays, such as iOS devices with retina displays and many Android phones. The true screen pixel size on these devices are not reflected in window.innerWidth/Height. Luckily, window.devicePixelRatio can be used to detect if device DPI scaling is active. If your game can serve high resolution assets to these devices, you may be better off disabling DPI scaling by reversing it with a CSS transform:

Be aware that this may cause a drop in performance, as the canvas needs to be larger.

Continuing From Here

At this point you have a robust skeleton that can be used to create apps for the mobile web. Mobile browsers still have several limitations, both in features and performance, but for some games they will suffice.

Canvas performance and lack of sound is a large issue for mobile web games. It’s best to test prototypes early to see if they perform well, and are fun even without sound. Better sound support in the form of Web Audio is on the way in iOS 6, and WebGL on Android and even iOS is a very real possibility. The platform is young, but the future is bright!

Safari Books Online has the content you need

Check out these HTML5 books available from Safari Books Online that will help you develop HTML5 games:

You’ll learn how to build interactive multimedia applications with HTML5 Canvas, using this new element to draw, animate, compose images, and more. You’ll also learn the best way to use existing JavaScript libraries, as well as how to incorporate related aspects such as audio and video.
Foundation HTML5 Canvas: For Games and Entertainment teaches you how to make exciting interactive games and applications using HTML5 canvas. Canvas lets you produce graphics, animations, and applications using the HTML5 and JavaScript web standards. It allows you to draw directly within the browser without the need for third-party plugins like Adobe Flash, and so canvas works perfectly across desktop and mobile devices, like the iPhone and Android.
HTML5 Games Development by Example will show you how to use latest HTML5 and CSS3 web standards to build card games, drawing games, physics games and even multiplayer games over the network. With the book you will build 6 example games with clear step-by-step tutorials.
HTML5 Canvas Cookbook begins by covering the basics of the HTML5 Canvas API and then provides techniques for handling features not directly supported by the API such as animations and canvas interactivity. It winds up by providing detailed templates for a few of the most common HTML5 canvas application.
Core HTML5 Canvas: Graphics, Animation, and Game Development presents a code-fueled, no-nonsense deep dive into that API, covering everything you need to know to implement rich and consistent web applications that run on a wide variety of operating systems and devices.
If you’re a web developer looking to use this new version of HTML, you might be wondering how much has really changed. Head First HTML5 Programming introduces the key features — including improved text elements, audio and video tags, geolocation, and the Canvas drawing surface — and uses concrete examples and exercises to apply and reinforce these concepts.

About the authors

Bruno Garcia has been lured by the promise of “write once, run anywhere” since Java applets. He builds massively multiplayer games at Three Rings, hacks on HTML5 projects in his spare time, and contributes to the Haxe programming language.

Tags: android, Canvas, HTML 5 games, iOS, mobile, Safari,

Trackbacks/Pingbacks

  1.  Mobile Web App Foundations: HTML 5 Canvas Games | Safari … - webdevelopmentdelhi.in
  2.  Mobile Web App Foundations: HTML 5 Canvas Games | Safari ... | Video Gamer Weekly