Martine Spaans (Spil Games) - “Mobile Browser Gaming – New opportunities for casual gaming development”


Published on

The mobile gaming landscape is expanding rapidly. While many developers aim at application stores for various mobile platforms and devices, there’s another side to gaming on the go: browser-based games. What are the advantages and opportunities of mobile browser gaming? What are the technical challenges in this young market, and how can you profit from being an early adaptor? Spil Games will share its mobile browser gaming experience and insight into HTML5 and other mobile browser-based solutions.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Google Zynga FB
  • What do we call Mobile? When we look at the Mobile gaming market, we’re looking at all mobile devices with an Internet connection that are able to display HTML webpages. So this includes tablets, but it excludes old phones what are only WAP-enabled.
  • Started in August 2010.
  • Own development of HTML5 games, but also licensing them. With Buuble Shooter, we had some problems with the framerate. It was one of our first games. Love Tester Deluxe is currently our most popular game.
  • Refer to Flash Lite, Apps. HTML5 grows much faster.
  • Game Jam simultaneously in Hilversum and in San Francisco, in cooperation with Google. 27 Participants in Hilversum and 85 in SF. Presentations, knowledge-sharing and making games. HTML5 guru’s Mike Mahemoff and Paul Irish were supporting this event and they were also present.
  • Due to the current limitations of HTML5, it is currently most suitable for simple causal games, single player and social. However, we see this changing quickly with the rapid development of the HTML5 technology. It supports native touch control and viewport (for auto-detection and optimalisation on many different devices). HTML5 and CSS3 are very agile ways of coding a webpage, and also a webgame. Movie of warimals: Heavy animations working flawless!
  • The browser is very good for social games, because social games don’t contan tricky technical things like gravity engines that would need heavy App technology. So looking into the browser based technology, xHTML is the most suitable coding language for these games. xHTML is basically HTML technology that works with an XML. Excisting xHTML social games can be turned into suitable games for smartphones if the user interface will be adjusted to touch control. A bit of HTML5 can then optimize the user experience (menu items, small animations, etc). So xHTML can provide you with a solid and rather easy base for your game, while you can add the extra and special features woth HTML5.
  • Gap between iPhone and Android for audio support. For Android phones you can add a Flash file to support sound effects and music.
  • Grid in a canvas: Only the grid changes, so the rest of the canvas does not need to be loaded again. Unused grids are removed directly (which is better for performance). Canvas reset = reset width x height (saves loading time)
  • In some countries the mobile web is not supported as good as in other countreis. For example, in Indonesia a lot of people have mobile phones with an Internet connection, but these connections are quite slow. So please keep the size of your game as small as possible.
  • Use Emulators if you don’t have all devices: Android has very good SDK emulators that you can use for free.
  • Will also run on Apple devices, opposed to Flash 
  • Warimals is the first HTML5 social game on FaceBook
  • I think so far Spil Games is the only company licensing HTML5 games, but we expect this market to grow, and competition to grow as well. Already there have been press releases about Disney buying a HTML5 studios, and other companies investing in HTML5 as well. If we license your game, we can help you to make your game more interesting for the players by integrating our highcores and our authentication features. Authentication means that you and your friends will be recognized by the game, making it more interesting to play against or with your friends.
  • Existing WAP Social Games (word-based) are good material for a conversion into HTML5, if the controls are adjusted to touch. So if you have developed such WAP games in the past, it might be interesting to look into the options of converting these games to HTML5.
  • Martine Spaans (Spil Games) - “Mobile Browser Gaming – New opportunities for casual gaming development”

    1. 1. <ul><li>Mobile Browser Gaming: </li></ul><ul><li>New Opportunities for Casual Gaming Development </li></ul><ul><li>Игры в мобильном браузере: новые возможности для разработчиков </li></ul><ul><li>By Martine Spaans </li></ul>
    2. 2. <ul><li>Mobile Web is the Future / Мобильная сеть это будущее </li></ul>
    3. 3. <ul><li>Traffic on the Spil Mobile Portals </li></ul><ul><li>99,8% plays on the 4 most popular devices. </li></ul><ul><li>Трафик на наши моб. сайты </li></ul><ul><li>99,8% играют на одном из 4 устройств </li></ul><ul><li>Mobile Devices / Мобильные устройства </li></ul>
    4. 4. <ul><li>Our Mobile Portals </li></ul><ul><ul><li>Profile </li></ul></ul><ul><ul><li>Events </li></ul></ul><ul><ul><li>FaceBook Connect/Like </li></ul></ul><ul><ul><li>Friends </li></ul></ul><ul><ul><li>Highscores </li></ul></ul><ul><ul><li>Invite/Tell a friend </li></ul></ul><ul><ul><li>iOS Bookmark </li></ul></ul><ul><ul><li>Localization </li></ul></ul><ul><ul><li>And a lot more to come… </li></ul></ul><ul><li>Наши мобильные сайты </li></ul><ul><ul><li>Профиль </li></ul></ul><ul><ul><li>Ивенты </li></ul></ul><ul><ul><li>FaceBook Connect/Like </li></ul></ul><ul><ul><li>Друзья </li></ul></ul><ul><ul><li>Хайскоры </li></ul></ul><ul><ul><li>Пригласить друзей </li></ul></ul><ul><ul><li>iOS Bookmark </li></ul></ul><ul><ul><li>Локализация </li></ul></ul><ul><ul><li>И многое другое... </li></ul></ul><ul><li>Spil in your Pocket / Спил в Кармане </li></ul>
    5. 5. <ul><li>Our Mobile Games </li></ul><ul><li>Наши мобильные игры </li></ul><ul><li>Spil in your Pocket / Спил в Кармане </li></ul>
    6. 6. <ul><li>Our Mobile Traffic </li></ul><ul><li>September 2010 </li></ul><ul><li>1.000.000 MU within 3 months (no promotion) </li></ul><ul><li>Трафик на наших сайтах </li></ul><ul><li>Сентябрь 2010 </li></ul><ul><li>1 миллион уникальных пользователей спустя 3 месяца (без рекламы) </li></ul><ul><li>Spil in your Pocket / Спил в Кармане </li></ul>
    7. 7. <ul><li>Our Mobile Support </li></ul><ul><li>Наша поддержка </li></ul><ul><li>Spil in your Pocket / Спил в Кармане </li></ul>
    8. 8. <ul><li>Single Player </li></ul><ul><li>HTML5 </li></ul><ul><li>Young coding language </li></ul><ul><li>Single Player or Social </li></ul><ul><li>Rapidly developing </li></ul><ul><li>Native touch control </li></ul><ul><li>ViewPort </li></ul><ul><li>Однопользовательские </li></ul><ul><li>HTML5 </li></ul><ul><li>Молодой язык кодирования </li></ul><ul><li>Однопользовательские или Социальные игры </li></ul><ul><li>Быстро развивается </li></ul><ul><li>Работает с тачскринами </li></ul><ul><li>Mobile Browser Game Technology / Технология Мобильных Браузерных Игр </li></ul>
    9. 9. <ul><li>Social Games </li></ul><ul><li>Browser Based </li></ul><ul><li>xHTML – When made compatible for touch-controls. </li></ul><ul><li>Социальные игры </li></ul><ul><li>Живут в браузере </li></ul><ul><li>xHTML – когда будет совместимость с тачскрином </li></ul><ul><li>Mobile Browser Game Technology / Технология Мобильных Браузерных Игр </li></ul>
    10. 10. <ul><li>Choose <Canvas> for games </li></ul><ul><ul><li>Canvas </li></ul></ul><ul><ul><ul><li>Widely supported. </li></ul></ul></ul><ul><ul><ul><li>No compatibility problems. </li></ul></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><ul><li>Nice effects via CSS 3D, (iOS only). </li></ul></ul></ul><ul><ul><ul><li>Compatibility problems on CSS. </li></ul></ul></ul><ul><li>Выбираем <Canvas> для игр </li></ul><ul><ul><li>Canvas </li></ul></ul><ul><ul><ul><li>Широкая поддержка. </li></ul></ul></ul><ul><ul><ul><li>Нет проблем совместимости. </li></ul></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><ul><li>Красивые визуальные эффекты через CSS 3D ( только iOS) . </li></ul></ul></ul><ul><ul><ul><li>Проблемы совместимости. </li></ul></ul></ul><ul><li>Our experience: HTML5 Mobile & Desktop / </li></ul><ul><li>Наш опыт с HTML5 для Мобильника и Десктопа </li></ul>
    11. 11. <ul><li>Use <audio> tag for Background Music </li></ul><ul><ul><li>Audio support is very limited. </li></ul></ul><ul><ul><li>Mobile: only one Music-file can be played at the same time. </li></ul></ul><ul><li>Использование <audio тега для фоновой музыки </li></ul><ul><ul><li>Поддержка аудио очень ограничена </li></ul></ul><ul><ul><li>На мобильных платформах можно играть только 1 музыкальный фай одновременно </li></ul></ul><ul><li>Our experience: HTML5 Mobile & Desktop / </li></ul><ul><li>Наш опыт с HTML5 для Мобильника и Десктопа </li></ul>
    12. 12. <ul><li>Use localStorage for saving data </li></ul><ul><ul><li>LocalStorage is widely supported and better than cookies </li></ul></ul><ul><ul><li>More details: / </li></ul></ul><ul><li>Использование localStorage для сохранения данных </li></ul><ul><ul><li>LocalStorage широко поддерживается и является лучшим решением, нежели кукийс </li></ul></ul><ul><ul><li>Подробней: http :// </li></ul></ul><ul><li>Our experience: HTML5 Mobile & Desktop / </li></ul><ul><li>Наш опыт с HTML5 для Мобильника и Десктопа </li></ul>
    13. 13. <ul><li>Optimizing your code </li></ul><ul><ul><li>YUI compressor for size reduction and basic obfuscation </li></ul></ul><ul><ul><li>JSMin: only reduces size </li></ul></ul><ul><ul><li>Modernizer </li></ul></ul><ul><ul><li>JSGameBench </li></ul></ul><ul><li>Оптимизация кода </li></ul><ul><ul><li>YUI компрессор для уменьшения размера и затемнения </li></ul></ul><ul><ul><li>JSMin: уменьшение размера </li></ul></ul><ul><ul><li>Modernizer </li></ul></ul><ul><ul><li>JSGameBench </li></ul></ul><ul><li>Our experience: HTML5 Mobile & Desktop / </li></ul><ul><li>Наш опыт с HTML5 для Мобильника и Десктопа </li></ul>
    14. 14. <ul><li>Use touch events for Mobile </li></ul><ul><ul><li>Mouse events works different on Mobile </li></ul></ul><ul><ul><ul><li>Desktop : Mouse events (e.g. onmouseup) </li></ul></ul></ul><ul><ul><ul><li>Mobile : Touch events (e.g. ontouchstart) </li></ul></ul></ul><ul><ul><li>Multi-Touch: Was not supported in the past, only new devices </li></ul></ul><ul><ul><li>For more details: visit http:// </li></ul></ul><ul><li>Использование тач-ивентов на Мобильнике </li></ul><ul><ul><li>Ивенты мышки работают по-другому: </li></ul></ul><ul><ul><ul><li>Десктоп : Mouse events (e.g. onmouseup) </li></ul></ul></ul><ul><ul><ul><li>Мобильник : Touch events (e.g. ontouchstart) </li></ul></ul></ul><ul><ul><li>Мульти-Тач: Поддерживается только на новых устройствах </li></ul></ul><ul><ul><li>Более подробно: http :// </li></ul></ul><ul><li>Our experience: HTML5 Mobile / </li></ul><ul><li>Наш опыт: HTML5 на Мобильных платформах </li></ul>
    15. 15. <ul><li>Use Dirty Rectangles for Canvas </li></ul><ul><li>to improve Frame Rate </li></ul><ul><li>Используйте «Грязные Прямоугольники» для ускорения FPS </li></ul><ul><li>Our experience: HTML5 Mobile / </li></ul><ul><li>Наш опыт: HTML5 на Мобильных платформах </li></ul>
    16. 16. <ul><li>Finger Size </li></ul><ul><li>Размер Пальца </li></ul><ul><li>Размер кнопок должен соответствовать размеру пальца пользователей </li></ul><ul><li>Рекомендуем 40х40 пикселей </li></ul><ul><li>Our experience: HTML5 Mobile / </li></ul><ul><li>Наш опыт: HTML5 на Мобильных платформах </li></ul><ul><li>Match button size on Mobile to a finger. </li></ul><ul><li>40 х40 pixels is recommended for Mobile. </li></ul>
    17. 17. <ul><li>Game Loop </li></ul><ul><li>Game Loop </li></ul><ul><li>setTimeout вместе </li></ul><ul><li>setInterval для game loop </li></ul><ul><ul><li>setInterval: DOM возможно не обновится на Android </li></ul></ul><ul><li>Our experience: HTML5 Mobile / </li></ul><ul><li>Наш опыт: HTML5 на Мобильных платформах </li></ul><ul><li>setTimeout instead of </li></ul><ul><li>setInterval for game loop </li></ul><ul><ul><li>setInterval: DOM may not be refreshed on Android </li></ul></ul>
    18. 18. <ul><li>Memory </li></ul><ul><li>Память </li></ul><ul><ul><li>Меньше - лучше </li></ul></ul><ul><ul><li>Не создавайте множество канваса, он кушает больше памяти, чем картинка </li></ul></ul><ul><ul><li>Убирайте картинки из памяти, обнуляя атрибут &quot;src&quot;: </li></ul></ul><ul><ul><li>img.src=&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=&quot;; </li></ul></ul><ul><li>Our experience: HTML5 Mobile / </li></ul><ul><li>Наш опыт: HTML5 на Мобильных платформах </li></ul><ul><ul><li>As small as possible. </li></ul></ul><ul><ul><li>Do not create large amounts of multiple Canvases. Canvas is more memory hungry than image. </li></ul></ul><ul><ul><li>Remove the image from memory by resetting the attribute &quot;src&quot;: </li></ul></ul><ul><ul><li>img.src=&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=&quot;; </li></ul></ul>
    19. 19. <ul><li>Tools for debugging and tuning </li></ul><ul><li>Дебаггинг и тюнинг </li></ul><ul><ul><li>Используйте aCatLog (android market app) или adb logcat (Android Debug Bridge) чтобы читать логи браузера в Android </li></ul></ul><ul><ul><li>Bookmarklet (javascript: URI) полезен </li></ul></ul><ul><li>javascript:Game.PlayerSpeed=prompt(&quot;Player Speed:&quot;) </li></ul><ul><ul><li>На десктопе: Google Chrome </li></ul></ul><ul><li>Our experience: HTML5 Mobile / </li></ul><ul><li>Наш опыт: HTML5 на Мобильных платформах </li></ul><ul><ul><li>Use aCatLog (android market app) or adb logcat (Android Debug Bridge) to read the browser log on Android </li></ul></ul><ul><ul><li>Bookmarklet (javascript: URI) is useful </li></ul></ul><ul><li>javascript:Game.PlayerSpeed=prompt(&quot;Player Speed:&quot;) </li></ul><ul><ul><li>For desktop: use chrome to debug and trace </li></ul></ul>
    20. 20. <ul><li>One-time Investment </li></ul><ul><li>1 Version for many Mobile platforms </li></ul><ul><li>(Different from App-development) </li></ul><ul><li>Одноразовая инвестиция </li></ul><ul><li>1 версия для многих устройств </li></ul><ul><li>(В отличии от App- разработки) </li></ul><ul><li>The Business Side / Бизнес-Сторона </li></ul>
    21. 21. <ul><li>Ingame Ads </li></ul><ul><li>Lighter to Load </li></ul><ul><li>Cross-platform </li></ul><ul><li>Реклама внутри игр </li></ul><ul><li>Быстрая загрузка </li></ul><ul><li>На всех устройствах </li></ul><ul><li>The Business Side / Бизнес-Сторона </li></ul>
    22. 22. <ul><li>Micropayments </li></ul><ul><li>Subscription-model </li></ul><ul><li>Social Games </li></ul><ul><ul><li>On Facebook </li></ul></ul><ul><ul><li>Stand-alone </li></ul></ul><ul><li>Микро-транзакции </li></ul><ul><li>Модель подписки </li></ul><ul><li>Социальные игры </li></ul><ul><ul><li>На фейсбуке </li></ul></ul><ul><ul><li>Вне соц. сетей </li></ul></ul><ul><li>The Business Side / Бизнес-Сторона </li></ul>
    23. 23. <ul><li>Licensing </li></ul><ul><li>Same model as Desktop Flash games  </li></ul><ul><ul><li>Exclusive </li></ul></ul><ul><ul><li>Non-exclusive </li></ul></ul><ul><ul><li>Flat Fee </li></ul></ul><ul><ul><li>Branding integration </li></ul></ul><ul><ul><li>Highscore integration </li></ul></ul><ul><ul><li>Authentication </li></ul></ul><ul><li>Лицензирование </li></ul><ul><li>Та же модель, что и с Флеш Играми  </li></ul><ul><ul><li>Эксклюзив </li></ul></ul><ul><ul><li>Не-эксклюзив </li></ul></ul><ul><ul><li>Одна оплата </li></ul></ul><ul><ul><li>Интеграция брендинга </li></ul></ul><ul><ul><li>Интеграция хайскоров </li></ul></ul><ul><ul><li>Распознование пользователей </li></ul></ul><ul><li>The Business Side / Бизнес-Сторона </li></ul>
    24. 24. <ul><li>Distribution </li></ul><ul><li>Social Elements </li></ul><ul><ul><li>Sharing options </li></ul></ul><ul><li>Localization </li></ul><ul><li>Spil Social Network = Virality </li></ul><ul><li>Дистрибюция </li></ul><ul><li>Социальные элементы </li></ul><ul><ul><li>Опции делиться контентом </li></ul></ul><ul><li>Локализация </li></ul><ul><li>Социальная Сеть Спил: Виральность </li></ul><ul><li>The Business Side / Бизнес-Сторона </li></ul>
    25. 25. <ul><li>WAP </li></ul><ul><li>Originally not designed for touch control </li></ul><ul><li>WAP Social Games </li></ul><ul><li>WAP </li></ul><ul><li>Изначально не предназначены под тачскрин </li></ul><ul><li>WAP Социальные игры </li></ul><ul><li>Case Studies / Немного истории </li></ul>
    26. 26. <ul><li>DIVE INTO HTML5: / </li></ul><ul><li> </li></ul><ul><li>Helpful Sites / Полезные ссылки </li></ul>
    27. 27. Questions? / Вопросы? THANK YOU / СПАСИБО Send your Flash/Unity/HTML5/Mobile Flash games to : Посылайте нам свои игры : Martine Spaans, Senior Licensing Manager [email_address] P: +31 (0) 35 646 6325   M: +31 (0)6 104 969 88