SEARCH

We had some downtime in between projects several weeks back and decided to get social with social networking. Since most of the studio is on Facebook, we decided to develop a Facebook application. It’s a simple whack-a-mole type game with a table of your friend’s high scores.

WHAT WE LEARNED:

1. Facebook, besides being the number two social networking site, is also the creator of a small army of Facebook branded programming languages. HTML? They’ve got that, but it’s called FBML. SQL? They’ve got that too, FQL. JavaScript? FBJS. And so on.
2. Facebook documentation, while complete, is really quirky. It’ll list all the parameters of a function, but doesn’t list what order it should go in. Nor do they provide a sample call. (http://developers.facebook.com/documentation.php?v=1.0&method=friends.areFriends).
3. A “multi-friend selector” has a built in skip button that cannot be optioned out, so when placed in certain context really confuses the user. It’s a known issue, and Facebook “won’t fix”.
4. The “profile page” is the page most users see, it’s the one where it has the user’s feeds, list of the user’s friends, and the applications the user’s installed. The “canvas page” is the application’s page. There’s also a “Page page”, which is page specific for groups or companies (http://www.facebook.com/pages/Plexipixel-Inc/22585493640).
5. A Facebook “session key” is a unique key based on the currently logged in user. An “infinite session key” is like a regular session key, except it doesn’t expire. A session key is essentially what logs you in or keeps you logged in on Facebook.
6. Facebook caches everything. The first time you run your application on the canvas page, Facebook, like a good hamster, pulls everything from your server that’s used: images, SWF’s, Virgin Mary statues, even output from PHP files. We think they do this for performance reasons. Instead of having the data for the page come from various uncontrolled servers, it’ll come from either one of their servers or several servers under their control, so pages will load in a consistent manner, unlike MySpace.

SOME PROBLEMS WE FACED

1. Because of this hamster-like need to cache things, it leads to problems when the data you want is dynamic, such as a table of high scores. They provide a command to force a refresh of the cache ($facebook->api_client->fbml_refreshRefUrl('yourUrlHere’);), which works great on the canvas page, but, unfortunately does not get called when it’s placed on the profile page, for probably the same reason as above.
   • Take the refresh cache command and the set profile FBML command and put them on a PHP page.
   • Get an infinite session key.
   • Then use some kind of scheduler, like a CRON job, along with your infinite session key (so, you can access Facebook without logging in), then call it at some interval.

Our Fix:

There are several ways of getting around this, and they’re all variations on a basic theme:

So, when we ran our update script the first time, it worked, until we went to a test account and found out that we’ve updated our test user’s score table with the scores of our friends, not the test user’s friends. And the reason for that is the Facebook function that returns a list of your friends is not based off your user ID, but rather based off of your session key. When we ran the update script instead of placing a table of the user’s friend’s scores, we placed a table of MY friend’s scores, ON EVERYBODY’S PROFILE PAGE.

2. There is no default “Add to Profile” option on the Invite Friend Notification, so if you didn’t know about it, you’ll be sending an “invite friend” request with only an “Ignore” option. This is by far the most frustrating thing, because, one, it makes you look really stupid. And two, Facebook, what could you possibly think a user wants to do when they click on “Invite a Friend to [app name]”? Send them a cookie?

Our Fix:

Make sure to add the “Add to Profile” option!

Overall, we learned a lot from our first look into the world of coding Facebook apps. Keep an eye out for more tips and tricks as we continue to explore the possibilities of social networking applications!

The applications and designs at Plexipixel aren’t all just graphically cool, they have serious math behind them.

Even though when we were in middle school we swore a solemn oath that we would never use math when we grew up… we ended up breaking that oath. Our transition effects engine provides custom sinusoidal easing which is very subtle even at longer durations. We wanted to add more dramatic easing functionality. When we were researching we came across some easing equations by Robert Penner, which he provides as open source under the BSD Liscence on his site (http://robertpenner.com/easing).

c = change (displacement value),

t = elapsed time since the beginning of the effect,

b = the beginning value of the property being tweened,

and d = the duration of the effect.

ease in = c * Math.pow(2, 10 * (t/d - 1)) + b;

ease out = c * (-Math.pow(2, -10 * t/d) + 1) + b;

The value they return is a coordinate on the stage where the movie clip should move to. We needed something that would return the amount of change for each interval, instead of a value to move to. This was easily accomplished and can be done like this:

var prev:Number = 0;

var startTime:Number = getTimer();

var change:Number = 500;

var dur:Number = 1200;

function easeOut(t:Number, c:Number, d:Number):Number {

return c * (-Math.pow(2, -10 * t/d) + 1);

}

var iv:Number = setInterval(function():Void {

var elapsed:Number = getTimer() - startTime;

if(elapsed >= dur) {

clearInterval(iv);

mc._x += change - prev;

return;

}

var amt:Number = easeOut(elapsed, change, dur);

mc._x += amt - prev;

prev = amt;

}, 30);

Shortly after Silverlight 1.1 released we were approached to design and develop an interactive application that would pull in and display RSS content in addition to creating an animated web banner.

However, due to the request for Silverlight 1.0, it turned out we needed to create two applications in a very short time. To meet this demand we began with a local pre-formatted XML reader in Javascript, and then shortly after, delivered the RSS functionality of the product. Due to reduced capabilities in Silverlight 1.0 versus 1.1 (which includes .NET support), we created an external script in C# to parse and streamline data from several RSS feeds—stripping out undesirable data and excess formatting before consumption by the Javascript frontend. The result: an interactive RSS blog aggregator that offered automatic progression through feeds, as well as a way to browse them manually, all inside a Silverlight frame.

Being our first Silverlight project, the rewards didn’t come without obstacle. Adventures in setup and installation were some of the biggest hurdles. There were updates to the Silverlight 1.1 runtime which changed the GUID (globally unique identifier) for one of the DLLs (dynamically linked libraries) without keeping the registry key, causing build errors when trying to publish. Correcting the issue was a confounding problem, but luckily a temporary fix was had and in the end all was well. Getting the correct ASP.NET extensions registered and folder permissions in IIS was also fun!

The next challenge was internal as our designers learned how to work with XAML and Expression Blend. Their frustration in not being able to easily create mouse events without code (the Silverlight template doesn’t create the code for simple buttons automatically) collided with development’s frustration in trying to maintain structure in the XAML file. The solution was process. Strict adherence to naming schemes, particularly in how the designers named their layers in the design (which were reflected as the xName), allowed smooth cooperation between the designers and the developers who needed to code events.

Finally, an observation: We found that while Silverlight supports gorgeous animations it can also demand an unexpected high amount of CPU usage. We optimized our animations through compression to JPG where possible, but if you need to maintain transparency in images, you must use PNGs because GIFs aren’t supported!

We’ll share more solutions to Silverlight challenges in the future!

Plexipixel has built a lot of game engines over the years, including everything from concept to UI, characters, animation–the works. Recently we developed the Sushi-Me web-based game and took it a step further by making it compatible with the Wii game console web browser by Nintendo.

We started with designing around the Wiimote because it has a different response and feel than a keyboard. After that, we developed a high score database to entice people into competing against their friends.

The greatest challenge of Sushi-Me for the Wii was that this project was a labor of love with no special deadlines. This meant that it would still be going on today if not for our realization that we had to stop perfecting it to the Nth degree before we began dreaming about sushi.  Well, it was time to let everyone else outside of Plexipixel play the game in any case so we worked toward a final release.

Our final great effort in the game was a company-wide bug bash where we fleshed out a reward system. It turns out that a curved difficulty progression scheme works best, meaning Sushi-Me is pretty easy at the start and rewards players quickly, but as you continue the difficulty ramps up dramatically to keep the game interesting and the user entertained.

In the end we developed a really fun game that you can play for free on your Wii!

Would you like to play?  Here’s the link: http://www.sushimegame.com/ You can play it on the Wii or on the web browser you’re using right now…