mozilla

Revision 647249 of Game developer zone documentation plan

  • Revision slug: MDN/Plans/Game_developer_zone
  • Revision title: Game developer zone documentation plan
  • Revision id: 647249
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment

Revision Content

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:

{{UserLink("chrisdavidmills")}}
Primary writer.

Other MDN contributors may of course participate as well!

Goals

The overall goals of this project are to:

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.

Target milestones

This information is not yet available.

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.

Note: We will not focus especially on artists, beyond topics relating to the export of their images for use in a Web context and what graphical capabilities are available to them. Most of this can be shared to the artists by the developers, so we won't have to specifically cover this in most cases.

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.

Note: Below, each document category is given a priority number, where 1 is the most important and 3 is the least important.

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 {{HTMLElement("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 http://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

Revision Source

<p>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 <a href="/en-US/docs/Games/Tools/asm.js">ASM.js</a>, <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a> and <a href="/en-US/docs/Web/WebGL">WebGL</a> has shown that open standards have got what it takes, and playing such games in a Web browser is perfectly possible.</p>
<p>While MDN currently has some game related documentation, it's fragmentary, incomplete, and often out of date. <span class="seoSummary">This is the documentation plan for our project to produce a top-notch game development resource for Web apps and Web sites.</span></p>
<h2 id="Team">Team</h2>
<p>The project will be handled primarily by:</p>
<dl>
 <dt>
  {{UserLink("chrisdavidmills")}}</dt>
 <dd>
  Primary writer.</dd>
</dl>
<p>Other MDN contributors may of course participate as well!</p>
<h2 id="Goals">Goals</h2>
<p>The overall goals of this project are to:</p>
<h2 id="Content_destination">Content destination</h2>
<p>The <a href="/en-US/docs/Games">game developer zone</a> 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.</p>
<h2 id="Target_milestones">Target milestones</h2>
<p><em>This information is not yet available.</em></p>
<h2 id="User_stories">User stories</h2>
<ul>
 <li>Provide resources for developers coming from the C/C++ world
  <ul>
   <li>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.</li>
  </ul>
 </li>
 <li>Provide resources for developers coming from the Flash world, or current JavaScript developers
  <ul>
   <li>These developers are looking for the most web-friendly way to proceed, including how to port games across, say from Flash to <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. 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.</li>
  </ul>
 </li>
 <li>Provide resources for newbies and hobbyists
  <ul>
   <li>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.</li>
  </ul>
 </li>
</ul>
<div class="note">
 <p><strong>Note</strong><strong>:</strong> We will not focus especially on artists, beyond topics relating to the export of their images for use in a Web context and what graphical capabilities are available to them. Most of this can be shared to the artists by the developers, so we won't have to specifically cover this in most cases.</p>
</div>
<h2 id="Documents_needed">Documents needed</h2>
<p>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.</p>
<div class="note">
 <p><strong>Note:</strong> Below, each document category is given a priority number, where 1 is the most important and 3 is the least important.</p>
</div>
<h3 id="Types_of_pages">Types of pages</h3>
<p>The following types of pages will need to be produced:</p>
<ul>
 <li>Landing pages</li>
 <li>Reference
  <ul>
   <li>Interfaces</li>
   <li>Properties</li>
   <li>Methods</li>
   <li>Events</li>
  </ul>
 </li>
 <li>Guides/tutorials</li>
 <li>Sample apps and web content</li>
</ul>
<h3 id="Introduction_to_Web_game_development_(PRIORITY_1)">Introduction to Web game development (PRIORITY 1)</h3>
<p>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.</p>
<ul>
 <li>Little bit of history of web gaming</li>
 <li>Why is the Web a good gaming platform, and how is this possible?</li>
 <li>What tools do we have available</li>
 <li>What does the tool chain look like (from {{HTMLElement("canvas")}}/JS to asm.js and Emscripten)</li>
 <li>How can traditional games developers adapt</li>
 <li>Examples of existing open web games, to demonstrate that it can be done, and to provide inspiration.</li>
</ul>
<h3 id="Technology_cross_reference_(PRIORITY_3)">Technology cross reference (PRIORITY 3)</h3>
<p>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.</p>
<p>We should present attractive, easy to get at links to all of these APIs:</p>
<ul>
 <li>File API</li>
 <li>Full Screen API</li>
 <li>Gamepad API</li>
 <li>CSS</li>
 <li>HTML audio</li>
 <li>IndexedDB (for local storage of files on the device)</li>
 <li>JavaScript</li>
 <li>Pointer Lock API</li>
 <li>SVG</li>
 <li>Typed Arrays</li>
 <li>Web Audio API</li>
 <li>Canvas</li>
 <li>WebGL</li>
 <li>WebRTC</li>
 <li>WebSockets</li>
 <li>Web Workers</li>
 <li>XMLHttpRequest</li>
</ul>
<p>These links may be in the form of a page full of links, or a sidebar, or (possibly ideally) both.</p>
<h3 id="Tools_and_libraries_(PRIORITY_1)">Tools and libraries (PRIORITY 1)</h3>
<p>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:</p>
<ul>
 <li>Introduction to asm.js and basic usage guide</li>
 <li>Introduction and basic usage of Emscripten</li>
 <li>Introduction and basic usage of Shumway (open-source Flash replacement)
  <ul>
   <li>Whether or not to use it for new projects</li>
   <li>How to use Shumway to make existing Flash games run without Flash</li>
  </ul>
 </li>
 <li>Other tools and frameworks as appropriate</li>
</ul>
<h3 id="Samples.2Fmodel_workflows">Samples/model workflows</h3>
<p>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.</p>
<p>These are, in essence, tutorials with sample code.</p>
<h4 id="How_to_create_a_simple_game_(PRIORITY_3)">How to create a simple game (PRIORITY 3)</h4>
<p>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:</p>
<ul>
 <li>Setting up the canvas</li>
 <li>Building the brick field</li>
 <li>Adding a moveable paddle</li>
 <li>Adding the ball motion mechanics</li>
 <li>Adding the breaking bricks</li>
 <li>Adding score keeping and display</li>
 <li>Handling the missing of the ball at the bottom of the play field, and end-game scenario</li>
 <li>Sound effects</li>
</ul>
<p>After each step is implemented, a live sample will be presented so the reader can see the new additions in action.</p>
<h4 id="Designing_your_game_engine_(PRIORITY_2)">Designing your game engine (PRIORITY 2)</h4>
<p>This tutorial is for existing Web developers who are creating their first open Web game:</p>
<ul>
 <li>Setting up your overall environment, organizing your files, pulling in libraries</li>
 <li>basic requirements such as physics, collisions,</li>
 <li>The game loop, and what is updated in each frame</li>
 <li>Input Support (Gamepad)</li>
 <li>Pointer Lock/Fullscreen API</li>
 <li>Adding multiplayer support</li>
 <li>Performance optimization tips</li>
 <li>Caching your online game</li>
 <li>Offline install and play</li>
</ul>
<h4 id="UX_and_mobile_games_(PRIORITY_2)">UX and mobile games (PRIORITY 2)</h4>
<p>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.</p>
<ul>
 <li>There are many smaller games that are feasible for a single person to make</li>
 <li>Idea for mobile platforms in terms of footprint and UX</li>
 <li>Mobile games don't necessarily have to be simple 2D affairs, but these lend themselves better to mobile platforms</li>
 <li>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.</li>
 <li>Multi-player gaming using WebSockets, XMLHttpRequest, and/or WebRTC</li>
 <li>Nice for Firefox OS as well</li>
 <li>Discuss mobile app distribution on different platforms?</li>
</ul>
<h4 id="Creating_your_first_3D_game_(PRIORITY_2)">Creating your first 3D game (PRIORITY 2)</h4>
<p>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. <strong>This needs to be specced out further</strong>.</p>
<p>This content is also for existing Web developers.</p>
<h4 id="Porting_native_apps_to_Web_standards_(PRIORITY_1)">Porting native apps to Web standards (PRIORITY 1)</h4>
<p>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.</p>
<ul>
 <li>Emscripten introduction</li>
 <li>Asm.js introduction</li>
 <li>Using the profiling tools to improve performance</li>
 <li>Using debugging tools to get everything working right</li>
 <li>Suggested porting workflow
  <ul>
   <li><strong>What does this workflow look like?</strong></li>
  </ul>
 </li>
</ul>
<h4 id="Porting_Flash_games_to_Web_standards_(PRIORITY_3)">Porting Flash games to Web standards (PRIORITY 3)</h4>
<p>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:</p>
<ul>
 <li>Shumway for game developers
  <ul>
   <li>Introduction</li>
   <li>What Shumway can/can't do (compatibility guide?)</li>
  </ul>
 </li>
 <li>Middleware
  <ul>
   <li>What is this? What's available?</li>
  </ul>
 </li>
 <li><strong>Flesh this out further</strong></li>
</ul>
<h2 id="Other_content_needed">Other content needed</h2>
<p>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:</p>
<ul>
 <li>WebRT</li>
 <li>Cloud application development</li>
 <li>WebRTC for game developers</li>
</ul>
<h2 id="Existing_content">Existing content</h2>
<p>The <a href="/en-US/docs/Games">Game development</a> zone already exists. This content will augment and/or replace all content therein, as needed.</p>
<h2 id="Other_notes">Other notes</h2>
<h3 id="Ideas_and_thoughts">Ideas and thoughts</h3>
<ul>
 <li>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.</li>
 <li>How about a live sample that produces a spaceship that can actually fly around interacting with the content of the article itself?</li>
 <li>How about inline samples with a code editor window you can tinker with the game in real time in?</li>
 <li>We may find that it might be helpful to have a PaaS set up for hosting multi-player demo content or other server functionality.</li>
</ul>
<h3 id="People_to_talk_to_for_information">People to talk to for information</h3>
<ul>
 <li>The games engineering effort is led by Martin Best; he can point us in the direction of other Mozilla devs who can help</li>
 <li>Maire Reavy is also really interested in the gaming side of things, and she leads the WebRTC engineering efforts</li>
 <li>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.</li>
 <li>We also have a few other community members who are really interested in helping, for example Scott Michaud and Sébastien Barbieri.</li>
 <li>Remember that Sheppy is an ex-game developer, so has lots of interest and knowledge in this area.</li>
 <li>Marketplace game developers. What were the pain points? what are the interesting tips?</li>
 <li>Community sites like creative JS and <a class="external free" href="http://buildnewgames.com/" rel="nofollow">http://buildnewgames.com/</a>. Rob Hawkes, Seb Lee Delisle, Bocoup guys?</li>
 <li>say hello in the #games channel</li>
 <li>James Long and Chris Lord interested, and will get involved as time allows</li>
</ul>
Revert to this revision