ozRocker Posted May 10, 2016 Share Posted May 10, 2016 When I try to use pointer events in my own code they don't work. The events are undefined. But somehow they work in a Babylon.js environment. I'm testing with this code: if (window.PointerEvent) { alert("pointer events DEFINED"); } else { alert("pointer events UNDEFINED"); } Its undefined in my environment, but in this playground http://playground.babylonjs.com/#R9Z7I its defined. Is there something really basic that I'm missing to be able to use those events? Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted May 10, 2016 Share Posted May 10, 2016 http://playground.babylonjs.com/#R9Z7I#1 you r before load i think Quote Link to comment Share on other sites More sharing options...
ozRocker Posted May 10, 2016 Author Share Posted May 10, 2016 10 minutes ago, NasimiAsl said: you r before load i think Its undefined for me even if I run it after my scene has loaded. I also tried after a 10 second delay. Quote Link to comment Share on other sites More sharing options...
ozRocker Posted May 10, 2016 Author Share Posted May 10, 2016 I'm trying to get my customised virtual joystick happening in 2.4 and its not showing anything. When I check the console I can see the pointermove event isn't firing, but if I change it to mousemove it will fire. I just noticed that this works http://playground.babylonjs.com/#OORFZ#5 in 2.4 but it doesn't show the joystick circles Quote Link to comment Share on other sites More sharing options...
Kesshi Posted May 10, 2016 Share Posted May 10, 2016 Did you include PEP in your project? This polyfill is necessary for some browsers. Quote Link to comment Share on other sites More sharing options...
ozRocker Posted May 10, 2016 Author Share Posted May 10, 2016 28 minutes ago, Kesshi said: Did you include PEP in your project? This polyfill is necessary for some browsers. I don't know anything about PEP, but I added it to my project and the pointer events work now. Yay! Thank you for the magic answer Quote Link to comment Share on other sites More sharing options...
ozRocker Posted May 10, 2016 Author Share Posted May 10, 2016 I can't get the circles to show up in 2.4 http://playground.babylonjs.com/#OORFZ#5 That's actually @Wingnut's code Quote Link to comment Share on other sites More sharing options...
davrous Posted May 10, 2016 Share Posted May 10, 2016 Pointer Events was created by Microsoft, is an official W3C spec: http://www.w3.org/TR/pointerevents/ and a lot of people in the industry think it's the best spec for touch on the web. Still, it's currently only supported natively by IE11 and Edge. To support other browsers, you need to write what we call a polyfill library. The idea is to mimic the spec in JavaScript. For Chrome, Firefox, Safari & other, you need to bind to Touch Events invented by Apple. The first polyfill library we've been using with Babylon.js was hand.js written by @Deltakosh . But then, jQuery finally wrote their own polyfill (we had some early discussions with them to use hand.js but they didn't like our approach to simulate the css propery touch-action). After further discussions, we agreed that having several polyfills could be confusing for the developers / users and decided as the Babylon.js core team to support jQuery. The name of their polyfill is named PEP. Conclusion: to make pointer events (and thus anything related like the Virtual Joystick) needs a polyfill (PEP or Hand.hs) to work in all browser otherwise it will work only in IE11 and Edge. Further details: - to have the best support with hand.js, you need to set the CSS propery touch-action: none on the babylon.js canvas - to have the best behavior with jQuery PEP, you need to set it on the canvas as a html property: like <canvas id="renderCanvas" touch-action="none"></canvas> More documentation on PEP: https://github.com/jquery/PEP An article I've written on Pointer Events: https://www.davrous.com/2015/08/10/unifying-touch-and-mouse-how-pointer-events-will-make-cross-browsers-touch-support-easy/ JackFalcon, wilson, Boz and 4 others 6 1 Quote Link to comment Share on other sites More sharing options...
ozRocker Posted May 10, 2016 Author Share Posted May 10, 2016 oh right, so it was hand.js that was making it work. Thanks for the knowledge bro! Now I just gotta get the graphics of the joystick to show up in Babylon 2.4 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted May 11, 2016 Share Posted May 11, 2016 Oz... there were some updates to smartCollection (it was removed from BJS) since that demo. Come on up to the latest, and your rings will work again... http://playground.babylonjs.com/#OORFZ#12 (thanks to @Nockawa for the repair). Some info here and below. Quote Link to comment Share on other sites More sharing options...
ozRocker Posted May 12, 2016 Author Share Posted May 12, 2016 Ok cool. I got it working now. I'm using Stringdictionary instead of Smartcollection. Also my touch object is a number for some reason. touch.id is undefined, but touch has a number which I guess is the ID since it comes up as one. I'm not sure what that changed suddenly but it fixed it. Quote Link to comment Share on other sites More sharing options...
Dal Posted May 12, 2016 Share Posted May 12, 2016 @davrous Since PEP is under a permissive license, why not make it part of the core build? I can't think of many cases where we wouldn't need it? The typescript compiler can inline JS libs these days I believe. Quote Link to comment Share on other sites More sharing options...
max123 Posted August 17, 2016 Share Posted August 17, 2016 As JQuery becomes less and less relevant, I don't understand the decision to use a JQuery plugin. I would be very reluctant (read "will never") include JQuery library, or for that matter, any library, just for one feature. Would be fantastic if BJS team included touch support in its core library! Cheers NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
max123 Posted August 17, 2016 Share Posted August 17, 2016 I mean, these days mobile devices drive around 60% of web traffic and the trend is up-up-up Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted August 17, 2016 Share Posted August 17, 2016 Jquery PEP is not linked to ANY code from jQuery. It is only done by jQuery foundation. If you don't like it, you can use our own implementation: https://github.com/deltakosh/handjs Quote Link to comment Share on other sites More sharing options...
max123 Posted August 17, 2016 Share Posted August 17, 2016 Thanks, Deltakosh. So, I don't need to include jQuery, just PEP? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted August 19, 2016 Share Posted August 19, 2016 correct! Quote Link to comment Share on other sites More sharing options...
MrPancakes Posted January 6, 2018 Share Posted January 6, 2018 Having a look at BabylonJS and I have a questions regaring the PEP polyfill and @davrous last post in this thread May 2016. Seems this polyfill is not needed for the current latest major browsers exept Safari? is this correct? And if that is the case anyone know what versions PointerEvents became available in Firefox, Chrome? And is PointerEvents stable in how it operates between Firefox, Chrome and Edge? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 8, 2018 Share Posted January 8, 2018 Hey As long as the browser support Pointer events you are good to go without PEP There is no version but only a web standard which **should** work everywhere flawlessly https://caniuse.com/#feat=pointer MrPancakes 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.