How to combine with TUIO AS3 Library

[6foot7]

Hi,

What a great library you've got here! You mention it could be used quite easily in conjunction with TUIO. I'm trying to combine it with the TUIO AS3 lib found at http://bubblebird.at/tuioflash/tuio-as3-library/, but I don't know where to start. Could you possibly give me some insight in how to combine these two libs?

Thank you so much!

Marc

[fljot]

• Talking about currently last commit https://github.com/fljot/Gestouch/commit/e9132fec9bd6c03d02999c8fc81996818c307ed3 *

So there's an "input adapter" concept (Gestouch#inputAdapter:IInputAdapter). It is responsible for receiving input and passing data (location, touch ID) into TouchesManager. I wrote NativeInputAdapter that works with native TouchEvents and MouseEvents (with one of them or both, you can customize that).

1. You could write your own TUIOInputAdapter similar to NativeInputAdapter.
2. You could use some TUIO libraries (this one you mentioned or probably https://github.com/turbosqel/AS3TouchLib ) and dispatch native TouchEvents (using stage.getObjectsUnderPoint, to mimic native behavior). I mean TouchEvent.TOUCH_BEGIN, TouchEvent.TOUCH_MOVE and TouchEvent.TOUCH_END. The benefit of this approach is that you don't need to write your own input adapter for Gestouch and that your UI elements could normally listen to these native events (so you don't care much wether you develop for TUIO or for regular usage).

[6foot7]

Thanks, that helped a lot! I went for option 2. Actually, the TUIO AS3 lib I was talking about turned out to have a property for it (dispatchNativeTouchEvents = true)

Now I'm facing another challenge; I have multiple png's of which parts are transparant. When they overlap I cannot tap a png that is underneath a transparant part of another png. Do you have any suggestion on how to overcome this?

Thanks again!

Marc

[fljot]

Just to ensure\ So it did work easily? Everything works as expected? Did you also manage to initialize NativeInputAdapter with arguments to force it to handle TouchEvents explicitly (ignoring Multititouch.supportsTouchEvents value)?

So transparent PNGs. You understand the nature of that issue, right? Unfortunately bitmap transparency doesn't mean anything for interactivity and there's no simple API to control that. Therefore Touch/MouseEvent comes with event.target equal to the object you might not actually desire.

So here comes custom hit-testers! =) Again, I'm talking about that currently last API and commit mentioned above Default input adapter (which is NativeInputAdapter) passes "default"(or native-based guessed) touch target (event.target) to the TouchesManager along with touch coordinates. One of the TouchesManager's task is to set Touch#target. It accomplishes this task using a list of hit-testers. One of them (initialized automatically and used by default) is the private class DefaultTouchHitTester https://github.com/fljot/Gestouch/commit/e9132fec9bd6c03d02999c8fc81996818c307ed3#L7R235 it does nothing but simply returns event.target. (the only reason why I created it is to have this "native" hit-testing working in the same system with custom hit-testers such as StarlingTouchHitTester).

So what you need is to create some custom hit-tester and register it via Gestouch.addTouchHitTester(new MyTransparentBitmapsHitTester()); How will that hit-testing look like? Well you should analyze current target, if you can understand that it's ur bitmap container - start analyzing pixel transparency under the touch location (you know, similar to InteractivePNG utility). Once you realize it's transparent — you should manually go "deeper", i.e. use Stage#getObjectsUnderPoint() and get other objects underneath...

This is the concept I put in architecture specifically to handle such kind of situation... But maybe you have some better ideas? It's still not even in "develop" branch as I'm not really sure if all this new stuff looks solid. Need some feedback!

[fljot]

upd: if that is actually some pre-defined set of images, you can always cut the corners by manually drawing some hit-test vector graphics object and using native things like myBitmapContainerSprite.hitTest = myGraphicContainerSpriteForThatBitmap.

[fljot]

@6foot7

any progress?

[6foot7]

Hi Pavel,

Everything is working perfecty. I must admit I am not using the last commit.

I'm using this code: GesturesManager.initDefaultInputAdapter = false; GesturesManager.getInstance().addInputAdapter(new TouchInputAdapter(stage)); //In combination with dispatchNativeTouchEvents = true (from the TUIO lib) it works fine.

Thanks a lot for the explanation. I totally understand the custom hittest (create & register a custom hit-tester that goes through all objects found by getObjectsUnderPoint() untill it hits a nontransparent pixel, then return the displayobject). I think it's a very flexible architecture and can't think of a better idea.

But I went for option 2 (thanks, I didn't know that .hitTest method...) since that's enough for the stage I'm in with the game and it seemed less heavy to me, not having to check for transparant pixels all the time, but I should test both methods to see if that holds.

Thanks again for you quick and very helpfull reply's, if I have any updates or more insight I will let you know!

Kind regards,

Marc