Web Player on mobile - more touch screen buttons?

Joke · November 9, 2021, 9:05am

Hello, I am new there and first I must say you are awesome.

Then I was wondering if there were a possibility to change the touch screen buttons layout for the web player … My problem is that my RM2K3 game has a lot of parts involving the numeric pad (which is not user friendly but… Still there)

For example I have a dumb short game in the game where the users has to input random numbers from 0 to 9 with the numeric pad…

And then the game become a kinda complex Action-RPG with the key 0 to shoot, and shift to change the weapon…

I assume that for now this game is not playable in web version on mobile device.

Is there a way to customise the layout like we can do in the Android app? Or something like that?

Example: Ugly layout done with the Android app:

Side note: I don’t see the touch screen buttons layout when the game is in fullscreen mode, on my mobile phone. It only shows when it’s not in fullscreen mode and it is a pity because the adress bar is showing too, reducing the screen play… Tested on Xiaomi Redmi Note Pro 10…

Thank you!

Ghabry · November 9, 2021, 9:17am

Hello.
This is possible but you must know a bit of web development for it.

Open the index.html that is bundled with the Web Player in a text editor.

Search for div id="apad". Here the touch buttons are defined.

Every key needs a data-key and a data-key-code. You can get the keycode on https://keycode.info/

Add new buttons there and modify the stylesheet to position them.

There isn’t really much more we can help here. If you have any further questions about styling and so on I recommend to ask someone who is more knowledgable about web development than me.

Joke · November 9, 2021, 9:34am

Well, this is already helpful! Thanks a lot, Ghabry!

Joke · November 10, 2021, 6:34pm

So, I share what I’ve done just in case somebody want to use it :

There’s the url if you want to test or see the html source :
https://biloumaster.fr/bogossstory

I fixed the issue about the touch buttons not showing in fullscreen

Thanks!

Ghabry · November 10, 2021, 7:54pm

oh that is cool

Thanks for fixing the fullscreen issue. We just couldnt figure this out

Joke · November 11, 2021, 10:50am

New update, I tried to make a new layout in order to get all the possible input visible, without swapping anything.

I know the numeric input order can seem a bit weird but I tried something thumbs-friendly… Tell me if you have some remarks, requests or ideas!

I also added the F12 button, it can be useful.

Screenshots:

It looks so much like a TV remote, haha…

HTML code: (again, anyone can use it)

Joke · November 11, 2021, 3:45pm

Yet another new layout…

I think it’s better to have the directional cross alone and the numeric inputs organized into a well known way.

Screenshots:

Now it looks like a calculator… not a TV remote.

HTML code:

Custom layout v3

EDIT:

And finally, if you want the actual minimal layout but with my directional input layout, for the gameboy vibe, I have done that:

For games that do not use any special keys

HTML code:

Minimal layout 1 (enter on the right, escape on the left, like a gameboy)
Minimal layout 2 (enter on the left, escape on the right, like the actual EasyRPG player layout)

Always free for use!

I’m sorry for the screenshots of my game, it’s not for advertising, it’s just the project I use to test the EasyRPG player.

Joke · November 12, 2021, 5:41pm

I’ve added four hidden zone (in red on the screenshot) to simulate when the player press two arrows at the same time:

superCross_inkscape3

I changed the code a bit in order to interpret multiple keycode joined with the character “&”:

<svg width="30" height="30" version="1.1" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
      <path id="dpad-up" data-key="ArrowUp" data-key-code="38" d="m12 .5c-.7854 0-1.5.7146-1.5 1.5v6.586c0 .7629.3141 1.521.8535 2.061l2.586 2.586c.5553.5552 1.566.5552 2.121 0l2.586-2.586c.5394-.5395.8535-1.298.8535-2.061v-6.586c0-.7854-.7146-1.5-1.5-1.5z" fill="#fff" stroke="#000"/>
      <path id="dpad-left" data-key="ArrowLeft" data-key-code="37" d="m2 10.5c-.7854 0-1.5.7146-1.5 1.5v6c0 .7854.7146 1.5 1.5 1.5h6.586c.7629 0 1.521-.3141 2.061-.8535l2.586-2.586c.5552-.5553.5552-1.566 0-2.121l-2.586-2.586c-.5395-.5394-1.298-.8535-2.061-.8535z" fill="#fff" stroke="#000"/>
      <path id="dpad-down" data-key="ArrowDown" data-key-code="40" d="m15 16.33c-.3927 5.9e-5-.7829.1618-1.061.4395l-2.586 2.586c-.5394.5395-.8535 1.298-.8535 2.061v6.586c0 .7854.7146 1.5 1.5 1.5h6c.7854 0 1.5-.7146 1.5-1.5v-6.586c0-.7629-.3141-1.521-.8535-2.061l-2.586-2.586c-.2776-.2777-.6679-.4394-1.061-.4395z" fill="#fff" stroke="#000"/>
      <path id="dpad-right" data-key="ArrowRight" data-key-code="39" d="m21.41 10.5c-.7629 0-1.521.3141-2.061.8535l-2.586 2.586c-.5552.5553-.5552 1.566 0 2.121l2.586 2.586c.5395.5394 1.298.8535 2.061.8535h6.586c.7854 0 1.5-.7146 1.5-1.5v-6c0-.7854-.7146-1.5-1.5-1.5z" fill="#fff" stroke="#000"/>
      <path id="dpad-up&left" class="hidden-shape" data-key="ArrowUp&ArrowLeft" data-key-code="38&37" d="m11 .5586a15 15 0 00-10.44 10.44h8.441l4 4h2v-2l-4-4z" opacity="0"/>
      <path id="dpad-left&down" class="hidden-shape" data-key="ArrowLeft&ArrowDown" data-key-code="37&40" d="m13 15-4 4h-8.441a15 15 0 0010.44 10.44v-8.441l4-4v-2z" opacity="0"/>
      <path id="dpad-down&right" class="hidden-shape" data-key="ArrowDown&ArrowRight" data-key-code="40&39" d="m15 15v2l4 4v8.441a15 15 0 0010.44-10.44h-8.441l-4-4z" opacity="0"/>
      <path id="dpad-right&up" class="hidden-shape" data-key="ArrowRight&ArrowUp" data-key-code="39&38" d="m19 .5488v8.451l-4 4v2h2l4-4h8.451a15 15 0 00-10.45-10.45z" opacity="0"/>
    </svg>

function simulateKeyboardEvent(eventType, key, keyCode) {
  // simulate multiple key events (data-key and data-key-code containing "&"):
  let mk = key.split('&');
  if (mk.length > 1) {
    let mkc = keyCode.split('&');
    for (var i = 0; i < mk.length; i++) {
      let node = document.querySelector('[data-key="' + mk[i] + '"]');
      if (eventType == 'keydown') {
        node.classList.add('active');
      } else {
        node.classList.remove('active');
      }
      simulateKeyboardEvent(eventType, mk[i], mkc[i]);
    }
    return;
  }
  // simulate regular key event:
  const event = new Event(eventType, { bubbles: true });
  event.key = key;
  event.code = key;
  // Deprecated, but necessary for emscripten somehow
  event.keyCode = keyCode;
  event.which = keyCode;

  canvas.dispatchEvent(event);
}

HTML code:

Custom layout v3 updated

I did that because some custom systems done with event in RPG Maker 2003 (like systems with pictures) may require double key inputs (diagonal movements). I know most of the time it is useless because RPG Maker 2003 has only four directions for movements as default, but well, I did it.

jetrotal · November 18, 2021, 9:30am

Hey man! Inspired by your keypad, I started to design a model of it for a custom Easy RPG Player.

It uses MDI Icons instead of svg images, I guess it will be faster on weak devices.

The goal is to make it compatible with this player here:

It will have features, like an Eye Icon that toggles On/Off the numeric keypad.
Maybe I’ll add the Fast Forward button too.

This is what i wrote so far code wise:

it’s still only on the design phase, I’m starting writing the arrow CSS right now.
I have to study all the wizardry you made, to adapt it to the layout i’m making…

Thanks for the inspiration Man!

Joke · November 18, 2021, 11:25am

Oh, I’m glad to see that!

I am not sure that MDI icons are better than SVG for performance, especially because my SVG are really optimized / minimal. But your right key pad is really well designed so it’s more dev-friendly to customize or to make it configurable. You can consider later an option for swapping Enter and Escape because some player (used to Nintendo controllers, for example) prefer using the right button for validation and the down button for cancelling. The third button could be another key than Shift when the numbad is hidden, or being hidden too, depending on the game requirement.

I guess the arrow pad is a placeholder or you will have some challenge to detect which arrow is pressed. You can always consider to copy mine which stand on only 4 or 8 SVG paths.

Another inspirational topic is for example indiexpo which have created the indiepad for its indieconsole, the point is to use our smartphone as a game controller while the game is displayed on another device like the computer. It’s really smart but still, it’s limited by the number of available keys.

Meanwhile I have enhanced a bit the “simulateKeyboardEvent” function that I showed in my previous post:

function simulateKeyboardEvent(eventType, key, keyCode) {
  const mk = key.split('&');
  if (mk.length > 1) {
    const mkc = keyCode.split('&');
    mk.forEach((x, i) => {
      const node = document.querySelector('[data-key="' + x + '"]');
      if (eventType == 'keydown') node.classList.add('active');
      else node.classList.remove('active');
      simulateKeyboardEvent(eventType, x, mkc[i]);
    });
    return;
  }
  const event = new Event(eventType, { bubbles: true });
  event.key = key;
  event.code = key;
  event.keyCode = keyCode;
  event.which = keyCode;

  canvas.dispatchEvent(event);
}

It’s still a wizardry thing.

jetrotal · November 20, 2021, 5:07am

Hey, Some updates:

(I posted it as a print scrren, because this forum won’t let me upload more than 1 image )

here’s the code to what I made so far:

jetrotal · November 22, 2021, 4:23pm

Ok, I hosted the Webplayer layout redesign on gitHub:
https://jetrotal.github.io/ezRPG/

IDK yet how to make it work, but here is the complete source code:

I guess I need some help to put it together…

Ghabry · November 23, 2021, 9:29pm

The text does not render in Firefox for me. Just shows me empty boxes.

jetrotal · November 23, 2021, 9:50pm

wierd… here appears fine…

Ghabry · November 23, 2021, 9:58pm

ah it did not work because I had “decentrleyes” addon enabled which blocks requests to unknown CDNs. Including the font.

That font is huge btw. 300 kbyte?! o_O

jetrotal · November 23, 2021, 10:23pm

It came from this repo, with 6000+ icons as a font.

Maybe there’s a way to compile a smaller version of it, with only the essential icons.

Edit:

yeah, we could host a css file, removing all the css classes we don’t use.
Is there an automatic way of doing this?

Joke · November 23, 2022, 6:07pm

Hello!

I give you my last code with some improvement:

new layout (HTML)

It gives the choice between three layouts, depending on the parameter “pad” you pass in the url:

The default (no parameter) shows only two buttons, enter and escape:

The second (pad=shift, ie “?game=YourGame&pad=shift”) shows three buttons, to add the button “shift”:

The third (pad=full, ie “?game=YourGame&pad=full” is the full layout:

The major improvement is that I fixed an issue with the previous buttons, it was difficult to keep a button pressed, my bad, now it works.

Feel free to use, edit, ask a change, etc.