Brace yourself – a lot of the people at BKWLD play and love video games. I know, shocker right? From PC to consoles, to MMOs to handhelds, like most interactive shops and people of our age group, we all play and love games. So it’s no surprise that we enjoy making online/web games, whether as full fledged mini-sites, or in banner ads.

Recently we were interviewed by .net Magazine and one of the questions was what sort of things we felt made an online/web game successful. I enjoyed the question, and thought I would expand on it a bit in a blog about what Robert and I shared with them.

We basically boiled it down to four points we felt made for fun and success.

1. Competition & Recognition
If there’s one thing Twitter, Facebook and frankly, this blog proves, it’s that people love attention. Even while I am typing this, I am hoping you are enjoying reading this! So it’s not a surprise that people love to see their name at the top of a scoreboard, or to blast on their ‘wall’ that they just gained a level in Farmville. A game that doesn’t allow someone to ‘tell a friend’ about their score and challenge that friend to beat them is missing out.

2. Variables
I remember about 4 years ago we made a game for the California Tourism Committee that had you skiing against Governor Schwarzenegger down a mountain. Almost immediately, every high score on the board was “14 seconds”, because once you figured out the best path, that was the absolute best score you could get. Not very fun.

So by adding in some crazy score multipliers or jackpots, and things that might only show up in 1 out of every 100 games, you’re easily injecting not only variability, but also giving players a reason to keep trying.

Additionally, throwing in ‘bad’ items like point subtractions also helps make the game not about just trying to gobble up every item on the screen, but gets a little strategy into play.

3. Incentives
This is probably the most obvious of them all, but when someone is playing for an iPod/Corvette/cheeseburger, they are going to play. And play. And play. And tell their grandma to play too.

I think giving stuff away should be two pronged though – give something to the best, but also just give something randomly. In other words, you can give the Corvette to the person with the highest score, but also have 2nd and 3rd place prizes, and even a ‘boobie prize’ where any person who plays, has a chance to win that cheeseburger.

4. Keep it simple stupid
There’s a time and a place for an 80 hour epic gaming adventure. And that place is certainly not in a 300 x 250 banner on yahoo.com. If ever there was a time for a game to be ‘pick up and play’ it’s when it’s a banner or a minisite game. I think a good rule of thumb is if you need more than one page of instructions, it’s going to be too complicated for a ‘casual gamer’ and not complicated enough for a ‘hardcore gamer’.

Overall, there’s plenty of examples however where a game shines in just ONE of these categories, and that’s enough to keep people playing. But if you try to intertwine all of these into your next game (and let’s not forget about the actual ‘design’ of the game) you should have a winner on your hands.

We love making games, and for a while we always had at least one in development.  The demand has waned in the past year as companies focused on more direct kinds of marketing.  Here’s hoping we get more excuses opportunities to make games in the new year!

PS – here’s some of my faves we’ve done over the years.

• http://funnevergrowsold.com/game/
• http://www.whodouwant2b.com/game/
• http://yourcowtown.com/game/index.htm
• http://bkwld.com/work/indiana-jones-the-staff-of-kings
• http://www.firstbank.bkwlddev.com/728×315.php

Those familiar with the Mac OS dock will know that clicking the dock icon of a minimized application will restore that application to it’s pre-minimized state. This is a nice little feature as the minimize/tray area of the dock can quickly become a disorganized mess if you keep a lot of apps open. Those familiar with developing AIR apps will also know that AIR apps don’t do this out of the box. This kinda sucks.

Fortunately there is a fairly easy way to implement this feature for yourself. All you need to do is setup two event listeners and two properties.

The two properties you need are “isMinimized” and “isMaximized”. Both are booleans, the first indicating the application is … drumroll … minimized and the section maximized. While you could get away with just one of these having both offers more flexibility in the future should you need it. For example: it is possible for an app to be neither maximized nor minimized.

The two events you need to listen for are NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING and InvokeEvent.INVOKE. The first event is dispatched when the application’s display state changes (i.e., when maximized or minimized). The second is dispatched when the dock icon is clicked.

With those few things all you need to do now is a few start up things:

/**
 * Event handler for the application's creationComplete event
 */
private function init():void
{
         // Check to see if we have a dock available for clicking
         if (NativeApplication.supportsDockIcon)
         {
               // Wire up a listener for the dock icon's invoke event
               NativeApplication.nativeApplication.addEventListener(InvokeEvent.INVOKE, onDockIconClick);
         }

         // Effectively, listen for minimize and maximize event.
         this.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING, onChanging);
}

/**
 * Event handler for display state change events
 */
private function onChanging(event:NativeWindowDisplayStateEvent):void
{
      switch (event.afterDisplayState) // <-- our new state
      {
	case "minimized":
		isMaximized = false;
		isMinimized = true;
		break;

	case "maximized":
		isMaximized = true;
		isMinimized = false;
		break;
	}
}

/**
  * Called when the dock icon is clicked.
  */
private function onDockIconClick(event:InvokeEvent):void
{
	if (isMinimized)
	{
		// If the app is minimized call this
		stage.nativeWindow.restore();
		isMaximized = true;
		isMinimized = false;
	}
}

In the above code it’s assumed that init will be called by the app’s creationComplete event. init then checks to see if the platform on which the app is running supports dock icons (that is, is Mac OS). If it is we add an event listener for the InvokeEvent which is dispatched when the app’s dock icon is clicked. After that init wires up a second event listener, this time listening for the NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING event. This event is dispatched when the app is minimized or maximized.

onChanging is our event handler for the display state change event. We use this method to keep track of whether our app is maximized or minimized. onDockIconClick is our event handler for the app’s InvokeEvent that will be dispatched when the dock icon is clicked. This method checks to see if the app is currently minimized, and if it is it calls the window’s restore method.

Adobe AIR is a great tool for quickly creating cross platform desktop applications.  For the most part you can code once and deploy on any OS that AIR supports and you app will look and feel like a native app.  There are a few caveats of course and one of them is working with menus.  In particular menus are handled somewhat differently in Mac OS than they are in Windows. This post won’t get into the nitty gritty of actually creating and modifying menu items as that is covered quite nicely in Adobe’s documentation on the subject, but I will tell you how to create native menus on Mac OS that are indistinguishable from those of native Mac apps.

First, the Differences

In Windows menus belong to each window. So File, Edit, View and such are items in each open window of an application. In AIR this corresponds to the menu property of a NativeWindow.

In Mac OS the corresponding menu is called an application menu and there is only one for all windows of the application. In AIR this corresponds to the NativeApplication’s menu property.

So what you say? AIR has features that let you handle Windows vs. Mac menu differences quite easily. This is true, a quick check of the docs will reveal how quickly this can be accomplished. However, you’ll notice in the above screen grab that application menus on Mac OS list the application name in bold. There is nothing in the AIR docs about how to accomplish this.

What To Do?

You can just ignore this and create a menu like the (quite nice) SQLite administration tool Lita. Note Lita has “Lita” in the menu but it’s not bolded.

Or you can not even bother with the application name like the (also extremely useful) MonsterDebugger.

Both of these approaches are completely valid. After all both Lita and MonsterDebugger are incredibly useful applications that make my life as a developer much easier and lacking a proper Mac OS application menu doesn’t detract from their utility in any way. However it’s also quite simple to create application menus that look identical to a true native application.

Creating Seamless Application Menus For Mac OS

It’s so simple to create seamless application menus on Mac OS that you don’t even have to do anything! That’s right, just create an application and AIR makes one for you:

Everything you see above you get for free (note: adl is the AIR debugger. If I were to publish a release build and install the application you’d see the name set in the application descriptor xml file). You might now be saying that this is all good and well but what if you want to customize the menu at all? The good news is you can, it just take a tad more work.

To start you’ll need to note that AIR gives us three menu items in addition to the “Application Name” item (the bold one). For this example I’ll assume you’re only interested in keeping the app name item so we’ll just get rid of everything but that one.

First you’ll need to get a reference to the application’s menu:


// Get a reference to the NativeApplication's menu, if this is Mac OS
// Note: you'll need to handle menus differently if you are on Mac OS or Windows.
// See the AIR docs related to creating native menus for details.
if (NativeApplication.nativeApplication.supportsMenu)
{
var appMenu:NativeMenu = NativeApplication.nativeApplication.menu;
}


If you were to loop over this you’d see all of the menu items from the above screen grab. You’ll also notice that each of the items is a NativeMenuItem (more on this later). Since we only want the first one we can now remove all the others:


// Get rid of our unwanted menu items
// The app name item is the first one
while (appMenu.items.length > 1)
{
menu.removeItemAt(menu.items.length - 1);
}


At this point our menu consists of one item: the application name menu item. This menu item is pre-populated with some standard elements like “About” and “Quit”. If you’re happy with this as-is, you can now freely add your own menu items. If you need to customize this application name menu item a bit simply take advantage of the fact that it’s a NativeMenuItem and go nuts.

Using this method you’ll now see your application’s name (that is, the name you set in the application descriptor xml file) up in bold when you publish a release build and install. Here at BKWLD we’ve recently used this technique and here are the results:

I recently learned that  the http spec suggests browsers only open two simultaneous connections to a given subdomain at a time.  I haven’t tested to see how widely adopted this is.  Though I have noticed in Safari, looking at the activity viewer, that if the page requests many large assets (like a flash audio player where the user has advanced through tracks quickly), file requests start to queue up.  In a recent blog by Campaign Monitor, they mention that they server images from multiple subdomains at a time so the web browser opens up more connections at time.  You don’t even need multiple servers.  You could wildcard the subdomains on your webserver and serve up a unique subdomain.  As pointed out on Stack Overflow, you don’t want to choose a completely random subdomain on every request or the browser can’t cache the image.  It’s a pretty extreme optimization technique , though something to keep in your toolbox.

One thing that has always impressed me with websites is how they present you with the most important information when you login. This could be a deadline, some updates from other users, or just general announcements.

Some of the sites I use at work and on a personal level are perfect examples, GitHub and Basecamp.

But how is this technically feasible? Sure, you are probably thinking just gather all the data you need and loop through it. Right? No, I will explain why. I didn’t understand this for the longest time, and I hope to help solve any your questions about using them.

With Garrett and Larry both having many comments, messages and connections, we already have the data we need.

Problem is we need to sort them accordingly (by date) and keep all associations tied. It is harder than it sounds.

In this case we have 3 datasets, some comments, some messages and some connections. If we were to put all 3 collections in a list in order of when we gather them, they will be out of order. What we need to do is make one collection that references any type of data we need to list out. What makes this useful is we can also track other information that is helpful to users and not possible if we loop through the actual data. That is what a Polymorphic Association is.

Within the Feed model we need to keep track of the model it will reference, the actual reference to the specific item within that model, and any other information you would like to have. I like to keep track of it’s action, as well as the user who performed that action.

How would this look like in the database?

For this example I will use Ruby to try to show you how easy it is to display a dashboard like interface for your users.

Within the view you can loop and render a custom template for each item, this will give you the desired look that simulates the dashboard feel.

I am going to leave this here, you can create the views however you want. I have this repo stored on GitHub so you can clone it and mess with it however you like. I have uploaded a demo on Heroku for you to see as well.

Recently, a port of OpenCV, a library of object detection functions, was created for AS3 which has sparked a lot of interest and creativity in the flash and flex community. Stemming from this came facial recognition for AS3.

It is often difficult to find useful applications for these new technologies. Luckily, BKWLD was recently approached by .net magazine and was asked to write 2 articles. Jeff Toll, who’s article can be seen in this month’s issue, worked with me to come up with a design for a facial recognition application that will be featured in an upcoming issue of .net magazine. Together we came up with an idea for a virtual window, where the users can essentially fly through a 3D flickr gallery.

For the true experience you can visit the following link (you must have a web cam): http://bkwld.com/headtracking/. If you do not have a web cam, I have uploaded a demo video onto Vimeo at the following link: http://vimeo.com/7092048.

Here is the source if your feeling adventurous.
HeadTracking.zip

There are a couple things to note about the source code. First, this was developed using flex, so if you want use it in flash you will have to set HeadTracking.as as your document class. Second, I did not leave my Flickr API key in the source for obvious reasons. So, you will have to apply for a Flickr API key if you don’t already have one and enter it in the init function of the HeadTracking.as class file where it says “Enter your API key here”. If you find any errors in the source code be sure to yell at me in comments.

The following resources were used:
http://www.squidder.com/2009/02/26/realtime-face-detection-in-flash/
http://www.quasimondo.com/archives/000687.php
http://www.youtube.com/watch?v=Jd3-eiid-Uw

It’s been a two day quest, but I’ve finally gotten our web server to talk to a remote SQL server over VPN.  I wish I could document the steps as a how to (I’d like it for myself if I have have to do this again), but I’ve tried so many things I’m not sure which steps are true dependencies and which are extraneous.  First, the server in question is a LAMP server, running Plesk, hosted at Media Temple.  For the most part, it’s a vanilla configuration.  Here’s some of the things I learned in the process of getting this up:

• The VPN is of the Cisco type, but using their linux software was a dead end.  I couldn’t get it to compile, it needed kernel headers and patches and on and on.  Eventually, I was directed to using VPNC.  There are scripts that convert pcf files to the format VPNC uses.  Also, you can store the VPN password within the config file, which is perfect for my situation.  If I feel like enduring further pain, it may be useful to get this working locally and stop using the Cisco Mac client altogether.
• It turns out you need to be running as root to use VPNC.  Thus, for the users that would be running this, I had to add entries to the sudoers file.  I made it passwordless because I knew I’d be calling it from PHP.

• I had to allow /usr/local/sbin as an open_basedir in php so that I could call VPNC.
• From exec(), I needed to use the full path to VPNC.

• Lastly, and this was particularly painful because I knew I was sooo close at this point, I had to comment out “Defaults requiretty” within sudoers.  When this is on, it prevents you from running sudo outside of the command line.

This was a very frustrating journey so hopefully this helps someone else.  Or me in the future.

SODA's Click 2009 - 10/01/2009

This past thursday (10/1/09) our creative directors, Jeff Toll and Demetre Agres and I had the pleasure of attending the Click 2009 SODA event at the Art Directors Club in NYC.  There we got to hear from amazing boutiques like Unit9 (particularly loved them), Syrup, and Poke, as well as from some of the agency juggernauts like Goodby, CP+B, JWT, and Ogilvy, all introduced and hosted by the after-hearing-him-talk-I-truly-get-why-he’s-such-a-likable-force-in-the-industry Michael Lebowitz (which I am pretty sure I learned is “lEbowitz, not lEEBowitz) from the infamous Big Spaceship.

The topic and discussion points varied from more granular subjects like “Branding with numbers” (which I found surprisingly intriguing) to more general monsters like “What is the future of entertainment”.

First off I have to say what a pleasure it is to hear from such talent in one room, on one day, and in person.  I mean Jason Zada, Lebowitz, and Mike Geiger to name a few…truly a pleasure.

Of all the nuggets of wisdom I can take away from the discussions, what is interesting to me is that despite agency head-counts, annual billings, specific focus, country of origin, or AOR vs. project-based orientation, we are all facing similar issues; digital agencies finding their autonomy from the traditional ones, an ever-changing set of tools, an even more-changing option of techniques and services we have the option to render should we decide to, and a myriad of ways we can manage the whole damn thing.  But here in-lies the beauty, though facing the same obstacles and issues, the lot of us are choosing completely different approaches to the hurdles, and its working.

We have the luxury of working in an industry that is defining itself each day, and that works for me.  After all, what are we if we are not problem solvers?  At the end of the day we are simply choosing what tool we want to solve the problem with.  So I welcome and embrace the luxury of being able to re-define, re-shape, and re-focus. What fun it is after all.

So after a wonderful day with our peers, and a couple others enjoying an amazing city with good colleagues and friends, I am glad our industry is a kid.  It has many options, and oh so much potential.  Im not sure if its the couple cups of coffee, or the Where the Wild Things Are soundtrack I am listening to as I type this, but I love this kid and want what’s best for him too.  So let’s keep talking.

Art Directors Club NYC

Say you have a table of names that you want to alphabetize.  Of course you could SELECT and ORDER BY name ASC.  Lets assume that’s not an option and you want to save their alphabetical order in a special column so then you can ORDER BY this column.  This might be useful if you have an application where users can manually order their items but you give them them option to reset to alphabetical.  Here’s what your table looks like:

people
- id (int)
- name (varchar)
- sort (int)

Here’s how you can populate that sort column with integers that, when ordered by, put the results in alphabetical order:

SET @i=0;
UPDATE people
INNER JOIN (
SELECT id, @i:=@i+1 AS i FROM people ORDER BY name ASC
) counter ON counter.id = people.id
SET people.sort = counter.i;

The SET command initializes a variable.  The subquery orders the list and adds a new column (i) that counts off each row effectively.  Then the outer query joins on this by the PRIMARY id so that we match the ordered row from the subquery with the outer query.  And lastly, we store the i value back in the table.

I’ve never understood (well, I’ve never looked into) why MySQL defaults to that swedish collation.  If your tables are a mix of collations, here is a nice php script that will convert all the tables to the collation of your choosing.  It even has a nice GUI you use in the web browser.  Download the script here (courtesy of phoca.cz).