Multi-Touch Input on Webplayer 29

#1
There’s been a lack of two player games for quite a long time now… and that is likely due to the fact that multi-touch doesn’t really work – you cannot move two characters at the same time by pressing two buttons

I’d use it for this type of project:

image

Here are some examples of Hopscotch code that could be improved if we had this: image

Here is an example design I’ve made: image

I’ve seen something similar in another programming languages, it looks like this:

Looks like? Hard to describe that, but I guess you could check the example! It works in JavaScript…


Technical Difficulty? image

FYI for newbies to the webplayer: it uses JavaScript

JavaScript does support multi-touch! Try the example below by copying and pasting it into URL bar:

data:text/html;base64,PCFET0NUWVBFIGh0bWw+PGh0bWw+PGJvZHk+PGgxPkRPTSBUb3VjaCBNb3ZlIEV2ZW50PC9oMT48cD5Ub3VjaCB0aGlzIHNxdWFyZSwgYW5kIG1vdmUgdGhlIGZpbmdlciB0byB0cmlnZ2VyIGEgZnVuY3Rpb24gdGhhdCB3aWxsIGRpc3BsYXkgdGhlIHggYW5kIHkgY29vcmRpbmF0ZXMgb2YgdGhlIHRvdWNoLCBhY2NvcmRpbmcgdG8gdGhlIGRvY3VtZW50OjwvcD48c3ZnIHdpZHRoPSIzMDAiIGhlaWdodD0iMTAwIiBvbnRvdWNobW92ZT0ic2hvd190b3VjaGVzKGV2ZW50KSIgb250b3VjaGVuZD0icmVzZXRfdG91Y2hlcygpIj48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjEwMCIgc3R5bGU9ImZpbGw6cmdiKDE1MCwxNTAsMTUwKTtzdHJva2Utd2lkdGg6ODtzdHJva2U6cmdiKDAsMCwwKSIvPjwvc3ZnPjxwPjxzdHJvbmc+Tm90ZTo8L3N0cm9uZz5UaGlzIGV4YW1wbGUgaXMgZm9yIHRvdWNoIGRldmljZXMgb25seS48L3A+PHAgaWQ9ImRlbW8iPk5vIHRvdWNoIHBvaW50czwvcD48c2NyaXB0PmZ1bmN0aW9uIHNob3dfdG91Y2hlcyhldmVudCl7dmFyIHg9TWF0aC5yb3VuZChldmVudC50b3VjaGVzWzBdLmNsaWVudFgpOyB2YXIgeT1NYXRoLnJvdW5kKGV2ZW50LnRvdWNoZXNbMF0uY2xpZW50WSk7IHZhciBjb29yZHM9WyJbIiArIHggKyAiLCIgKyB5ICsgIl0iXTsgdmFyIHRvdWNoOyBmb3IgKGk9MTsgaTxldmVudC50b3VjaGVzLmxlbmd0aDsgaSs9MCl7dmFyIHgxPU1hdGgucm91bmQoZXZlbnQudG91Y2hlc1tpXS5jbGllbnRYKTsgdmFyIHkxPU1hdGgucm91bmQoZXZlbnQudG91Y2hlc1tpXS5jbGllbnRZKTsgY29vcmRzLnB1c2goIlsiICsgeDEgKyAiLCIgKyB5MSArICJdIik7IGkgKysgO31pZiAoZXZlbnQudG91Y2hlcy5sZW5ndGg9PTEpe2RvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJkZW1vIikuaW5uZXJIVE1MPWV2ZW50LnRvdWNoZXMubGVuZ3RoICsgIiB0b3VjaCBwb2ludDogIiArIGNvb3Jkczt9ZWxzZXtkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiZGVtbyIpLmlubmVySFRNTD1ldmVudC50b3VjaGVzLmxlbmd0aCArICIgdG91Y2ggcG9pbnRzOiAiICsgY29vcmRzO319ZnVuY3Rpb24gcmVzZXRfdG91Y2hlcygpe2RvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJkZW1vIikuaW5uZXJIVE1MPSJObyB0b3VjaCBwb2ludHMifTwvc2NyaXB0PjwvYm9keT48L2h0bWw+

OR paste the following code here:

Tap this to close the folder
<!DOCTYPE html>
<html>
<body>

<h1>DOM Touch Move Event</h1>

<p>Touch this square, and move the finger to trigger a function that will display the x and y coordinates of the touch, according to the document:</p>

<svg width="300" height="100" ontouchmove="show_touches(event)" ontouchend="reset_touches()">
  <rect width="300" height="100" style="fill:rgb(150,150,150);stroke-width:8;stroke:rgb(0,0,0)" />
</svg>

<p><strong>Note:</strong> This example is for touch devices only.</p>

<p id="demo">No touch points</p>

<script>
function show_touches(event){
  var x = Math.round(event.touches[0].clientX);
  var y = Math.round(event.touches[0].clientY);
  var coords = ["[" + x + "," + y + "]"];
  var touch;
  for (i=1; i<event.touches.length; i+=0){
      var x1 = Math.round(event.touches[i].clientX);
      var y1 = Math.round(event.touches[i].clientY);
      coords.push("[" + x1 + "," + y1 + "]");
    i ++ ;
  }
  if (event.touches.length == 1){
  	document.getElementById("demo").innerHTML = event.touches.length + " touch point: " + coords;
  } else {
  	document.getElementById("demo").innerHTML = event.touches.length + " touch points: " + coords;
  }
}
function reset_touches(){
  document.getElementById("demo").innerHTML = "No touch points"
}
</script>

</body>
</html>

As a bonus addition, I’d love to see Hopscotch able to read multi-touch inputs. It’d work like this:


Badly sketched up in Paint.png

The little “zero” (number slot) represents what touch value. Zero could be first finger touched, one could be second finger touched, etc.


@Stylishpoopemoji33 @FearlessPhoenix
@Silverdolphin @StarryDream
@tankt2016 @SarcasticTvHead
@William04GamerA @Rodrik834
@Hopscotcher @ThatEnglishMuffin
@BabyButterfly @Legendary_myth
@anon23813088 @UTheDevHS
@PerilTheSkywing @Over_powered_wizard1
@Mindcool24 @MISSION_IMPOSSIBLE
@XxFoxxedxX

@awesomeonion @Good-E’s (lmk if you want to join)

17 Likes
#2

Fun poll goes here

  • I want Hopscotch Duel! (Second the idea)
  • Nah this idea is not good

0 voters

I like checking boxes and I am TL4
I like unchecking boxes and I am TL4
I am a moderator

5 Likes
#3

First Post I will GBOT

2 Likes
#4

I still don’t get it could you explain why you would need it

3 Likes
#5

It’s so self-explanatory! In a two-player game, you need to be able to press 2 control buttons at the same time. It currently doesn’t work that way

4 Likes
#6

Ohh yeah that would be nice

3 Likes
#7

This would be awesome!

3 Likes
#8

Very well-explained for those who don’t understand! And yes, we need multitouch!

4 Likes
#9

this is a great idea, nice work!

2 Likes
#10

This would be absolutely amazing! I’ve wanted this for ages!
(How long did you spend on that post? It is long.)

[Yes! 10 touches!]

4 Likes
#11

About 10 minutes, and most Touch screens support ten touch points. It’s kinda cool how you can do all of that with just a few lines of JavaScript. It’s nothing compared to what they’ve done already.

3 Likes
#12

@Ana @Jazz would it be ok to share an anonymous codepen to show the code instead of having the user copy and paste things manually?


Edit: “Log in with Github?”

5 Likes
#13

Great question! I’ve forwarded the question through my connections. :sunglasses:

8 Likes
#14

Good idea, I would love to see this in Hopscotch

1 Like
#15


You were saying? (This is a screenshot, which means I also had to press home and lock)

2 Likes
#16

@awesomeonion any thoughts on development difficulty? Doesn’t really look like much to me, but who knows if there’s a way more complex system…

Design doesn’t seem too hard either (add parameter, for each touch point if touching)

bump 2

2 Likes
#17

It’s not too difficult, it’s more a matter of prioritization.

That said, we should have a fix out soon.

2 Likes
#18

Alright, sounds great! I can definitely wait, as I’m working on a different project now, but I’m glad to hear that this is now a part of your plans!

#19

Wow, it must’ve taken you days to put together this topic…

1 Like
#20

Nope, just about 15 minutes

2 Likes