This document discusses building real-time multiplayer games using web technologies like HTML5 and WebSockets. It begins with an overview and introduction, then covers key aspects like the game scene, events, chat functionality, and an example game called "ZombieRocking." It discusses deploying such games as mobile apps using frameworks like PhoneGap and Titanium. It also addresses considerations for scaling WebSockets and using external WebSocket providers. In the end, it promotes experimenting further and provides a link to a live demo.

1. Partyrocking
By @pekewake and @dvdchavarri

2. From Chat to Realtime Game
Who we are.
David Chavarri and Rubén Chavarri
…where the idea comes from

3. Introduction
What we are going to talk about
Practical Example – ZombieRocking
Personal Experience
Future Possibilities

4. From Chat to Realtime Game
…a little bit about the background
HTML5 Tour: Programación de
Videojuegos HTML5
Fernando Oteros
Desarrollo de videojuegos en JavaScript
Sergio Ruiz (@serginator)
Carlos Benitez (@etnassoft)
Implementar Websockets con...
Jorge Del Casar (@jorgecasar)

5. From Chat to Realtime Game
Technology

6. From Chat to Realtime Game
1) Scene
2) Events
3) Chat
4) ZombieRocking
5) World of ZombieRocking

7. From Chat to Realtime Game
1) Scene

8. From Chat to Realtime Game
1) Scene
.html
scene.js
Our trick: CAAT no intrusive
“Game Framework” that help
us to encapsulate in our
examples the “Canvas”
interaction throw object
concepts like Director,
Scene, Actors & gameloop).
other Frameworks
ally.js

9. From Chat to Realtime Game
2) Events
Behaviours
Breath
Walk - Wait
Shot
Input Controls

10. From Chat to Realtime Game
2) Events
Behaviors
Inputs

11. From Chat to Realtime Game
3) Chat
io.sockets.emit(“msg”)
socketio.emit(“msg”)
socketio.emit(“msg”)

12. From Chat to Realtime Game
3) Chat
Server
(node)
Client
(html)
source code

13. From Chat to Realtime Game
4) ZombieRocking
Emit websocket
action Left
action Right
action Wait
action Shot
Emit clientToServer

14. From Chat to Realtime Game
4) ZombieRocking
Update Controls
Manage Events

15. From Chat to Realtime Game
5) World of ZombieRocking
emit
clientToServer
Emit websocket

16. From Chat to Realtime Game
5) World of ZombieRocking
server (node)
client

17. Now What?
Let deploy the App
in Smartphones
!

18. Now What? Deploy the App in Smartphones
Inconveniences
WebSocket Support
Performance
Native Interaction

19. Inconveniences
WebSocket Support
http://caniuse.com/websockets

20. Inconveniences
Performance - JS Acceleration
CocoonJS - Canvas Acceleration
http://sumonhtml5.ludei.com/
Famo.us - HTML Acceleration
http://famo.us/

21. Inconveniences
Native Interaction with HTML5 Capabilities
Supported
+ Hybrid Approach
GeolocationAPI
Offline support
WebStorage
2D animations
Camera
Notifications
Sensors
Device Info
Market Store

22. Deploying the App in Smartphones
Hybrid Mobile App Frameworks
Cordova / PhoneGap (Javascript)
(IBM Worklite, HP Anywhere, Intel XDK, SAP Platform –SUP)
Appcelerator Titanium (Javascript)
KonyOne (Lua & Javascript)
Xamarin (C#)
Rhodes (Ruby)

23. Deploying the App in Smartphones
Appcelerator Titanium
Proprietary Software
Compiles to native code
Proprietary JavaScript UI
that maps to native OS UI
Enterprise Support
Android, IOS
(Windows phone, BlackBerry
and Tizen, soon)
http://www.appcelerator.com/

24. Deploying the App in Smartphones
Cordova PhoneGap
Open Source
Wraps the webView
HTML5 & CSS3
Great OpenSource
Community
Most Mobile Platforms
http://phonegap.com/

25. Now What? Deploy the App in Smartphones
A few Pointers
Data on the wire!
Please don't send your app HTML from the server,
Javascript does a perfect job rendering it
Use local storage
Whenever possible, show cached content to the user
Write plugins & custom native UI
Sometimes is worth the development of Native features

26. What about WebSockets Scalability?
MVC Real-time
frameworks
Cross-platform
OpenSource,Scaffolding
Multilingual
Yes
Yes
Resource View
Presenter
Model-View-Controller
Model-View-Controller
Active-Record
MongoDB
Design pattern
Yes
MongoDB
Redis
MySQL, MongoDB,Flat
File, Redis,
PostgreSQL
Good
Basic
Good
Reactive programming
Component-oriented
Pub/Sub
Component-oriented
Event-driven Reactive
programming
Event-driven
27%
38%
35%
Database
Community Driven
Programming paradigm
Preference
http://vschart.com/compare/meteor-web-framework/vs/derbyjs/vs/sails-js

27. What about WebSockets Scalability?
WebSocket Server Providers:
Pusher
http://pusher.com/
Firebase
https://www.firebase.com/
Tambur.io
https://www.tambur.io/

28. Just one more demonstration
Demo Time !!!
World of ZombieRocking

29. Our experiments
http://www.partyrocking.tv

30. “Be Partyrocking
my friend…”
The twins
By @pekewake..
@dvdchavarri