Video Game Keyboard Diagrams

loading

1. Select a Game:

4. Select a Format:

5. Create the Diagram:

Try selecting a game, keyboard, theme 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.

Instructions:

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

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, as well as in the change log.

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 Sample" in the "Reference" category (there are blank samples for every keyboard and theme). I personally still prefer using the spreadsheet for this purpose, however.

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.

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.

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 96dpi (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, 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 a lot of ink.