Add Controls Icons to Font and Match Current Inputs

[desttinghim]

Problem

Currently each game either uses text or custom graphics to spell out what the controls are, generally by mentioning the keyboard keys to press. This works as long as you are on a PC and have the same keyboard layout. but quickly becomes wrong if you play through retroarch, mobile, or just don't have a standard layout. The current alternative is to use WASM4's naming standard (1, 2, Arrow Keys, etc.), but this is confusing to people who haven't memorized WASM4's buttons and their mappings.

Proposal

We should add icons to the font that indicate each control (as in #195), and create a system that can swap these icons out with more appropriate icons at runtime. For web/desktop, this means that people can remap the controls to their preference and get correct instructions on what to press. On touch screens we can either add names (1, 2) to the on screen buttons and put this in the icons. In the retroarch builds we can use the retropad as our basis. For implementations of WASM4 on constrained devices this system can be ignored entirely and the icons hard coded into the engine.

[JerwuQu]

I think this is a great idea, and would kinda be tied into solving #195.

[JerwuQu]

Now that we have icons for keyboard, there are a few approaches to switching out the font button icons (a feature which also has to be implemented). These are some I came up with:

Native

For keyboard:

Set during runtime depending on keyboard layout. AFAIK has to be pretty much hardcoded to X and Z for QWERTY, J and Q for Dvorak, etc.

For libretro and MCUs:

Compile-time flags to set to different common layouts, such as A and B (Nintendo-style), X and O (Sony-style), etc. with an additional flag to swap 1 and 2.

Web

For keyboard:

Same as native.

For gamepad overlay:

Either:

1. Label as 1 and 2 and have the font say 1 and 2.
2. Label as X and Z and have the same font as when on QWERTY keyboard.

For gamepad input:

👻

[aduros]

Something to consider with dynamic icons is that it would break determinism, which has implications for future features like netplay and saved replays.

(Games could draw an icon, read it back from the frame buffer, and then do something completely different based on which icon was found, causing a desync)

[JerwuQu]

For netplay, an easy fix is to set (and freeze) the layout for each player when the session starts.

Example:

• Player 1: QWERTY: Z and X
• Player 2: Also QWERTY: Z and X (or Tab and Q)

This would actually also help to display the correct layout in the future. Perhaps Player 2 will want to use the input layout for Gamepad 1 (arrow-keys and Z and X) despite being represented as Gamepad 2 on netplay.

For replays, I'd guess it would be a similar case with TIME (#365), meaning we'd require a set of data stored with the replay anyways.

[JerwuQu]

I just realised with the comment above that we would require a section of the font for each gamepad (which in hindsight would be good to have anyways).
0x80 -> 0x87 for gamepad 1
0x88 -> 0x8f for gamepad 2
0x90 -> 0x97 for gamepad 3
0x98 -> 0x9f for gamepad 4

This will completely fill up the free space in the font :)

Late edit:

Since the "which netplay player am i?" data is getting added which breaks the determinism we were talking about, there's now no disadvantage to simply editing the font in 0x80 -> 0x87 for each player and having them be displayed differently depending on local settings.