Palagpat Coding

Fun with JavaScript, HTML5 game design, and the occasional outbreak of seriousness

Let's Make a Canvas Library

Sunday, June 3, 2012

This past Friday I was privileged to speak at the first ever Utah JavaScript conference, UtahJS, in Salt Lake City. My talk centered on the challenges inherent to using HTML5 Canvas to build rich internet games, and advocated the (perhaps radical) notion that instead of using one of the many, many available game frameworks or libraries, aspiring game devs would be better off writing their own:

  • you can be assured that you're not pushing any extra, unnecessary bytes to client devices (especially important on mobile)
  • you have full control over your module's interfaces, so don't have to conform to someone else's coding style
  • you get a better understanding of how things work, which becomes important when you need to debug things that go awry.

The talk was primarily focused on principles, rather than on concrete code examples, although I did have a little time at the end to briefly run through some of the code I'd written for Canvassa, which evolved into Infinite Dungeon, and which I am now porting to Fenjin. I got the sense both from questions and comments during my talk as well as several conversations afterward that people wanted a little more meat. So, let's build something together!

Let's Make a Canvas Library is a new series I'll be writing here on Palagpat Coding. Together, we'll walk through the coding of a simple HTML5 Canvas game, building up our custom game library as we go. Over the coming weeks, I expect to cover the following topics:

  • Preloading & caching game assets (images, sounds, etc)
  • Constructing the game loop
  • Managing sprites
  • Handling interactions between the player, enemies, and stage (i.e. collision detection)
  • Basic physics (and why you probably don't need Box2D)
  • Cross-platform sound
  • Multiple input/control methods

It's likely that this list will change as the game begins to take shape, and some topics will take longer to cover than others. My goal isn't to build something robust and put it on Github for all the world to use; rather, it's to walk you through building something that gets you started with your own library, custom-tailored to the kinds of things you'd want a library to do for you.

You can expect to see the first article in the series this Friday. Until then!

You have been reading Let's Make a Canvas Library, part of the random geekery that is Palagpat Coding: the personal blog of Rylee Corradini. If you'd like to leave me feedback, you can usually find me lurking on Twitter, where I intermittently share and comment on similar topics.