O'Reilly logo

Releasing HTML5 Games for Windows 8 by Jesse Freeman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 1. Getting Started with Windows 8

In this chapter, I introduce you to Windows 8, talking about what you need in order to get up and running. I’ll cover everything from why I chose Windows 8 and how to install it to an introduction to the Windows 8 operating system. Some of the information here may be helpful even if you are an experienced developer, especially as I cover how to use Windows 8 and some of its new paradigms.

Why Windows 8

Windows 8 is the latest version of the Windows operating system from Microsoft. It marks a radical departure from the past and pushes the OS into the post-PC era of tablets and ultra-portable laptops, while still supporting older desktops and laptops. If you think about it, Windows 8 is a huge move forward in terms of approachability for developers due to the three main ways to write software for it: C++, C#, and HTML5. This book focuses on the latter and, more importantly, on helping you port an existing game over to the platform.

What got me excited about Windows 8 is that HTML5 is a first-class citizen. You can literally take a game that runs on the Web in a browser, get it up and running on Windows 8 quickly with very little modification, and start selling it in the Windows Store. Right now it is hard to monetize HTML5 games online, but Windows 8 provides a unique opportunity, which I discuss throughout the book.

I designed this book to be framework agnostic. While I prefer to use the Impact framework for my own games, I have seen games built with all kinds of JavaScript libraries, from homegrown frameworks to DOM-based implementations. It’s challenging to try and address all the different development approaches, so I focus on the things you need to consider when porting over your game, along with some code examples to get your brain thinking in terms of how HTML5 development is done on Windows 8. The rest of this chapter will discuss getting set up and ready to begin the porting process.

If you are planning on building an HTML5 Windows 8 game from scratch, I suggest reading through the entire book. This will give you a great overview of how Windows 8 development works. In the final chapter, I discuss simultaneous development workflows for the Web and Windows 8.

What You Need

There are three things you will need in order to start doing development on Windows 8: a copy of Windows 8 plus a PC or Mac that can run it, a copy of Visual Studio Express, and a developer account.

There are a few optional things you may want to consider having as well: test hardware (which I will talk about in more detail later), a touchscreen monitor or touch-enabled device, and a copy of Visual Studio Pro or an MSDN subscription.

The first three items are self-explanatory. In order to do development for Windows 8 you will need to be on Windows 8 and have the right tools. Luckily, when it comes to doing Windows 8 development, you can also test on the same computer you use when coding and/or take advantage of the built-in simulator to test out various configuration and resolution types, if you don’t have the test hardware in person.

Also make sure to check out the passage at the end of the chapter about BizSpark and DreamSpark which may be great ways to get free copies of Windows 8 as well as Visual Studio.

Windows 8 Hardware

Chances are good that, if you have already created an HTML5 game, you have a computer that can be used for development. In that case, all you need to do is get a copy of Windows 8. If you are on a Mac, I have some instructions on how to set that up via Boot Camp in the next section. For now I want to focus on the types of Windows 8 hardware and what it means for you as far as testing and developing.

Devices

Windows 8 has an expansive list of supported hardware, both new and old, which you should be familiar with. It’s important to remember that you still need to support legacy systems, as well as the new form factors and input devices released along with the new OS. Here is a quick rundown of the typical types of devices your game could run on:

  • Desktop – This is a standard PC. It is usually a tower and a freestanding monitor, or an “all-in-one” computer. Typically these have powerful video cards, fast CPUs, lots of RAM, and a keyboard as the default input device.

  • Laptop (Non-touchscreen) – This is your standard laptop. Any laptop that ran Windows 7 should run Windows 8, but there are a few things to keep in mind with these older devices. Laptops usually have slower GPUs/CPUs, less RAM, and have a track pad plus a keyboard as the default input devices.

  • Laptop (Touchscreen) – Most if not all new Windows 8 laptops are coming out with touchscreens. Windows 8 is a “touch-first” OS, so these new ultra-thin, touch-enabled laptops will work great with Windows 8 out of the box. Plus, the extra touchscreen allows you to do basic touch testing for your game. If you are in the market for new hardware for doing Windows 8 development, I highly suggest making sure your next laptop has a built-in touchscreen.

  • Convertible – This is a new category of ultra-portables that are tablets that can dock with a keyboard to become a laptop. These offer all the same conveniences of a tablet and laptop at the same time. They have touchscreens as their primary input and usually have very low-powered CPUs with built-in GPUs. These also come in two flavors: Windows 8 and Windows RT, which I will talk about in the next section.

  • Tablet – Windows 8 was designed to run amazingly on a tablet. These are similar to the convertibles but may not have any way to dock with a keyboard to become a “clamshell” form factor. The flagship of these types of devices would be Microsoft’s Surface. Tablets offer lots of options for input from touch to pen, even accelerometer, and can also be connected to a traditional mouse, keyboard, or game controller as well.

This quick overview of the Windows 8 device landscape can help inform you on some of the complexities that may arise when trying to get a game to run on all these different devices with multiple types of input. Over the course of the book, I’ll dig into some of these special use cases and work through solutions to help make developing HTML5 games for Windows 8 as straightforward as possible.

Windows 8 Versus Windows RT

After taking a look at the different types of devices ready to run Windows 8, let’s go over the difference between Windows 8 and Windows RT. Windows RT is a scaled down version of Windows 8 that was designed to run on ARM devices. On the surface, Windows RT looks identical to Windows 8 and even has a desktop mode, but Windows RT does not allow “classic” Windows apps to run (with the exception of a few Microsoft apps bundled with the device). The user can only run Modern apps, which are distributed through the Windows Store. As an HTML5 developer, this has little to no impact on your game, with the exception of slower performance and needing one as a testing device.

The only reason I bring this up is that ARM devices generally have lower power and performance when compared to Intel-based devices, so if you intend to target Windows RT (which happens by default when you compile your app), you will need to take that performance hit into consideration.

I highly suggest picking up at least one Windows RT device for testing. They usually start under $500, such as Microsoft’s Surface, and other OEMs also offer tablets as well as convertibles. It’s also important to note that you will not be able to run Visual Studio on Windows RT, making this device solely for testing or personal use, so don’t expect to be doing much development on it.

Introduction to Windows 8

I’m not going to spend a lot of time talking about Windows 8, but I do want to highlight a few key features that you should take note of when thinking about your own app and things you can take advantage of in your own game. Let’s get started.

Live Tiles

Live Tiles (Figure 1-1) are possibly the most prominent feature of Windows 8. You are presented with these large icons on the start screen as soon as you turn on the computer, and they are the primary way to launch apps.

Here are active Live Tile on the Windows 8 start screen.
Figure 1-1. Here are active Live Tile on the Windows 8 start screen.

However, Live Tiles are more than glorified icons; they can contain a snapshot of information about the app and entice the user to click on it via animation, displaying status, or highlighting achievements unlocked. I will cover how to create a basic Live Tile in this book and point you to additional resources on how to extend its functionality after you have successfully ported over your game.

Charms

Charms are a new and important way to surface contextual options for Modern apps. Sliding your finger in from the right-hand side of the screen edge or moving your mouse over to the far right of the screen brings up the Charms bar (Figure 1-2).

You can access Charms by swiping in from the right-hand side of the screen.
Figure 1-2. You can access Charms by swiping in from the right-hand side of the screen.

Charms are important if your app has search or sharing, but for games, we will focus primarily on the settings option.

Settings

Settings are important for a number of reasons. In Windows 8 games, we may need a place for our player to customize controls, tweak performance options, and display a help or privacy section.

Access the settings of an app or game via the Settings Charm.
Figure 1-3. Access the settings of an app or game via the Settings Charm.

As you will learn later on in this book, creating setting “fly-outs” (Figure 1-3) is incredibly easy and can be done entirely with JavaScript and HTML.

Windows Store

Perhaps the largest component of this entire process is getting your game into the Windows Store (Figure 1-4).

The Windows Store is where users are able to purchase and download new Windows 8 apps.
Figure 1-4. The Windows Store is where users are able to purchase and download new Windows 8 apps.

This is the only delivery mechanism for Windows 8 apps, and this book will walk you through how to get your app ready for submission, as well as ways to ensure it is approved quickly.

In Windows 8.1 the store (Figure 1-5) was dramatically redesigned with a more streamline presentation and surfaces important categories such as featured apps, popular now and new releases.

The redesigned Windows Store has a larger feature area and to its right is a list of the most popular apps in the store..
Figure 1-5. The redesigned Windows Store has a larger feature area and to its right is a list of the most popular apps in the store..

I’ll talk a little more about Windows 8.1 and how to adapt your game’s publishing settings to take advantage of the new design in later chapters.

Shortcuts

Since this may be your first time working on Windows 8, I’ll introduce a few shortcuts to make your life easier, especially if you are not using a touchscreen:

  • Windows Key – This will switch between the start screen and the currently open app.

  • App Search – Simply start typing on the start screen in order to filter out and quickly find apps on your computer. This is a huge time saver.

  • Windows Key + C – This will open up the Charms bar, including the clock.

  • Windows Key + X – This will display system shortcuts.

  • Windows Key + Z – This will pull up the app bar, which most Windows 8 apps use for contextual navigation. You can also pull this up by right clicking when in Modern apps.

  • Windows + D – This will quickly throw you into the desktop or “classic” Windows environment.

  • Alt + Tab – This will cycle through “classic” Windows apps and Modern UI apps. Holding down Shift while doing this will cycle backwards.

  • Windows + Tab – This will cycle through Modern UI apps that are active.

Windows 8.1

Windows 8.1 is an update to the original version of Windows 8 that was released in October of 2012. It’s more than just a collection of bug fixes, there are hundreds of new features as well as additional APIs and modifications to the overall OS. When it comes to porting HTML5 games over to Windows 8 there really isn’t much of a difference between version 8 and 8.1. Perhaps the most important thing to call out is the new support for WebGL in both IE 11 (which is the default browser in 8.1) and in native apps you publish to the store. That means if you are using WebGL and it runs in IE 11 you will be able to publish it to the store following the same steps outlined in this book.

Windows 8.1 is a free update and because of that it is expected to gain adoption quickly among current Windows 8 users. The update process is incredibly streamlined but keep in mind there may be an existing user base of Windows 8 users. Windows 8 games can run on 8.1 but it doesn’t work in reverse. I will be focusing primarily on publishing to Windows 8 in the book and plan on updating more over time as 8.1 gains adoption. When there is something different in 8.1 I will call it out specifically. Keep in mind that this book was originally designed to focus on publishing HTML5 games to the Windows Store on Windows 8.

BizSpark and DreamSpark

The last thing I want to call out are two programs Microsoft has to help developers get free tools, copies of Windows 8 as well as trails for Azure called BizSpark and DreamSpark. BizSpark is designed for small startups and individuals looking to get started developing apps, as well as games, for Microsoft’s platform. DreamSpark is designed for students looking to do the same. I highly suggest checking one of these programs out, especially if you are new to developing for Windows 8 and are looking to start your own business making games whether it’s on the side or full time. These programs are designed to give you everything you need to be successful and I have suggested to dozens of indie game devs that they sign up while working on porting existing games over to Windows 8.

We’ll be covering the topics we introduced in Chapter 1 in more detail over the course of this book. In Chapter 2, I’ll go over how to get your game working in Visual Studio and running on Windows 8.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required