ScriptaGames / zorbio

A 3D multiplayer WebGL game
MIT License
8 stars 1 forks source link

Offer help to users who can't fly straight #504

Closed mwcz closed 6 years ago

mwcz commented 6 years ago

Many players aren't figuring out how to fly straight, so let's detect when they're having trouble and offer a helpful toast.

To detect: record how much time the user's cursor has spent near the center of the screen when they start playing. If they haven't lingered in the center within the first 10-15 seconds, offer a helpful toast telling them how to fly straight.

Jared-Sprague commented 6 years ago

I got some detection code started for this in a branch

Jared-Sprague commented 6 years ago

Homa is going to help me with a css animation of concentric rings that draw attention to the center of the screen

Jared-Sprague commented 6 years ago

Homa made this code pen that we can modify, thanks homa!

https://codepen.io/homa_/pen/eeGKaV

Jared-Sprague commented 6 years ago

I think I found the exact right plugin for this: https://github.com/tristen/hoverintent

It fires an event when a mouse cursor slows down enough on an element. So it's perfect for detecting when a user lingers their mouse in the center to fly strait.

Demo: http://tristen.ca/hoverintent/

Jared-Sprague commented 6 years ago

the dom method just doesn't work without hackness. I found a better solution using mouse x, y position relative to center. got a hacked together working toast. now need to clean up and refactor the code, and polish the UI elements.

Jared-Sprague commented 6 years ago

note to self: also send a Google analytics beacon when toast is displayed, vs not so we know what percent of our users can steer and see it change overtime. also ga beacon when toast is cleared by user centering, or by timeout.

Jared-Sprague commented 6 years ago

also need to make it fade in and out