Sunday, May 6, 2012

What!? I had kids?

I started a new blog, What!? I had kids?, because the world needed another blog. And though I love my job I've had less ideas and/or motivation to write them up on Beautiful Pixels recently. I've been spending more time planning on how to have fun with the kids.

The current article, Strollers on Steps? is proper geekery of a topic at the levels you've come to expect from Beautiful Pixels. If you're more into color, try Colored Rice, or Food Colors in the Bathtub.

Perhaps some day there will be a magical post about both children and pixels.

Sunday, January 29, 2012

JavaScript Pointer Lock (Mouse Lock) in Chrome Developer Preview

Mouse Lock is the canonical term for when a game (or other application) removes the mouse cursor from view and interprets mouse motion for something else, e.g. looking around in a 3D world. To date this has not been possible for web applications without a plugin, which makes many game genres and other applications just terrible to use. (e.g. forcing users to drag the mouse button to pan the view, while a native application would use the mouse button for something else, e.g. interacting with the world.).

Good news: I've been working on a w3c specification to address this. The feature is available for developers to experiment with now in Chrome (details below). And, a FireFox implementation is on it's way too, thanks primarily to David Humphrey using it as a class project.

Today the first Chrome Canary build is available to try the feature out:

  • Get a build.
    • Chrome Canary builds auto-update daily and install without interfering with your normal installation of Chrome, they're the way to go since they're so easy. Unless your on Linux, where you need to just get a recent Linux Build.
  • Enable pointer lock.
    • Navigate to about:flags, find Enable Pointer Lock, and restart (there's a button below).
  • Try a demo.
    • http://media.tojicode.com/q3bsp/ is a nice one from Brandon Jones and what you see in the screenshot above. It's a quake 3 BSP viewer.
    • Others are sure to show up soon, minutes after landing the keystone WebKit patch I received a few IMs and emails from excited developers. 
  • Go Fullscreen. (more on that later)
    • In Brandon's demo find the fullscreen button in the bottom right corner. (It has to be JavaScript initiated fullscreen, not chrome's "presentation mode".)
  • Allow the site to disable your mouse cursor.
    • This setting is remembered for each site, and can be forgotten in Chrome's preferences / content settings.
  • Read some doc https://developer.mozilla.org/en/API/Mouse_Lock_API.
There's a lot that will be changing with this. First, I have several issues still to deal with in the WebKit implementation, a security review will certainly find more, and oh yeah we're going to overhaul the spec to be as identical as possible to the Fullscreen spec.

Some have asked if pointer lock will be forever restricted to fullscreen mode. No, in fact by the time the JavaScript bindings ship without developer flags I'm hoping to have removed the restriction, and if not then soon after. The only real requirement is that the user not suffer from a poorly behaving website. At the moment that means if a site spams lock requests that we require a user-gesture (e.g. clicking on the web page content, or pressing a key). Fullscreen currently requires the same, so we hide in it's shadow, but I'll implement the check even in windowed mode.

Chrome 19 is the earliest JavaScript pointer lock could ship without a developer flag, but it's predicated on many things coming into place. However, Native Client apps have been able to use it since Chrome 16.

Developers interested in the nitty gritty implementation details can see the chromium bug http://code.google.com/p/chromium/issues/detail?id=72754. To follow along, please only star the issue (top left). If  you've made awesome demos and add this feature, drop a comment here. ;)

Happy locking.

Tuesday, January 17, 2012

Automatic Screen Window Titles in Bash and Vim


I finally configured screen to display the list of windows open with useful titles. Here are the few bits I needed

First, if you don't know what I'm talking about:
I occasionally SSH into work, and when I do I use a program called screen that can host multiple terminal shells. It can persist those shells and allow me to reconnect if I get disconnected or want to change computers I'm working on.

BTW, I always start screen with screen -RaAd -S x

  • -a   include all capabilities ...
  • -A   Adapt  the sizes of all windows ...
  • -d -R   Reattach a session and if necessary detach or even create it first.
  • -S Name of the session


The default configuration makes it hard to keep track of how many terminals you have running, and what they are doing. I made three changes that help my personal workflow:

Add a persistent display at the bottom of screen
In .screenrc I appended this line:
hardstatus alwayslastline "%{=b}%{G} Screen(s): %{b}%w %=%{kG}%C%A  %D, %M/%d/%Y "


Source: Julien Chaffraix, a coworker.

Set the current directory name as the window title from bash
In .bashrc I appended these lines:

if [ "$TERM" = "screen" ]; then
  screen_set_window_title () {
    local HPWD="$PWD"
    case $HPWD in
      $HOME) HPWD="~";;


      ## long name option:
      # $HOME/*) HPWD="~${HPWD#$HOME}";;


      ## short name option:
      *) HPWD=`basename "$HPWD"`;;


    esac
    printf '\ek%s\e\\' "$HPWD"
  }
  PROMPT_COMMAND="screen_set_window_title; $PROMPT_COMMAND"
fi


You can see that I'm using a short name for each directory, e.g. "chromium" instead of the full path or suffix path after my home directory, e.g. "~/projects/chromium". You can toggle the commented lines to try alternates.

Source: http://unix.stackexchange.com/questions/6065/gnu-screen-new-window-name-change.

Set the name of the buffer I'm editing in vim
In .vimrc I appended these lines ("To create ^[, which is escape, you need to enter CTRL+V < Esc"):

if &term == "screen"
  let &titlestring=expand("%:t")
  set t_ts=^[k
  set t_fs=^[\
  set title
endif


Source: http://vim.wikia.com/wiki/Automatically_set_screen_title.

Wednesday, November 2, 2011

New Game Conference Day 2

The sequel to my Day 1 report from the New Game, HTML5 Games, conference:

The quality per session has been really great, and the good news is that Videos are on the way, so if you weren't there, don't fear. Also, here are most of the slides.

Zynga kicked today off. They're dedicated to HTML5 games, reaching lots of people, and moving the web forward. Paul Bakaus pointed out that classic games devs get people to upgrade hardware; new web games need to get users to update to modern browsers, "Please help me upgrade the web".

Zynga has also open sourced some rather handy sounding tools: https://github.com/zynga including audio fixes/hacks for ios, viewport control, custom viewport scrolling assist libraries.

Grant Skinner has put out tools too: Easle.js, flash like api primarily to draw to Canvas 2D, though he demoed swapping out rendering engines to e.g. DOM & flash too. He also demoed exporting content from Flash.

Spil had a good talk about developing for and publishing in Asia; primarily challenges in hosting, distribution, and localization (beyond just text).

Opera's Erik Möller showed off WebGL support in Opera, including a demo off a TV set top box hardware kit.

Mozilla has a cool project taking a spin on their old question of "Are We Fast Yet?" and changing it to "Are We Fun Yet?" Their Palidin effort is designed to improve that answer. They're building an open source web tech game engine and implementing platform features such as Mouse Lock and Game Pad. Similar in ways to the Chrome Games effort I'm part of.

Rachel Blum of Chrome (ex Blizzard) did a great rundown of Chrome as a platform for games, now and in the future.

Overall, there was a lot of energy, excitement, and potential shown off. Several presenters demonstrated that they are monetizing now using some of this tech. Others that we still have lots of potential in tech that's not quite ready for everyone.

I'm psyched about fixing what needs fixing to make the web platform awesome for games. And tomorrow there's the W3C Games Community Group Summit which I'm hoping will be a great forum for prioritizing that work.

Tuesday, November 1, 2011

New Game Conference Day 1


New Game's first HTML5 Game Conference kicked off today. It's an intimate and comfy affair with just a few hundred devs all packed in one large room. It's easy to mingle in breaks, and we had lunch all together on the lawn at Yerba Buena park.

Rich Hilleman, EA, kicked things off with a great keynote discussion of what it takes to build out a game platform and how things are quite different doing so with open standards tech. It was inspiring, but also underscores the challenge of building a 'platform' when no one controls it. Who will champion a killer app? Who will define the capabilities and expectations for developers and customers, and do quality assurance? Who will make certain we can monetize and distribute? Well, no one, and everyone.

The other business heavy presentation was from Justin Quimby of Moblyng. They've already been at this a few years, with the goal of using web tech to reach a huge number of devices, primarily mobile. His main message was that of the many challenges that await after you've build a compelling game. His recommendation was primarily technical conservatism and diversification of services (e.g. payment solutions, metrics, and distribution).

But the majority of the presentations were technical. The biggest points and themes:

  • Garbage Collection a major performance issue! Several techniques to avoid this, including careful JS coding, all memory out of array buffers.
  • Sound! Much love for Web Audio API, but needs support in all browsers.
  • Many developers using high level frameworks and languages and cross compiling to HTML/JS. E.g. PlayN in Java, Mandreel in C++.
  • WebGL standard update coming, major focus on security and robustness.
  • 2/3rds of attendees from Web Dev background: http://goo.gl/PSTrU
Lots of good coverage on twitter #NGC11

Slides for many presentations are already posted if you dig around, but I saw cameras so I suspect we'll see a post conference set of links to videos.

[day 2 post]

Sunday, October 9, 2011

Go Board Game with Google Docs

Go, played on Google Docs
I've been satiating my asynchronous game play needs recently by playing Go via Google Docs. I figured someone else must of thought of that already, and they did: Edward Donohue had a spread sheet template available, which I modified into my Go Board Game Template.

The cool thing is that Google Docs comes with great features already in place:

  • Version history
    • Allows you to roll back time to recall what has been happening in the game.
  • Change Notifications
    • Allows you to make a move, and your opponent will automatically get an email notification that links to page showing what has changed.
    • (Set this up by going to |Tools| |Notification Rules|)
  • Auto formatting
    • Makes the board look like a bunch of black and white pieces instead of playing in text.
  • Works anywhere, even mobile
Also, you can do odd stuff, like make this tiling (toroidal) go board. People have played on tiling boards before, the simplest way is to just duplicate any moves on the left and top edge to the right and bottom. But, in docs, .

Try out the templates by making a copy so you can edit in them. Select a square and enter a 'w' or 'b' character. Have fun!