HTML5 Dev Conf 2013 Presentation
Download as PPT, PDF1 like8,768 views
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.
HTML5 Dev Conf 2013 Presentation
- 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.