Fieldrunners WebGL Particle System Demo

Fieldrunners WebGL particle demo - flame towers

Bocoup is excited to be working with Gradient Studios to port the hit mobile game Fieldrunners, by Subatomic Studios, to HTML5. This is the second in a series of weekly development blog posts.

Last time, I posted about some basic WebGL particle system benchmarks we ran. We were extremely pleased with the results. The next step after those basic benchmarks was to implement and benchmark the actual Fieldrunners particle system. So Gradient created a particle system demo.

The demo loads sprites and metadata using Fieldrunners’ existing assets, data, and animation files. There are no enemies in the demo, so the towers shoot at the mouse position. The demo has five fields you can play with. You can:

  • Choose a tower from the 4 available.
  • Set the number of towers to simulate using the rows/columns field, which creates a “rows X columns” grid of towers
  • Set the X and Y offset of the grid, which dictates the spacing between towers. If you set these to 0, it will appear as though there is one tower, but the game is still simulating RxC towers.

We naively load a lot of graphics, so it could take up to 30 seconds to load. Please be patient!


So please check out the demo, and have fun playing with settings! (For a particularly pretty one, try making a 16×16 grid of lightning towers with X/Y offset set to 32 pixels.) If you find a cool combination, feel free to post it in the comments here.


We moved off of Disqus for data privacy and consent concerns, and are currently searching for a new commenting tool.

Contact Us

We'd love to hear from you. Get in touch!


P.O. Box 961436
Boston, MA 02196