search

giongto35 / cloud-game

Web-based Cloud Gaming service for Retro Game
https://www.youtube.com/watch?v=GUBrJGAxZZg
Apache License 2.0
2.3k stars 347 forks source link

Add full RetroPad input support (triggers, shoulder buttons, etc.) #153

Closed sergystepanov closed 4 years ago

sergystepanov commented 4 years ago

To do.

giongto35 commented 4 years ago

Hi @sergystepanov ,

Thank you so much for taking the initiative to do this.

May I know what will be this change explicitly.

sergystepanov commented 4 years ago

Well, let's not get ahead of ourselves. The main goal is to add L1 and R1 buttons for PSX games with touchscreen support. Two small bumps at the top, I think. Not quite sure about analog sticks from DualShock 2.

giongto35 commented 4 years ago

I see. It's good to have L1 and R1. Let's go forward with it :D

DQ318 commented 4 years ago

@giongto35

Hello! I would like to suggest the option to edit the keyboard / joystick configuration be added too.

In my view, for the emulator to be 100% functional for the final audience, only that is extremely necessary. Of course, in the future could add a text chat for players to talk to eachother and other perfumeries such as listing of created rooms, etc.

giongto35 commented 4 years ago

Hi @DQ318 ,

Some of my friends also suggest that. I think the keyboard setting can be solely done on Front-end with local storage. It needs some effort to re-arrange the layout though, (1 small configuration button + popup a setup screen) do you want to take initiative on that : D

giongto35 commented 4 years ago

Added L R here: https://github.com/giongto35/cloud-game/commit/8484eca29330c133185da79e99f9745a469ca71a

DQ318 commented 4 years ago

Hi, @giongto35 !

I tried to do what you suggested here.

Unfortunately I am not a programmer and I am very weak in CSS so I read some tutorials and tried to do something, however, I was unable to contribute. What I did here was to create a button (circled in red in the image) that opens a Modal, containing a layout of an SNES control. The idea was that, when clicking on a button, an input field would appear to set the button pressed on the joypad but unfortunately I don't know how to do it.

If you want, I can send it to you by email or create a link with the changes I made (file /web/game.html ... file /web/css/main.csss ... in addition to the Modal image files)

Sorry but that's the best I can do for now.

Captura de tela de 2020-04-12 20-24-58

Captura de tela de 2020-04-12 20-25-27

giongto35 commented 4 years ago

Hi @DQ318, It is indeed a nice suggestion and design, I didn't think of create a screen and click on button to change the setting. Is the SNES image drawn by you? I want to move away from the SNES UI though, so I may not use it. You help solidify the idea, I will make some adjustment from the design you proposed. To share the code, you can push as a new branch and I can take a look and cherry-pick instead of sending yours over email. Even if some parts of your code is not applicable, you can take it as a practice. I saw you made a great effort here. Good job!

DQ318 commented 4 years ago

Hi @giongto35 !

Sorry, I really don't know how to do this through Github, I will see some tutorials another time.

But, I am leaving here the .ZIP file containing the modified files, which are:

/web/game.html /web/css/main.css and all files from UI folder.

Thank you for your attention, I will try to help you with other graphic aspects you may need in the future.

cloud-game.zip

DQ318 commented 4 years ago

Hi, @giongto35 !

Have you tested the files to see if it is usable in any way?

I wish could help in other ways but for now I can only give moral support. :P

Best regards.

giongto35 commented 4 years ago

Hi @DQ318 ,

I just extracted and run. Very good attempt :+1: . I like the button and the dropdown effect. Are you a designer? I think it will be a lot of work for you for the keyboard configuration screen. We indeed can reuse what you have now for the help (the question mark). When you click help, you will see a text guidance overlay the screen to show which button equivalent with which keyboard right. It is a bit ugly right now. Can you help redesign our help screen as your dropdown screen like what you did (beautify game screen with text guidance overlay)? It will be a great help for us : D Screenshot from 2020-04-25 23-09-05

sergystepanov commented 4 years ago

I opened new issue for this feature #172. This one was not supposed to be about the keyboard remap.

DQ318 commented 4 years ago

@giongto35 , @sergystepanov Hi guys, long time =D

I saw that they added support for remapping the keyboard buttons. Awsome implementation. However, it would be interesting to add this feature to also remap the buttons of the connected controls, as apparently this is not yet possible just by adjusting the application's commands. Anyway, great job! = D