September 2012
Intermediate to advanced
552 pages
14h 48m
English
Content preview from Professional HTML5 Mobile Game DevelopmentBecome an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Putting in a Title Screen
An animated starfield, although nice, isn't a game. To start to build out the same elements of the game, one of the first requirements for a game is to display a title screen showing the users what they can play.
The title screen for Alien Invasion isn't going to be anything special—just a text title and a subtitle. So a generic GameScreen class with a title and subtitle centered on the screen is enough to get the job done.
Drawing Text on Canvas
Drawing text on the canvas is straightforward and allows you to use any font loaded on the page. This flexibility means you can use any of the standard web-safe fonts as well as any fonts that have been loaded via @font-face onto the page.
The declarations for @font-face take some care because depending on the browsers that need to be supported, four different file formats need to be available. Luckily, if you aren't going to install the files locally, but rather serve them off an online service such as the free Google web fonts, all that's needed is a single linked style sheet. (You can browse the fonts available for free use at Google web fonts at (www.google.com/webfonts.)
For Alien Invasion, the font Bangers gives the game a nice retro “Invasion of the Body Snatchers” feel. Add the following line to your HTML (not your JavaScript) below the base.css link tag:
<head>
<meta charset="UTF-8"/>
<title>Alien Invasion</title>
<link rel="stylesheet" href="base.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Bangers' ...Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.