Thursday, July 22, 2010

Paper Rock Scissors: Day 3

Now we're demonstrating how fun interfaces can be built without the use of Flash. This is a growing importance, as open web technologies like HTML5 and CSS3 become more supported and capable, and as devices like Android phones and Apple iPads are more widespread, where Flash is un- or under-supported and web technologies are increasingly useful for performance. The prototype of Paper Rock Scissors worked, but we need something that actually looks nice.



This is what I came up with a couple hours of messy around. It doesn't take much to clean up a web game, though it can take a lot more to make it really polish and appear shiny. That is true of any design.


The theme has a few threads that tie it together.

Your are represented by a blue glow, on your score and on your selections. The enemy is represented by a red glow, so the progress of the game is clear without overloading it with any textual messages or any heavy graphics. I've notched the selections, like cards pulled away to mark your choice. Thanks to new implementations of CSS3 transform rules, we have great possibilities we can employ. You really know when a selection lost.

Oh no! Their rock beat your scissors. Too bad.

The player doesn't even need any introduction or instructions. You won't know when the game first loads who is blue and who is red, but the first thing you'll see is you own click making a choice glow blue, and you'll know through experience. Learning by discovery trumps a rule book any day of the week. This is enforced when the scores start reflecting the game, and you can see who is who without any of the labels the game originally had.

I did need to put some more information into the game. Maybe you glanced away when the other player made their pick and missed the animation. You'll want some log of the moves that happened. Still, I didn't want this to clutter up the screen and the chatlog made the most obvious sense to put it, already being a sort of timeline. You probably want the last one or two game events that happened, not the older ones, so I think a nice looking solution was found: the game messages fade as they get older, and the chat content stays visible, uncluttered. The result looks really nice after a few rounds of chat and play.

I'd rather play a game with a stranger while I chat. Maybe I've stumbled upon something more fun than Omegle.
Yesterday I wrote about the little tech-demo Paper Rock Scissors game I prototyped in the morning. Today, I've replaced its crude AJAX polling with a comet solution, cleaned up the UI, and added a real-time chat for the players, in about two hours this afternoon.
You can try it out with the other readers of the blog right now. Give it a try, if anyone else is around.

Give it a try and play with the other readers.



Monday, July 19, 2010

Blink

EDIT: Please don't do this.

The <blink> is back.

Thankfully, for you Firefox users, this won't work.

All of my webkit using readers see a blink tag, doing its blinking, which webkit does not implement. This is all thanks to an evil snippet of CSS:


@-webkit-keyframes blinkit {
    from { opacity: 1.0; }
    50% { opacity: 0.0; }
    to { opacity: 1.0; }
}
 
blink { -webkit-animation: blinkit 500 linear 0 infinite normal; }

We can use our powers for good or for evil.

Sometimes, evil is just fun!

EDIT: This might not work for everyone, even in webkit browsers. It works less reliably when I actually post it, but it is still fun!

Sunday, July 18, 2010

Paper Rock Scissors: Day 2

Yesterday I wrote about the little tech-demo Paper Rock Scissors game I prototyped in the morning. Today, I've replaced its crude AJAX polling with a comet solution, cleaned up the UI, and added a real-time chat for the players, in about two hours this afternoon.
You can try it out with the other readers of the blog right now. Give it a try, if anyone else is around.




Very simple. Nothing flashy. The point was to show off how comet can improve a project that needs it.

The prototype yesterday had a 500ms interval updating the game state, so twice a second it would ask the server if the score changed, if the other player made a move yet, etc. This is a terrible way to make multi-user interactions! The server would quickly get bogged down by all that polling and anything other than Paper Rock Scissors would take a lot more fine-grained polling than 500ms, increasing the load a lot. The solution, in HTTP land, is that we replace several polls per second with a single poll that waits for as long as it can, and only returns a response to the browser when the server wants to send a message. In some techniques, we can even stream multiple such messages in one very long connection. Brilliant? It is actually a very old technique, as far as the web is concerned. One interesting thing is I had used this a lot many years ago, in my Twisted days, where it had been implemented as part of Nevow many years ago. I'm glad to see it finally catching on.

This implementation uses Node.js and the Faye implementation of the Bayeux protocol, an open spec about how multiple machines can pass messages around via comet techniques. Faye doesn't implement all of this, but it implements enough. This is a subscribe-publish system, so what I've done is dropped the interval and instead, whenever either player does something, they publish a message on a per-match channel they both subscribe to. This is also used to carry chat messages. The clients both subscribe to the channel, and publish this tick when something happens, signaling the other player to update from the server. It is still pretty simple, but it works pretty well for being simple. The message handling is as easy as this:

faye_client.subscribe("/prs/matches/" + match_id, function(message) {
  if (message.chat) {
    chat.add_message(message.chat)
  }
  game_update();
});


$(".weapon").click(function() {
  faye_client.publish("/prs/matches/" + match_id, {heartbeat: true});
}

Easy, isn't it? Faye pushes every message published to all the subscribers of the channel for us. The actual game server isn't even involved in this part (but it could be).

Setup of Faye is as easy as fetching Node.js and Faye sources, and building them quickly. Both are new enough that you won't find them in apt or yum, but they are so simple that I can include a tutorial right here.

The original instructions are at the nodejs.org website, but can be summarized easily.

git clone http://github.com/ry/node.git
cd node
./configure
make
sudo make install

Bam. Done. Easy? Move on to installing Faye.

git clone http://github.com/jcoglan/faye.git
cd faye
sudo gem install jake hoe eventmachine
sudo gem install em-http-request rack thin json
jake

Now you've got the node.js module in faye/build/ which you can put anywhere.

sudo mkdir -p /usr/local/nodejs/modules/
cp build/faye-node.js /usr/local/nodejs/modules/faye.js
export NODE_PATH=$NODE_PATH:/usr/local/nodejs/modules/

And now all that is left is to build a Node.js server using Faye, with a simple file faye_server.js


var Faye   = require('faye'),
    server = new Faye.NodeAdapter({mount: '/'});


server.listen(8000);

That was the easiest one yet.

Check out Faye and Node.js for more information.

Saturday, July 17, 2010

Paper Rock Scissors: Day 1

I’m building a Facebook game.

Now, don’t worry, you haven’t lost me to the giant beast, my friends. No, I’m just doing a little project, for fun, to both test and demonstrate a number of technologies. I figured something really simple, like Paper Rock Scissors, would be the perfect target.

I have the game playable in about three hours this morning. I have more work to do. The point of this is to demonstrate a number of technologies I am trying to push as an expertise, because they are all things we know well and which I think are ready to have their day in the sun, so I can see a lot of need for this coming in. Even such a simple game is demonstrating all of these things.
  • A comet server to push events to the game client in the browser
  • HTML5 to build a game UI that is flashy, but without Flash
  • Housing a web app as a Facebook app, for promotion and integration purposes
  • Utilizing HTML5 for mobile gaming platforms
Today, I have a playable prototype that matches up players, updates their scores, and manages the games. There isn’t much UI outside of that. It has some problems, but you can play it and have fun. I’m going to tackle each of the things above in a separate post, but for today, this is what we’re starting with and it will look a hell of a lot better when everything is done.
I write here about programming, how to program better, things I think are neat and are related to programming. I might write other things at my personal website.

I am happily employed by the excellent Caktus Group, located in beautiful and friendly Carrboro, NC, where I work with Python, Django, and Javascript.