Game Development Reference
In-Depth Information
Chapter 6. Adding
Features
to
Your
Game
This chapter is slightly different than the previous several chapters, in that there is no
game associated with this chapter. The reason that we're not building a game with the
concepts from this chapter is that the concepts covered are either way too complex
for a single chapter (there are entire topics dedicated to the topic of WebGL, for ex-
ample) or they're not a particularly good match for use in a game. Also, some of the
features mentioned at the end of the chapter are so new that browser support is still
minimal (if any) and the stability of the APIs may not be too reliable. For this reason,
we'll simply explain each API, provide meaningful examples, and hope this skin-deep
introduction is enough to get you excited about the prospects involved with each API.
The first part of the chapter will cover
four
HTML5 APIs that are very exciting and
powerful additions to the browser platform. First and foremost, we'll cover
WebGL
,
which brings the power of
OpenGL ES
to the browser, allowing for hardware acceler-
ated 3D graphics rendering without any need for a single plugin. Next, we will discuss
how we can use web sockets for a thread-like experience, the video API for native
video playback and manipulation right from JavaScript, and geolocation, which allows
JavaScript to determine the physical location (geographical location) of a user.
Lastly, we'll wrap up the chapter by looking at the absolute latest features in the
HTML5 evolution. These features take CSS to the next level, taking it away from being
a mere rectangular-based rendering engine. The first new feature that we'll study is
CSS shaders, which allows us to specify how each pixel is to be rendered. This is
done using GLSL shaders, which, as we'll see during the WebGL discussion, are in-
dependent programs that we write and are run on the GPU, controlling at the lowest
level possible how something is to be rendered. With custom shaders, we can do so
much more than simple, pre-baked CSS transformations.
Other new CSS features, covered in the second half of the chapter, are CSS columns
and CSS regions and exclusions. CSS columns make it beautifully easy to dynamic-
ally adjust how many columns of text a container displays. For example, if we want a
block of text to be displayed in 3 equal width or height columns, we would normally
set up three different containers, then float each container to the left. With columns,
we can simply store all of the text inside a single container, then use CSS to generate
the columns. Finally, CSS regions and exclusions make it possible to render text in-
