- From: Ian Langworth <ian@artillery.com>
- Date: Fri, 21 Feb 2014 17:00:02 -0800
- To: public-webapps@w3.org
- Cc: Thibaut Despoulain <thibaut@artillery.com>
- Message-ID: <CAHmvbv7Nmxx3rG_VRSr4jnT6r_b_LtEQ-ure7J4o1C6tYwSOsQ@mail.gmail.com>
Hi everyone, We're building a console- and native-quality game in the browser using JavaScript and WebGL. You can see a very early version of the game in this video: https://youtu.be/NiCy5igO9-I . It's a realtime strategy (RTS) game, like StarCraft[1] or Command & Conquer[2], and moving the cursor to the edge of the screen is the primary way that users move around the map. We have a single requirement: Moving the cursor to, and possibly past, the edge of the window or screen should pan the camera in that direction. In windowed mode there are a couple of problems: Players might click outside the window accidentally, pixels outside the window are wasted screen real estate, mousemove events aren't fired when the cursor is outside the window, and sometimes the cursor moves so quickly that it misses the area of the window where we do edge detection. The better option is to go fullscreen with the Fullscreen API, but this has problems as well. There are certain behaviors that occur when moving the cursor to the top and bottom of the screen, which I've illustrated in the following videos using a quick edge-scrolling demo[3]. (Please ignore the problems with cursor detection in the Windows videos. It only occurred while the screen recording software was active.): Chrome, Windows 7 https://www.dropbox.com/s/t9kyo8s5am76ezg/chrome%20win7%20edges.avi The fullscreen notice appears every time the cursor is moved to the top. Chrome, Mac OS X https://www.dropbox.com/s/ke1mr5te2dwgvor/chrome%20osx%20edges.mov A poor experience with the menu and address bars appearing at the top and Dock appearing at the bottom. Firefox, Windows 7 https://www.dropbox.com/s/iku8croaphsgcwd/firefox%20win7%20edges.avi No problems with the fullscreen experience! Firefox, Mac OS X https://www.dropbox.com/s/0bkdx71ir0yhw88/firefox%20osx%20edges.mov Menu bar appears at top, along with some mysterious window chrome, and the Dock appears at the bottom as well. These behaviors are to remind the user about fullscreen and lessen the chance of phishing. But, as you might imagine, they are troublesome when you're in the heat of battle and are trying to crush your opponent. I would like to solicit the list for opinions on how we can improve the fullscreen UI for games and give players the best experience possible. Some options that come to mind: (A) Provide an alternate fullscreen API or option which provides a more complete experience, but with more dire warnings to the user. For example, pass in a flag to requestFullscreen() which gives the page full control over the screen (no fullscreen reminder notifications, menu bars, or Docks) and even the keyboard (so games can use the Escape key), but entering this mode presents a much more intense warning to the user like the invalid certificate warnings. (B) Maintain the current API, but put an option in the preferences or flags which makes the browser's fullscreen mode more complete and without interruption. Hardcore gamers will likely accept this extra step if it means getting an optimal experience. (C) Propose a new Mouse-Edge Detection API, which might solve these problems and provide games with better cursor detection overall. I appreciate any and all feedback. [1] http://youtu.be/Qb0VzbxdP4U?t=10m14s [2] http://youtu.be/l41hG-fVDN4?t=3m34s [3] http://jsfiddle.net/statico/F8sjw/show/
Received on Saturday, 22 February 2014 22:01:43 UTC