Smashinglabs

Sebastian Poręba's blog

What do we need for HTML5 games to be awesome?

After onGameStart conference I’ve been thinking about what are the actual differences between desktop and browser games. What should be done to make browser games better and to finally compete Flash? This is not only about browser engines and WebGL, it’s also about developers and techniques used.

Contents

  1. Better graphics
  2. Involve desktop game developers
  3. Easier animations
  4. Code like in C++
  5. Fix WebGL
  6. Write better WebGL tutorials
  7. More physics engines
  8. Kongregate for HTML5

 

Better graphics

Most of the current HTML5 games are not very beautiful and common user/developer thinks that it’s because of the technology limits. It’s not. Let me say it clear – everything that can be done in Flash, can be done in HTML and CSS as well. It may be harder to code some things, but performance is more or less the same.

We need to get designers involved, we need to use only high quality graphics in our games and tutorials. Stop using stupid rectangles, boxes and retro games in your work, it is black PR for HTML5. Adding something of high quality is very easy! For my university I wrote a simple fighter game and it was rated A not because the code was great (it wasn’t, it’s based on jQuery) but because the graphics were nice and it was more or less playable. And they were absolutely free.

 

Involve desktop game developers

I recently have started studying gamedev and I met some game developers at the university. Probably not the best ones (hey, it’s only university), but good enough to show me that we suck. There is so much knowledge already there, about optimization, tricks and techniques to use and make your games so much better! Even during onGameStart only some of people actually knew all this stuff (good example: Brandon Jones). If you have experience only with front-end programming, you can’t switch easily to game development. If you want to make 3D games, get a book about writing games in C++, about physics engines. For 2D games Flash resources should be more suitable. We have a lot to learn.

I think that for the next onGameStart there should be few good desktop gamedevs speaking (hey, invite John Carmack ;-) ). Convincing some of them to switch to JS is also a good idea. A great example is Erik Möller team porting Emberwind from C++ to JS. Performance and graphics are great, game is already successful and there should be more projects like this. I believe that, with enough effort, every game can be ported to HTML5.

 

Easier animations

To be honest – CSS3 animations have terrible syntax. In Flash you draw a path and say to object “follow this path”. It’s plain and simple. There are some projects that help with animations, but are not very popular yet. They should be.

 

Code like in C++

Most of the desktop games are written in C++. It’s not as flexible as JS, but there are few methods that are missing in JS and it will cause a lot of troubles.

First of all, there are no operators. If you want to do some math in C++, you define operators and write something sane, as:

V3 = M1 * V1 + V2;
V4 = V1 + M1 * M2;

You know how this code would look like in JS?

V3 = M1.multiply(V1).add(V2);
// and even worse
V4 = V1.add(M1.multiply(V2));

There is a lot of very advanced math involved in physics engines and it quickly becomes very messy.

JS also misses variable types. It’s actually the biggest problem in my opinion. Changing types is forbidden anyway (because it breaks browser JIT).

var a = 5;
console.log(a);
a = "aaa";
console.log(a);
// you will burn in hell for such code

There are typed arrays, but they don’t help that much. We still can’t use function overloading. JS should be improved or we need tools that would help working with types. Check this paper for some scientific stuff about types in JS. Or again, write some great tool for that and become famous.

Memory management is also better in C. Going the Java’s way and firing garbage collector from time to time is not very good.

Most of the things in this paragraph are just me complaining. I don’t think there are any chances that it will change anytime soon (and I spoke with some ECMAScript 6 guy about that). You may disagree with these arguments, but unless you’ve read something like Seven Languages in Seven Weeks or programmed few games in C++, I’m not going to listen. JS fanboys, please go away.

 

Fix WebGL

WebGL should be secure and easy to use. There is a lot of talk about bugs in drivers that allow attacking your computer. OpenGL was designed to trust running programs. By installing something on your computer and running it you are confirming, that you let this program to use GPU power. It would be easy to do the same with inline content. Every browser should ask user, if he allows website to run WebGL content.

I also have no idea why we have to write our own shaders. There should be a default graphics pipeline like in OpenGL, so we could learn faster. GLSL is a good thing, but now it is raising entry level of WebGL a lot.

And IE team, for Zark’s sake, could you support WebGL or at least WebDirectX?

 

Write better WebGL tutorials

Learnwebgl.com is quite good tutorial, but still far from perfect. Get started with WebGL is in my opinion better, however also a very basic one.

There should be more focus on reusable tools and functions. At the moment you have to either be very persistent, use some framework (which is not always a good solution) or give up using WebGL.

 

More physics engines

Stop making rendering frameworks. We have these already. What we need now are physics engines like Bullet, but working with WebGL. Writing collision detection is pain in the ass, and collision reaction is even worse. There is a lot of awful math to implement and optimization to do, I think that it’s far beyond most of the programmers level (including me). If you are able to write a good engine that supports any of existing rendering frameworks, please do so. The world is counting on you.

 

Kongregate for HTML5

Somebody said that on the conference, that we should have some huge game portal that supports HTML5. And in the very same day Kongregate approved the very first HTML5 game created as a promo for onGameStart. Awesome :)

Other things that were already said

Great and more technical list: http://codeflow.org/entries/2011/sep/11/webgl-and-html5-challenges-for-the-future/
Go and read it, it may be even more important!

I hope that in a year or so I’ll write a summary how everything got better. For now I’ll try to push things by myself a little and write some (hopefully) awesome games. I hope you will do the same!

18 Responses so far.

  1. I agree with you here on all points but one: Please please please don’t introduce a fixed function pipeline to WebGL! Stripping it out of OpenGL ES 2 was one of the best decisions that KHRONOS and Co. have made yet.

    You complain that drivers are buggy, but such a feature inevitably makes them worse. Additionally, such render paths are rarely optimized (because they should only be used for debugging/development), but frequently used (because they are easier). This leads to a lot of poorly performing, badly written code because we allow the developers to be lazy. It also leads to poorly written tutorials and lots of bad advice. As such, the whole API suffers.

    For a good graphics dev writing shaders is not an issue. If you want the ability to throw graphics up on screen without worrying about that step (a legitimate concern) then you probably want to be using a framework anyway like J3D or three.js. They’ll hide most of that from you.

    • Sebastian Poręba says:

      What I meant is that learning WebGL and shaders at once, when all you know is how to use few-liners in jQuery on your site is nearly impossible.
      I was lucky that I had worked with OpenGL before, so it was somehow familiar. But still, amount of things one have to learn to get even simple WebGL demo working is terrifying.

  2. David Balatero says:

    One thing I’d like to see is better support on the audio library side of things. Doing good audio timing (especially with multiple synchronized audio samples) is near-impossible in current browsers.

  3. dim says:

    +1 “Stop using stupid rectangles, boxes and retro games in your work”, agree :/

    +1 for operators !!! its big a pain to write 3d maths without operator overloading => PS: we should create something to vote for next JS features ?..

    +1 We need better browser support for this: http://www.html5rocks.com/en/tutorials/file/filesystem/, to load and persist assets

    +1 for mouse lock specs, impossible to play an fps game without this

    -1 “And IE team, for Zark’s sake, could you support WebGL or at least WebDirectX?” => i have better suggestion
    for IE team: “implement webgl or DIE”

    +1 for “portal that supports HTML5″ => PS: you give me some cool idea here about evolution of one of my projects: html5snippet.net :p

  4. Simon says:

    Maybe we need to redefine the concept of a ‘game’, especially as mobile devices become the primary games console for many people?

    There is an obsession with re-creating console games in the browser: lush graphics, a superior sound mix, fast rendering of multiple polygons.

    These don’t translate to mobile devices anyway as the screen is generally too small and the processor too weak.

    I suggest HTML5 can be used to build fun games where the action happens inside a much more powerful machine: the brain and its imagination.

  5. Zilluss says:

    I think the main problem is, most browser games are considered “minigames”. Such games are often built by small teams. The teams consist of either pure programmers or pure designers. In many cases, this leads to shitty graphics or shitty code. Don’t get me started with sound! People need to figure out that HTML5 and JS gives them enough power to create real games! Not just minigames that fill a coffee break. Game creators need the courage to form teams with dedicated people for code, graphics, sound and scripting (e.g. for levels).

    • Sebastian Poręba says:

      This is exactly what I meant. We need to stop complaining about technology. Games like WhateverVille can be created with very basic techniques. What makes them profitable is good team, good graphics and addicting gameplay.

  6. Xion says:

    I challenge your claims about JS being ill-suited for game development and vastly inferior to C++. (And using a handful of languages extensively, as well writing an extremely popular & comprehensive C++ tutorial, I think I have merits to do so :)).

    Operator overloading is a neat thing to have but it’s no way an absolute requirement. C doesn’t have it, Objective-C doesn’t have it, ActionScript doesn’t have it – and those are languages where quite a lot of games have been written and are still being written. It certainly seems helpful in terms of making the “math code” more readable. But as you have remarked, such code should be hidden anyway, encapsulated in physics frameworks and renderers. Coding the actual game mechanics & logic would involve so many ‘mathy’ operations then.

    As for function overloading, the case is even less obvious. Again, many languages get away without it (C, Python) and [personal opinion ahead] I’m not convinced it adds anything to code’s readibility – I’d say quite the opposite. Furthermore, overloading in dynamically typed language would have to be resolved at runtime which is quite different to what happens in statically typed ones – and not that different from having the explicit if(typeof(…)). Finally, a JS-specific issue: lacking user-defined types, it doesn’t really have any means for overloading resolution. Prototypes… well, they are well-known to be inefficient.

    As for arguing that JS would be better off statically typed… That’s very subjective and I would rather not delve into such discussion, recommending you to do the same.

    • Sebastian Poręba says:

      I agree with you that operator and function overloading is not absolutely necessary for writing games. It may be a question of programmer’s preferences. I may even be completely wrong and it bugs only me. Still, looking at simple math example I’ve shown, I can’t help feeling that it is a wrong way to do things.
      On the other hand, languages like Lisp do use prefix notation and it works just fine.

      From all the comments I see that most of people are still thinking mostly about language features. This was exactly what I tried to avoid by skipping sound, fullscreen, mouselock and all the tech stuff. Please focus on “make better and prettier things” part.

  7. Sebastian Poręba says:

    More comments on Hacker News: http://news.ycombinator.com/item?id=3036813

  8. I’m pretty happy when I see what you write about what is remaining for making good html5 games.

    Why ? Because most of what you need now is just WebCL :)

    People are working hard at it including one of my friends (notably thanksfully to him, Fabien Cellier, aka Thallion, WebCL will be mostly object oriented rather than “C-like all-in-one namespace” with no cohesion with whatever apis are available in browsers), and I’ve seen amazing demonstrations of WebGL and WebCL working, providing some tremendous performances, even just on a regular processor, without even using the GPU.

    So mostly, your answer about physic engines, most mathematicss, etc. isn’t JavaScript, or it may, but just armed by WebCL.

    The very good thing about it is even more efficient than the usual code we produce in order to do this, and it can run on a regular processor (I’ve used the AMD driver on my intel CPU and it worked well, but it seems they have locked it down to their own CPUs, so now it’s up to intel to make it’s very own drive) and it perform better than regular C/C++ code (often like ten time faster in what I’ve seen).

    So you have more than usual native performance, and already a bunch of code for managing physics (thanks to already available OpenCL fragments ), textures, collisions, or whatever matrix based math you may have, in a very efficient manner.

    • Sebastian Poręba says:

      I’d love to see WebCL coming to browsers. I actually tried enabling it few months ago, but support was even worse than for WebGL (I think my Intel card has problem even with OpenCL). It’s so good to hear that there is some progress in this topic!

      • I also have an intel gpu, but I run opencl on my cpu, and it’s already pretty good, like… amazing :)

        • Sebastian Poręba says:

          I have some old unsupported crap. I actually spend two weeks trying to force it to work with correct driver, which Intel was trying to prevent from being installed with older cards. Long story, probably boring. Anyway, OpenCL is not working on my card.

  9. […] Auf seinem Blog führt Poręba die einzelnen Punkte zur Verbesserung der HTML5 Browsergames noch gen… […]

  10. Sebastian, I can appreciate your points and views here, but I couldn’t help but notice that the graphics in your game were just as retro and terrible (if not moreso) than the html5 tutorials your are talking about.

    That was terrible. I’m considering leaving html5 alone because all of the games look pixelated, grainy, and just…awful. I’ve only seen about 3 that had 1997 graphics. The rest looked 1986. So, Idk.

    • Sebastian Poręba says:

      Well, my game has quite decent 2D graphics, but keep in mind that it was an university project and that’s the exact reason why I never published it. I think that gameplay is a bigger issue here than graphics. Now I’m working on WebGL and my next project should be better.
      But there are some html5 games that have at least good graphics, for example Emberwind.

      And speaking about tutorials you probably think about WebGL, not html5. Html5 tutorials look usually as terrible as my game. But I don’t want to over-criticize people, after all I never did anything looking better. Keep in mind that I wanted to inspire others, not to praise myself. I have a long way to go.

  11. […] recently released source code, can give you an idea of how much involved it can get). And since this is considered to be one of the important things  that 3d games need, I was not happy with my hands off answer of […]


  • RSS
  • Facebook
  • Twitter

FAQ about Wordpress

This came as a surprise for me but gMap is ...

gMap 3.3.3 released

It was a looong time since I last visited gMap. ...

Talks for Google Dev

Two new slide decks appeared in lectures tab. This time with ...

Talks and lectures w

Every now and then I spend a weekend watching various ...

3D Tetris with Three

In the fifth part of tutorial we add some final ...

FAQ about Wordpress

This came as a surprise for me but gMap is ...

gMap 3.3.0 released

Christmas came early! New version of gMap is ready!

Lecture for GTUG: Ja

Today I gave a lecture for GTUG Krakow about optimizations in ...

Unit testing for jQu

In part 1 I described basics of unit testing in ...

Unit testing for jQu

In part 1 I described some basic concepts behind unit ...