Video Game Keyboard Database

loading

3. Game/Software

4. Media Format

5. Numeric Keypad

6. Orientation

7. Key Labels

8. Spawn the Diagram



All set! Now click the "Generate Diagram" button, above. This will spawn a new browser window containing the selected keyboard diagram.
Try again to select a keyboard, theme and game, then click the "Generate Diagram" button!

9. Print or Export the Diagram

You can export the diagram to an HTML file by clicking the button at the bottom of the diagram.

You can also print the diagram. Refer to the Printing Tips section below.


Project 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 table table instead. If you are looking for Apple-branded or non-English bindings, you may also benefit from searching the master table, since there are unfortunately so few of them.

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.)

Instructions

  1. Select a keyboard.
  2. Select a theme.
  3. Select a game/software.
  4. Select a media format.
  5. Toggle the numeric keypad on/off.
  6. Select the diagram's orientation.
  7. Select the key label display style.
  8. Click on the "Generate Diagram" button. A new window with your selected diagram will appear in your browser.
  9. Print or export the page in the new window if needed. Refer to the Printing Tips section below.

Items marked with a star (✦) are the "default" or most common options.

Example Diagram

US 104 key bindings for the space combat simulator Vega Strike.

Want to Start Creating Your Own Diagrams from Scratch?

If you have a game or software you would like to create a new diagram for, go ahead and click the button below.

Once you're done filling out all of the form fields, you have the option of submitting the schema to the project, or of saving the diagram locally to your hard drive.

Also, note that there is an icon in the top-right of the editor that looks like two curly brackets { }. If you click on this icon you will get to a page where you can import/export JSON code. If you feel it is easier to edit this code externally in a text editor, you may do so instead.

I have come up with a set of conventions with regard to the coloring of key groups that has worked out pretty well for me so far:

red
Combat/Actions
yel
Targeting/Unit selection/Inventory
grn
Movement/Navigation/Direction
cyn
Communication/Chat/Orders
blu
Camera/Point of view/Perspective
mag
Misc. Game Interface/Menus

Please adhere to these conventions as much as possible when submitting new bindings. Thanks!

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.

To submit a new set of bindings or a layout, you can fill out this and this spreadsheet and email me the contents by copying and pasting the data into the email form. 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 you contributed to.

I have also developed a form-based submission page. You can use it by selecting the "Editor" option in Step 4, above. To update a game's binding simply select it from the "Games" menu above. To start a brand new submission, select the "Blank Starter" item in the "Reference" category of the "Games" menu. (Here is a direct link for the most common keyboard.) There are "Blank Starters" for every keyboard. That being said, I personally still prefer using the spreadsheet for creating new bindings.

MediaWiki, SVG & PDF

I have created templates for MediaWiki wikis that do basically the same thing as the charts available on this site. You can find templates as well as instructions on how to use them at StrategyWiki and Fandom. There is a test case located here. By selecting the "MediaWiki" format type in the menu above, you can generate the code you will need in order to populate this template with data. Note that on the destination wiki page, you may also want to wrap the charts in scrollable DIV elements, since the charts are typically wider than a browser window.

I have also created SVG versions of the charts that you can select in the "Format" menu on the front page. I have not migrated over to using SVG for everything yet since it is less compatible with older browsers. Further, I have not yet decided how I want to implement the mouse and joystick controls charts, and this will affect my future choices. (In particular, I have not yet figured out how to create text containers in SVG that expand, wrap and scale automatically as the number of characters inside them increases.)

PDF versions of the charts will hopefully be implemented at some point in the future. Right now the PDF option is still disabled in the menu. That being said, there are virtual printer drivers such as "Microsoft Print to PDF" or "Adobe Print to PDF" that will allow you to print any document to PDF, even from your Web browser.

Printing Tips

  1. When printing, the diagram may not fit within a single letter- or legal-sized page, even when selecting "Landscape" mode instead of "Portrait" mode in your printer dialog settings. Your browser or printer may have a "shrink to fit" option that allows you to automatically adjust the size of the output to fit the size of the paper, so you could try this. Unfortunately, Google Chrome is missing such a feature at this time, so I recommend investigating one of these workarounds if you are using that browser.
  2. You may also free up some space by hiding the numeric keypad. Be aware that many games and software bind commands to these keys! Though not all do.
  3. I recommend not enabling the printing of background colors and images in your printer settings, as this will consume a lot of ink. This setting is found in "Page Setup" (Mozilla Firefox and Internet Explorer) or within the print dialog itself (Google Chrome). The setting appears to not exist in Microsoft Edge.
  4. If the colors or keyboard theme are not to your liking, select a different "Theme", then try generating the chart again.
  5. Printing at 96 DPI (dots-per-inch) and 100% scaling should result in printed output that closely approximates the dimensions of a real physical keyboard. Of course, not every keyboard meets one of the various keyboard standards exactly, so YMMV. In particular, the distance between the function keys and the number keys at the top of the keyboard seems to vary considerably between different keyboard models. Laptop computers seem to not follow any standards at all.
  6. In MS Windows, some Web browsers (Google Chrome for instance) use your desktop DPI scaling settings to adjust the size of on-screen HTML elements, resulting in a document that appears larger or smaller than the Web developer intended. I am not exactly sure if this affects printer output. It may vary from browser to browser, or between browser versions and operating systems. I need to investigate this further.
  7. Note, that the darker themes in general will waste a lot of ink. You might want to select a lighter-colored theme when printing.