Hello everyone,
I'm working on a little project that I named Pixi-Canvas. The idea is to wrap the Pixi renderer in an API that's similar to the 2d canvas API. This allows you to use functions such as context.drawImage, context.fillRect, context.save, context.rotate etc. like you would with canvas.getContext("2d")! If you're already using Pixi or Phaser, then obviously this is not useful to you. The project is very similar to webgl-2d (if anyone remembers that), except this uses Pixi as the underlying renderer.
You can find this and more info here https://github.com/LuckyKat/pixi-canvas. Please check it out!
Motivation
While Pixi is the best and fastest renderer out there, I found that Pixi introduces a lot of structures that forces you to work in a certain way. I feel like it's half a game engine already! For my own game engine, I wanted to introduce my own entity-component system, parent-child relations and get in between the render calls per sprite. I felt that Pixi makes that pretty difficult! Working with the 2d canvas API in that sense is much easier, so I wrote a wrapper that could draw pixi sprites like you call context.drawImage. I decided to share this method and write a library that's easy to use.
Performance / difference with Pixi
Using Pixi-Canvas will definitely be slower than using Pixi normally. To test and compare the performance, I replicated the Pixi bunnymark.
On my Surface Pro 4 i5, the amount of bunnies I could spawn before hitting 30 fps:
Canvas 2d: ~4000 bunnies
Pixi-Canvas: ~30.000 bunnies
Pixi: ~55.000 bunnies
Note that this seems to differ a lot per device! I tried this on a Mac Mini the other day and Pixi-Canvas performance was a mere 5000 bunnies. So please give this a try on your own computer and let me know what your performance is. For comparison's sake, I copied Pixi's original bunnymark and turned off the ParticleContainer. ParticleContainers are much faster, but very limited in functionality, so it would be an unfair comparison. I uploaded the bunnymarks here (If anyone from goodboydigital is not ok with this, let me know and I'll take it down):
Pixi-Canvas: http://www.heigames.com/html5/bunnymark
Pixi original without particlecontainers: http://www.heigames.com/html5/pixibunnymark
I've tried to make Pixi-Canvas as optimal as possible of course. Under the hood, it does not use Pixi as you would normally. I'd love to know any tips that could make Pixi-Canvas faster!