This document discusses cross-platform game development using HTML5. It begins by introducing Ludei, a company that develops games for iOS and Android using HTML5. It then discusses the benefits of using HTML5 for a single codebase that can run across platforms. However, it notes the current status of HTML5 has limitations due to browser fragmentation and performance issues on mobile. It recommends using a game engine and optimizing resources. Ludei offers a solution that runs games outside the browser for a native-like experience across iOS and Android with tools for monetization, social integration and more.

1. Cross-Platform Game
Development: The Future Is
Today
Iker Jamardo
HTML5 Developers Conference
2013/04/01

2. About Ludei...
• San Francisco based company.
• Started developing native iOS and
Android games.
• More than 18M users have
downloaded a game by Ludei.
• Trying to push HTML5 as a viable
platform for cross-platform game
development.

3. About me...
Iker Jamardo Zugaza
@judax
•I run engineering @ Ludei.
•Passionate about software architecture and a C/C++
lover (refurbished to JavaScript).
•Former University Professor and Researcher.
•Designed and implemented the core of Ludei’s cross-
platform technology.

4. Questions to be answered
• Why develop games in HTML5 in the first place?
• What is the current status of HTML5 regarding
games and what do I have to be aware of to develop
games in HTML5 today?
• What does Ludei offer?

5. Why develop games in
HTML5?
The Web brings the most known fable/promise in
software development
A SINGLE CODE BASE TO RULE THEM ALL!
<script type=“text/javascript”>
document.write("Hello World!”);
</script>

6. Why develop games in
HTML5?
• The advantages of The Web:
» A common language: HTML y JavaScript.
» Easy and “quick” update of the contents.
» Opens new markets: just a device connected to the
internet with a web browser is needed.

7. Why develop games in
HTML5?
• Thanks to HTML5, the web standard finally offers:
» A 2D/3D advanced graphic control element:
canvas.
» An advanced audio control element: WebAudio.
» An advanced communication channel: WebSocket.
game
» Access to hardware features: vibration,
developer
accelerometer, gyroscope, etc.
» Local Storage.
» Media transmission: WebRTC.
» ...

8. Why develop games in
HTML5?
• There is more...
» Reduce dev costs. game
» More affordable tech and big developer community.
entrepeneur
» You can also deploy native apps that execute web
content to the existing markets.
» There are bridges to access some features that are
not included in the web standard and were only
Success.
available to native apps.
» You can achieve native like performance.

9. What’s the current status
and what should I be aware
of?
So... You are feeling tempted by the fable, aren’t you?

10. What’s the current status
and what should I be aware
of?
To rule them all (specially on mobile), you will need to
embark on an epic journey :)

11. What’s the current status
and what should I be aware
of?
First of all, you need to realize that your game won’t be
executed on “exactly” the same environment.
!==

12. What’s the current status
and what should I be aware
of?
• Mobile browsers are as fragmented as mobile devices
and operating systems (especially in Android).
44.1%

13. What’s the current status
and what should I be aware
of?
• Living in the mobile browser today means:
» Lack of multitouch in Android 2.3 (44% of the
market).
» Broken audio.
» Low performance.
» Lack or slow WebSockets.
» Lack of WebGL.
» Unexpected behavior.
» Wait for vendors to provide.
»

14. What’s the current status
and what should I be aware
of?
You need an exquisite handling of your resources.

15. What’s the current status
and what should I be aware
of?
Smart memory management and have your garbage
collection under control.

16. What’s the current status
and what should I be aware
of?
Learn to optimize your
JavaScript...
...and fully understand the
evil inside certain JavaScript
structures like closures and
Object Oriented complex
hierarchies.

17. What’s the current status
and what should I be aware
of?
• Be aware of what’s going on at OS and HW level.
• Package your graphic assets.
2048
2048

18. What’s the current status
and what should I be aware
of?
• Abstract as much as you can:
» Screen Resolution.
» Input.
» Render.

19. What’s the current status
and what should I be aware
of?
Do not reinvent the ...use a Game Engine.
wheel...
https://github.com/bebraw/jswiki/wiki/Game-Engines

20. So... Feeling discouraged?
• Developing cross-platform games seems
complicated.
• What can we do?
Stop believing in the fable... ...or try to solve it!

21. What’s the current status
and what should I be aware
of?
• Developing HTML5 games today:
» Desktop: Current browsers are
mature enough and the systems are
usually powerful enough.
» Mobile: Due to fragmentation and
lack of proper support of certain
features and poor performance, a
hybrid solution is the best option.

22. What does Ludei offer?
The only company ready with all the
technology necessary to enable native-
performing HTML5 cross-platform game
development, monetization and
deployment.

23. What does Ludei offer?
• Ludei does not live inside the browser/webview.
» Same environment (and thus, development
experience) in all the devices and operating
systems.
» iOS 4.3+ and Android 2.3+ support.
• 100% HTML5 compliant.
» Full canvas 2D and 3D support.
» Full multichannel audio support.
» Blazing fast WebSocket implementation.
» Path API support (vector graphics).

24. What does Ludei offer?
• Extensions to the standard:
» Monetization: Ads and In-App Payments.
» Push notifications.
» Social network integration: Facebook, Twitter,
GameCenter.
» Multiplayer.
» Analytics.
» Transparent webview for DOM content overlay.

25. What does Ludei offer?
• Customized control over the system:
» Application life cycle: pause, resume.
» Control over the Android back button.
» Box2D native binding === 10x performance boost.
» Texture memory deallocation.
» Control over the device motion event update rate.
» Ciphered JavaScript.

26. What does Ludei offer?

27. What does Ludei offer?
• How to use Ludei?
1. Develop your HTML5 game using canvas in your
desktop system.
2. Download the CocoonJS Launcher App for iOS and/or
Android and test your game in it.
3. Create a ZIP file with your game (code + assets) and
upload it to the Ludei Cloud Compiler.

28. What does Ludei offer?
DEMOS
iBasket
(iPad3 Vs iPad1 & Nexus 7 Vs NexusOne)
Vector Graphics
WebGL

29. What does Ludei offer?
• The future:
» Cloud storage.
» Multiplayer.
» Open extension development SDK.
» Export to more markets: WiiU, Ouya, ...
» Support for new features: New input devices.
» More compelling games to showcase the
technology.

30. THANK YOU!
ANY QUESTIONS?
Visit our booth at the conference for demo showcase and more info.