Dynamic Sound FX and WebGL 2D Rendering

Published on 13th January 2017

image

Hey everyone! Another busy week. The Phaser repo zoomed past 14,000 GitHub stars. Very cool :) And there have been lots of updates, so let's get on with it.

Phaser CE 2.7.3 + Updates

I published the 2.7.3 release of Phaser CE this week, is available on npm. Phaser CE has also moved to its own GitHub repository: https://github.com/photonstorm/phaser-ce

I've updated all of the links from the main Phaser repo, and tagged the 2.7.3 release, so you can now get it from the 'releases' page as well as npm. I've also submitted Phaser CE to the jsDelivr CDN and CDNJS. I'm happy to say that jsDelivr has merged it already, so it's now available on there, but it's still pending on CDNJS.

I also merged in some new Pull Requests, and started adding CE to the main Phaser web site. This will help continue to drive adoption of it.

Phaser 3 Mailing List and Developers Guide

A re-cap from last week, but there is a new Phaser 3 Developers Guide available. This is for anyone who'd like to help build Phaser 3.

There is also a Phaser 3 Google Group which I've been making good use of. Discussions this week have included how to handle 2D layering and new modern TypeScript defs. If you'd like to join the group then please do so. It is for anyone who wishes to help shape what the Phaser 3 API and feature-set will contain.

Phaser 3 Updates

This week I have added in a new Dynamic Sound FX generator to Phaser 3. If you've heard of sfxr before, then you'll be familiar with how it works. You pick an oscillator type, such as sine or sawtooth, set some parameters for it to work from, including echo, reverb and dissonance, give it some durations, and voila: instant 8-bit style sound FX, generated on the fly! It's a Web Audio only feature of course, but it's still nice to have in there, and is pretty compact too.

I also made a start on the Canvas Renderer, and will hopefully finish off implementation of that next week. Alongside this, Felipe has been working on the WebGL Renderer:

WebGL 2D Rendering

One of the ideas of this new renderer is avoiding unnecessary layers of abstraction. If we could only have a single layer between the user and WebGL API it’d be the best for us and developers. This also took me to think what are the most atomic features we should have on a renderer for a 2D engine like Phaser.

The most basic features are simply draw an image at (X, Y). With that you cover a great percentage of most Phaser games out there. I took on to make the most efficient “draw image” I could make with just pure WebGL, no abstractions or layers of any kind.

I was able to create this little demo that could render between 150k and 220k sprites at 60 FPS (tested across a few different machines). For me that was a great building bed for more features.

image

The idea now is to build on top of the most basic features, this way we know that in the core what we do will always run great. We can also build custom solutions for most common cases. For example developers generally mix primitive graphics with sprites, we could build a tailored made solution for that and make it as efficient as we can.

Go ahead and try the demo and see how it performs for you (note: demo is locked to 200k sprites). Next week we'll be merging this into the Phaser 3 code base, so we can get some real tests going with sprites and atlas frames.

image

Hey everyone! Another busy week. The Phaser repo zoomed past 14,000 GitHub stars. Very cool :) And there have been lots of updates, so let's get on with it.

Phaser CE 2.7.3 + Updates

I published the 2.7.3 release of Phaser CE this week, is available on npm. Phaser CE has also moved to its own GitHub repository: https://github.com/photonstorm/phaser-ce

I've updated all of the links from the main Phaser repo, and tagged the 2.7.3 release, so you can now get it from the 'releases' page as well as npm. I've also submitted Phaser CE to the jsDelivr CDN and CDNJS. I'm happy to say that jsDelivr has merged it already, so it's now available on there, but it's still pending on CDNJS.

I also merged in some new Pull Requests, and started adding CE to the main Phaser web site. This will help continue to drive adoption of it.

Phaser 3 Mailing List and Developers Guide

A re-cap from last week, but there is a new Phaser 3 Developers Guide available. This is for anyone who'd like to help build Phaser 3.

There is also a Phaser 3 Google Group which I've been making good use of. Discussions this week have included how to handle 2D layering and new modern TypeScript defs. If you'd like to join the group then please do so. It is for anyone who wishes to help shape what the Phaser 3 API and feature-set will contain.

Phaser 3 Updates

This week I have added in a new Dynamic Sound FX generator to Phaser 3. If you've heard of sfxr before, then you'll be familiar with how it works. You pick an oscillator type, such as sine or sawtooth, set some parameters for it to work from, including echo, reverb and dissonance, give it some durations, and voila: instant 8-bit style sound FX, generated on the fly! It's a Web Audio only feature of course, but it's still nice to have in there, and is pretty compact too.

I also made a start on the Canvas Renderer, and will hopefully finish off implementation of that next week. Alongside this, Felipe has been working on the WebGL Renderer:

WebGL 2D Rendering

One of the ideas of this new renderer is avoiding unnecessary layers of abstraction. If we could only have a single layer between the user and WebGL API it’d be the best for us and developers. This also took me to think what are the most atomic features we should have on a renderer for a 2D engine like Phaser.

The most basic features are simply draw an image at (X, Y). With that you cover a great percentage of most Phaser games out there. I took on to make the most efficient “draw image” I could make with just pure WebGL, no abstractions or layers of any kind.

I was able to create this little demo that could render between 150k and 220k sprites at 60 FPS (tested across a few different machines). For me that was a great building bed for more features.

image

The idea now is to build on top of the most basic features, this way we know that in the core what we do will always run great. We can also build custom solutions for most common cases. For example developers generally mix primitive graphics with sprites, we could build a tailored made solution for that and make it as efficient as we can.

Go ahead and try the demo and see how it performs for you (note: demo is locked to 200k sprites). Next week we'll be merging this into the Phaser 3 code base, so we can get some real tests going with sprites and atlas frames.