Game development documentation status

Summary

See also localization status of this section.

Needs* tags

Found 3 pages. Learn more about how to deal with meta-tags.

Technical reviews

Found 3 pages. Learn more about how to do a technical review.

Outdated pages

Found 9 pages. These pages haven't been updated in over a year. Outdated pages can have problems with both content and format. Look at these pages and consider: Is this page talking about the Web of today? Does it look consistent with newer pages in this topic area? If not, make any needed changes.

Dev-doc-needed bugs

Found 1 bugs. Learn more about how to resolve a dev-doc-needed bug.

Browse as bug list.

Localizations

Please help us to localize this documentation into different languages. Read more about how to translate.

Everyone loves games, but in addition games are a big statement for, and testimony to, the scope and power of open web standards. A constant criticism leveled at the open web is that it doesn't have the performance available to support complex applications such as 3D immersive games, as compared to native platforms. However, Mozilla's work on technologies such as ASM.js, Emscripten and WebGL has shown that open standards have got what it takes, and playing such games in a Web browser is perfectly possible.

While MDN currently has some game related documentation, it's fragmentary, incomplete, and often out of date. This is the documentation plan for our project to produce a top-notch game development resource for Web apps and Web sites.

Team

The project will be handled primarily by:

chrisdavidmills

Primary writer.

Content destination

The game developer zone has already been created; this project will update and replace the existing material. In addition, content in other parts of MDN may need work, such as API documentation.

User stories

• Provide resources for developers coming from the C/C++ world
  • These developers are highly skilled, often working on the best stuff, and have until now been largely excluded from the Web. They will largely look at the Web as another port target and will want to know what their limitations are. They will also want to focus on how to integrate tools such as Emscripten into their tool chains. It is safe to assume a very high level of knowledge for this group.
• Provide resources for developers coming from the Flash world, or current JavaScript developers
  • These developers are looking for the most web-friendly way to proceed, including how to port games across, say from Flash to JavaScript. They will have highly varying levels of skill and will likely want to start with 2D canvas and move their way up to WebGL. Libraries and tools will be particularly important for this group as well as transition documents explaining the fundamentals of the more complicated graphics technologies. They will not have the skills needed to make the most performance-optimized games without the help of middleware in most cases.
• Provide resources for newbies and hobbyists
  • These are developers or students that have never touched game development for the most part. This group will be interested in hackable games initiatives and what not. We should make sure to remember this group although they should not be a primary focus in the short term.

Documents needed

The lists here detail specific types of content that need to be produced, as well as precise pages that we know need to be produced or updated.

Types of pages

The following types of pages will need to be produced:

• Landing pages
• Reference
  • Interfaces
  • Properties
  • Methods
  • Events
• Guides/tutorials
• Sample apps and web content

Introduction to Web game development (PRIORITY 1)

The following introductory material will be needed; this may be one large page or a set of pages, depending on how large and involved the content winds up being.

• Little bit of history of web gaming
• Why is the Web a good gaming platform, and how is this possible?
• What tools do we have available
• What does the tool chain look like (from <canvas>/JS to asm.js and Emscripten)
• How can traditional games developers adapt
• Examples of existing open web games, to demonstrate that it can be done, and to provide inspiration.

Technology cross reference (PRIORITY 3)

Teaching and reference material on technology fundamentals in case people need to update their knowledge, for example on Canvas, WebRTC and WebGL. This should be links to other parts of MDN, not new articles. This will be very useful to devs in the long term, although bear in mind that all such reference pages don't exist yet on MDN, and we need to create them in a fairly timely fashion.

We should present attractive, easy to get at links to all of these APIs:

• File API
• Full Screen API
• Gamepad API
• CSS
• HTML audio
• IndexedDB (for local storage of files on the device)
• JavaScript
• Pointer Lock API
• SVG
• Typed Arrays
• Web Audio API
• Canvas
• WebGL
• WebRTC
• WebSockets
• Web Workers
• XMLHttpRequest

These links may be in the form of a page full of links, or a sidebar, or (possibly ideally) both.

Tools and libraries (PRIORITY 1)

We need to document tools that we provide, and provide links to documentation for recommended or useful tools from other organizations. Some content we need to have is:

• Introduction to asm.js and basic usage guide
• Introduction and basic usage of Emscripten
• Introduction and basic usage of Shumway (open-source Flash replacement)
  • Whether or not to use it for new projects
  • How to use Shumway to make existing Flash games run without Flash
• Other tools and frameworks as appropriate

Samples/model workflows

Workflows for different audience members/outcomes. These should be very practical step by step sections that assume knowledge of the fundamentals in each case, referring back to the previous sections for those who need more fundamental information on any one step. Each should feature a case study or two that can show deconstruction of a real game, for those who like to learn by deconstructing and looking at inner workings.

These are, in essence, tutorials with sample code.

How to create a simple game (PRIORITY 3)

This tutorial will lead the developer through all the steps of creating a brand new game, and is targeted at beginning game developers. This will likely be a Breakout type of game, and will cover:

• Setting up the canvas
• Building the brick field
• Adding a moveable paddle
• Adding the ball motion mechanics
• Adding the breaking bricks
• Adding score keeping and display
• Handling the missing of the ball at the bottom of the play field, and end-game scenario
• Sound effects

After each step is implemented, a live sample will be presented so the reader can see the new additions in action.

Designing your game engine (PRIORITY 2)

This tutorial is for existing Web developers who are creating their first open Web game:

• Setting up your overall environment, organizing your files, pulling in libraries
• basic requirements such as physics, collisions,
• The game loop, and what is updated in each frame
• Input Support (Gamepad)
• Pointer Lock/Fullscreen API
• Adding multiplayer support
• Performance optimization tips
• Caching your online game
• Offline install and play

UX and mobile games (PRIORITY 2)

Providing a good user experience is a key part of making compelling games, and doing so on mobile has added challenges. We need to provide examples to help developers get a handle on this.

• There are many smaller games that are feasible for a single person to make
• Idea for mobile platforms in terms of footprint and UX
• Mobile games don't necessarily have to be simple 2D affairs, but these lend themselves better to mobile platforms
• Cover what different platforms can handle, performance-wise. Web apps can be opened on everything from a basic Firefox OS device to a powerful desktop PC or Mac, and will obviously not perform the same on all of them.
• Multi-player gaming using WebSockets, XMLHttpRequest, and/or WebRTC
• Nice for Firefox OS as well
• Discuss mobile app distribution on different platforms?

Creating your first 3D game (PRIORITY 2)

We probably need a separate article covering the creation of a 3D game, with information about setting up a 3D environment, working with textures and other resources for the 3D imagery, and so forth. This needs to be specced out further.

This content is also for existing Web developers.

Porting native apps to Web standards (PRIORITY 1)

This content will help existing app developers for other platforms (Android, iOS, Windows Phone, etc.) migrate their existing code to run natively in the browser instead.

• Emscripten introduction
• Asm.js introduction
• Using the profiling tools to improve performance
• Using debugging tools to get everything working right
• Suggested porting workflow
  • What does this workflow look like?

Porting Flash games to Web standards (PRIORITY 3)

We also need to provide a guide for Flash developers that want to port their games to run natively in the browser using Web standards. Topics to cover include:

• Shumway for game developers
  • Introduction
  • What Shumway can/can't do (compatibility guide?)
• Middleware
  • What is this? What's available?
• Flesh this out further

Other content needed

There are a number of other topics that are related to gaming that should have their content created, reviewed, and/or updated as needed, including:

• WebRT
• Cloud application development
• WebRTC for game developers

Existing content

The Game development zone already exists. This content will augment and/or replace all content therein, as needed.

Other notes

Ideas and thoughts

• We can do cool stuff with live samples here, presenting actual games inline with the content. For example, with a tutorial about building a Breakout game, we can have a series of live samples showing each stage of development, ending with a fully-playable game at the end of the tutorial.
• How about a live sample that produces a spaceship that can actually fly around interacting with the content of the article itself?
• How about inline samples with a code editor window you can tinker with the game in real time in?
• We may find that it might be helpful to have a PaaS set up for hosting multi-player demo content or other server functionality.

People to talk to for information

• The games engineering effort is led by Martin Best; he can point us in the direction of other Mozilla devs who can help
• Maire Reavy is also really interested in the gaming side of things, and she leads the WebRTC engineering efforts
• Mark Giffin said: There are lots of Mozilla devs interested in gaming. We should talk to interested devs inside the company, as well as our passionate community.
• We also have a few other community members who are really interested in helping, for example Scott Michaud and Sébastien Barbieri.
• Remember that Sheppy is an ex-game developer, so has lots of interest and knowledge in this area.
• Marketplace game developers. What were the pain points? what are the interesting tips?
• Community sites like creative JS and https://buildnewgames.com/. Rob Hawkes, Seb Lee Delisle, Bocoup guys?
• say hello in the #games channel
• James Long and Chris Lord interested, and will get involved as time allows

Content outline

Key:

• Green: complete
• Yellow: in progress
• White: not started
• Priority ratings:
  • * : priority 1
  • ** : priority 2
  • *** : priority 3

Intro material

Tools articles

Gaming techniques articles

Isolated coverage of fundamental gaming techniques, assumes knowledge of the underlying technologies. For that, see the technology reference. Each one of these could be multiple articles, and we should explain fundamentals of complex areas such as graphics layer, as well as showing how frameworks and libraries can make the work easier in appropriate places.

Workflow articles

Workflows for different audience members/outcomes. These should be very practical step by step sections that assume knowledge of the fundamentals in each case, referring back to the previous sections for those who need more fundamental information on any one step. Each should feature a case study or two that can show deconstruction of a real game, for those who like to learn by deconstructing and looking at inner workings.

*Porting from native to web standards

For the C++, professional gaming industry people. We need to explain to them how the Web is a viable platform, and how they can get their games up and running on it.

***Simple step by step tutorial on how to create a game, baby steps for beginners

This uses Breakout as an example. After each step is implemented, offer a live sample so the reader can see what the new additions look like.

**Designing your game engine - basic 2D

This is for existing pro web devs, who are familiar with the technologies and just need to be take a bit further. The game here should be something a bit more interesting and fast moving, such as an asteroids clone.

**Moving into 3D

Introducing pro web devs to creating 3D environments. What is required to set up a 3D game? WebGL, libraries, etc.? Choose something interesting like a 3D tank game, or something?

***Mobile games and UX

There are many smaller mobile games that are feasible for a single person to make. Mobile games don't necessarily have to be simple 2D affairs, but these lend themselves better to mobile platforms. This section could cover ideas for mobile platforms in terms of footprint and UX; nice for FxOS as well. Also include discussion of mobile app distribution on different platforms?

***Porting Flash games to web standards

For the Flash guys...

Meetings

We currently don't have regular game development documentation meetings, but the notes for the ones we do have are recorded below:

• November 4th 2013

Sheppy has also been having some conversations with game industry developers to find out useful feedback from their perspective.