View
551
Download
1
Category
Tags:
Preview:
DESCRIPTION
Do you want to create a cross-platform game and you don't want to die developing for different native platforms? In this session you will learn how to build a successful game that runs on any device taking advantage of the cross-platform capabilities of HTML 5. GameDuell’s HTML5 Game Architect Josep Prat will deliver a bottom-up journey from the backend strategies backed up by Java, to the architectural design of the HTML 5 client. Starting by defining what is true cross-platform architecture he will proceed to discuss the available technologies and their advantages and restrictions. From websockets, over long polling, CSS 3 transformations to protocols different aspects of an efficient and lean development process will be introduced by him. Josep will also explain how to structure a cross-platform project in the correct layers and conclude his talk with a live demo of a GameDuell prototype to showcase an efficient approach for a hands-on usage in efficient development projects.
Citation preview
© GameDuell 2013
Developing a Cross Platform Game with Java and HTML5
Josep Prat – josep.prat@gameduell.de - @jlprat
© GameDuell 2013
1. What is Cross Platform?
2. Building Cross Platform Games
3. Building the HTML 5 Client
4. Live Demo
5. Q & A
Agenda
© GameDuell 2013
The Mission:Play the same game across several
platforms
© GameDuell 2013
Make a Cross Platform Game!
You are the new architect of GameDuell and the management has a new task for you:
© GameDuell 2013
What is Cross Platform?
© GameDuell 2013
What is Cross Platform?
Deliver the best experience to all players:
Different flavor for the same game
Interaction between platforms
Keep the game logic in one place
Some examples: Bubble Speed, Belote...
© GameDuell 2013
Challenge Accepted!
Let’s introduce the GameDuell Team
© GameDuell 2013
Bringing people together to have a good time with
games -
Wherever, whenever!
© GameDuell 2013
Key Facts
Founded in 2003
Over 210 team members
More than 125 million registered players
Over 70 games in 7 languages
500 million page impressions per month
Tech Talks with technology experts
© GameDuell 2013
Team Structure
Scrum teams
Product based
Specialists in many languages
• Java
• Flash
• iOS / Android SDK
• HTML5
© GameDuell 2013
Let's Start Building a Cross Platform Game!
© GameDuell 2013
Architecture Overview
© GameDuell 2013
Considerations
Security First
Thin Client
Fat Server
Separate Game and Transport Protocol
© GameDuell 2013
Security First
Design your software with security in mind
Don't expose any of the internals
Don't base your security on obfuscation
Don't leave any debug flags live!
Don't trust the clients
© GameDuell 2013
Hacks - Spoofing
Pretend being somebody else
© GameDuell 2013
Hacks – Faking Data
Client lies and server doesn't validate the input
© GameDuell 2013
Fat Server
Add all game logic in the server
Contains any logic shared among clients
Take care of timeouts
Do a handshake and mark your clients
Again: don't trust your clients!
© GameDuell 2013
How do we build a Game Sever?
Java based Game Server
Drools (rule engine) defining the game logic
More readable
Speed and Scalability
Declarative programming
© GameDuell 2013
Protocols
Separate Game protocol from Transport protocol
Provide everything the client needs to
show the action (no state needed on
clients)Use some serializable format i.e. JSONThink about rescue pills
© GameDuell 2013
What About the Game Client?
© GameDuell 2013
Architecture Overview
© GameDuell 2013
KISS
Keep It Simple, Stupid!
Absolutely reactiveNo main loopSeparate control from viewNo game logic
© GameDuell 2013
Benefits of Layers
Each layer is more concise
The rendering can be changed without
affecting the gameThe game is defined only in the controllers
© GameDuell 2013
Benefits of Being Reactive
No loops
More efficientUse RequestAnimationFrameSimplified logic
© GameDuell 2013
Which Technology Can We Use?
© GameDuell 2013
WRITE ONCEUse anywhere
© GameDuell 2013
What is HTML 5?Set of APIs
Standardized by W3C5th revision of the standard (HTML)Still in progressDifferent key players (with different
interests)Buzzword since “Thoughts on Flash”
© GameDuell 2013
A Standard, However...
Not implemented completely everywhere
Different quality of implementation in each
browserBehavior is too many times browser specific
© GameDuell 2013
This Leads to the Following Challenges
Avoid Polyfills
Deliver same (or the closest possible)
experience on all devices/platformsKeep performance upManage different device sizes
© GameDuell 2013
Compared to Native Apps
Cross Platform by definition
Less specialization needed (JS + CSS) Easy integration in existing platforms No need for Stores, you are directly live
© GameDuell 2013
Compared to Native Apps
Cross Platform by definition
Less specialization needed (JS + CSS) Easy integration in existing platforms No need for Stores, you are directly live
Less control Far away from the hardware No Integration with the device
© GameDuell 2013
Key Technologies in Hand
New HTML Markup
CSS3GeolocalizationCanvas & WebGLWebStorageWebSocketsVideo
© GameDuell 2013
WebSockets
© GameDuell 2013
WebSockets
Client → Server communication
Enable Server → Client communicationAvoids polling from clientOld Browsers don't support itLess load on serversMore performant
© GameDuell 2013
Alternative: Long Polling
Client → Server communication
Pseudo Server → Client communicationDoes long lasting polls to the serverMore stress on both client and server
© GameDuell 2013
CSS 3 Transformations
Available methods are: rotate, skew-x skew-y,
scale and translate
Or all at once with matrix:
• Take all 4 coordinates of a div
• Multiply each one with the matrix
• The result of each operation is the new
coordinate
© GameDuell 2013
A Few Months Later...
© GameDuell 2013
HTML5 version at GameDuell available for mobile devices
Full sync with desktop accounts
Cross-platform play with desktop users
© GameDuell 2013
Q & A
© GameDuell 2013
Stay in Touch:inside.gameduell.dewww.techtalk-berlin.de
Further Information
Recommended