Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat
Switching between buttons without lifting finger from the screen - Gideros Forum

Switching between buttons without lifting finger from the screen

freesspfreessp Member
edited February 2015 in Game & application design
Hi everyone,
I have been trying to figure this out for a couple of days now, and I need some help. Basically, I have a left arrow and a right arrow set up as buttons. I modified the button class to include both "pressed" and "released" events which allow my player to perform a continuous movement if the button is held, and stop if the button is released or the user's finger slides off of the button. Everything works, but the user must take his or her finger completely off of one button before pressing the other button. I want to be able to slide from one button to the other without lifting my finger. In other words, I want an event to fire when I "slide on" the button the same way the event stops when I "slide off" the button. It seems like it should be simple to figure out, but I am missing something somewhere. Thank you in advance for any suggestions.

Comments

  • In this case, i will design a button that have width equals screen width. And then for pressed state (holding) , we will check position of event to see it is left or right.
    Coming soon
  • You don't even need an image with screen width, since mouse event operate even outside buttons.

    So all you need is to listen to MOUSE_MOVE event and check if it hitTarget() or not
  • So, would I use hitTestPoint functions to check the location of the user's finger (event), then compare that to the location of each button?
  • Ah yes, hitTarget() would make more sense.
  • ar2rsawseenar2rsawseen Maintainer
    Accepted Answer
    sorry, I meant hitTestPoint :)

    So basically attach MOUSE_MOVE listener to your button and inside it check if it hittest points your button
    if yes and previously it did not, then its like on click
    if it was and now it is not, then its like click release
  • Ha ha, ar2rsawseen. I have a hitTarget() function in my code, so when I saw that it threw me for a second.

    I tried something similar to what you are suggesting earlier and it did not work. I think I was doing something wrong in the way I was comparing the touch point to the button position. Since I now know that IS the way to do it, I will work on it some more.

    Thanks a bunch for the help.

    Likes: cokeramirez

    +1 -1 (+1 / -0 ) Share on Facebook
  • With on screen buttons it's best practive to only 'click' them when the finger moves off them - so that the user can slide their finger away in case they made a mistake.
  • While I would totally agree with SinisterSoft for on screen buttons in most cases, I am doing something a little different. I'm basically setting up a directional pad. The game I am making is a top view shoot-em-up somewhere between Space Invaders and Raven. Since it is a very fast paced game, lifting the thumb completely off of the right button and then clicking the left button creates very erratic, annoying gameplay, especially since there is no true feel to the buttons. The user moves his or her thumb so quickly between left and right that the release of one button does not register before the other button's "click" registers, often resulting in the "player" just sitting there to get blown up. Also, since there is no physical feel to the button, the user must look down at his or her thumb to see if it is actually touching the button. None of this is what I want for my game. I tried using the TNT Virtual Pad, but it doesn't quite perform the way I want it to for my game, that's why I want "slide-on" to register as a "click" and "slide-off" to register as a release.

    Likes: SinisterSoft

    +1 -1 (+1 / -0 ) Share on Facebook
  • Doesn't VirtualPad provide on and off events for direction?
  • Yes, and I may still end up using VirtualPad (I am using it in one of the prototypes for the game). I just prefer making things my own way instead of piecing together other peoples' creations. For instance, I made all of my own background images, models, textures, etc. when I could have more easily grabbed something similar from the internet. That way, I can truly call it "mine." Plus, if I write my own code, I know exactly what is going on. On the other hand, I realize that sometimes I am just "reinventing the wheel." For example, unless I am writing software in machine language, I am always using someone else’s creation to make my life easier (Gideros Studio, Lua, Java, C++).

    Likes: SinisterSoft

    +1 -1 (+1 / -0 ) Share on Facebook
  • SinisterSoftSinisterSoft Maintainer
    edited February 2015
    I use VirtualPad, but I change a bit of the code to add extra buttons (it's been added to the source that's out), but I know what you mean. You could add your own gfx rather than use teh standard ones - at least that way it's almost your own. ;)

    Likes: freessp

    +1 -1 (+1 / -0 ) Share on Facebook
  • I got it to work the way I wanted it to... Hooray! I ended up creating eight separate buttons for the eight directions and modifying the standard button class to contain "pressed" and "released" events, as well as modifying MOUSE_MOVE to recognize if the user's finger slides on or off the button. I then created a graphic of a directional pad. I made the eight buttons invisible and placed them in relation the d-pad graphic.The reason I opted to do this instead of using VirtualPad was because I wanted an "old-school" d-pad feel instead of a analog joystick feel, i.e. no change in speed and only eight distinct directions for movement.

    Likes: SinisterSoft

    +1 -1 (+1 / -0 ) Share on Facebook
  • I originally wanted to have the device produce a very short vibration when each button was touched, like what happens when a key is pressed on the on-screen keyboard. From what I have read, however, Gideros can only produce 300mS vibrations. Is this still the case? Is there any way to produce shorter bursts?
  • MoKaLuxMoKaLux Member
    edited November 15
    I need some help please.
    I have been trying to do the same stuff for ages now, I tried different methods, classes from the forum but one problem remains.
    The problem is when I press a button and slide away from it the event is still active! I would like to cancel the event when the finger is not touching the button anymore.

    The latest class I have tested is oleg's one from his github.
    http://forum.giderosmobile.com/post/quote/7200/Discussion_7200
    But the problem remains!

    Can somebody help me here?
  • edit: I thought this class was working but the same problem occurs:
    https://wiki.giderosmobile.com/index.php/Mobile_Controls

    The only class that is working as expected is the TNTVirtualPad but it's too complex for me!
  • olegoleg Member
    MoKaLux said:

    edit: I thought this class was working but the same problem occurs:
    https://wiki.giderosmobile.com/index.php/Mobile_Controls

    The only class that is working as expected is the TNTVirtualPad but it's too complex for me!

    My button class does it all:
    "Switching between buttons without lifting finger from the screen"
    http://forum.giderosmobile.com/discussion/7200/button-class-is-multitouch#latest
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • MoKaLuxMoKaLux Member
    edited November 15
    MoKaLux said:


    The latest class I have tested is oleg's one from his github.
    http://forum.giderosmobile.com/post/quote/7200/Discussion_7200
    But the problem remains!

    oleg, I tried it, but when you press a button then move your finger away from it, the action is not cancelled.
    I have got my player moving left and right by pressing the buttons, when I press the button and move my finger away from the button the player keeps running!
  • olegoleg Member
    edited November 15
    MoKaLux said:

    oleg, I tried it, but when you press a button then move your finger away from it, the action is not cancelled.
    I have got my player moving left and right by pressing the buttons, when I press the button and move my finger away from the button the player keeps running!

    When you slide your finger outside the button, a clickUP event will occur
    You just need to handle the clickUP and clickDown event

    ps/You probably used -not my button class
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • MoKaLuxMoKaLux Member
    edited November 16
    @oleg I would be very grateful if that works!
    Your class is in the folder classes (you will find it quite easily :) )

    Could you please have a look?
  • olegoleg Member
    edited November 15
    MoKaLux said:

    @oleg I would be very grateful if that works!
    Your class is in the folder classes (you will find it quite easily :) )

    Could you please have a look?

    You use base button class it only has 1 event, my button class is more advanced try my class.

    My class checks the finger ID you press, this is important for multi-touch screens
    Also my class has some extra features


    Likes: MoKaLux

    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
    +1 -1 (+1 / -0 ) Share on Facebook
  • sorry oleg but I had to rename your class to ButtonOleg so it doesn't conflict with the base button class. Your class is used in:
    folder classes
    mobile_test.lua
    mobileVOleg.lua
  • MoKaLuxMoKaLux Member
    edited November 15
    I found a hack HURRAY!!!
    I just put a big transparent button below so I can cancel the action!!!
    I am so happy, I have been doing this for days!!!
    And @oleg thank you very much for your button class it works "almost" perfectly :) I just need to add a transparent button to cancel an action.
  • olegoleg Member
    MoKaLux said:

    sorry oleg but I had to rename your class to ButtonOleg so it doesn't conflict with the base button class. Your class is used in:
    folder classes
    mobile_test.lua
    mobileVOleg.lua

    I found 2 errors.

    1.clickUp --- clickUP!!


    2.You have an outdated version of my class missing the line there: self:dispatchEvent(Event.new("clickUP"))
    image

    3.A move event is not required image
    image.png
    691 x 307 - 30K
    sdfsdf.PNG
    891 x 558 - 33K
    sdf.PNG
    599 x 404 - 29K
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • MoKaLuxMoKaLux Member
    edited November 15
    Thank you oleg, I tried so many times. When you correct the errors you can see that when you click a button an you slide away from it the action is still playing?
    Now I am happy with my hack! Your class helped me a lot! I was going crazy about this annoying little thing!
    @oleg do you think I can put your class in the wiki (under mobile control)? Thank you.
  • olegoleg Member
    edited November 15
    MoKaLux said:

    Thank you oleg, I tried so many times. When you correct the errors you can see that when you click a button an you slide away from it the action is still playing?
    Now I am happy with my hack! Your class helped me a lot! I was going crazy about this annoying little thing!
    @oleg do you think I can put your class in the wiki (under mobile control)? Thank you.

    You can use my class as you like, you can change it and teach it in wiki.


    Here is my modified class from the last game:
    It has other events:
    clickDown
    clickDown_M --Moving your finger on a button
    clickMove
    clickUP_M --Moving your finger beyond the button
    clickUP
    click -- Press and release your finger on the same button

    Also, SP and CT can be enabled in the new class

    --Button(upState,stopPropagation,ColorTransform)

    Button.new(Bitmap.new(Texture.new("img/gui_48.png")),true,true)

    DownState image - Adds to button via clickDown event
    local pause = Button.new(Bitmap.new(Texture.new("img/gui_48.png")))
    	stage:addChild(pause)                        
    	pause:addEventListener("clickDown", 
    		function(e)	
                        DownState =Bitmap.new(Texture.new("img/gui_49.png"))
    		     self:addChild(DownState )
    			print("clickDown") 
    		end)

    Likes: MoKaLux

    rar
    rar
    button.rar
    2K
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
    +1 -1 (+1 / -0 ) Share on Facebook
  • olegoleg Member
    MoKaLux said:

    When you correct the errors you can see that when you click a button an you slide away from it the action is still playing?

    When I move my finger outside the button the action stops
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • Thank you very much oleg. Much appreciated.
  • rrraptorrrraptor Member
    edited November 16
    I found nice GUI implementation, but on different engine (Codea for iOS, its pretty much like Love2d).
    Github source code link
    Thats why I decided to create blurred shapes, and layout (aka window).

    So, I decided to create something like Soda. And thats what I got for now:

    Alert window call looks like this:
    GUI.Alert({description = "Retard alert!"})
    This little window like this:
    local infoPanel = GUI.NotifiactionWindow({
    	w=400,h=200,title="Title", description = "Description", dragable = true,
    	button1 = "OK", callback1 = function(_,v)
    		v.owner:dispose()
    	end,
    	button2 = "CANCEL", callback2 = function(_,v) 
    		v.owner:dispose() 
    	end,
    })
    infoPanel:setPosition(GUI.SCREEN.Center.x - 200, GUI.SCREEN.Center.y - 100)
    self:addChild(infoPanel)
    But I dont have much free time to add more than this, but someday...maybe, I'll finish it :blush:

    In Codea you have to manually draw objects inside built in "draw" function, but gideros uses absolutely different approach, so you cant port it "AS IS", you need to rewrite 95% to make it work in gideros.
    I took the idea of how Soda controls touches and implemented it in gideros style, the rest was written by myself from scratch.
    Check Soda source, its very interesting, I think :smiley:
    MyCollages.jpg
    1000 x 1000 - 77K
    +1 -1 (+3 / -0 ) Share on Facebook
  • @rrraptor interesting for sure but after browsing the code for a while, yeah... it would need to much re coding to work with Gideros.
Sign In or Register to comment.