HTML5 Dev Conf 2013 Presentation

Cross-Platform Game Development: The Future

Is TodayIker Jamardo

HTML5 Developers Conference2013/04/01

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.

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.

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?

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>

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.

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.» Access to hardware features: vibration,

accelerometer, gyroscope, etc.» Local Storage.» Media transmission: WebRTC.» ...

game

developer

Why develop games in HTML5?

• There is more...» Reduce dev costs.» More affordable tech and big developer

community.» 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 available to native apps.

» You can achieve native like performance.

game

entrepeneur

Success.

What’s the current status and what should I

be aware of?So... You are feeling tempted by the fable, aren’t you?

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 :)

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.

!==

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%

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.» Not an homogeneous environment.

What’s the current status and what should I

be aware of?You need an exquisite handling of your resources.

What’s the current status and what should I

be aware of?Smart memory management and have your

garbage collection under control.

Learn to optimize your JavaScript...

What’s the current status and what should I

be aware of?

...and fully understand the evil inside certain

JavaScript structures like closures and Object Oriented complex

hierarchies.

2048

2048

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.

What’s the current status and what should I

be aware of?• Abstract as much as you can:

» Screen Resolution.

» Input.

» Render.

What’s the current status and what should I

be aware of?Do not reinvent the

wheel......use a Game

Engine.

https://github.com/bebraw/jswiki/wiki/Game-Engines

...or try to solve it!Stop believing in the fable...

So... Feeling discouraged?

• Developing cross-platform games seems complicated.

• What can we do?

• 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.

What’s the current status and what should I

be aware of?

The only company ready with all the technology necessary to enable

native-performing HTML5 cross-platform game development,

monetization and deployment.

What does Ludei offer?

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).» DeviceMotion and Vibration API support.

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.

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.

What does Ludei offer?

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.

DEMOS

iBasket

(iPad3 Vs iPad1 & Nexus 7 Vs NexusOne)

Vector Graphics

WebGL

What does Ludei offer?

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.

THANK YOU!

ANY QUESTIONS?

Visit our booth at the conference for demo showcase and more info.