Canvas, Particles and Fire

From the get-go we wanted Glacial Flame to be different. Not simply a technical demonstration of HTML5 but a game people would actually want to play and enjoy online. To achieve this we have set out to create a game that has all the bells and whistles people have come to expect with high quality animations, effects and character abilities all set atop a rich story and lore like all great role playing games (RPG).

Although the game is still in very early development we have already started to build components of the core engine and have a good idea of what we ultimately want to see at the other end of this journey. One of the first of these engine components we set out to create was the particle system.

In modern games particle engines are often used to create more fluid and dynamic effects than would be easily possible with pre scripted animations. Effects such as a burning candle or exploding magic bullet can be created using a few ‘particles’, a list of variables and a sprinkling of random, instead of hours and hours of labour behind Photoshop.

We wanted to start working on the particle system early on to test some of the limits of Canvas and see how far we would be able to exploit such a powerful tool to create the games effects. If it proved viable we’d be well on our way to achieving a more visually realistic game world and be able to apply more of our time into crafting a more complex game.

Example fire effect

Although still evolving Canvas has proved to be perfectly capable of creating the effects we wanted to achieve and we have already started to create effects for all areas of the game, from dungeon torches to snow drifts and from simple magic bullets to large explosions. If you’re running this webpage in Google Chrome or Firefox you may have noticed an early stripped down version of the particle system in the footer of this site being used to create an animated snow blizzard.

Effect creator demo

As the game engine progresses we will start to post more details on how these engine components work, tutorials on how you can replicate many of the effects and how we overcame many of the challenges presented using such new and sometimes limiting technologies.