Debug panel doesn't allow me to click on boxes

[dth...@gmail.com]

I'm trying to enable hitboxes but DebugPanel doesn't allow me to:

a) Select any boxes in the panel
b) Clicking "S" doesn't show the panel

I'm testing from http://localhost:4400/#debug. I even tried changing the keys within your debugPanel.js to different Hide/Show keys without success.

Any reason why this may happen? I am using Melon 3.1.0.

Thanks

[dth...@gmail.com]

Any thoughts to why I wouldn't be able to click in any of the boxes? Is it a z-index issue?

[melonJS]

normally the debug panel should be visible as soon as you add #debug to your URL. you don't see it at that point ?

as for non being able to click the checkboxes, that's weird, i'm using it everyday on my side and it's wokring just fine.

any specific environement, browser you are using ?

[jack...@oregonstate.edu]

I too have this using chrome Version 53.0.2785.143 m (64-bit). I manually set the debug to show the boxes after I found this bit of code:
// render hitbox int the debug panel
me.debug.renderHitBox = true;

[melonJS]

in version 3.1.0 we fixed a regression with pointer event and floating region (so typically the debug panel)

https://github.com/melonjs/melonJS/blob/master/CHANGELOG#L34

are you guys using an older version ? 

on my side i don't have this issue at all on the master branch (4.0RC)

[pas...@gmail.com]

I've been having the same issue and I noticed in the platformer tutorial where you link to the melonjs library it points to version 3.1.0. So most users trying your tutorial will likely have the same issue.

[melonJS]

I'm hearing you loud and clear, but on my side, using the below URL (live example with melonJS 3.1), it's all working just fine...

http://melonjs.github.io/melonJS/examples/platformer/#debug

Obviously, there must be something different on your side, but unless we have a way to reproduce the issue, i'm afraid i cannot do that much more unfortunately :(

[aaron.g...@gmail.com]

Could be touch event settings in chrome? Not sure why the debug bar would cause problems there, but it's been an issue with windows touch in some cases.

[pas...@gmail.com]

Apologies, I think I misread your post to mean 3.1.0 had the problem, but I can see that's my mistake. When I click the link you provided in Chrome I cannot click the boxes in the debug panel, however when I go to the link in Microsoft's Edge browser I can click the boxes. So maybe it is some problem with Chrome.

[Jay Oster]

I'll just leave this here: https://github.com/melonjs/melonJS/issues/512#issuecomment-45762636

I'm pretty sure we still aren't listening to all possible pointer/touch/mouse/whatever events. The listener setup code uses some untrustworthy feature tests instead. Any of those feature tests can lie, and then you end up with broken behavior. :(

--
You received this message because you are subscribed to the Google Groups "melonJS - A lightweight HTML5 game engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[melonJS]

Back then, this was the issue :
https://github.com/melonjs/melonJS/commit/3eb788645cc11b35ba5e2e598f0e3a194872b9d5

On my side it's all working (Win/Chrome, Win/FF, OSX/Chrome, OSX/Safari, OSX/FF), I haven't tried IE/EDGE in a while but i'm pretty sure it's working... anyway i'm still confused on what's going on here.

[pas...@gmail.com]

It seems related to the issue Jay posted above. I should have mentioned I have a touch screen laptop. When I boot the tutorial in debug on Chrome I can't click the boxes on the debug panel, but I can select them by touching them. It seems to works fine in IE/EDGE for me.

[melonJS]

Aaah now we are getting somewhere, you have a touch screen laptop !!!

[Corey Paskett]

Sorry, I realize I'm an idiot for not pointing that out initially, but I didn't even consider it until Jay posted the above issue.

On Nov 4, 2016 8:18 PM, "melonJS" <evi...@gmail.com> wrote:

Aaah now we are getting somewhere, you have a touch screen laptop !!!

--
You received this message because you are subscribed to a topic in the Google Groups "melonJS - A lightweight HTML5 game engine" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/melonjs/NHJNKC-Z9Lo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to melonjs+unsubscribe@googlegroups.com.

[Jay Oster]

Nice. This could have been solved two years ago. :) Experience is the greatest teacher.

--

You received this message because you are subscribed to the Google Groups "melonJS - A lightweight HTML5 game engine" group.

To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+unsubscribe@googlegroups.com.

[melonJS]

Maybe it's just simply a matter of the platform being wrongly detected. I''m even pretty sure it's just that somce we know event are normally working with Chrome, and since you told us it's working with IE/Edge.

[pas...@gmail.com]

On Friday, November 4, 2016 at 9:49:08 PM UTC-6, melonJS wrote:
> Maybe it's just simply a matter of the platform being wrongly detected. I''m even pretty sure it's just that somce we know event are normally working with Chrome, and since you told us it's working with IE/Edge.

Seems like a reasonable suggestion. It definitely works correctly with IE/Edge I just checked again, but with Chrome the debug panel only wants to detect touches.

[pas...@gmail.com]

This is just a stab in the dark because I am not all that familiar with your code base, but I was looking at your pointer.js file and saw this code.

if (window.PointerEvent) {
activeEventList = pointerEventList;
}
else if (window.MSPointerEvent) { // check for backward compatibility with the 'MS' prefix
activeEventList = MSPointerEventList;
}
else if (me.device.touch && me.device.isMobile) { // `touch****` events for iOS/Android devices
activeEventList = touchEventList;
}
else { // Regular Mouse events
activeEventList = mouseEventList;
}

With this line, else if (me.device.touch && me.device.isMobile), it seems like you are including any touch device in with mobile devices that would have no mouse. Again, I am probably in left field here, but was curious.

[melonJS]

Did u try this btw ?
http://letusexplain.blogspot.sg/2015/08/fixed-touch-screen-not-working-in.html?m=1

[pas...@gmail.com]

On Sunday, November 6, 2016 at 4:58:12 PM UTC-7, melonJS wrote:
> Did u try this btw ?
> http://letusexplain.blogspot.sg/2015/08/fixed-touch-screen-not-working-in.html?m=1

I just tried it, but could only find the Enable touch events flag, and the initiate drag and drop flag, the Touch optimized UI flag has been removed. Anyway, I enabled the two I found and it still doesn't allow me to click the boxes on the debug panel with the mouse.

[melonJS]

at this point I wonder though if this is really an issue in melonJS, or just some issue on Chrome side with the touch screen under windows !

another article here :

http://www.laptopmag.com/articles/make-chrome-browser-touch-friendly

[Jay Oster]

It's really a problem with melonJS, because melonJS is opinionated about what kind of input device to use. It needs to be optimistic instead, and register itself for all possible input devices.

--

[melonJS]

but is this really the issue here ?

last time I checked, the PointerEvent in Chrome was not yet mainstream, which means that only touch events are therefore available today in Chrome, which seems not be properly "propagated" (i would say) while running on a windows based touch laptop.

[melonJS]

http://caniuse.com/#search=Pointer

Can be enabled with the #enable-pointer-events flag.

would be interesting to see if adding this flag when launching chrome then solves the issue

https://www.chromium.org/developers/how-tos/run-chromium-with-flags

[Jay Oster]

Any time multiple input devices are present, they should all be supported. Or at the very least, allow the developer to choose which input devices to enable.

I'm leaning toward the former, since it's very rare for a developer to test all input methods; melonJS should just work, no matter what laptop you're using.

[melonJS]

agree, but what i'm saying here is that it seems to be more of a OS related issue.

@paskett,, can you try to add the following line in your game, and copy paste here the result in the console.log

console.log(window.PointerEvent);

console.log(window.ontouchstart);

[aaron.g...@gmail.com]

Bah, I wish I still had my surface to try and fix this, lol.

@paskett If you are able to determine the fix, and test against a non touch computer, as well as a smart phone, a pull request would be amazing.

Personally I think it might just be changing the else if condition to a bunch of ifs (without overlapping). This is my guess, as I havent tested but something like:

PointerEvent OR MS Pointer event OR mouse event
if touch, touch events

So we determine which event to handle the mouse, and add touch if it's supported as well. I dont think this should add any double event firing, but that would be good to double check.

If you're not able to, I can try and put a fix in later tonight, and you can test for us. I can enable simulation in chrome, but I feel without a proper touch based windows machine, it'll be tricky to validate.

> To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+u...@googlegroups.com.

>
> For more options, visit https://groups.google.com/d/optout.
>
>
>
>
>
>
>
>
>
>
> --
>
> You received this message because you are subscribed to the Google Groups "melonJS - A lightweight HTML5 game engine" group.
>

> To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+u...@googlegroups.com.

[Jay Oster]

Aaron understands what I'm trying to point out. Regardless of OS behavior, there's really no reason for melonJS to choose just one out of three possible pointer input methods.

Consider this: If you own a touch-screen device, like an Android phone or tablet, you can attach a USB or bluetooth mouse. But melonJS will remain blissfully ignorant of the mouse, because it prefers to listen only for touch events, and a mouse will never send touch events. The code I pointed out earlier in this thread (ref) makes it absolutely impossible for melonJS to support multiple input methods; That's not an OS issue, that's a melonJS issue.

By the way, it's really not acceptable to recommend disabling features or changing browser options just to workaround this bug. It's our bug, we should just fix it, once and for all.

To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+unsubscribe@googlegroups.com.

[pas...@gmail.com]

I'm happy to dig in and try to make the fix, however with 2 kids, school, and work I don't have a lot of free time so it would likely not happen very quickly.

That being said, if you were able to come up with a fix I am happy to do some testing for you on my laptop. Just let me know here.

[melonJS]

Can you try the 2 console.log described earlier ?