Building Game UI with WebKitChristopher Stott (cstott@ea.com)

GDC Canada – May 6th 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

Over 3 million videos uploaded

Over 20 million videos watched

Players shared over 400k spots

May 11th !

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

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

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

‘Friend beat your challenge score’

‘You’ve 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?

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

skate.Park

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

INTRODUCTION TO WEBKIT

What is WebKit?

At the heart of many modern web browsers : chrome / safari / iphone / other smart phones

Web Layout Engine

Heart of a web browser

Job to render HTML

Responds to user input

Reads resources from network

EA took WebKit & got it working on consoles

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

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

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.

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

WEB DEVELOPMENT IN 5 MINUTES

HTMLContent,

Information

JavascriptBehaviour,

Interactivity,Animation

CSSLook,

Appearance,Style

Three key pieces

CONTENTTHE HTML PART

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.

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.

Page

Full Page Load :Full page worth of HTML generated,

delivered and consumed

AJAX Updates : HTML Fragments

Javascript APIs

How content gets onto a page

Where does HTML come from?

file:// Real Web Server In-Game Web Server

Really that’s entirely up to youOne of the most important points of the talk

Most powerful is a combination of all three.

Bring your own backend.

APPEARANCETHE CSS PART

CSS

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

Engineer’s

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

BEHAVIOURjavascript & jquery

jQuery

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

Shared Components

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

pages

Need people on the team with these skills to succeed

LOWER DEVELOPMENT COSTS

why?because we can act faster

Decouples things

• Decouples artists from engineers• Decouples the data source from the

presentation• Decouples the logic from the game code

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

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.

BUILDING SCREENS

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

Should feel like game frontend & not a web page

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.

NAVIGATION

How to navigate page properly with only a controller?

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.

Very simple system for attaching controller buttons to actions.

<a href=“http://www.google.com” class=“l2_button”>Left Trigger

</a>

Controller Buttons

Banish cursor. No where else in the game uses it.

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.

INTEGRATION WITH REST OF GAME.

WebKitInput

Transport Handlers

Texture

Game Actions

Pick the appropriate art style

Don’t be scared to mix Flash & WebKitRoom for a hybrid UI-model

Custom URL handlers

Like http points to a web resource

browser://

skatepark://

dlc://

skatereel://

Javascript Bindings

ART STYLE.

Presenting WebKit

• WebKit renders to a texture. That’s 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 we’re always full screen and playing a Flash intro & ambient animation on top.

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

TECHNICAL ASPECTS.

Debugging

• Much easier in Chrome• Great developer tools an artist can use• Harder in game, but possible. Mostly printf’s.

Memory can be a challenge

• Code’s 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.

WRAP UP.

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

Potential Uses

Prototyping

Launch page

Sign up / Sign in Flows

In Game Media / UGC Galleries

Video Libraries

Tutorials

Team Management

Messaging

Skate played it safe

• Couldn’t 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

Benefits aren’t 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

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

Questions?

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

Feedback?

cstott@ea.com