Video Game Keyboard Diagrams

loading

3. Select a Game:

4. Select a Format:

5. Create the Diagram:

All set! Click the Create New Diagram button and let's go!

Try selecting a keyboard, theme, game and format, and create the diagram again!


Description:

This PHP form generates a keyboard control diagram in a new window. You can select from among hotkeys and bindings for various video games and other software. If you do not have a JavaScript-enabled browser, then you may refer to the master list table instead, as it should be viewable in a JavaScript-less browser. If you are looking for Apple or non-English bindings, you may also have an easier time searching the master list, as there are so few of them.

Instructions:

  1. Select a keyboard (key positions).
  2. Select a theme (visual formatting).
  3. Select a game (key bindings).
  4. Select a format (output media type).
  5. Click on the 'Create New Diagram' button. A new window with your selected diagram will appear.
  6. View or print the page in the new window.

The vast majority of the bindings are for the US 104 Key (ANSI) keyboard at this time. If you would like to see more bindings for the other keyboards, you are welcome to contribute! (More on that, below.)

Licenses & Submissions:

The source code for this project is licensed under the GNU LGPLv3. The content is licensed under the CC BY-SA 3.0. Visit the GitHub repository for the project's source code. The change log contains the project's update history and credits, as well as links to further reading. The "to do" list outlines some of the tasks I've planned for the future. (Completed tasks are marked with a plus '+' and incomplete tasks are marked with a minus '-'.)

To submit a new set of bindings, you can fill out this spreadsheet and email me the contents (copy and paste) when you are done. Note that any content you submit falls under the CC BY-SA 3.0 license, as per the project as a whole. Your name will then appear at the bottom of each chart.

I have also recently started developing a form-based submission page. You can use it to submit changes to existing bindings by selecting the "Editor" option in Step 4, above. Or, you can get started making a brand new set of bindings with the "Blank Starter" game in the "Reference" category. There exist "Blank Starters" for every keyboard, though I personally still prefer using the spreadsheet for this purpose.

MediaWiki, SVG & PDF:

I have created templates for MediaWiki that do basically the same thing as the other charts available on this site. You can find the templates as well as instructions on how to use them at StrategyWiki and Wikia. By selecting the "MediaWiki" format type, you can generate the code you will need to fill the template with data and display a keyboard diagram on a MediaWiki wiki. On the destination wiki page, you may also want to wrap the chart in a scrollable DIV element, since the chart is wider than a typical browser window.

I have also created SVG versions of the charts, which you can also select in the "Formats" menu above. I have not migrated over to using SVG images exclusively yet, because they are less compatible with older browsers, and I have not figured out how I want to implement the mouse and joystick controls listings, yet. (I have not yet figured out how to create containers that expand, wrap and scale automatically as the volume of text inside increases.)

PDF versions of the charts will hopefully be added at some point in the future.

Printing Tips:

  1. When printing, most likely the chart will not fit within a single letter- or legal-sized page, even when selecting 'Landscape' mode instead of 'Portrait' mode in your printer settings. Luckily, your browser or printer may have a 'shrink to fit' feature that you can take advantage of to automatically adjust the size of the printed page output. Unfortunately, Google Chrome is missing a 'shrink to fit' feature by default, so I recommend investigating one of the workarounds discussed on Super User, here.
  2. Remember also to enable printing of background colors and images. This setting is found in 'Page Setup' (Mozilla Firefox and Internet Explorer) or within the print dialog itself (Google Chrome). Sadly, this option does not exist at all in Microsoft Edge. I recommend using a different browser.
  3. If the colors or keyboard theme are not to your liking, select a different "Theme" from among the options at the top of this page, then try generating the chart again.
  4. Printing at 90dpi (dots-per-inch) and 100% scaling should result in a printed page that closely approximates the size and dimensions of many real physical keyboards. Of course, not every keyboard is exactly the same, even when adhering to some of the standard dimensions, so YMMV.
  5. On Windows, some Web browers (Google Chrome for instance) use your desktop DPI scaling settings to adjust the size of on-screen HTML elements, resulting in a document that can appear larger or smaller than normal. I'm not 100% sure this affects the printed page output, however.
  6. Note, that the darker themes will use up a lot of ink if you print them.