Wednesday, October 27, 2010

Retrieving Facebook Profile Picture as an HTML Texture in Unity3D


Lately I have been reading a lot of posts and information about Facebook + Unity3D integration and I wanted to share my thoughts and a little sample to help the community bit.
I think that this topic gets more confusing because there are different types of Facebook integration depending on what you want to achieve. Here's my take on different Facebook integration approaches:
Web Basic Integration
This is basically just embedding your hosted Unity3D web player into a Facebook canvas. This type of integration is the most simple of all because is basically just embedding your Unity3D web player into a Facebook page so people can play it right there. For this you will need to have your Unity3D web player already hosted and running somewhere with public access. The steps are super simple:
1- Go to Facebook Developers
2- Setup a new application
3- Fill the Canvas Page text field with your desired app name
4- Fill the Canvas URL text field with the URL of your unity web player
Once you do that, you are done and you app will be already running in Facebook.

Desktop Basic Integration
With desktop applications it gets more tricky because Facebook OAuth 2.0 protocol forces you to redirect the user to Facebook to allow access to your application, and then you need to get the response and request the authentication content. This process is more advanced and the experience is kind of broken since the user has to leave the unity app to grant access using the Browser.
Alternatively you can do just a basic integration, which is retrieving public Facebook information based on the Facebook username. For this you don't need to implement the authentication since you just need to call the Facebook public API services and render the results. This is not actually a real integration, but it will enable you to retrieve and render some basic Facebook information in your unity app without a lot of work.
This is the actual integration sample I have created. It is a very simple application with only one script that requests the user for the Facebook username, and then uses it to retrieve the user's profile picture and render it as a Texture on a GameObject.
This is just the basic stuff to get you started, but is well documented and very simple so it should help you get started. You can get the sample here.
Facebook Advanced Integration - Web and Desktop
This is the real thing. For web players it will be easier and the experience will be better cause the user will be already using a browser, and you can use JavaScript functions in the web player HTML (check the Unity docs) page to get manage the authentication of the app easily and pass the required information back to unity without issues. There are several third party solutions and I can recommend DimeRocker which is the platform we have been using for Mystery Invaders.
If you are deploying your application using the Web Player, you need to basically use JavaScript and the Unity WWW class to authenticate and then connect to the Facebook Graph API to get and post the information you need.
For desktop application the difference will reside on the Authentication process, which you will need to bridge between a web page and the desktop application. I'll be working on samples about this topic and hopefully posting something back to the community to help others get on track.
Happy Facebook integration!

No comments:

Post a Comment