New shader, new screenshots

Not got much done this week for family reasons, but the things I did do are rather visual so easy to show off. First I changed the width and height of the game, to 640 x 480. This is not as that will be the final size (though having it non-square does make the gameplay a little more interesting), but more so I could track down any dependencies on the screen size that shouldn't be there. I want to be able to change two numbers and everything updates.

Another Pixel Bender bug

For those interested I've created a test app to demonstrate a Pixel Bender bug (or at least a very strange behaviour) I encountered this week:


http://wonderfl.net/c/dLHH


And started a thread on Adobe's forums about it:


http://forums.adobe.com/thread/1003124

Shader bug update

I made another shader today. Nothing that interesting as it's a variation on one I'd done before, but as I added it I uncommented out a line in the game which I must have disabled while trying to fix the shader bug two weeks ago. And the bug re-appeared. Thankfully as I knew it was a shader bug and knew the last change I'd done it was easy to undo, but it was surprising as I thought I'd fixed it in the shader code.

Pixel Bender bug

The circular gradient fill shader I wrote yesterday took more time than expected as for a while it would not work: more specifically it worked fine in Pixel Bender Toolkit but not in Flash. And it failed in a particular way: on use it would instantly lock up rather than fail with an error or produce the wrong result.

Circular gradient shader

This is something I started coding today before I realised it wasn't available in the BitmapData APIs: the gradient fill available comes in two varieties, linear and radial. But the latter is always based on the distance from the centre, never the bearing from the centre as I wanted. So I wrote a shader for it, to generate a result like this:

Quaternion rotation shader

After writing yesterday's post I wondered how easy it would be to use the mathematics in a shader. This would be a natural way to extend my cross product shader, replacing the simple product in that with a more general geometric product.

Shader vs. ActionScript revisited

Last week I created a shader based on the cross product. This was a simple experiment, done mostly as it was very straightforward: the shader code has only three lines of simple vector maths. But since I realised that it should be possible to recreate it using ActionScript, in particular using a ColorMatrixFilter.

3-channel Game of Life shader

Following on from yesterday's post I decided to act on my own suggestion and make a 3-channel version of the Game of Life shader. The result is here on Wonderfl and embedded below, with the full shader code as a comment at the end of the source on Wonderfl.

Game of Life shader

This is another simple and quick shader, this time done to see how easy it would be to implement Conway's Game of Life after seeing the same logic implemented using filters. It's an ideal fit for shaders not only as the code that runs on each pixel is identical but also as the 'game' is essentially a graphics algorithm. Turned out to be every straightforward, taking only an hour to write, test and deploy here at Wonderfl.

Cross product shader

This is something I did to try out the mathematical functions in Pixel Bender's shader language. I also wanted to work out how to upload an image to Wonderfl, and upload another more interesting shader example to there. Seeing how its turned out I can't imagine using in game though with a bit of work it could produce some interesting effects which might be useful.

More shaders

I wrote two new Shaders today. One is for a screen that's not in the game yet, which the Shader will be a fundamental part of. As the Shader is rather complex I wanted to write it first to see if what I wanted to do was possible. It seems to work, so now I need to write the code for that screen.


The second is much simpler. It does edge detection on the layer I added yesterday, to highlight the boundary of the region indicated. The Shader code is very straightforward and it took much less time than either of the other Shaders I've done for this game.

Shader vs. ActionScript

It was pointed out to me that the shader I used as an example last week did something that could be done with ActionScript, in particular a ColorMatrixFilter. This was something I was aware of, as I described how to use a ColorMatrixFilter in exactly that way a month ago in this post. But it's interesting to compare them to see the difference.

A simple shader

I wrote this shader a few days ago, but didn't want to write about it until I was able to demonstrate it working, which I did in yesterday's post. Now that's done I can describe the shader it used in more detail. It's a very simple shader, that desaturates whatever it's applied to on a scale between 0 (no effect) and 1 (greyscale).


I wrote it for this blog, but it's likely I will use it or one based on it in the future. It could be used at the end of a game or when a game is paused to indicate the game has stopped while still showing gameplay or the game state, or could be used as part of a fade-out between levels.

Shader from string

I wanted to write a bit more about Flash shaders, but was constrained by being unable to show my workings: I can post screenshots and could even host a working demonstration but I could not upload a shader to Wonderfl (images can be uploaded but not other data). Nor could I easily load one from elsewhere because of Flash's security model: I would need to load it from a server where I could edit the Crossdomain.xml file.


But a search of Wonderfl and a further web search turned up the solution: the data can be embedded in the source as a Base64 string.

Another screenshot

This is a screenshot of my latest code with the Shader in effect. It's a bit of a cheat actually as I had to slow it down 10x so I could take a screenshot. Which is a way of saying a static screenshot doesn't really give an idea of how it looks in action, at 60fps with everything moving.

 Also the game now uses no art assets: everything is procedurally generated. I don't rule out using art in the final game but for now it's quicker and easier to work in code where I change a few numbers to completely change the look and feel of things.

Shaders

I tried writing a shader today (Monday). Shaders have been part of Flash for a while, but as far as I know hardly any games use them. This is a shame as they can do things that are impossible in ActionScript, often with very little programming.