Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Is this the best way to make a swipe left / right class? — Gideros Forum

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

Tom2012Tom2012 Guru
edited October 2012 in General questions
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
«1

Comments

  • 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.

    Likes: Tom2012

    +1 -1 (+1 / -0 )Share on Facebook
  • @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.

    Likes: Tom2012

    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
    +1 -1 (+1 / -0 )Share on Facebook
  • Thanks guys, got this worked in today and it works fine now.
  • 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
  • thunderrabbitthunderrabbit Member
    edited 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)
  • @thunderrabbit as @talis has posted you need to provide allowRotation = false and inverseShape = false to make direction matter. ;)
  • ahhh again late to answer :((
    :D
  • @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?
    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • @ar2rsawseen What's done is done there is no returning back this is a war i can not win :D

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

    :-B

    Likes: OZApps

    +1 -1 (+1 / -0 )Share on Facebook
  • 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!! :-)
  • Tom2012Tom2012 Guru
    edited 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.
  • TsubasaOzoraTsubasaOzora Member
    edited 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 ?
  • 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
  • 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.
  • 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.


  • 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...
  • TsubasaOzoraTsubasaOzora Member
    edited 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 ?
  • adiposeadipose Member
    edited 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
  • @adipose - very nice work! Hopefully it will be added where others can easily find your class.
  • MellsMells Guru
    edited 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.
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • 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.
  • @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?
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • 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
  • Thanks @ar2rsawseen, I hope other users will find this answer through a search on the forum.
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • MellsMells Guru
    edited 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 :
    1. What am I doing wrong?
    2. If I want some gestures to recognize allowRotation and others that don't, should I create several instances of the Gestures class?
    3. Wouldn't it be a good idea to provide beginners with "plug and play" code for swipe gestures? (at least a code sample)
    thanks
    twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
  • 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 ;)
Sign In or Register to comment.