Gestouch — multitouch gestures for Starling and classic DisplayList

pavel.fljot

So I started my gesture recognition library some time ago, but Starling made me rethink some parts a bit — and here we have same gestures working with classic DisplayList, Starling and potentially with any hierarchical display list structure (ND2D, 3D libs ...)

I ask you to try it out, make feature requests, probably review code, submit bugs — all feedback is welcome!
Library code (this 'experimental' branch): https://github.com/fljot/Gestouch
Precompiled swc: https://github.com/downloads/fljot/Gestouch/gestouch-0.4-alpha.swc
Examples (best way to get know how to): https://github.com/fljot/GestouchExamples/tree/features/starling

My contacts:
email: pavel.fljot@gmail.com
skype: fljot_

Update: for Starling 2
http://forum.starling-framework.org/topic/gestouch-%e2%80%94-multitouch-gestures-for-starling-and-classic-displaylist/page/6?replies=169#post-92492
https://gist.github.com/fljot/616a9ce77ee415bef7fd584f5ef21789

Daniel

Great to hear that you were successful!! And thanks for sharing it here. =)

Don't forget to add a link in the sticky User contributions thread, so that people can easily find it. Thanks! =)

Timbo

Great Pavel.

Just checked your source. You need to give the TransformGesture a IGestureTargetAdapter. Can you give an example, how to do that? How can you make a starling object implement the IGestureTargetAdapter?

pavel.fljot

@Timbo

I have actually simplified API just a couple days after uploading that swc, but haven't updated swc. So now target is of type Object everywhere and it requires you to type a bit less code. And just to clarify those adapters (since it's still wrapped into adapter inside, but now automatically) — they are wrappers for display objects (gesture targets) which provide strong-typed access to methods like contain() and globalToLocal(point:Point).
If you're interested in code it's 2 commits:
https://github.com/fljot/Gestouch/commit/d1150b2a35bf6cd4a40cf527e9984602d9efd886
https://github.com/fljot/Gestouch/commit/86439e76273dcb1c1329b88f5e5ddfda43cff24e

I have just updated the swc also.

fideldonson

Hi Pavel
That looks really great and it sure is needed. I looked into your swipe gesture and just wanted to hear if you could explain how i would use this to set up some kind of cover flow like swiping.

You know on press and drag the images are dragged along under the finger and if you make a little flick with your finger just before releasing it the images are tweened a certain distance before coming to a stop. And at the same time a simple tap would open up the tapped image.

Would that be possible with your swipe gesture?

pavel.fljot

@fideldonson

It is SUCH A COMMON confusion — they say "swipe across the screen to ...", but the actual gesture detected and used is not the swipe(a.k.a. flick, fling), but pan (aka drag). Because the swipe gesture is discrete, and pan is continuous. And for better UX you need to continuously update UI so that user would have immediate and permanent feedback.

I have recently published my TouchScrollManager (that uses PanGesture just like Apple's UIScrollView uses UIPanGestureRecognizer) specifically for this kind of tasks. It's for classic display list, but could be really easily tweaked to work with starling display object. It has all the sweet things like throw effect, proper physics (99% equal to native iOS unlike all other things available like Flex (Spark) mobile Scroller or some JS solutions), highly customizable in all manners.
Source and examples at github: https://github.com/fljot/TouchScrolling
Contact me personally somewhere else if you'll need help with that since this is Gestouch topic.

fideldonson

That looks solid. I'll certainly give it a spin.
thx

13Flo

Hi Pavel,

I'm trying to use your Gestouch library but getting this error:
[Fault] exception, information=Error: Cannot create adapter for target [object Sprite] of type starling.display::Sprite.

I'm trying this using 0.4 alpha SWC
swipe = new SwipeGesture( container );

It would be great if you could help!

Cheers

pavel.fljot

Read README carefully:
https://github.com/fljot/Gestouch/blob/features/starling/README.textile

gesturesManager.addDisplayListAdapter(starling.display.DisplayObject, new StarlingDisplayListAdapter());

13Flo

Deleted

pavel.fljot

@13Flo

even though you managed with that swipe question you deleted, here's a tip:
you can define multiple directions for a single swipe gesture:

swipe.direction = SwipeGestureDirection.LEFT | SwipeGestureDirection.RIGHT;

and in your event handler you can do like so:

private function swipeHandler(e:SwipeGestureEvent):void
{
e.offsetX > 0 // right
e.offsetX < 0 // left
}

Benefits:

less code to write
less gestures -> less to process (just a bit, but still)

13Flo

Hi Pavel,

Thank you for your last reply and the tip, very useful. I realized that I already had the answer to my -stupid- question...

I have a new question: I'm trying to perform a "Transform" gesture on a Starling Sprite. I saw this example but don't know how to apply the matrix to it (image.transform.matrix = matrix;) since it doesn't have a transform property as a flash.display.Sprite has.

Do you have an example of that using Starling?

Thank you!

pavel.fljot

@13Flo

sure there's a Starling example

https://github.com/fljot/GestouchExamples/blob/features/starling/src/org/gestouch/examples/starling/ConflictGesturesExample.as

13Flo

Pavel,

Thank you for the super fast reply.

I confirm it's working great on my Android tablet. However it's not on the Desktop with a regular multitouch Windows 7 screen (while it's working with others MT apps). Any idea why?

Regards

pavel.fljot

@13Flo

hard to tell... Most likely something with the input. Could you play around supportsTouchEvents getter here https://github.com/fljot/Gestouch/blob/features/starling/src/org/gestouch/extensions/starling/StarlingInputAdapter.as ? Would be great if you could fix that, I don't have desktop multitouch machine =(

13Flo

Pavel,

I maybe found the solution:
protected function get supportsTouchEvents():Boolean { // just like in Starling (starling.core::Starling) return (Mouse.supportsCursor || Starling.multitouchEnabled); }

supportsTouchEvents was simply returning false. With the amened above, it's working on my screen. Thank you again.

pavel.fljot

Emmmm.. could you tell me what does it output on your multitouch Windows machine:
trace(Multitouch.supportsTouchEvents);
trace(Mouse.supportsCursor);

and note that you should initialize StarlingInputAdapter _AFTER_ you configure Starling (as you see it uses Starling.multitouchEnabled).

... actually I think I shall not rely on Starling.multitouchEnabled and perform touch/mouse check same way as I do for the regular non-Starling case.

13Flo

I do Starling.multitouchEnabled = true in my Main class.

Then later:
starling = new Starling( ViewStarling, stage, null, stage.stage3Ds[0] ); starling.start(); var gesturesManager:IGesturesManager = GesturesManager.getInstance(); gesturesManager.addDisplayListAdapter( starling.display.DisplayObject, new StarlingDisplayListAdapter()); gesturesManager.addInputAdapter( new StarlingInputAdapter( Starling.current ));

Then in StarlingInputAdapter, I've added some outputs to supportsTouchEvents function:
trace( "Mouse.supportsCursor", Mouse.supportsCursor ); // true trace( "Starling.multitouchEnabled", Starling.multitouchEnabled ); // true trace( "supportsTouchEvents", !(Mouse.supportsCursor || !Starling.multitouchEnabled) ); // false

pavel.fljot

you've missed Multitouch.supportsTouchEvents

13Flo

trace( Multitouch.supportsTouchEvents ) returns true