Slide 1

Building Game UI with WebKit Christopher Stott (cstott@ea.com) GDC Canada May 6 th 2010 Slide 2 Building online frontend can be expensive. Theres a way that makes things a lot easier. Not without trade-offs. Slide 3 SOCIAL FEATURES. Slide 4 skates always been a sharing game Slide 5 Over 3 million videos uploaded Over 20 million videos watched Players shared over 400k spots Slide 6 May 11th ! Slide 7 skate.feed Extensible system. We can add new messages even after we ship. Gives us the chance to highlight DLC Permeates through the entire game You, your friends and the wider community Slide 8 Landing page. Whats been happening since you last played? Slide 9 View the videos, photos and parks your friends created as you launch into the game. Slide 10 Friend beat your challenge score Youve been invited to a team Friend uploaded a skate.park Friend uploaded a video to skate.reel Content was featured Team Logo was changed Somebody joined your team Your friend unlocked a new trophy / achievement New DLC available for download What messages do we send? Slide 11 Teams can compete together and create together. Plenty of tools for customising the experience and communicating. Slide 12 skate.Park Create a park. Share with friends & community. Play online together in it. Slide 13 INTRODUCTION TO WEBKIT Slide 14 What is WebKit? At the heart of many modern web browsers : chrome / safari / iphone / other smart phones Slide 15 Web Layout Engine Heart of a web browser Job to render HTML Responds to user input Reads resources from network Slide 16 EA took WebKit & got it working on consoles Slide 17 How did Skate 3 use it? Used it for about 50% of our UI Particularly online-connected features Team Management / Team Profiles skate.Feed landing page Leaderboards Player Profiles Slide 18 It isnt about letting users go to arbitrary websites within the game. Present them with a walled garden. Slide 19 T Two key concepts of the talk Using a web layout engine to build UI Dynamically serving content from online Separate ideas, but fit naturally together. Slide 20 Very new. First console game to integrate WebKit Has huge potential, but plenty to prove Not a silver bullet Not right for all feature sets Requires different skill sets from those working with it Slide 21 WEB DEVELOPMENT IN 5 MINUTES Slide 22 Slide 23 CONTENT THE HTML PART Slide 24 HTML Content of the page, separated from how it looks & how it behaves. Lets us focus on what information should be on screen, separately to how its presented. Slide 25 Whats AJAX? Basically means Background Update Initiated by client (user activity or timer) Way to update the page without doing an expensive & jarring full page load. Slide 26 How content gets onto a page Slide 27 Where does HTML come from? file://Real Web ServerIn-Game Web Server Really thats entirely up to you One of the most important points of the talk Most powerful is a combination of all three. Slide 28 Bring your own backend. Slide 29 APPEARANCE THE CSS PART Slide 30 CSS Also us to globally set up style. Separates the Artists work from the Engineers Slide 31 CSS Zen Garden Quick highlight of the power & flexibility Exact same HTML, but radically different appearance An artist could reskin an entire game without talking to an engineer Slide 32 Slide 33 Slide 34 BEHAVIOUR javascript & jquery Slide 35 jQuery Freely available javascript library Makes things significantly simpler Emphasises building shared components Slide 36 Shared Components Lets us quickly build new screens Leverage already developed components Drops cost of development eg. Tab Bars, Pagination, Dynamic Updating pages Slide 37 Need people on the team with these skills to succeed Slide 38 LOWER DEVELOPMENT COSTS Slide 39 why? because we can act faster Slide 40 Decouples things Decouples artists from engineers Decouples the data source from the presentation Decouples the logic from the game code Slide 41 Fast Iteration Break the usual compile-link-run-test cycle Can see things in game earlier Test most changes inside a browser Fewer people can do more We estimate we were at least 4x more productive Slide 42 Fix bugs faster Bugs are often just less complex / easier to fix Iteration time helps Can get changes into QAs hands faster skate3s Community Scrum had half the projected number of bugs & we could fix them far faster. Slide 43 BUILDING SCREENS Slide 44 Different from building regular web page? No mouse / keyboard / cursor Needs to fit with the rest of the game TRCs to comply with on consoles Slide 45 Should feel like game frontend & not a web page Slide 46 Dealing with change When new information comes in, need to update. No push. Have to poll for updates (AJAX) Handle the cursor when page layout changes. Slide 47 NAVIGATION Slide 48 How to navigate page properly with only a controller? Slide 49 Needs to deal with pages that change dynamically, where new arbitrary content is added or removed. Dont want to hardcode, maintainance would be a nightmare. Can hardcode. As a fallback. Slide 50 Very simple system for attaching controller buttons to actions. Left Trigger Controller Buttons Slide 51 Banish cursor. No where else in the game uses it. Slide 52 Highlight the current element Using CSS & jQuery, came up with a simple system for to highlight the element the cursor is hovering over, without needing to render the cursor. Slide 53 INTEGRATION WITH REST OF GAME. Slide 54 WebKit Input Transport Handlers Texture Game Actions Slide 55 Pick the appropriate art style Slide 56 Dont be scared to mix Flash & WebKit Room for a hybrid UI-model Slide 57 Custom URL handlers Like http points to a web resource browser:// skatepark:// dlc:// skatereel:// Slide 58 Javascript Bindings Slide 59 ART STYLE. Slide 60 Presenting WebKit WebKit renders to a texture. Thats all. Up to you how to present that texture Fade in / Animate in Overlay over the rest of the game with alpha Transform and present in 3d On skate were always full screen and playing a Flash intro & ambient animation on top. Slide 61 Animation Global: Animating the entire webkit texture Local : Animate within the page (CSS + JS) jQuery provides easy way to implement simple animations No where near as powerful as Flash tools Slide 62 TECHNICAL ASPECTS. Slide 63 Debugging Much easier in Chrome Great developer tools an artist can use Harder in game, but possible. Mostly printfs. Slide 64 Memory can be a challenge Codes in a DLL about 6 megs Pages typically require 6-8 megs to display Tighter on memory you are, the more you have to worry about the page. Slide 65 WRAP UP. Slide 66 Overall Makes building online connected UI much easier Overall 4x productivity win & easier to final Needs people willing to learn the right skills There are lessons for everyone to learn. Some sacrifices necessary on visual quality Memory could be an issue Slide 67 Potential Uses Prototyping Launch page Sign up / Sign in Flows In Game Media / UGC Galleries Video Libraries Tutorials Team Management Messaging Slide 68 Skate played it safe Couldnt dedicate significant resources to this For a long time this was just a science project Went for a safe implementation that we could guarantee we could ship. Meant we never had to cut anything. Plenty of lessons learned to take it to the next level for the next project Slide 69 Benefits arent exclusive to WebKit, anyone can Focus on being data-driven Build shared components Deliver content & layout from a server Find a way to get iteration times down Slide 70 Current WebKit naturally aligns with a lot of trends happening in the industry right now. Lower development costs Pushing Direct-to-Consumer Social & Always Connected Gaming Slide 71 Questions? Slide 72 Thanks! GDC for inviting me Jeff Howell & Brian Lindley Joe VanZeipel & Hideki Bessho Arpit Baleva, Chris Sidhall, Paul Pedriana Skate3 Team & Blackbox for their support Slide 73 Feedback? cstott@ea.com