Mobile Controls

[leognon]

It could be helpful to add touch controls so people can play on mobile.
I'm not sure what a good control scheme would be, or how it could be implemented in a mobile browser (without the user accidentally scrolling and zooming).

If anyone has experience with this type of thing, I would love some help!

[mutdmour]

@Goel25 I am interested in working on this.

[leognon]

@mutdmour Thank you! I am quite new to collaborating on Github, so please be patient as I figure this out.

The current controls work by using the p5.js keyIsDown function. I think it would be best to add buttons (left, right, down, Z, X) when playing on mobile which the player could press/hold to have the same effect as pressing on the keyboard.

It should not be too difficult to add a check for mobile and swap the control scheme depending on if the user is playing mobile or not. We could easily swap all the keyIsDown calls with a new function that would check if it's on mobile, use either the button presses (mobile), or the keyIsDown function (keyboard).

My biggest worry is how mobile browsers will react to lots of pressing and holding (will they zoom or scroll?). I'm not totally sure of the best way to fix that. We'll also need to re-arrange UI elements (maybe add some type of fullscreen mode).

Of course, I want to leave the current version in-tact and make sure all the changes only affect mobile.

I believe I would be able to add support for the basic buttons/mobile controls, but I'm not sure about the UI stuff.

Does this sound good to you? I'm open for any suggestions and input.

[mutdmour]

I downloaded a few Terris apps and played around.

I think we can do this without ui controls, just based on touch. When user swipes right or left, the piece moves along. When user taps, rotate piece clockwise. Don't have to support counter clockwise behavior.

To resolve scrolling issue, we can prevent default actions if user is touching within the canvas.

If this makes sense for you, I can create a draft implementation when it's ready and we can iterate on it.

[leognon]

Ok, this sounds good. The only problem is that some phases require pressing multiple keys at once (rotate and left/right), which would not be possible with swipe controls. It would also not be possible to do phases that require counter clockwise rotation.

However, buttons might be too tedious to support, so I think swipe controls should generally work well!
It would be great to see an implementation of this!

[mutdmour]

sorry, it's been a while since I have updated you. I started working on adding mobile controls this but never finished. I am sorry I don't think I will be able to complete this. 😞 Anyone else interested can pick it up

[leognon]

No problem! Thanks for trying, I knew it would be tedious.
I hope you can still enjoy the game!

[NateChoe1]

I just made a basic prototype of how mobile controls could work, let me know if there's anything you'd like to change. I don't know how rotation charging would work, so I didn't add it.

2021-02-17.04-45-26.mp4

[leognon]

Thank you for working on this! Since phasing is such an important mechanic and requires multiple button presses at the same time, I'm not sure dragging will work very well. I believe this is also why you're encountering the problem with rotation charges.

I think the best way to add mobile controls would be on-screen buttons. This would allow players to press multiple buttons at once (and therefore phase). This would also make it easier for players to play at higher speeds.

Do you think this would be possible?

P.S
To locally test on mobile, you can run a local http server. This allows you to open the site locally on your computer by going to 127.0.0.1:8000 (or whichever port you chose). To open the site on your phone, connect to your ip address:8000.

[NateChoe1]

I made html buttons, but then realized that html buttons don't work with onmousedown and onmouseup on mobile. In order to add buttons, you need to have them inside of the p5 sketch. Either way, here's a basic prototype of how it could work. I did use mouse and keyboard controls a lot in this example to set up phasing.

EDIT: nvm you can just use ontouchstart and ontouchend

2021-02-17.20-07-09.mp4

[leognon]

I apologize if I was unclear, but I actually meant for the buttons to be p5.js buttons (don't worry about graphics for now) onscreen, in a similar position to a keyboard (rotate buttons on the left side, arrow keys on the right side). That would be much more intuitive for players.

With p5.js buttons, it might be difficult to work around the UI, but in the final version, I will use your code to make a separate mobile version which removes a lot of the UI to make things cleaner.