By Amir Elaguizy on Tuesday, October 18th, 2011 4:00 PM PDT

Over the last year, we’ve been doing a lot of R&D to make social games entirely from HTML5, CSS and JavaScript. Game development in HTML5 is a brave, not-yet-standardized world, but today marks a major stride for both Zynga and the industry. Say hello to Zynga Poker Mobile Web, the next evolution of Zynga Poker, and one of our first games to be featured on Facebook’s mobile apps and mobile site.

Zynga Poker Mobile Web was created in cross-collaboration by teams from Zynga Austin and San Francisco, as well as key contributions coming from a shared technology group focused on HTML5 game development. It marks the first game to launch after myself and the team at MarketZero joined Zynga in April 2011, a fact that we’re all particularly proud of.

The promise of HTML5 game development is pretty clear: rich, high-quality games built on one code base that can reach across many screens and platforms. The tough part is actually making it work. The team spent countless, trial and error hours trying to make it work, and here are some of the things we learned:

  • WebSockets: Zynga Poker Mobile Web is one of the first games to utilize WebSocket connections on a massive scale. Using WebSockets in Zynga Poker HTML5 delivers smooth, high-speed gameplay that allows for a synchronous experience on the mobile web. How fast is it? It varies based on connections, but the game loads in seconds and refreshes almost instantaneously. The problem with WebSockets is that there are currently two active specifications since it’s still being standardized. We used Socket.IO in order to support both specifications seamlessly. Socket.IO also allowed us to support two “fallback” transport mechanisms: Flash sockets and XHR. Since iOS has good WebSocket support, these fallbacks weren’t necessary, but can allow us to turn up support for nearly any browser on the connection layer.

  • CSS3: CSS3 allowed us to create more fluid animations and richer visual experiences without slowing down gameplay. For example, CSS3 animations allow for players to flip cards in 3D and 2D, and drag and drop sliders – all on a mobile web browser. CSS3 also helps the development team utilize the actual graphic chips of a device, and off-load process and logic from the interface to the browser. This results in richer animations without sacrificing gameplay speed.
  • Offline Application Features: Zynga Poker Mobile Web uses features of offline applications – new caching APIs and local storage – to increase app load times after a player opens the app for the first time. In the future, this may allow us to leverage offline features and local storage to save session history and allow players to play hands without an internet connection.

Overall, game development in HTML5 is so new that almost every aspect of design was a learning opportunity. The team worked around bugs, built on previous experience and learned a lot through trial and error.

Zynga recently joined W3C and will contribute to building industry standards that enables rich social games in the browser across multiple devices. We also just released our first HTML5 open source projects at https://github.com/zynga/scrollerand https://github.com/zynga/viewporter.

Sound off below with any comments or questions. We’d love to hear from you.

 

4 Responses to “Going all in on Zynga Poker HTML5”

  1. Andrew Reedy Says:

    Socket.io woot! good to see a large application using websockets.

  2. IDFuze Says:

    We made a game’s cards using socket.IO too …
    you can test it on http://defycards.com

    or here a demo http://defycards.com/home/coinche
    The demo use bots to communicate to the server via socket.IO

  3. Alex Says:

    HTML5 games seem to be really prospective to the market. Many iTunes-hosted apps are HTML5s in Phonegap wrapper. Recently I’ve run across a gaming software called Enterra Poker – they have a HTML5-based client, and it’s already sold widely. The demo is here: demo.enterra-poker.com/html5/index.html . I’m not sure about the price, but I guess it has its own part of the market. So we’re getting an all-round HTML5 perspectives :)

  4. Phong Nguyen Says:

    Is Zynga still working on updating html5 games?

Leave a Reply

Connect with Facebook