This is a great article, but if you're really going to make a canvas game then you're much better off using a game engine. I recommend MelonJS[1] or Impact[2] if you don't mind the cost. I also have a side project that compares JavaScript game engines in much the same way TodoMVC compares MV* frameworks: http://city41.github.com/breakouts
Seems like there are at least one js engine based on canvas coming out every day.
I have been working on a pirate game based on canvas at http://constantsail.com , and I have to say, it is so simple to work with canvas that there doesn't seem to be a huge reason for these game engines. If you need canvas to do something that it doesn't you just tack on a function.
I guess the thing is, it is so easy to start building a game engine, everyone is starting to do it. I find it is easier to just start with the basics, and when you start to repeat yourself or do anything complicated, just encapsulate it and keep building.
Hi, I wrote the majority of that part of the project (canvas stuff) & that section of the article – the simple answer is that I have a lot of experience working with the canvas API directly, but little to no experience using any of the popular JS game engines out there (I played around with Phaser years ago, but not very much). I don't think it would've saved me any time to be honest.
I'm currently writing my 3rd HTML based game, and I'm so tired of using jQuery and DOM directly, so I want to replace it with canvas. Game is a turn-based strategy, so performance is not an issue (there will be some animations, but rare).
I looked at the canvas and then at a lot of 2D libraries that can speed the development and prevent me from reinventing the wheel. I'm overwhelmed with options. From some 20+ I investigated I narrowed the list down to these:
- CanvasEngine
- Cocos2D
- MelonJS
- Quintus
- EaselJS
I've found canvas to be more than powerful enough for my 2d game http://www.towerstorm.com even with hundreds of animated minions and thousand of bullets moving across the screen. I'm using the impactjs engine which has made things easier as it has a few of these tweaks built in.
Multiple canvas layers is an awesome idea, as things such as the game background never change so it's a waste re-rendering it every frame. will try it out soon and see how it goes.
And sorry, one more thought: Canvas work can itself be abstracted with frameworks like OpenLayers or PixiJs or Unity. It's a testament to how powerful browsers have become that you can run full MMORPGs or other games in the browser. But that all depends on being able to download a huge Javascript bundle at load time, but then the rest of the experience is usually pretty smooth.
Games and maps are just an extreme version of that, but other examples where clientside DOM apps with heavy JS can still be faster (compared to old school server-side HTML) and easier to work with (compared to canvas) are email, e-commerce, ebooks, dashboards, chat, forums, video tubes, search and filtering, galleries, documentation, project management, etc.
Wow, thanks for the details! I'm definitely going to have to grab a copy and take some time to try out Impact, it looks like a ton of fun. It's pretty clear we're going to start seeing a lot of real games coming out in HTML + JS soon.
As for canvas, the way browsers are competing on improving speed these days I don't think slow rendering is something we'll have to worry about for much longer, and with IE9 almost out it will be possible to drop support older IE versions soon enough too. Fun times to come!
yeah, i agree canvas is too low level, that's why i suggested one of the game engines that use it under the hood (thus abstracting a lot of the complexity).
Phaser is a pretty decent "batteries-included"-style engine (definitely easier to use than pygame, despite js not being as nice as python).
agreed, canvas will probably perform better because it is made for animations where as DOM was not made with animation in mind. Plus canvas animations are, in some cases, hardware accelerated i believe?
The problem is that the HTML DOM is just to slow for any game that has some action going on. And as soon as you switch to using the canvas to render your game, you're back at figuring out and implementing stuff like object collisions yourself.
It's really easy to write simple games with the canvas element. I recognize it lacks a lot of the WYSIWYG tooling flash had but you don't need frameworks.
Thanks, dylz. I think I am not interested in high-performance graphics, so I am not sure I am fond of working only with the <canvas>, even with these abstracted game engines.
I might just sit for a day to write beautiful CSS and use animeJS or something like that to go back to DOM approach of doing this.
I personally really like to just use plain javascript and the canvas API. I found the tutorial on mdn very useful (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/...), and I enjoy the simplicity of not using libraries and tools.
I've also used EaselJS, which is also pretty good (but doesn't offer me anything I really need), and PixiJS, which is supposed to be very fast, by using WebGL where possible.
Have you considered using Pixi.js instead of pure canvas? Pixi.js uses WebGL with a canvas fallback and performance is much better:
http://www.pixijs.com/
These engines generally don’t use the DOM; instead, they render in a canvas element and provide you a framework to deliver logic and drawing instructions to each frame before it renders. That’s an entirely web-standards-compliant approach as Canvas was meant for this. There is stock code and art out there to save you time creating in-game objects for any particular engine (my personal preference is Phaser. )
I'm currently working on an web ide that use the Canvas instead of the DOM. The Canvas is very nice to work with, it's high level and hardware accelerated.
I would say that JavaScript is not exactly the best language to learn for creating games. Aside from the Canvas tag there is no good way to do graphics with JavaScript (at least no simple way that isn't a bunch of arcane HTML tricks which wouldn't make any sense to a beginner).
And, if you're using the Canvas tag you're excluding IE users. If you're only going to reach a limited audience anyway, why not use Flash and reach a much bigger limited audience?
On the other hand, I guess Canvas teaches you about drawing to buffers, while Flash teaches you about more abstract things.
[1]http://www.melonjs.org [2]http://www.impactjs.com
reply