Is this the best way to make a swipe left / right class?

Tom2012 · October 2012

Anything I could do better here please?

Swipe = Core.class(Sprite)
 
function Swipe:init()
self:addEventListener(Event.TOUCHES_BEGIN, self.touchesBegin, self)
self:addEventListener(Event.TOUCHES_MOVE, self.touchesMove, self)
self:addEventListener(Event.TOUCHES_END, self.touchesEnd, self)
end
 
function Swipe:touchesBegin(event)
self.startX = event.touch.x
end
 
function Swipe:touchesMove(event)
end
 
function Swipe:touchesEnd(event)
if(event.touch.x > self.startX + 20) then
print("swipe right")
else if(event.touch.x < self.startX - 20) then
print("swipe left");
end
self.startX = nil
end
 
end

zvardin · October 2012

You may want to check the time too? In that setup, I could touch the screen, wait 5 seconds and then let go. If my finger moved 20 pixels then the "swipe" motion would still fire. This may or may not be what you want, but something to keep in mind.

OZApps · October 2012

@Tom2012,
What happens if the user has actually swiped upwards or downwards and has the x threshold more than 20? i.e. it was a slightly diagonal upwards or downwards swipe, it will still give a false positive of swipe left or right.

You will have to consider the Y swipe as well to see if the movement on the Y-axis was greater or not. Just in case you want to make it more accurate and might have to consider a couple of more scenarios to eliminate the false positives.

Tom2012 · October 2012

Thanks guys, got this worked in today and it works fine now.

talis · October 2012

Previously i have used @ar2rsawseen 's gesture class for that pupose like this:

local function callback(name)
if name=='Back' then
--Back
else
--Forward
end
end
 
sgest = Gestures.new({
    debug = false,
    draw = false,
    drawColor = 0xff0000,
    drawWidth = 5,
    autoTrack = true,
    scope = self,
    allowRotation = false,
    inverseShape = false,
    points = 33
})
 
sgest:addGesture('Forward', {
    {x = 0, y = 0},
    {x = 30, y = 0}
}, callback)
 
sgest:addGesture('Back', {
   {x = 30, y =0},
   {x = 0, y = 0}
}, callback)
 
end

talis · October 2012

And here is the whole class:
http://appcodingeasy.com/Gideros-Mobile/Detecting-Gestures-in-Gideros

thunderrabbit · October 2012

@Tom2012, can you post the code you used to distinguish left-swipe and right-swipe?

@Talis, the gesture code is great, but only says it's a "Line," no matter which way I swipe.

I even added new gesture types, but only "A Line" is detected, no matter which way I swipe:

gest:addGesture("A Line", {
	{x = 0, y = 0},
	{x = 0, y = 100}
}, callback)
 
gest:addGesture("B Line", {
	{x = 0, y = 100},
	{x = 0, y = 0}
}, callback)
 
gest:addGesture("C Line", {
	{x = 0, y = 0},
	{x = 100, y = 0}
}, callback)
 
gest:addGesture("D Line", {
	{x = 100, y = 0},
	{x = 0, y = 0}
}, callback)

ar2rsawseen · October 2012

@thunderrabbit as @talis has posted you need to provide allowRotation = false and inverseShape = false to make direction matter.

talis · October 2012

ahhh again late to answer

(

ar2rsawseen · October 2012

@talis I can delete my comment if you want

OZApps · October 2012

@arthurs, how do you delete a comment? You can blank it out and/or leave a note for Atilim or Gorkem to delete it, other than that, is there a way to delete?

ar2rsawseen · October 2012

Well, there is a button Delete next to every post, that I can click :-\"

http://www.giderosmobile.com/forum/discussion/1513/trash-the-roadmap-please#Item_20

talis · October 2012

@ar2rsawseen What's done is done there is no returning back this is a war i can not win

Our delete button has been forgotten to be added to our holder.
self.stage:addchild(deletebutton)

:-B

thunderrabbit · October 2012

D'oh!!! I only looked at "the whole class" as you posted *after* you posted the answer I wanted. I figured the most recent answer must be the best!! [-X Thanks for sorting me out!! :-)

Tom2012 · October 2012

@Tom2012, can you post the code you used to distinguish left-swipe and right-swipe?

Hello :-) Sorry for the late reply...

Here's the code I am using for my app that seems to work well.

Hector = Core.class(Sprite);
 
-- Do on load
 
function Hector:init(scene,atlas)
 
-- touch listeners
 
	self:addEventListener(Event.TOUCHES_BEGIN, self.touchesBegin, self);
	self:addEventListener(Event.TOUCHES_MOVE, self.touchesMove, self);
	self:addEventListener(Event.TOUCHES_END, self.touchesEnd, self);
	self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self);
 
end
 
-- Time how long between first touch and end of touch
function Hector:swipeTimer(event)
	self.time = self.time + 100;
end
 
-- When touch begins
function Hector:touchesBegin(event)
	if(self.timer) then
		self.timer:stop()
	end
	self.time = 0;
	self.canSwipe = true;
	self.startX = event.touch.x;
	-- add timer
	local timer = Timer.new(100, 10);
	self.timer = timer;
	timer:addEventListener(Event.TIMER, self.swipeTimer, self);
	timer:addEventListener(Event.TIMER_COMPLETE, function() self.timer:stop() self.canSwipe = false end);
	timer:start();
end
 
-- What to do when there's a swipe
 
function Hector:touchesMove(event)
end
 
function Hector:touchesEnd(event)
 
	if(self.canSwipe) then
		if(event.touch.x > self.startX + 20) then
			self.moving = "right";
			self:setScaleX(1)
			self.startX = nil;
		elseif(event.touch.x < self.startX - 20) then
			self:setScaleX(-1)
			self.moving = "left"
			self.startX = nil;
		end
	end
end

Please let me know if I can help more.

TsubasaOzora · December 2012

@Tom2012

well forgive me for stupid question. if i have a button / sprite . and i want to detect what kind of swipe is that ( is it right,left,up,or down ) using your class. how i do that ?

edited.. got it..

so i need to copy the class above to swipe.lua and edited a bit to :

function Swipe:init(texture)

and in my main.lua i do this :

local ball6 = Swipe.new("ball5.png")

am i doing this right ?

Tom2012 · December 2012

Hi TsubasaOzora

I've got some improved code that I'm using on my game. I'll get it together and post it along with a sample game when I get back from the office this afternoon. :-)

Tom

TsubasaOzora · December 2012

Hi @Tom2012

thanks for the help. and rite now i have a bit problem.

i managed to make it detect where i swipe using your class . and lets say i swipe to right. i want the object ( image file ) move to left or right with some moving animation.

what i do now is that object teleport to A point to B point. but what i want is that object move with certain speed. I'm still checking some code available on this forum and tutorial. but still stuck a bit.. hopefully you can enlighten me a bit.

Thanks.

Tom2012 · December 2012

For movement you've got 3 choices I can think of.

1) Box2D - you can use sprite:setLinearVelocity(xVel, yVel) -- this is a slightly complex method if you're doing a simple game like say space invaders or mario. But is an option.

2) The next option is the GTween library which lets you specify different things to be 'tweened'. So you can specify x or y to be tweened. Probably not ideal for a game with lots of swiping and movement.

3) Probably the best one would be to have an enterframe loop where movement is made each frame. So on the sprite, in the init part of the code put:

self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
self.speed = 2

... then have

function Sprite:onEnterFrame()
 
self:setX(self:getX()+self.speed)
 
end

I'll post my better code when I get back in front of the Mac but this should give you an idea to go from.

Tom2012 · December 2012

You can put in if statements for things like...

if(self:getX() < self.swipeX) then

-- make the x move

.. so your sprite will only move when it has not reached the swipe's final destination...

Tom2012 · December 2012

@TsubasaOzora

I've got this written up in an example now. Hope it helps.

http://www.giderosmobile.com/forum/discussion/2202/make-a-sprite-move-left-or-right-when-swiped#Item_1

TsubasaOzora · December 2012

@Tom2012

thanks man..

btw some question. i try to play that in my device ( note 2 ). but it seems not really smooth comparing to the sample bird animation project on gideros..

but well its a progress for me.. thanks alot.

--------------------

btw man. i bump into your tutorial here

http://giderosmobile.com/forum/discussion/2122/make-a-character-move-to-a-mouse-or-touch-then-stop#Item_1

and when i try it quite smooth on my player and note2...

or just my eyes fooling on me.

and for your box2d solution. is it better solution ?

what i have in mind is lets say i have a object and if i swipe it left / right. ill will move till it collide with a wall / other object.

so what i need is :
1. to detect swipe left,right,up,down ( done )
2. move the object according to swipe ( left,right, etc ) ( done )
3. stop when hit wall / object.

so according to this. is it needed to use box2d or no need ?

adipose · January 2013

Some may find my adaptation useful. It is a standalone class that takes a stage and three functions for callback.

SwypeDetector = Core.class()
 
SwypeDetector.MinDistance = 100
SwypeDetector.MinVelocity = 100
 
function SwypeDetector:init(parent, onFlingX, onFlingY, onScroll)
	self.parent = parent
	parent:addEventListener(Event.TOUCHES_BEGIN, self.touchesBegin, self);
	parent:addEventListener(Event.TOUCHES_MOVE, self.touchesMove, self);
	parent:addEventListener(Event.TOUCHES_END, self.touchesEnd, self);
	self.onFlingX = onFlingX
	self.onFlingY = onFlingY
	self.onScroll = onScroll
end
 
function SwypeDetector:swipeTimer(event)
	self.time = self.time + .1;
end
 
function SwypeDetector:touchesBegin(event)
	if self.timer then
		self.timer:stop()
	end
	self.time = 0;
	self.canSwipe = true;
	self.startX = event.touch.x;
	self.startY = event.touch.y;
	self.lastX = event.touch.x;
	self.lastY = event.touch.y;
 
	-- add timer
	local timer = Timer.new(100, 10);
	self.timer = timer;
	timer:addEventListener(Event.TIMER, self.swipeTimer, self);
	timer:addEventListener(Event.TIMER_COMPLETE, function() self.timer:stop() self.canSwipe = false end);
	timer:start();
end
 
function SwypeDetector:touchesMove(event)
	self:doScroll(event)
	self.lastX = event.touch.x
end
 
function SwypeDetector:doFlingX(event)
	if onFlingX ~= nil then
		self.onFlingX(self.parent, (event.touch.x - self.startX) / self.time)
	end
end
 
function SwypeDetector:doFlingY(event)
	if onFlingY ~= nil then
		self.onFlingY(self.parent, (event.touch.Y - self.startY) / self.time)
	end
end
 
function SwypeDetector:doScroll(event)
	if onScroll ~= nil then
		self.onFlingY(self.parent, self.lastX - event.touch.x, self.startY - event.touch.y)
	end
end
 
function SwypeDetector:checkFling(p1, p2)
	if self.time == 0 then return false end
	if math.abs(p1 - p2) > SwypeDetector.MinDistance and math.abs(p1 - p2) / self.time > SwypeDetector.MinVelocity then
		return true
	else
		return false
	end
end
 
function SwypeDetector:touchesEnd(event)
 	if self.canSwipe then
		if self:checkFling(event.touch.x , self.startX) then
			self:doFlingX(event)
		elseif self:checkFling(event.touch.y , self.startY) then
			self:doFlingY(event)
		else
			self:doScroll(event)
		end
	end
	self.timer:stop()
end

Tom2012 · January 2013

@adipose - very nice work! Hopefully it will be added where others can easily find your class.

Mells · September 2013

Is there a single class that includes all the improvements on gestures recognition that have been shared on the forum?

@ar2rsawseen

Is there a class that is officially provided and supported by Gideros? For example, :
- is your Game Template officially supported by Gideros as "the" class of gestures recognition?
- now that we reach the end of 2013, is it still up to date?
I didn't find anything in the Gideros Labs and writing "swipe" in the knowledge base didn't bring anything either. I assumed thhose would be the places a beginner would go to be directed to the officially supported resources.

ar2rsawseen · September 2013

The idea was for authors to add their code to http://giderosmobile.com/tools but for now, most of authors don't want to bother doing so, or maybe not enough of information about calatog is available, maybe need to add more incentives.

About my previous classes I could not say that they are supported by the Gideros, because well even I don't have enough time to support them.
I always put ideas aside to do on the weekends, like update something etc, but recently, all the free time I spent on weekends I also spent on Gideros related work.

Mells · September 2013

@ar2rsawseen
I totally understand that you are busy with lot of Gideros-related things.
My question was more like : If a new user -or a studio evaluating Gideros- wanted to build a prototype quickly, gestures recognition being fairly used in mobile apps, what would be the closest implementation?

From what I have seen, it's almost on everyone's todo list and people I pointed to Gideros are asking me about it, so I wish there was a link I could give everyone to get them started. (That would be, indeed, useful for me too).

Without updating anything, where would you redirect a studio currently evaluating Gideros?

ar2rsawseen · September 2013

For gestures, probably here:
http://giderosmobile.com/tools/gestures

because it covers from simple line gestures to more advanced ones, and for multi gesture combinations, here:
http://www.bowerhaus.eu/blog/files/multistroke_gestures.html

Mells · September 2013

Thanks @ar2rsawseen, I hope other users will find this answer through a search on the forum.

Mells · October 2013

@ar2rsawseen

I can't make it work to recognize swipe up, down, left, right.

local gest = Gestures.new({
	debug = true,
	draw = true,
	drawColor = 0xff0000,
	drawWidth = 5,
	autoTrack = true,
	scope = stage,
	allowRotation = false,
	inverseShape = false,
	points = 33
})
 
 
gest:addGesture("SwipeUp", {
	{x = 0, y = 0},
	{x = 0, y = -30}
}, callback)
 
gest:addGesture("SwipeDown", {
	{x = 0, y = 0},
	{x = 0, y = 30}
}, callback)
 
 
gest:addGesture("SwipeRight", {
	{x = 0, y = 0},
	{x = 30, y = 0}
}, callback)
 
gest:addGesture("SwipeLeft", {
	{x = 0, y = 0},
	{x = -30, y = 0}
}, callback)

@ar2rsawseen
My questions are :

What am I doing wrong?
If I want some gestures to recognize allowRotation and others that don't, should I create several instances of the Gestures class?
Wouldn't it be a good idea to provide beginners with "plug and play" code for swipe gestures? (at least a code sample)

thanks

ar2rsawseen · October 2013

hmm, you are right it does not work. And I can't tell why from the first sight.
And it might take some time to re-understand mathematically overally complicated code which I wrote when I was beginner for both Lua and Gideros.

Ok @Mells, I see your point. I actually need to rework on every class/lib I have posted, because in most cases with current lua and Gideros knowledges I would be able to create more efficient, more flexibly designed and more error prone/foolproof code.

That is the only thing stopping me from adding them to official Gideros support, because they are not good enough by my current standards

After book project is finished I will try dedicating every weekend to one single library to rewrite and improve it and add it to Gideros repo (if @atilim won't mind)

But currently, if you need simple swipes and not complex figures, you maybe even better of using @Tom2012 or @adipose code

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Is this the best way to make a swipe left / right class?

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Is this the best way to make a swipe left / right class?

Comments