Mobile Thumbstick- AKA touch control, multiplayer

I think this is the prettiest and simplest way to do it.

<img src="http://dl.dropbox.com/u/32679138/thumbstick.png" border="0">

Set a drag object, and use the angle between it and the "thumbstick base" to set the angle of motion.

You can definitely be creative and add the running/walking control by either adding separate base,

or just by calculating the distance between thumbstick and the base.

Eg,thumb is dragging-->playerbox move distance(thumb.x,thumb.y,base.x,base.y) / "Insert your number here"

Capx

Simpler, Neater, offering precised control, and offer easier customization.

P.S.: I guess I done my little part to contribute to this forum =P

I will appreciate someone else spend some time to teach me all the expression and tricks about multi-touch~!(No the manual and tutorial is not helping at all)

Could you please put up an HTML sample. I don't use beta versions and I want to test this out on an actual touch screen.

Honestly I completely overlooked the Drag and Drop behaviour. Though I tried to simulate it by doing the same form of checking to see if the touch was still touching. I found that it was unusable as the touch would lose it's requirement of still touching thumb stick. However maybe the drag and drop behaviour will be more solid in monitoring the touch position even when the finger slides off the thumb stick.

Thanks. I really appreciate you showing the drag and drop behaviour. I think it works out really well :) I think the tutorial will be a lot better for your contribution once it's updated :)

You rock :)

I'm glad that someone find this useful =)

*I donno why lately I just can't upload to dropbox and share the html, it always error 404*

I am sorry there is no html example

There is easier than this ... A 2 event version !

But Well ... Nice One !

wow! do you mind to share?

ZhaoYun

What would you like to learn? I can teach you, if you want.

This is part of the original post and not on the OP interest of whiteclaws 2 event and lonehangman offer.

So I was experimenting with dragged objects and the sample that OP posted. I like the design. use of the drag and drop is better. As I've already stated. However I found that in trying to capture a more intuitive and responsive controls the above example doesn't have the same polish as say Street Fighter 4, Grand Theft Auto for Android/ios.

First I wanted a larger area of input for where the thumb can start pressing graphically. the entire Touchpad area. I found making the control stick the same size had a draw back. The drag and drop feature follows where the object was grabbed. This resulted in a problem that even if I wanted to do a double tap I needed to "grab" the center each time. Where as tapping the side of the pad twice was ideal. The solution right now is to what seems a mandatory third event.

Second, it's purely personal taste. But I don't like the joystick stick part being able to be dragged entirely across the screen. So in the OP Thumb1(assume lower left) can be dragged all the way to the upper right. This is personal. I've seen games use this and there is nothing wrong with the choice. However....

a floating thumbstick results in unreliable analog based input. Analog referring to range of of left/right up/down and not angle. Since we are talking about touchscreens that range from 3.5 to 10 inches and a diversity of resolution. being reliant on distance will produce unreliable results. Due to the nature that distance and radius is dependent on device. That it is best to due a percentage based translation.

However, ZhouYun does have a point. The 2 event style he uses is as simple as it can get. However I would change the "Not Dragging" to "On Drop" instead. A "Not Dragging" condition will fire the code afterwards. So in his example Thumb1 when not dragging is having it's position set every frame. It's only 1 command, but it's not needed. Where as a "on drop" will only fire when an "on drop" event occurs.

Anyways. Again I appreciate the OP input and will change the article to a better way :)

—

Oh WOW! I am excited to learn!

Lets start with this question, how do we specify touch?

I think this is the best way to ask:

<img src="https://dl.dropbox.com/u/32679138/My%20Question.jpg" border="0" />

—

Interesting input!

I too, don't like the fact that using drag and drop means I have to retouch- and re-drag the thumbs from the center position every time I accidentally drop it.

(If I learn how to do the thing I asked on previous post, I would change the touch control into calculating angles between "Control" and "Touch" right away)

I opt using "is not dragging" over "on drop" in order to have the thumbs position on the center of the touch pad on the start of the layout, and in case that it was dislocated from the touch pad for whatever reason.

I always wonder though, if an event is always true, does it makes the event always firing?

for example as you say, when I use "when thumb is not dragging, set position of thumb to control", does the construct doing work reposition thumb to control every tick, taxing performance?

ZhaoYun

I don't think this would be a good place to discuss this, otherwise it'll turn into a massive thread.

Do you have an email that we could use?

But to answer the question put forward.

I don't see anything wrong with it. It seems all right to me, if there is something that I'm missing could you care to elaborate.

Also, there is a much easier way to do this, I can give you a capx if you want.

"for example as you say, when I use "when thumb is not dragging, set position of thumb to control", does the construct doing work reposition thumb to control every tick, taxing performance?"

if an event condition is true. Then it always fires. So in the example the position of the thumb is set to the control position every tick.

Is it taxing performance? Not really. It's only one instruction. however it's a good rule of thumb to watch for this. It's possible that you only need an event to fire once(as above sample only needs to be fired once), but may have dozens of intensive instructions. This could tax and reduce performance.

I think it's awfully thought for loneman to offer his time to teach some intracacies of C2. I personally am still muddling my way :D that's why I loved you drag and drop sample. Didn't even occur to me.

jayderyu

Thanks for the explanation~

Although I know about the always firing thingie, but I always wonder if there is an exception in some cases. haha. Good to finally get clarified.

First I wanted a larger area of input for where the thumb can start pressing graphically. the entire Touchpad area. I found making the control stick the same size had a draw back. The drag and drop feature follows where the object was grabbed. This resulted in a problem that even if I wanted to do a double tap I needed to "grab" the center each time. Where as tapping the side of the pad twice was ideal. The solution right now is to what seems a mandatory third event.

jayderyu

have you tried to increase the size of the collision mask to make a larger area of input? It's often used in mobile games.

philx bit of an old thread :P I think this was back when using the Drag and Drop behaviour was required. So going over this.

"The drag and drop feature follows where the object was grabbed."

This would mean that when touching the object. The object will not center on where the touch occurred. So even increase the collision mask which is no different than effect of a different sized sprite. Will result in no control. Also with all of that. If you manually set the position of D&D object while dragging. The object will end up going screwy by constantly being re-rendered in two different locations on alternating ticks.

Now of course this was 6 months ago. I'm not sure if the D&D behaviour has any kind of changes. Maybe there is now an option that will snap the D&D to the point of touch. Which would make your point of increasing the collision mask work.

These days however Touch.touchID has been added and the use of D&D is not required. Since we are not using the D&D grab and drag where touching. We have the option to manually move the object without anything going screwy. So increase the collision mask will have perfectly fine results. There usually is no one solution. Just keep in mind that collision mask is the only part of the sprite that touch matters. Not the image of the sprite. So a larger collision is no different than a larger sprite. except for the size of the image :)

I found as long as the trinity of Events are met. I haven't seen any problem with implementation, but I could be over looking something :)

If your interested for how to do touch based joysticks there is a tutorial you can search for :)

scirra.com/tutorials/398/touch-stick-controllers