developing a cross platform game with java & html5
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.TRANSCRIPT
![Page 1: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/1.jpg)
© GameDuell 2013
Developing a Cross Platform Game with Java and HTML5
Josep Prat – [email protected] - @jlprat
![Page 2: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/2.jpg)
© 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
![Page 3: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/3.jpg)
© GameDuell 2013
The Mission:Play the same game across several
platforms
![Page 4: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/4.jpg)
© GameDuell 2013
Make a Cross Platform Game!
You are the new architect of GameDuell and the management has a new task for you:
![Page 5: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/5.jpg)
© GameDuell 2013
What is Cross Platform?
![Page 6: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/6.jpg)
© 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...
![Page 7: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/7.jpg)
© GameDuell 2013
Challenge Accepted!
Let’s introduce the GameDuell Team
![Page 8: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/8.jpg)
© GameDuell 2013
Bringing people together to have a good time with
games -
Wherever, whenever!
![Page 9: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/9.jpg)
© 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
![Page 10: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/10.jpg)
© GameDuell 2013
Team Structure
Scrum teams
Product based
Specialists in many languages
• Java
• Flash
• iOS / Android SDK
• HTML5
![Page 11: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/11.jpg)
© GameDuell 2013
Let's Start Building a Cross Platform Game!
![Page 12: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/12.jpg)
© GameDuell 2013
Architecture Overview
![Page 13: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/13.jpg)
© GameDuell 2013
Considerations
Security First
Thin Client
Fat Server
Separate Game and Transport Protocol
![Page 14: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/14.jpg)
© 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
![Page 15: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/15.jpg)
© GameDuell 2013
Hacks - Spoofing
Pretend being somebody else
![Page 16: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/16.jpg)
© GameDuell 2013
Hacks – Faking Data
Client lies and server doesn't validate the input
![Page 17: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/17.jpg)
© 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!
![Page 18: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/18.jpg)
© 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
![Page 19: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/19.jpg)
© 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
![Page 20: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/20.jpg)
© GameDuell 2013
What About the Game Client?
![Page 21: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/21.jpg)
© GameDuell 2013
Architecture Overview
![Page 22: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/22.jpg)
© GameDuell 2013
KISS
Keep It Simple, Stupid!
Absolutely reactiveNo main loopSeparate control from viewNo game logic
![Page 23: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/23.jpg)
© 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
![Page 24: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/24.jpg)
© GameDuell 2013
Benefits of Being Reactive
No loops
More efficientUse RequestAnimationFrameSimplified logic
![Page 25: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/25.jpg)
© GameDuell 2013
Which Technology Can We Use?
![Page 26: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/26.jpg)
© GameDuell 2013
WRITE ONCEUse anywhere
![Page 27: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/27.jpg)
© 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”
![Page 28: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/28.jpg)
© GameDuell 2013
A Standard, However...
Not implemented completely everywhere
Different quality of implementation in each
browserBehavior is too many times browser specific
![Page 29: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/29.jpg)
© 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
![Page 30: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/30.jpg)
© 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
![Page 31: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/31.jpg)
© 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
![Page 32: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/32.jpg)
© GameDuell 2013
Key Technologies in Hand
New HTML Markup
CSS3GeolocalizationCanvas & WebGLWebStorageWebSocketsVideo
![Page 33: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/33.jpg)
© GameDuell 2013
WebSockets
![Page 34: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/34.jpg)
© GameDuell 2013
WebSockets
Client → Server communication
Enable Server → Client communicationAvoids polling from clientOld Browsers don't support itLess load on serversMore performant
![Page 35: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/35.jpg)
© GameDuell 2013
Alternative: Long Polling
Client → Server communication
Pseudo Server → Client communicationDoes long lasting polls to the serverMore stress on both client and server
![Page 36: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/36.jpg)
© 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
![Page 37: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/37.jpg)
© GameDuell 2013
A Few Months Later...
![Page 38: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/38.jpg)
© GameDuell 2013
HTML5 version at GameDuell available for mobile devices
Full sync with desktop accounts
Cross-platform play with desktop users
![Page 39: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/39.jpg)
© GameDuell 2013
Q & A
![Page 40: Developing a Cross Platform Game with Java & HTML5](https://reader033.vdocuments.net/reader033/viewer/2022060119/559058161a28ab664b8b470c/html5/thumbnails/40.jpg)
© GameDuell 2013
Stay in Touch:inside.gameduell.dewww.techtalk-berlin.de
Further Information