MDN/Projects/Content/Game Developer Zone

Project statement

Games are a really big deal.

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.

At the moment, MDN has a few bits of games development documentation, but nothing comprehensive or complete. This project is aimed at creating a kick ass games documentation center, which will serve the needs of:

• Developers using C++: 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.
• Web Developers using JavaScript or Flash: 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.
• Newbies/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.

Note: Artists are not a group we need to focus on particularly, past potential topics relating to how to export to the web and what features are supported. Most of this can be communicated via the technical audiences above as they are usually tasked with figuring this out on behalf of the artists.

Where will this project live?

Ideally we should eventually aim to put this content in its own dedicated zone. The existing location at https://developer.mozilla.org/en-US/docs/Games works well, as our games effort isn't really a Mozilla product, and is not really a standard topic under the Web umbrella.

What content should it have?

Initial rough structural plan (nowhere near complete; will need a lot of additions and refining):

Intro article

• 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 toolchain look like (from <canvas>/JS to asm.js and Emscripten)
• How can traditional games developers adapt

Technology reference

Teaching and reference material on technology fundamentals in case people need to update their knowledge. This should be links to other parts of MDN, not new articles.

• File API
• Full Screen API
• Gamepad API
• CSS
• HTML audio
• IndexedDB
• JavaScript
• Pointer Lock API
• SVG
• Typed Arrays
• Web Audio API
• Canvas
• WebGL
• WebRTC
• Web Sockets
• Web Workers
• XMLHttpRequest

Tools

Fundamentals of tools that are useful for gaming, whether that is 3rd party libraries or whatever

• asm.js basics
• Emscripten basic usage
• Shumway basic usage
• frameworks, tools?

Gaming techniques articles

Isolated coverage of fundamental gaming techniques, assumes knowledge of the underlying technologies. For that, see previous section. 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 each case.

• The anatomy of a video game (the main loop, etc.)
• Collision detection
• Physics
• 2D
• 3D environments and acceleration
• Data storage, offline installation, updates
• Video and audio (<video> and <audio>, gUM, WebRTC, etc. cover basic display, manipulation, looping...)
• Multi-person games (WebRTC, sockets, etc.)
• Graphics for web games - how to export, formats to use, optimization…
• Performance optimization: Main thread vs Worker; ASM.js; WebGL; WebCL

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.

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

So if we use breakout as an example:

• 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, offer a live sample so the reader can see what the new additions look like.

Designing your game engine - basic 2D

For existing web devs

• 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

Moving into 3D

Similar to the above, but showing how to create a 3D game? My feeling is that a separate tutorial on creating a 3D environment would be helpful. Again, for existing web devs

Porting from native to web standards

For the C++ guys

• Emscripten
• Profiling tools
• Debugging tools
• I don't know what the workflow would look here at all

Porting from Flash to web standards

For the Flash guys

• Shumway
• Middleware
• What else?

Raw ideas for gaming articles

• Web RTC
• Web Audio API
• Web Sockets
• PointerLock API
• IndexedDB for storing files locally
• File API
• Typed arrays
• WebGL
• Gamepad
• Web Workers
• Shumway
• asm.js/Emscripten, performance, toolchains, making it production worthy
• BananaBread
• Offline - WebRT
• Cloud Apps

Documentation is needed for techs like WebRTC. We need basic guides to using WebRTC in the context of games, for people writing their first game. But then we need WebRTC reference docs in place for people who are more experienced, as well as more advanced WebRTC for gaming tutorials. We need to sync the publication of the tutorial and reference docs as much as possible.

We need to think about multiple devices, in two different senses:

1. We need to cover what can be run on different platforms due to performance and support reasons, for example the difference between a desktop computer and a Firefox OS device.
2. We need to look at connecting multiple devices/clients to a single game instance, for multiplayer games.

The articles and Game zone could be really cool. How about having live samples - games to play inline with the articles (like a breakout clone in an iFrame, for example, or multiple iFrames showing how you can build up the different parts of the game), or even inside the articles (like a spaceship you can use to shoot your page apart) It would also be nice to have an inline game and code edit window, so you can change the code and see the game update live.

Who should we talk to ?

• 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 http://buildnewgames.com/. Rob Hawkes, Seb Lee Delisle, Bocoup guys?
• say hello in the #games channel
• James Long really interested, and will get involved as time allows