Minijuegos/Miniplay Avatars System

@ LOAD""

Transcript

1. Avatars System
2. Me Status: 200 OK Content-Type: application/powerpoint Content-Length: 45 min Cache-Control: cache, tweet, share X-Author: Diego 'Kartones' X-Twitter: @Kartones X-Email: diego@kartones.net X-Powered-By: Coffee
3. Agenda • Intro • Why • How • Results • Research • Problems
4. Intro
5. MINI-DEMO Client-side avatar editor
6. Intro
7. Intro
8. WHY
9. Why • An idea
10. Why • A PoC
11. Why • An SVG importer
12. Why • An appealing TO-DO list: – Serverside avatar generator – Clientside avatar generator – Store to buy/set avatar items – System to store avatars
13. HOW
14. How • Numbers p0rn: – Up to 500 layers – 32 item positions – +7k items – +350k avatars created since launch – 1024 to 4k resolutions supported
15. How • Item lifecycle: – Create – Import – Catalog – Publish
16. How • Import process – SVG to: DB + PNG assets + PNG masks – Clientside needs: • Assets & masks • Basic drawing info – Serverside needs: • Assets & masks • Full logic • Output PNGs and JPGs
17. How • In-House CMS
18. How • Avatar Center “Store”: 1. Try & buy items 2. Wait for processing 3. Auto-updated avatar
19. RESULTS
20. Results Web Servers NoSQL Job Server Worker Servers Job Server Worker Servers MINIPLAY AWS Avatar Request Avatar Build Process request Generate SVG Rasterize SVG Post-process Avatar Completed Get assets Deploy assets Avatar ready Update Avatar Avatar ready? No User reloads his profile Avatar changed
21. Results • Clientside avatar viewer – 3 canvas: Normal, double buffer and masking – Dumb layer painting system: • Request: “I wanna put 1, 2 & 3” • Response: “draw X, Y, Z, masks are A, B” – Feature detection: No canvas, no store – Serverside logic: Safer & updateable – Live DB stores minimal needed data
22. Results Clientside Serverside
23. Results • Serverside processing – [15,35] seconds/avatar/core (~2,5GHz CPU) – Initially took 130 secs! – Queues = regenerate/consume after any issue – Clean code: $avatar = new Avatar(Genders::MALE); $avatar->switchGender() ->removeElement(xxxx) ->setElement(yyy);
24. Results • Small and fast – 4 DB tables – Metadata: [5,10]KBytes to [150,1000] Bytes – Caching, precalculations… – Rendering fast: Single-page “App” – < 2.5K lines of JS (before minimization)
25. RESEARCH
26. Research • Flash no way – As unsafe for “hacker” users as JS – Plugin required to use the store = ugly – Future tablet support
27. Research • SVG no way – Slow when rendering many layers – Drawing of layers noticeable – Canvas and SVG as fallback… Nope • Too much maintenance
28. Research • Client-side rendering – Send canvas contents to server & store it – Batch generate different resolutions in background – Lots of extra clientside logic – Prone to errors & connection problems – Really unsafe
29. Research • Client-Server-Side rendering (o_O)! “A canvas inside a V8 inside a NodeJS inside a server” – nodeJS + node-canvas + Cairo – Inmature & unstable – Limited – Now maybe PhantomJS… but still unoptimal for our scenario
30. Research • Encryption/Obfuscation of store assets – Server encryp + client decrypt – Data scrambling & PNG headers removal – PoC actually built... Was slow++ – JS is still very slow operating with bytes
31. Research • Storage of full avatar history – All sizes, all formats of all avatars – ~1.5MB/avatar/user. Reduced to ~500KB – Way too space consuming – Solution: • Store metadata (could regenerate on demand) • Store only full smallest background (for Activity) – Trick: Default avatar is special case, doesn’t eat space.
32. PROBLEMS
33. Problems • Underscoped project – Had ~4 months to build all… just me :) • but PoC was infinitely helpful – Web was also being built meanwhile – Had to cut features and design decisions
34. Problems • Rules & complex logic + 0 tests – 100% manual process & validation – PoC helpful but as reference only – Had funny bugs • This shield cuts my avatar hand! • If I put this shoes, the pants dissapear! • Dude, where’s my soccer ball? • What happens if I delete this item assets while in use?
35. Problems • Initial base objects were not enough – Was “Physical structure” (SVG with options) – Needed “Logical structure” • Each item & each color, + common info • Switched from “One Component” to “N Items”
36. Problems • Left AWS for the end… literally – Pro-tip: "Never setup all AWS communication the release day“ – Had to hack in a night all Gearman communication & config changes – Dev. avatars going to live too (>_<) – Broke all avatar tests, half of dev. environment – Overscoped Amazon requirements (estimated 12 instances, currently 2 + tracker)
37. Problems • Distributed systems errors – AWS NFS sometimes “reboots”/resets for small periods of time – Code expects “always present” folders – Timeouts, temporal communication failures… – Gearman is nice but lacks detailed info • (or we need to read more docs!)
38. Problems • Adobe Illustrator bugs – Sometimes metadata gets “garbage” • And human-induced bugs – Duplicated layer ids – False visual layer orders • Illustrators had to copy+paste on “clean” SVG • …or I had to edit the SVG as text and fix it (x_X)
39. The End ¿Questions? Slides at http://slides.kartones.net