Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Tricks of the Gaming Trade: Insider Tips and Secrets
1. Tricks of the Gaming Trade. Insider Tips and Secrets. March 2010
2. Who? Chris To – Senior Software Engineer @MySpace Chad Russell – Development Lead @MySpace
3. Agenda Anatomy of a MySpace game Understand the stream and different viral channels Learn about offsite and Real Time Stream Specific tips and tricks
34. Why Offsite? Millions of MySpace users ready to login to your game Create activities offsite that link back to you OpenSocial code mostly ports to work with the JSL
49. Popping the Install Modal Alternative to the “install arrow” gadgets.views.getParams().installState Can be “0”, “1” or “2”
50. Popping the Install Modal Programmatic way to do it autoInitiateInstall=true
51. The App’s Profile Page Main entry point for installation, often neglected
52. The App’s Profile Page Main entry point for installation, often neglected
53. Summary With these tips and secrets… Know how you get installs Understand and leverage the stream for viral growth Think about “offsite” opportunities Optimize your home surface Know JavaScript Work on your app profile page
54. Resources Sample Code app (public on 3/16): http://profile.myspace.com/Modules/Applications/Pages/Canvas.aspx?appId=180995 Building OpenSocial Apps (Book): http://www.amazon.com/Building-OpenSocial-Apps-Working-Platform/dp/0321619064/
Editor's Notes
In 2006 here at GDC... ShuffleBrain gave a talk about how MySpace built on basic game mechanics... Thatbegan the whole social media craze... For example:On MySpace you collect friends and comments. In a game you collect items and points- On Myspace customize your profile. In a game you customize Avatars.- On MySpace you do stuff to stimulate yourself and get feedback. In a game, you play to get stimulated and get feedback. Anyone remember this presentation at all?Anyways in retrospect, that presentation in 2006 was very foretelling. Since social network platforms have opened up, it's no wonder games are the killer app.So I'm no expert on building great games... If I did I'd be out there making some real money with you guys. Instead I'm up to breakdown the mechanics of MySpace as a platform so you can maximize it.
First some stats
Now Is anyone here completely new to the MySpaceplatform?Great I'm starting with a summary of a MySpace onsite app.
First and foremost is the Canvas surface. It's your dedicated page and the core of your game where the majority of the action happens. Here you get access to all our APIs and have free reign
Next is the Home surface. IMportant because home is our most trafficked page. In fact Chad's going to bring up some specific tips about it later.
Finally profiles public and private are a corner stone of myspace. This is where you can build stuff for your users to flaunt your game… or help them flaunt themselves.None of the other platforms give you that same kind of surface area for reaching users. We believe opening all these surfaces maximizes the chance for cool innovative games that are a win-win for us and developers.
We announced the new app galery earlier in the morning but couple of key pointers:there are two ways the new app gallery empowers developers to attract more users1st friends notifications and activity right on the Apps Gallery so users see what they're friends are doing. those are channels you control and I'll talk more about specifics later- 2nd is ratings
Along with that we're focusing on games. We've launched new modules right on our most engaging page... the user home... specifically to bring more users to games.
Here's full size features games page
Now I'm going to demo the various viral channels.This pseudo-app is openly available and full of step-by-step sample code so you can all check it out... copy/paste from it.
In honor of our new mascot Queue, I've made this game QueueTopia just for GDC. I'll start by installing it.
So here's Queue, my new QueueTopia pet. I just joined the game and click to get started.
I've got my pet ready to go... Queue's ready to play with a toy in hand.
Queue looks like he's lonely. MySpace is more fun with friends and so are games. Time spent on an app increases by X if you have Y friends playing as well. So it looks like the game wants me to invite friends to play with Queue. .
I click the invite buttonEnter App invites for friends.I'm not going to talk about the code specifics now, but it's for your reference right here so you can check this out later yourself and reuse all the samples.
Now up to 20 friends can be invited at once. User's can also add friends with the To: bar - filter who to invite (e.g. top friends and online friends, exclude certain profiles like bands and advertisers for better conversion)
before i continue with QueueTopia Here's what your friends see with an app invite. They can install the apps right from there notifications.So I say I install the app,
here's important secret about app invites… you can parameterize the the App Invite. It's a simple and powerful way to pass incentives between users joining your game... and can personalize the process for a bette experience.[Poker example] A practical end-to-end example where that's interesting is if you had a poker game... and you wanted to invite a online friend to join your table. You would first filter invites to users who are online, invite those users... and pass along the table number so they could joing your table.So invites are important because the most direct way to get new users.
So back to the app. App invites are cool but, the richest stream feature at your disposal is app activities, these let you create custom templates that you put in the stream... I click next.
So apparently Queue has won his first trophy.The game's giving me a call to action to share it, and a feel inclined to click to share..
User's need to opt in for posting an activity the first time, but keep in mind that all your players friends will see it. So designing meaningful activities is a huge draw and free advertising.Here's what the preview looks like like. [read template]
Now let me show as a developer you how I make the templatetheres a 160 character template the editor offers help in previewing templates it pulls out variables and lets u test inputs, as well as MediaItemsThat’s the dev experience. I’m going to hop in to the user experience.
Once the user clicks “publish” it goes in to your stream and fans out to all your friends Here's what that looks like in your friends stream.template syntax is pretty straight forward, but some interesting tipsliteral get filtered out for most html but you can include anchor tags that go back to the canvas which can further be parameterized- also managing media items is an interesting topic mediaitem trick- possessiveform and objectiveform trick
Next enter another slight different channel, notifications. These are the brothers of App Invites because they go to the same place.The key thing about a notification is you can create one without the users consent
Here's what a notification looks like. Notice the main feature is a call to action button that brings users to the app. You can specify a number of buttons that go back to your canvas page.What's the big deal of no opt in?For example, if you have a dating game you can post any new date matches behind the scenes.
So those are the 3 key viral channels Invites, Activities and notifications. Hopefully you can now draw the subtle distinctions.Invites get you installsActivities let you spread cool templates in the user's streamNotifications let you stick actionable messages in a user's "inbox”And they all ultimately make your game more visible, fun and played.
That's onsite, but you can access all of MySpace's' users to your own site with MySpace ID.It let's you seamlessly use MySpace identity on your site.
The workflow goes like this: You ask if the user wants to login with MySpace. It's a couple of lines of javascript to make the login process work.
If yes they get a popup on MySpace.com to login
They can accept a few permissions and you have a new user. At which point…
So Firstly millions of users are immediately reachableSecond you can access activities just like you can onsite... so you can publicize your app off of MySpace.- remember I mentioned you can put anchor tags in to the activity stream, this let's you put anchors back to specifically your domain.Finally the code that you wrote to post activities or get friends all pretty much is compatible with the MySpace ID Javascript library.
Our latest and greatest is the real time stream
Here's an example of what's possible.
One of our earliest demos was a live map updating map that tracked status and mood updates around the world.
To give you an idea of how much data check out this graph on
We’re really just at the tip of the iceberg on whats possible.A third party examples is We Are Hunted… they’ve created a radio based on what songs are being played. For eg. RTS let’s you subscribe to what Profile songs are being added
Thedata you can subscribe to includes
-Wanted to run through a list of tips and tricks that should be useful for most developers
The first tip is to explain all of the different versions and what they mean.On MySpace we support OpenSocial 0.8 and have beta support for OpenSocial 0.9. So what does that mean? It’s mostly relevant to apps running onsite in what is called the container, which is a runtime environment hosted by MySpace. The container provides a JavaScript API defined by the OpenSocial spec that is used to access data.All clients, including the container, offsite apps, etc, access the same REST endpoints. The first two URLs were created to service our first iterations of the OpenSocial spec. The last entry, with the opensocialsubdomain, is a new set of APIs built from the ground up, designed to be compliant with OpenSocial 0.9.
The home surface is fairly unique to MySpace as most other social networks don’t provide this surface. One thing to watch out for is that this surface, if used, will get exponentially more traffic than the canvas surface. This is because people return to their home page 3 or 4 times per session, making it the most viewed page on all of MySpace.If you do make use of this surface, make sure to optimize it!Use browser cache when sending requests back to your serversUse as much static content as possibleStick that static content on CDNs, smaller shops may even be able to upload their photos to MySpace and link them that wayDon’t be chatty, try to do everything in as few requests as possible
I also want to briefly explain the app lifecycle. When you create an app, it is in dev mode. Once you’re happy with it you hit the “publish” button and it goes out for review. If the review is successful the app is live.At this point there are actually two versions of your app, the dev version and the live version. You can continue to make changes to your dev app, and that won’t affect your live app. When you click the “republish” button, the live version of the app is replaced by the latest dev version. The dev app is never visible to anyone but the developer.To see the dev version of your app append appvers=dev to the end of the URL. Some developers find it handy to create two apps, one just used for development, and the other used as the production app.The developer site also gives you the ability to add developers and testers to an app. Adding one of your friends as a developer gives that user the ability to modify the app’s source. Adding a tester allows that user to run the app in dev mode.
The OpenSocial JavaScript API is used when your app is onsite and is uploaded to MySpace to be run on our servers. This is opposed to an onsite app that is run on your servers, where you would just specify a URL and we’d load that URL into an iframe on the page.It is some new syntax to learn but it’s not that bad. For example, a lot of games just need to fetch a friend list and there is a lot of sample code out there on how to do that. Also, you’ll need to access the OpenSocial API anyway if you want to use most of the virality features, like sending app invites, so you’ll need to learn it anyway.One added benefit of running an app on our servers is that you’ll soon be able to make use of OSML. OSML is a tag based language similar to FBML. In the example here this script block would be replaced by the current user’s data along with their friend list before the app got rendered to the client.
In the 0.9 container the osapi library will be available, which should make the syntax a little less verbose. The top example is the new osapi syntax while the bottom example is the legacy syntax. Both of these actually do the exact same thing, which is to fetch a friend list.Finally, if you’re using so much JavaScript it can really make your life easier to use one or more of the many 3rd party libraries that are out there, like jQuery and prototype. These can greatly speed up development and take most of the cross browser quirks out of the picture.
When it comes to debugging your apps there are a few tips I can pass on. The first is that the OpenSocial container swallows the alert function, so you can’t use that to debug. We did this for user experience reasons, apps on home and profile surfaces were popping alerts all the time with random messages, which is a pretty bad user experience.Some alternatives to alert are to write messages to a div, or to use Firefox with the Firebug plugin. I highly suggest Firebug and I personally don’t do any web development anymore without it. To make your life easier when using Firebug, open up the app’s iframe into a new window, that way you’re only dealing with one DOM instead of two. Subsequent page refreshes will also be faster.Another useful tool is Fiddler. Fiddler monitors all your outgoing traffic and lets you see exactly what requests you are sending out, what response you are getting, and even modify and re-execute requests.
One other interesting issue is how all the JavaScript loads inside the OpenSocial container. In the top example some kind of initialization code needs to be run, so the init function is defined at the top of the script, and it is called at the bottom. Init calls gadgets.window.adjustHeight, which is a utility function that reach outside the iframe to resize itself to fit the contents. In this case you can’t be sure all of the JavaScript has been fully loaded both inside and outside the iframe, so it may not always work.The second example uses the preferred method, which is to use gadgets.util.registerOnLoadHandler. You can pass in one or more functions you would like executed when everything is done loading. In this case, adjustHeight should always work.
One thing common to many apps is the install arrow. Apps detect when a user who is visiting a canvas page doesn’t have the app installed. If they don’t, they grey out the iframe and show a big animated arrow pointing up to the “Add App” link. This flow obviously isn’t ideal, so I wanted to show you a couple ways to avoid the install arrow and just pop the install dialog.The first step is to determine if the user has the app installed. This can be accomplished in the OpenSocial container via gadgets.views.getParams().installState, or by checking the installState query parameter in an external iframe app. The valid values are 0, 1 and 2. 0 means it’s not installed, 1 means it is installed, and 2 means it was just installed and this is the first time the user is running your app.
Once you’ve detected the user hasn’t installed the app you can run the code in the top example.Another way to show the popup is to add the query parameter autoInitiateInstall=true to the canvas surface URL. This is useful when you’re linking to your app externally, or from a link inside the stream.
The app’s profile page is one of the main entry points for installing apps but it often gets neglected. Compare the default app profile page here to one that’s been modified.
Adding a slick profile page gives the user a much better impression of your app.Essentially an app gets a profile page just like every MySpace user gets a profile page. And we all know you can trick out a profile page on MySpace. To do this just log in as the app itself, not the app developer and go to: Edit Profile, Customize Profile then fill out the CSS field.
