Over the week I hacked on some code for a 2D particle engine + effects designer. My upcoming game Stellar Combat needed some cool particle effects I thought, but I wanted an easy way for me to create new effects because they’re going to be important for the game to look good visually in my opinion.
Right now the particle engine I worked on only has a Canvas renderer and it allows you to color the particle’s texture which is actually an expensive task to do (profiles I ran show that drawImage() is the blame for that). Stellar Combat is starting to use pixi.js for rendering now so the particle engine will probably have a Pixi renderer as well, which I hope will improve the engine’s performance. I looked at the CanvasRenderer in pixi.js though, they seem to use the same method I do for tinting images so it may be just as slow.
You might be thinking “Why not use WebGL for rendering the particles?”. Well, I’d like to use WebGL but it seems like Pixi.js’s WebGL Renderer actually performs worse than its Canvas Renderer on mobile/CocoonJS. I thought it was strange but apparently older phones have poor graphics cards to be able to do WebGL effectively or something. And I test Stellar Combat on an older Samsung, so WebGL is a no-go for now.
The particle engine is pretty much finished, but the editor needs work as it’s missing some values you can change and it doesn’t export JSON yet. Won’t be the main focus next week but instead something on the side if I get bored working on the rest of Stellar Combat.