building game ui with webkit n.
Skip this Video
Loading SlideShow in 5 Seconds..
Building Game UI with WebKit PowerPoint Presentation
Download Presentation
Building Game UI with WebKit

Loading in 2 Seconds...

play fullscreen
1 / 73

Building Game UI with WebKit - PowerPoint PPT Presentation

  • Uploaded on

Building Game UI with WebKit. Christopher Stott ( GDC Canada – May 6 th 2010. Building online frontend can be expensive. There’s a way that makes things a lot easier. Not without trade-offs. . Social FEATURES. skate’s always been a sharing game.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

Building Game UI with WebKit

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
    Presentation Transcript
    1. Building Game UI with WebKit Christopher Stott ( GDC Canada – May 6th 2010

    2. Building online frontend can be expensive. There’s a way that makes things a lot easier. Not without trade-offs.

    3. Social FEATURES.

    4. skate’s always been a sharing game

    5. Over 3 million videos uploaded Over 20 million videos watched Players shared over 400k spots

    6. May 11th !

    7. skate.feed You, your friends and the wider community Permeates through the entire game Gives us the chance to highlight DLC Extensible system. We can add new messages even after we ship.

    8. Landing page. What’s been happening since you last played?

    9. View the videos, photos and parks your friends created as you launch into the game.

    10. What messages do we send? ‘Your friend unlocked a new trophy / achievement’ ‘New DLC available for download’ ‘You’ve been invited to a team’ ‘Somebody joined your team’ ‘Friend uploaded a video to skate.reel’ ‘Team Logo was changed’ ‘Friend beat your challenge score’ ‘Friend uploaded a skate.park’ ‘Content was featured’

    11. Teams can compete together and create together. Plenty of tools for customising the experience and communicating.

    12. skate.Park Create a park. Share with friends & community. Play online together in it.

    13. Introduction tO WEBKIT

    14. What is WebKit? At the heart of many modern web browsers : chrome / safari / iphone / other smart phones

    15. Web Layout Engine Heart of a web browser Responds to user input Reads resources from network Job to render HTML

    16. EA took WebKit & got it working on consoles

    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

    18. It isn’t about letting users go to arbitrary websites within the game. Present them with a walled garden.

    19. Two key concepts of the talk T Using a web layout engine to build UI Dynamically serving content from online Separate ideas, but fit naturally together.

    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

    21. Web development in 5 minutes


    23. HTML • Content of the page, separated from how it looks & how it behaves. • Let’s us focus on what information should be on screen, separately to how it’s presented.

    24. What’s 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.

    25. How content gets onto a page

    26. Where does HTML come from? • Really that’s entirely up to you • One of the most important points of the talk file:// Real Web Server In-Game Web Server Most powerful is a combination of all three.

    27. Bring your own backend.


    29. CSS • Also us to globally set up style. • Separates the Artist’s work from the Engineer’s

    30. 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

    31. javascript & jquery BEHAVIOUR

    32. jQuery • Freely available javascript library • Makes things significantly simpler • Emphasises building shared components

    33. Shared Components • Let’s us quickly build new screens • Leverage already developed components • Drops cost of development • eg. Tab Bars, Pagination, Dynamic Updating pages

    34. Need people on the team with these skills to succeed


    36. why? because we can act faster

    37. Decouples things • Decouples artists from engineers • Decouples the data source from the presentation • Decouples the logic from the game code

    38. 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

    39. Fix bugs faster • Bugs are often just less complex / easier to fix • Iteration time helps • Can get changes into QA’s hands faster skate3’s Community Scrum had half the projected number of bugs & we could fix them far faster.


    41. Different from building regular web page? • No mouse / keyboard / cursor • Needs to fit with the rest of the game • TRCsto comply with on consoles

    42. Should feel like game frontend & not a web page

    43. 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.


    45. How to navigate page properly with only a controller?

    46. Needs to deal with pages that change dynamically, where new arbitrary content is added or removed. Don’t want to hardcode, maintainance would be a nightmare. Can hardcode. As a fallback.

    47. Controller Buttons <a href=“” class=“l2_button”> Left Trigger </a> Very simple system for attaching controller buttons to actions.