Porting from Mobile to Facebook.com

Deploying your game to the Web means that you can iterate fast and frequently (no review process, no fees), and that your Web-based players are always connected to the internet and using the most recent version of the game. Launching on the Web makes testing, balancing, and tweaking easier and faster, and if you're using a cross-platform game engine like Unity or Cocos2d-x, you can apply the lessons you learn on the Web to your mobile versions without needing to rewrite them each time.

This document provides a high level overview of the things you may need to consider when porting a game from a mobile platform to a game on Facebook.

Why release on Facebook.com?

Across web and mobile, an average of 445 million people play Facebook-connected games every month. Many of those players play directly on Facebook.com, and this is a great place to get your games discovered by new players.

Dead Trigger 2 from Madfinger Games on Facebook.com

We've enhanced the developer experience for Unity developers with simplified Unity deployment for games on Facebook. To help support your game's business, our SDK provides support for Facebook platform features and offers simple integration in to Facebook's trusted Payments system.

Similarly for Cocos2d-x developers, we've worked with the Cocos2d-x team to offer built-in support for Facebook platform features from within the Cocos2d-x engine. By using Cocos2d-x, your players can benefit from the ability to share content and create personalized social experiences on Web and mobile from a single codebase.

Hosting Game Assets

One key difference between mobile games and Web Player games is, naturally enough, the web. You will need to arrange for hosting of your game binary and assets on a web server that supports SSL/TLS ("https") for use with Facebook.

See Hosting Games on Facebook for best practices and information on how to get started.

Optimizing Loading Time

Long load times will reduce player retention. Part of the power of the web is the ease of discoverability and exploration, players can interact with your content without having to commit to the installation of a game client or large download. If your new players are met with a lengthy loading time, not all of them will wait for it to finish. In order to retain the maximum amount of players, strive hard to make your game start as quickly as possible.

Reducing Build Size

Make sure that you've eliminated unused and redundant assets in your game. Pay special attention to the amount of third-party code and plugins in your game, they can considerable bloat the size of your finished binary. You may also want to consider reducing the size of your game by moving assets that aren't needed at the start of a play session (like levels) into external assets that are loaded asynchronously in the background or on demand.

If you're a Unity developer, review Unity's Asset Bundle feature, or the WWW.LoadFromCacheOrDownload method. Using a CDN will help with separating your game assets. Also refer to Getting Started with Unity for best practices on WebGL deployment with Unity.

Measuring Early Funnel Performance

Monitoring your game's on-boarding with effective instrumentation and measurement is important for identifying dropoffs and see if your changes are having a positive impact. Logging “heartbeat” signals throughout your install funnel will allow you to measure your loading time performance and potentially identify corner-case issues.

Log events early on during the load funnel as well an event when the player begins interacting with the game to sort out successful loads from unsuccessful ones. In addition to simply logging heartbeats, you should log device and browser statistics like browser name, browser version, and other relevant browser capabilities with these events in order to identify device or browser related issues. This is especially important for games with notoriously long load times like WebGL builds from Unity or Unreal.

You will want to log your first event as early as possible in the loading funnel, far before you gain control within your game code, consider adding a script tag to to the top of your index.html to send this heartbeat. The next critical point you will want to log an event is when you have completed the initial loading and the player can interact with the game. These two points build out the most basic funnel that will help your measure the drop-off of players during load. You can should additional events in-between and after these events contextual to your game to optimize further.

See more about Measurement for Games in our guide detailing Facebook App Events.

Loading screen of Castleville Legends from Zynga on Facebook.com

Input Design

Of course, the user interface on a desktop computer, keyboard and mouse, is somewhat different to the touchscreen and gyroscope on a mobile device. You will need to adapt your game to allow people to play with this different type of interface.

Remember that most people are much more effective at (for example) navigating a first-person shooter with a keyboard and mouse than with a touchscreen, or at dragging units on a tablet than with a mouse. For some multiplayer games, it may make sense to ensure players only play against other players on the same kind of platform.

UI Design

Desktop computer monitors tend to be quite large relative to phone screens. Also, they almost always have a 16:9 or 16:10 aspect ratio. If you designed your game to run in portrait mode on a 3:4 iPhone 4, you may want to think about adjusting its layout to better occupy the large available real estate, so your game isn't vertically letter-boxed. At a minimum, consider adding an image backdrop to make the most of the available space.

Some elements of your UI will benefit from a redesign for a desktop display. With a mouse, players will be able to click on smaller UI elements than those they could tap on, when playing on mobile. For example you can fit an extensive menu system, that on mobile spanned across multiple screens, in to a single screen on desktop monitors. This will make your user interface clearer and easier to use.

Desktop optimized UI of KingsRoad from Rumble Entertainment

Using Facebook Payments

Games on Facebook are required to use Facebook Payments for Games. Unity developers can use our Unity SDK, which natively supports the same robust payments API available to all games on Facebook. Cocos2d-x developers can make specific calls to initiate payments on Facebook.com.

You'll need to define product objects for each purchasable item in your game. Each object will need a price defined in at least one currency. Facebook automatically offers prices in foreign currencies to people around the world. However, you can optionally extend the product object to define prices in various currencies, allowing you to present carefully chosen prices to people globally.

You will also need to setup a server to receive notifications of transactions as they happen. Our Facebook Payments Implementation Guide walks through the required steps.