Swipe Gesture and swipe direction.

How-to Discussions
1

Hi, I am learning fusetools for a few days, and I want to write a 2048 game. I found there no swipe gesture, how can I get the use’s swipe gesture and swipe direction ?

Thanks.

2

Hello yuanjs

The newest release of Fuse has a SwipeGesture component. It is not yet documented, but will be as soon as possible. I’ll make sure we notify you here when it is ready.

3

I wrote a simple game to see how this might work (I’ve attached the demo). A few points about what I’m doing:

  • I’m using SwipeGesture and Swiped to get user interactions, which I just pass off to the JS code.
  • The tiles that exist are stored in an observable in JS. The row and col property defines where they are
  • I use LayoutAnimation to animate the transition when the tiles change position

I encountered a few issues while doing this (which we will look to resolve):

  • There is a WhileTrue in there to workaround one issue that causes the items to flicker in the wrong location when they are first added
  • the same issue results in an extra empty row being added to the grid at some point (actually, this is a combination of two issues)
  • The swipe gesture doesn’t feel as snappy as it should on mobile. Usually we have a visual animation attached and the effect is mitigated, but there is no visual to this swipe.

I hope this is enough to get you started however.

You can download the file here: https://fuseweb.azureedge.net/forum-user-uploads/2016/08/22/ruGxsbKDG14T-legacy-files-YTkJl2BQrFLZHNC6-ObT2CgDaTsTBAPHOUjhA-_Rk.zip

4

The SwipeGesture has now been documented in the handbook. Take a look here :slight_smile: https://www.fusetools.com/learn/fuse#swipegesture-swipe-gestures

5

Thanks you very much. I have check the documents, that’s very good and it’s exactly what I want.

And I have downlaod the example, but when I try to run the example. There is and error:

ERROR: Member not found: Fuse.Controls.Rectangle.Grid.Row
    Outracks.Simulator.Runtime.MemberNotFound occured.
6

This appears to be a bug in preview (and the example was only tested in real builds). We’ll investigate this further but in the meantime it should work if you do a full build / export.