Facebook Flash APIand Social Game Development

http://fb.me/tempofeng

Agenda

• Gamelet–Our Experiences

• Tips & Tricks– Flash– Social– Facebook / Flash

• Q & A

Gamelet: Our Experiences

Gamelet

Web Traffics

Gamelet

• Published 17 Games– 15 Real-Time Synchronized Games– 2 Social Games

• 11 Employees– 6 Engineers– 3 Arts

Gamelet

• Bandwidth– 60M/Month

• Online Users– 8000 users (max)

• Aggregated MAU– 400K (down from 800k)

Servers

• Web Servers– apache -> tomcat– 2xDell PE R610 (1 Master-N Slave)

• 2xI5520, 6GB, SAS HDs

• Static Files Servers– 1xPC

• Real-time Socket Servers– Java/Mina/ActiveMQ– 3xDell PE R610

• 1xI5520, 6GB, SAS HDs

Servers

• DB Servers–MySQL• 2xDell PE R710 (1Master, 1Standby)

– 2xI5530, 32GB, SAS HDs

– Cassandra• 2xDell PE R710

– 2xI5530, 32GB, SAS HDs

Tip & Tricks - Flash

• Development Environment• Art/Developers Workflow• Performance• Fighting Cheaters• Loader• crossdomain.xml

Development Environment

• Developers– Flash(Flex) Builder• Flex Components• Slow

– Ram/CPU/SSD– Open Too Many Projects

• Arts– Illustrator/Photoshop/Flash

Arts/Developers Workflow

.fla .swf, swc game.swf

Designers Programmers

.as

Versioning Graphics Assets

• Confusing!– SVN–Development Mode• car.fla, airplane.fla

– Production Mode• car.fla, airplane.fla -> vehicle_v00.swf

Performance

• Monitoring Framerate• Don’t– Alpha, 變形工具– Large Bitmap– Parent/child Movieclip

• Using– Sprite instead of Movieclip

Performance

• Slow Movieclip– cacheAsBitmap• Rotate, Scale, …

– AnimationSlicer• http://blog.vandenoostende.com/2008/

animationslicer/

• Profiler–Memory Leak

Fighting Cheaters

• Manipulating Memory• Intercepting Packets• Accelerators• Double Login• Manipulating Code• Building a Bot• Fake Accounts

Manipulating Memory

Manipulating Memory

• Cheat Engine– http://www.cheatengine.org/

• Encode Critical Data–Heap Data– Scores, Weapon, …

Manipulating Memory• class SecureInteger• {• int number;• int checksum;• public void setNumber(int number)• {• this.number = number;• this.checksum = md5(number);• }• public int getNumber()• {• if(verifyMd5(number, checksum))• return number;• else• throw new SecurityException();• }• }

Intercepting Packets

• Add Signature• Encode– SSH– proprietary PKI solution

Accelerators

• 變速精靈– http://tw.vrbrothers.com/speeder/

Accelerators

• Use Server Time Everywhere• Detecting– Calculate the difference between

client time & server time–Network latency will be hard to

predict

Double Login

• Logout Previous Logined User– Flash LocalConnect– Server Notification

Manipulating Code

• Obfuscator• Dynamically Download Encoded

SWF– Loader.loadBytes(bytes)

Building a Bot

• Monitoring–Monitoring All Service Interfaces– AOP, Annotation

• Limiting resource update– Limit by Time Period– Limit by User Roles, Levels• Guests, Unregistered Users

Fake Accounts

• Limit Help from Friends

Loader

• Loading Static Files– Always Retry!

crossdomain.xml

• crossdomain.xml– Access Remote Files

• Security.allowDomain()– SWFs from Other Domain to Access

Me• loader.loaderContext = new

LoaderContext(true, ApplicationDomain.currentDomain)

– Access Remote Image Files without crossdomain.xml

Tips & Tricks – Social Games

• Game Design• Viral Channels• Data Storage

Game Design

• Beautiful!• Gifting is the New Poke• Don’t Punish Users• Represent Relations between

Friends

Viral Channels

monfriends

Data Storage

• Read:Write = 1:1• MySQL– Transactional–Data Growing Slowly

• Cassandra– Key/Value–Data Growing Fast

Tips & Tricks – Facebook / Flash

• Facebook API / Graph API• Chinese Input• Invite/Request without Page

Reloaded

Facebook API & Graph API

• No Plan of Updating• Recommend– Calling Javascript API from Flash

ExternalInterface

• if (!ExternalInterface.available)• {• return;• }

• ExternalInterface.call("lumixInviteFriends", invite, title, type, content, url, label, condensed, toUid(username));

wmode = ‘opaque’

wmode = ‘window’

Chinese Input

• Flash 9/10–Only wmode = ‘window’ Can Input

Chinese–Will Hide javascript Windows

• Flash 10.1–wmode = ‘opaque’ can input

Chinese in IE/Firefox

Flash 9,10 + wmode = ‘window’

Move or Hide the Flash

Invite/Request without Page Reloaded

Step 1: Dynamically Add an <iframe>

• <iframe id='inviteFriendsIframe' name='inviteFriendsIframe' src='inviteFriendsIframe.do' scrolling='no' frameborder='0' width='760' height='800'></iframe>

Step 2: <fb:request-form> in <iframe>

• <fb:serverFbml>• <fb:request-form action="closeFbmlIframe.do" invite="" type="" …>• …• </fb:request-form>• </fb:serverFbml>

Step 3: Close the <iframe> by Javascript

• <script type="text/javascript">• $(document).ready(function()• {• window.parent.onFbmlIframeClosed();• });• </script>

Thanks

http://apps.facebook.com/pizzaworld_tw/Pizza 世界