There is an open problem in porting real game into the web browser related to cursor handling.

Problem

Many games such as First-Person Shooters require the mouse to freely move, without the constraints of screen edges. However there is no such API in the browser to make this work.

If you don't know what I mean, you can experience it yourself on the CopperLicht Quake 3 Map Demo. You will find it really hard to move because there is no way to reproduce the standard FPS cursor behavior.

This important issue does not occur only on First-Person Shooter games. For example in World of Warcraft, you can Left/Right-click and drag in order to move the camera. During the dragging operation the cursor is hidden. When the operation is over, the cursor re-appears at the position it was when the dragging started.

Proposal

The behavior is usually implemented moving back the cursor to the center of the screen at every moment. Therefore, a way to solve the problem would be to implement an API that lets us set the cursor position.

However, in most games, we don't need to actually control the mouse. Instead, we want to hide the cursor and make the mouse freely move around, without being limited by the size of the screen.

This is why I suggest the addition of a mouseFreeze function. The mouse will be anchored to that position and the mousemove events are going to set a virtual position.

window.mouseFreeze()
// The cursor is hidden
 
addEventListener(window, 'mousemove', function (event) {
  // Everytime the user moves the mouse
  //   The delta is added to "virtual[X/Y]"
  //   The cursor is moved to the center of the screen
 
  event.pageX, event.pageY // Cursor Real Position
  event.virtualX, event.virtualY // Cursor Virtual Position
});
 
window.mouseUnfreeze()
// The cursor is shown
// The cursor is moved to the position it was frozen

Open Questions

I believe that mouseFreeze API is a solution that enables a wide range of games to be ported into the browser while being an order of magnitude less dangerous than giving total mouse control.

The mouseFreeze is currently only an idea and it raises many questions such as

  • How to make sure you can't get stuck in frozen state?
  • Can it be exploited?
  • What if the user scrolls?
  • What if the user alt-tabs?
  • Add events onmousefreeze, onmouseunfreeze?
  • Allow it only on fullscreen applications?

I am welcoming any feedback on this idea. If you believe it is a good one and are interested in writing a patch for Chrome/Firefox/Opera, I would love to help you out.

References

mashu on Hacker News mentioned that this issue is being worked on in a Chrome Bug. This is an interesting read that proposes alternative solutions and gives more use cases.

If you liked this article, you might be interested in my Twitter feed as well.
 
  • Alpha

    Hi, I don't think this approach is really feasible based in the concerns that it rises and the great amount of security issues that it could give place to. However, I think that the proposal can be simplified in a way that still solves the original problem and at the same time addresses those concerns.

    This idea is the API to allow to track the mouse movements and raise events based on that movement that could exceed the browser window limits. The implementation would be limited by each browser/os combination as hooking that is directly an OS responsibility... But that's a whole different subject.

    The window would still receive the events but would not limit the user to interact with other parts of the browser/os. Keeping a full screen for games would be responsibility of the games, not the browser neither the API. I think this makes this API not exploitable and more secure for the user exeperience altogether, along with solving the problem of the browser window limits.

  • Guest

    I've been wanting this for a while too, I think it should have a allow permission similar to local storage to avoid abuse.

  • Datt

    This is a common problem for games when are playing with mouse. More over this is good idea if we come with the solution. I hope we can!!!!!!!!!!!!!!!!!

  • Pingback: Jogo Raiva cursor ยป Jogar Jogos Online Gratis()

  • Pingback: Ergonomic Mouse Needs Weight Balance - HandShoe Mouse()

  • Pingback: 1 check out end up very good | Business Unleashed()

  • Pingback: 1 check out end up very good | Business Unleashed()

  • Pingback: The Conduit (wii) Review()

 

Related Posts

  • September 17, 2011 WoW Interface Anchor Positioning (5)
    I've always found CSS positioning with both float and position: absolute/relative hard to work with. I want to introduce to you an alternative way borrowed from the World of Warcraft Interface: Anchors. Anchor The concept is extremely simple. You can tell where you want the element […]
  • August 23, 2011 Javascript – Hook Technique (5)
    Let's go back 5 years ago during the World of Warcraft beta. I was working on Cosmos UI, a projects that aimed to improve the World of Warcraft interface. As interface modification was not officially supported by Blizzard, we went ahead and directly modify the game files written in […]
  • September 11, 2011 World of Warcraft HTML Tooltip Diff (0)
    MMO-Champion is a World of Warcraft news website. When a new patch is released, we want to show what has changed in the game (Post Example). An english summary of each spell change is hand written, but we want to show the exact tooltip changes. jsHTMLDiff is available on […]
  • October 5, 2011 Javascript Presentation (1)
    The talk is over. Check out the Slides & Video. For several months now I've been surveying my friends and teachers at EPITA and I came to the conclusion that they have absolutly no idea what Javascript really is. In order to help them discover a language that is getting a lot of […]
  • August 4, 2009 Project – CosmosUI (0)
    CosmosUI is an open source interface modification of World of Warcraft. Many of the CosmosUI additions were later implemented by Blizzard on the default interface. I had been doing Warcraft III map making for more than a year when World of Warcraft has been leaked. This was really […]