SPIL Games Thinks HTML5 Will Overtake Flash by 2012: An Interview

"SPIL GAMES expect that by the end of 2012 at least 50% of all new games to be HTML5."

-Scott Johnson, SPIL Games

SPIL runs some of the biggest game portals on the planet (e.g. gamesgame.com).  As far as online web games go (mostly Flash) , their operation is MASSIVE:

  • Popularity: 130 million unique visitors per month
  • Tons of Content: 47 websites with over 4,000 free online games
  • Diversity:19 languages

We caught-up with SPIL's  External Communications Manager, Scott Johnson to talk about the games SPIL wants to see from developers, and how they feel about the future of HTML5 and Flash.

How long has SPIL been running game portals?

We’ve been in business since 2001.  We’ve been focusing on online games since 2004 which is when we introduced our first game portal.

What countries do you operate game portals?

US, France, Netherlands, Germany, UK, Spain, Brazil, Sweden, Italy, Russia, Poland, Portugal, India, Indonesia, Mexico, Argentina, Japan and Asia.  However, it’s interesting to note that people all over the world access our sites.  I believe there are only about 2 countries on Earth from where we’ve not had visitors.

Have you noticed any regional game preferences? (e.g racing games in Poland, arcade games in China, etc.).

From a big picture point of view, we see general preferences to remain consistent across the Globe.  There are some exceptions, such as online versions of card and board games being particularly popular in South America.  For instance anecdotally speaking, Dominos is far more popular in South America than in a country like Holland.

Do you develop your own games?

Yes.  We have studios in Hilversum (the Netherlands), Nuremburg (Germany) and Shanghai (China).

Do you accept submissions, or do you have staff to find content for your sites?

In addition to the games we develop internally, we also rely on the developer community to find games for our sites (and of course for our HTML5 mobile sites as well).  We work proactively and reactively with developers.

Do you shy away from games with advertisements?

We do have adver games on our sites, but we don’t accept games with in-game ads.

How do you feel about "coins" games and games that include micro-transactions?

We see micro-transactions as an important development in the industry.  We’re focusing on micro-transactions in our social games this year.  In fact, on May 14 we launched our first game featuring virtual currency:Walhalla Bingo, a chat-oriented multiplayer game available on the Hyves social network. The virtual currency (“Walhalla Credits”) supplements the players’ in-game purchasing power, allowing them to buy more bingo cards and increase their chances of winning.

And, this is of course a great way for developers to generate revenue and then continue to create even cooler games.

How important are API integrations and for things like high score in your decisions for games to include on your portals?

Very important.  It depends on the game, of course, but high scores is very popular with players and keeps them coming back.

Do  "easy to learn" games get preference because instructions need less localization for your your portals in multiple languages?

First and foremost we focus on casual games, e.g.,  games that are easy to play, but not easy to master; games that are accessible, etc.  Therefore these games don’t necessarily require lengthy instructions.  Having said that, we don’t shy away from games with lots of text instructions.  Basically, it comes down to the following when choosing a game: if we feel it’s a game that will fit the needs of our users we’ll feature it.

How do you feel about the future of Flash?

What we see is that HTML5 will evolve as the new standard in mobile (and eventually browser-based) game development.  At the moment most games are based on Flash.  However, we see that to truly take advantage of the opportunity of mobile gaming (and eventually all browser-based games), developers and publishers need to focus on HTML5 for the future.   This will ensure that gamers have the best gaming experience no matter where they are or what platform they want to play games on.

You have started to send out feelers for HTML5 content.  What prompted this development?

As you know, we started out publishing gaming websites.  This went very well, but we soon realized that the game experience of our players doesn’t begin and end on our websites.  People want to duplicate the experience they have on our sites on other platforms, especially social networks and mobile devices.  For instance, when it comes to mobile we have seen more than 1 million people try to access our sites from a mobile device.

So, the interest of users on mobile was clear and we started thinking about how we can meet this interest.  However, we quickly saw a gap to do this.  Specifically, the full potential of mobile gaming for both developers and end users has been hampered by different protocols, operating systems, and platform-approval processes within the mobile world. Games and apps need to be constantly redesigned to meet the technical specifications of all these platforms which cause hassle and extra resource for developers.  Plus, players were forced to download a game from app stores and face installation hassles.

We wanted to ensure that all mobile gamers no matter what phone or operating system they used could have instant access to the games they want to play.  That led us to realize that HTML5 was the natural choice to focus our mobile plans.  It’s interesting for us as a company because we pride ourselves on being open, bringing great games to everyone no matter where they are or what platform they want to use.  HTML5 redefines the user experience because it removes the barriers to entry for mobile users to easily access and play games whenever and on whichever mobile platform they choose.   The promise of HTML5 is that if a game is developed in HTML 5 it can be easily used on any mobile device, across all social platforms, our portals or any PC [NOTE: depending on upgrade of future devices/browsers].  And, the quality of the game experience will be the same no matter what platform people use.  It brings to life the fact that gaming is everywhere.

Do you have plans for HTML5 APIs for high-scores, user-accounts, multi-player, etc?

As I mentioned HTML5 is a huge focus for us.  You can expect to hear lots more from us around it, but unfortunately, I’m not able to reveal anything that’s not yet been announced.

What excites you the most about HTML5?

It brings the promises of the web to reality.  Specifically:

  • It means apps can be developed once and deployed everywhere, saving developers time and money in development.  This will enable them to focus on developing compelling HTML5 web games.
  • It enables developers to update or improve their games and instantly make their games available via the web.
  • For developers the initial investment for an HTML5 app is around zero and the learning curve is minimal.
  • Instead of trying to develop for a specific platform, developers could choose to create a compelling HTML5 web application.
  • Exempts developers from having to deal with startup costs and approval processes.

Additionally, HTML5 redefines the user experience because it removes the barriers to entry for mobile users to easily access and play games whenever and on whichever mobile platform they choose.  If a game is developed in HTML5 it can be used on the majority of modern mobile devices.  And, the quality of the game experience will be the same no matter what platform people use.  It brings to life the fact that gaming is everywhere.

What has the response been to you your HTML5 game contest?

Since we just launched it a few weeks back, we’re not yet ready to reveal any developments here.  But, stay tuned!

What are your plans for mobile gaming?

Mobile gaming is a huge focus area for us and HTML5 is the center of our mobile gaming strategy.   Right now all our portals have a mobile version.  This was launched on 31 August, 2010 and we’ve been updating these with new games.  We’ve also just launched the developer contest where we’re offering cash prizes every month for 6 months for the best HTML5 game.  And, we’re really trying to talk about and champion HTML5 as much as we can because we believe in it so much.  While the industry is on the early side of this great HTML5 development, we here at SPIL GAMES expect that by the end of 2012 at least 50% of all new games to be HTML5.

Is there anything else you'd like to say to hardcore Flash and HTML5 game developers?

Well, I said a lot above J.  But, we’re always thrilled to talk with developers and they can count on hearing us talk more and more about HTML5.

With 130 million unique visitors across the world on 41 websites and a ranking as a Top 60 most visited online property in the world (according to comScore Media Metrix) we are the leader in online gamer.

At our core though we want to unite the world in play.  This motivates all that we do!


A look at the IE 9 HTML5 Canvas Spec

With much curiosity I took a look at the recently published IE 9 HTML5/CSS3 spec specifically to find Canvas support information. Its no secret that Steve and I are deep into a book for O'Reilly on the Canvas and IE has been a major sticking point as we progress through the chapters.

Here is the most interesting thing  I found in this document the MSDN site.

"Internet Explorer 9 Beta introduces support for the canvas element, using the 2D Canvas drawing API as its only supported context. Like all the graphics in Internet Explorer 9 Beta, canvas is hardware that is accelerated by using Windows and the GPU."

This is a very important point as we have seen some good, but not overly great performance from the Chrome, Safari, and Firefox browsers. I don't know if any of those offer GPU support, but it will be nice to test out the apps we have been working on to see how they perform on IE 9. One place that performance is not very good is Mobile Safari. Hopefully the mobile version of IE9 will offer better performance on other mobile platforms.

In the coming weeks we will test drive the IE9 Beta and report back how the performance ranks against the other Canvas enabled browsers.

Tagged as: , , No Comments

HTML5 Canvas Resize On The Fly, In An HTML Page

I've been playing around a lot with the HTML5 Canvas lately, and I discovered some very interesting things that about the size of Canvas as displayed on an HTML page.

The best way to show these is to show a demo of what I'm talking about first.  Here is a link to the demo:

Note: This demo works best in Google ChromeThe Range controls listed below will not appear in Firefox...yet.

What you will notice on the demo page is a 500x300 Canvas with the text "Text Wrangler" applied to to it.  Below the Canavs are 4 HTML form controls:

  1. A Text box to change the text
  2. An HTML5 Range Control to change the size of the text
  3. An HTML5 Range Control to change the width of the Canvas
  4. An HTML5 Range Control to change the height of the Canvas

Changing the size of the text is a no-brainer.  I added that to show that the Canvas itself could be manipulated with a form control on an HTML page.   However, the range controls for the width and the height of the Canvas are what I'm concentrating on here.  If you play with them you will notice that the width and size of the Canvas can be changed on a page dynamically.  I coded the text to stay in the middle of the Canvas, no matter what the size, with this code:

[cc lang="javascript" width="550"]
var metrics = context.measureText(message)
var textWidth = metrics.width;
var xPosition = (theCanvas.width/2 - textWidth/2);
var yPosition = (theCanvas.height/2);


The measureText() method is native to the Canvas context object.  It only has one property, width.    Since text has a default baseline of "middle", you can center text vertically by placing it at the middle pixel on the screen.  However, text default to a horizontal alignment of "start", which means you need to either set it to "center" or subtract 1/2 the width of the text to get a proper horizontal center at the midpoint of the Canvas.

Now, if you play with the range controls to chnage the width and the height of the Canvas, notice how it interplays with rest of the page.   The form elements move up and down the page as the the height is changed.   The text on the Canvas stays the same scale and centered, no matter how big or small the Canvas might be.   This appears to be the opposite of what is specified in the Canvas API:

The intrinsic dimensions of the canvas interface element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. During rendering, the image must be scaled to fit this layout size.

The image does not appear to scale when the Canvas is resized.  In fact, it simply allows for more of the Canvas to be viewed.  I saw the same effect in Safari.  It is possible that I'm reading the API spec wrong too.  No matter, the cool part is that the Canvas can completely redisplay itself, on the fly, with updated width and height without reloading the page.

It appears to me that the HTML5 Canvas is built to allow for the same types of free-flowing liquid user interfaces that can be created in Flash using "noscale" and JavaScript, but with the added feature of being able to resize the entire Canvas on the fly in real-time.  I've NEVER seen that done with Flash.  I'm not saying you can't do it, I've just never seen it done before.

Here are some code highlights:

The HTML5 form controls below the Canvas interact with the Canvas by listening for events only.  When any control is changed, event handlers are used to capture that change and then render it on the Canvas.

[cc lang="javascript" width="550"]
var context = theCanvas.getContext('2d');
var formElement = document.getElementById("textBox");
formElement.addEventListener('change', textBoxChanged, false);

formElement = document.getElementById("textSize");
formElement.addEventListener('change', textSizeChanged, false);

formElement = document.getElementById("canvasWidth")
formElement.addEventListener('change', canvasWidthChanged, false);

formElement = document.getElementById("canvasHeight")
formElement.addEventListener('change', canvasHeightChanged, false);


Here are the Event Handlers functions.  Notice that to change the width and height of the Canvas, we simply update the the width and height attributes of the Canvas object. (Note: theCanvas is the id of the the Canvas object in the HTML page)

[cc lang="javascript" width="550"]
function textBoxChanged(e) {
var target = e.target;
message = target.value;

function textSizeChanged(e) {
var target = e.target;
fontSize = target.value;

function canvasWidthChanged(e) {
var target = e.target;
theCanvas.width = target.value;

function canvasHeightChanged(e) {
var target = e.target;
theCanvas.height = target.value;


Here is the code in the drawScreen() function that renders the text based on the current width and height of the Canvas.

[cc lang="javascript" width="550"]
var metrics = context.measureText(message)
var textWidth = metrics.width;
var xPosition = (theCanvas.width/2 - textWidth/2);
var yPosition = (theCanvas.height/2);
var tempColor = "#000000";
context.fillStyle = tempColor;
context.fillText ( message, xPosition ,yPosition);
context.strokeStyle = "#FF0000";
context.strokeText ( message, xPosition,yPosition);

Check out the demo again:


Tagged as: , , 1 Comment
This site is protected by Comment SPAM Wiper.