Download Integration with rest of game.

Building Game UI with WebKit
Christopher Stott ([email protected])
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
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.
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.
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’
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
Responds to user input
Reads resources from network
Job to render HTML
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.
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.
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
Three key
pieces
HTML
Content,
Information
CSS
Look,
Appearance,
Style
Javascript
Behaviour,
Interactivity,
Animation
THE HTML PART
CONTENT
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.
How content gets onto a page
Full Page Load :
Full page worth of
HTML generated,
delivered and
consumed
Page
AJAX Updates :
HTML Fragments
Javascript
APIs
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.
Bring your own backend.
THE CSS PART
APPEARANCE
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
javascript & jquery
BEHAVIOUR
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.
Controller Buttons
<a href=“http://www.google.com” class=“l2_button”>
Left Trigger
</a>
Very simple system for attaching controller buttons
to actions.
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.
Input
WebKit
Transport Handlers
Texture
Game Actions
Pick the appropriate art style
Don’t be scared to mix Flash & WebKit
Room for a hybrid UI-model
Custom URL handlers
browser://
skatepark://
dlc://
skatereel://
Like http points to a web resource
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?
[email protected]