Gui Demo in projects
Shri

Gio,

 

I put a new gui demo up in the projects area.

 

I wanted to do a small example of a gui which was non-blocking and worked with keyboard, mouse and multi-touch.

The little tank can move forward and turn left or right (w-a-d)

There is no boundary checking, so don't drive off the screen.

 

The keyboard works fine, as long as you run the project in full screen mode.

 

However, when I was trying to get the multi-touch to work, I came across a funny problem.

 

If you press one button and then a second one you sometimes get a mouse out event ?

So, I commented out the mouse out stuff and multi-touch works fine.

 

Now though, if you use the mouse, you can click a button and then drag the mouse off of that button, and the code still thinks

you are clicking the button (because I commented out the mouse out).

 

The way I have implemented it is an array that remembers which buttons are down.

When a button is down, its array value is set to true. When a button is up (or out ) its array value is set to false.

On update, if a buttons array value is true, then do that buttons action.

 

Anyway, I'm not sure why you would get a mouse out event if you had a finger down on one gui button and then pressed a second button ?

Or, is there a different way I should be doing the 'remembering' of which button is down in the update function.

If you can take a look, I'd appreciate it.

 

cheers,

Shri

All 4 Comments
Gio

Hi Shri

 

The thing is this: if multitouch is enabled, you can have multiple mouse/finger events at the same time.

 

Unfortunately, there is no standard way to know which event belongs to which finger. Internet explorer implements a proprietary solution to this problem, as it tries to track fingers (it calls them "pointers" rather than fingers). However the other browsers don't do things like that.

 

So all we know, is that there is a mouse move event somewhere (or touch move if you prefer), but we don't know which finger it's associated with. It may be from a finger that was previously on the button you had pressed, and it's now somewhere else - this is why the mouseOut event fires.

 

Sadly this is a limitation of the HTML5 spec, there isn't a perfect way to handle it, especially because all we see is events and we cannot query the browser to ask if pointers/fingers are currently on the screen and where. If we decided not to fire the mouseOut event, it would be incorrect in some other cases.

 

Having said that, there may be a solution to implement in your particular situation: if you can keep track of how many fingers are down (by counting onMouseUp and onMouseDown events), you may come up with a way to statistically determine which fingers are moving (i.e. you got a mouseMove event near the position of finger A, but far away from finger B, so it must be finger A that moved). It still wouldn't be perfect, but could be quite close.

 

By the way I'm sorry I haven't had a chance to look into your iPhone problem yet - I've had some busy days. I'll take a look asap. On the plus side, as you might have noticed, your space issue on share and fork is now sorted and you should have 100MB for your projects.

Shri

Gio,

 

Thanks for the help.

I got it to work almost the way I want.

If I get a mouse move on an active button, I check to see if the move event happened inside the buttton. If it did, then if I get a subsequent mouse out event insde the button, I ignore it.

Anyway, I put everytihig up on the project if you want to take a look.

 

I say almost because there is one wonky problem I don't understand. 

I noticed while using the touchscreen. If you touch the left turn button and then the forward button, you corkscrew forward turning left. If you move forward and then touch the right turn button, you corkscrew forward turning right. However, if you try the buttons in reverse, forward and then left turn or right turn and then forward, the second button pressed only works haltingly or not at all (i.e. if you press right turn and then forward, you spin to the right in place). If you are using the keyboard and mouse everything works fine (and order doesn't matter, turn-forward and then forward-turn no difference which is keyboard and which is mouse and order).

 

I thought this might be something to do with the order I was walking the array ? But I reversed the order it didn't change how it operated.

 

Then, I changed the order in which the buttons were created / registered their event handlers, and this did effect how it operated.

Moving the left turn button to the last one created reversed the way the forward and left turn operated. i.e. clicking forward and then left corkscrews, clicking left and then forward just spins in place (never receiving the forward).

 

Is there a built in precedence to the way multitouch events are handled based on the order that scene objects are registering their event listeners ? Is this a well known thing ? Or am I doing something wrong and just don't see it ?

 

Anyway, as usual, thanks for your help.

On the apple thing, I figure you will get around to it when you have time, so no worries.

 

ciao,

Shri

Gio

Hey Shri

 

The only thing I can think of, is that returning true from the mouseDown / mouseMove events is stopping them from propagating to the other objects. Although this logically would only happen if the buttons were overlapping somehow.

 

Does it still behave that way if you don't return true?

Shri

Gio,

 

Changing the return values didn't have any effect, but thanks for the suggestion.

 

Anyway, I kinda figured out what was going on, and it is a little what I did and a little event wierdness.

So, I create a button and listen for a mouse down to do its action and set its state to active.

If I get a mouse move inside a button followed by a mouse out on the button, then I ignore that mouse out and keep buttons state as active. In the update loop, any button that is active has its action performed.

 

Now, if you touch the left turn button followed by the forward button, you get the following series of events

mouse down - left (go active, do action)

mouse move - left (ignore next mouse out)

mouse out  - left (ignore, stay active)

mouse down - fwd (go active, do action)

mouse move - fwd (ignore next mouse out)

mouse out - fwd (ignore, stay active)

 

However, if you touch the buttons in the reverse order, forward button followed by left turn, you get the following series

mouse down - fwd (go active, do action)

mouse move - fwd (ignore next mouse out)

mouse out - fwd (ignore, stay active)

mouse down - left (go active, do action)

mouse out  - left (no ignore flag, so go inactive)

 

For some reason, going in the reverse order does not fire the mouse move before the mouse out and so the button sets itself to inactive ?

 

The result being that you can corkscrew forward if you press left then fwd, but if you press fwd and then left, you just go straight.

 

After a little head scratching, I came up with a solution which is not perfect but seems to work as one would expect. I just keep track of the number of buttons that are down. If there is more than one button down, simply ignore the mouse out event. Now the one problem is that a user can touch fwd and then left, and drag their finger off the button, and the button will still stay active. The only way I  could think of to fix this is just check to see if the mouse is down in the update loop.

If there is no mouse down, then set all the buttons to inactive and reset the down count to zero.

So from a user point of view, you can just lift all your fingers and things shut down.

 

It's not perfect, but now the order of button presses doesn't make a difference. You can even press left and right turn at the same time and it just sits there.

 

I originally did this to improve the gui in sector 7, so the multitouch version would work like the keyboard (turn and fire, etc.) So now I will try to incorporate some of the lessons into that gui.

 

Hopefully, this project will be a decent starting place for people trying to create guis in wade.

 

cheers,

Shri

Post a reply
Add Attachment
Submit Reply
Login to Reply