Distrubition much easier over compiling for different operating systems. Being familiar with Javascript makes it an easy enough transition. Get to be one of the cool kids.
Can be harder to monetize. Users are quite used to playing games in their browser for free. Mobile market however is not much different.
Performance is another biggie. You only have 16ms to do all your updating and draw calls to hit that mark. It's not a lot of time. This is much more noticable when you start coding for mobile.
I've had trouble testing it myself, as you need to do things in a fairly performant matter, but I've read that WebGL tends to perform a bit better over the Canvas. OpenGL is very very good at drawing things like textured quads really efficiently, and a crap ton of images at once. Canvas tends to be better suited when you're controlling what objects are repainted each frame, so not re-drawing EVERYTHING all the time.
I myself haven't run extension differences. Trying out some simple game demos on both canvas & webgl for 2d games led to similar outcomes. Most slowdowns I have run into on my end have been more due ot lacking optimizations, too much garbage collection, or too many calculations per frame. I think WebGL can be more of a smart usecase when you want to start using its in depth features. Mainly things like shaders, and its really powerful texture mapping.
The nice thing about webGL is it can also be a target platform if you're writing OpenGL ES spec code in another language for different platforms. Cocos2d-x which is a crossplatform C++ library has an alpha build using emscripten to compile out javascript.
- The drawing API is really easy
- Great way to dynamically scale graphical items, over using images
- Better support across browsers & devices
- More control and power
- Faster
- You can get into using GLSL to apply a lot of different effects and other cool stuff without dropping frames.
- OpenGL is meant for this kind of thing
- Really 3d is where OpenGL is at. If that's your thing, definitely check out three js & babylon js.
Being able to reach a game at a URL is one thing, making it easy to get to. But we have so much more then that. The web gives us fairly easy encoding on the front end. Think I18n. You can use things like local storage or even URls for save points. Think of it like game codes back in NES days. Send your friend a link with your save point to try your character out for example. We have all this awesome HTML & CSS3 stuff to create great UI if need be. Just drop some Dom elements over top of the canvas with some good positioning tricks, and you have an easy to use UI. I don't think C++ programmers can boast about doing that too much.
I'm not sure if there's a direct answer to this off the bat. With traditional javascript, try only to create new object during loading screens or onload, to reduce the amount of garbage collection. You don't want to trigger a cleanup when the game is running.
- draw what is only on the screen
- also only update what is on the screen. Try to minimize things like animations processing while not being viewed for example.
- Limit & reduce heavy calculations like collision detection
There is of course ASM.js, and creating it via emscripten. You can cold a whole game or the heavier parts like physics in C or C++ and then compile it to this pretty slick running javascript code. LLJS is also something of note, but it's a really early experiment, so it's not something I'd recommend for production code.
With Emscripten itself. I played with the examples a bit. It seems to have a fair bit of flexibility, supporting legacy functions like glBegin and glEnd. I think this is a great option if you're coding something using C/C++ and wish to create a web port. If you're building a fancy game and you need a lot of performance, C++ can be your main toolset. From there use emscripten to port the game to the web.
Going back to javascript, if you need to use WebGL and you want it to run on phones, tools such as CocoonJS are for you. You can package a native version of your app that is hardware accelerated and supports WebGL. It runs all your HTML5 code without much effort. Can literally zip up your code, and test it on the CocoonJS launcher app.
There are engines that use WebGL and fallback to Canvas.
There is also the rendering engine: pixi.js, which does not implement any game framework for you, but is known as a very fast renderer. This is what Phaser uses for its rendering. Because of this, I tried forcing the renderer with Phaser to see frame rate differences. For this small demo just simply rendering many objects, it ran at about 25-30 fps. For the canvas, I sadly couldnt get it to work on my phone in CocoonJS. Running it in canvas mode on the browser though gave me about 23-25 fps.
More recently, Pixi.JS added sprite batching to the webgl renderer, giving more potential performance benefits.
My engine of choice. I started using it and tinkering with it in the later part of 2012. Since then it has improved quite a bit. It's a fairly feature full framework for creating 2d games. It has:
- Animation Support
- Object pooling
- Physics & Math support. There is a current implementation about 95% done that is replacing the physics with something similar to that of a quad tree. Giving us more fancy shape collisions and all sorts of awesome stuff
- Texture packing
- Tiled map editor support
- Screens/game states (Title screen, play screen, pause)
- Simplistic camera, can have it follow an entity as it moves around
- Spine (skeletal animation). Though the implementation is very early.
The engine itself is currently only using a canvas renderer. We've had some minor discussion on implementing Pixi.JS as the renderer to further take advantage of WebGL functionality, especially when mobile devices come to support it better. I started noting what would be required to get this done, but presently we're more focused on getting all the features and fixes we want in for 1.0.
Just try playing with an engine. Try out Phaser, that one is pretty awesome, and works in a more modular/component pattern as supposed to inheritance. Check out html5gameengines. The site has a list of free & paid ones, rated by how frequently updated they are, features and so forth. Try to make a simple game. Maybe just a coin collection platformer, or a pong clone. Further more, once you get a bit familiar, try doing a game jam, join LudumDare. Join the next TOJam.
Oh cool, didn't know about pixi =]