WebGL Batch Manager and Tint Support
This week I've been hard at work on the new WebGL Batch Manager. This manager is responsible for batched Sprite and Image rendering. I took the previous version of it, then took the multi-texture code Felipe wrote, and rebuilt the whole thing from the ground-up. It's got new vertex and fragment shaders, that allow for more control over the vertex colors, as well as a reduced main loop. The impact on reducing memory use has been dramatic. But it also has allowed me to open up some new features to you, pretty much for free (in terms of computation).
For example, you can now tint images with a different color for each corner of the quad. Taken from one of the new examples I coded, the images below show the effect. The black and white image on the top is the original texture with no tint applied, and the one below is with different tint colors per corner. As you can see, you can create some striking effects from this one tiny change alone.
As well as new tint options, you can now specify a background color that appears behind any Sprite. You've direct access to r.g.b values on the Sprite, so it's easy to apply tweens to them. The background color shows through any area where the alpha value of the pixel is less than 1.
This can be a really handy way to create roll-over effects, debug effects, or to color in assets based on different settings or levels. For example in the image below, the world map is transparent, and the Sprite has a purple background color set on it, so it shows clearly through the map area. There are lots of uses for this, beyond this little example, but it's another small new feature that was added in to make all our development lives a bit easier.
With the Batch Manager complete, WebGL rendering is now back in full flow and working again. While there are still a few areas to cover, such as improving the structure of the Stencil Manager, I'm very happy with how things have progressed this week.
It's a really great feeling to have the code so tidy at long last. I set-up a bunch of new, quite strict, ES Lint rules before I started work on this version, and I've been adhering to them consistently. All of the old Pixi code has been rewritten from scratch, following the code structure guides, and piles of classes have been removed, and inheritance chains taken out back, and buried away where they belong. As strange as this sounds, I can really feel the improvement just in the tests I've been build, and I can't wait to get this in a state where you can all begin to play with it too. It really doesn't feel like being far off that point either.
There are a number of things I'd like to do with the State Manager first though. I want to bring the Camera, and lots of other systems (like the Clock, Tween Manager, etc) and pull them all in to the State itself. What this means is that each State will have its own camera, tweens, and so on. Rather than existing on a global 'game' level, which will also set me up in a perfect position to have parallel states, something I've wanted to give you all for a long time now.
So keep an eye on the repo! I push code there literally every day, and you can get a sense of what I'm working on from the commit messages. Thanks to the Patreon funding I'm in a position where I can really knuckle down, and focus solidly on Phaser for the rest of the year, which is really awesome! Have a great week everyone.
This week I've been hard at work on the new WebGL Batch Manager. This manager is responsible for batched Sprite and Image rendering. I took the previous version of it, then took the multi-texture code Felipe wrote, and rebuilt the whole thing from the ground-up. It's got new vertex and fragment shaders, that allow for more control over the vertex colors, as well as a reduced main loop. The impact on reducing memory use has been dramatic. But it also has allowed me to open up some new features to you, pretty much for free (in terms of computation).
For example, you can now tint images with a different color for each corner of the quad. Taken from one of the new examples I coded, the images below show the effect. The black and white image on the top is the original texture with no tint applied, and the one below is with different tint colors per corner. As you can see, you can create some striking effects from this one tiny change alone.
As well as new tint options, you can now specify a background color that appears behind any Sprite. You've direct access to r.g.b values on the Sprite, so it's easy to apply tweens to them. The background color shows through any area where the alpha value of the pixel is less than 1.
This can be a really handy way to create roll-over effects, debug effects, or to color in assets based on different settings or levels. For example in the image below, the world map is transparent, and the Sprite has a purple background color set on it, so it shows clearly through the map area. There are lots of uses for this, beyond this little example, but it's another small new feature that was added in to make all our development lives a bit easier.
With the Batch Manager complete, WebGL rendering is now back in full flow and working again. While there are still a few areas to cover, such as improving the structure of the Stencil Manager, I'm very happy with how things have progressed this week.
It's a really great feeling to have the code so tidy at long last. I set-up a bunch of new, quite strict, ES Lint rules before I started work on this version, and I've been adhering to them consistently. All of the old Pixi code has been rewritten from scratch, following the code structure guides, and piles of classes have been removed, and inheritance chains taken out back, and buried away where they belong. As strange as this sounds, I can really feel the improvement just in the tests I've been build, and I can't wait to get this in a state where you can all begin to play with it too. It really doesn't feel like being far off that point either.
There are a number of things I'd like to do with the State Manager first though. I want to bring the Camera, and lots of other systems (like the Clock, Tween Manager, etc) and pull them all in to the State itself. What this means is that each State will have its own camera, tweens, and so on. Rather than existing on a global 'game' level, which will also set me up in a perfect position to have parallel states, something I've wanted to give you all for a long time now.
So keep an eye on the repo! I push code there literally every day, and you can get a sense of what I'm working on from the commit messages. Thanks to the Patreon funding I'm in a position where I can really knuckle down, and focus solidly on Phaser for the rest of the year, which is really awesome! Have a great week everyone.