public interface IParameterControl
{
	EffectParameter Parameter { get; set; }

	void CopyValue();
	void PasteValue();
}

Like I said, very simple. Each UI control must allow me to get and set the EffectParameter it is editing as well as supporting copy/paste functionality. Next I created a mapping for matching a parameter type to a control type, taking into account annotations. Right now I don’t have much but this is the part that will fill up as time goes on:

private readonly Dictionary<Type, Dictionary<string, Type>> parameterEditorTypes =
	new Dictionary<Type, Dictionary<string, Type>>
	{
		{
			typeof(Vector4),
			new Dictionary<string, Type>
			{
				{ "color", typeof(ColorChooser) }
			}
		}
	};

Basically what that means is that we first look up what type the parameter is. In this case a float4/Vector4. Next we look up the “UIType” annotation on the parameter and use that to find what Type of control we need. In this case that’s a ColorChooser UI. Obviously we’d also want some defaults and lots more in here, but this is just where I’m starting.

Finally the meat of the operation. I have this method wired up for when I select a new item in my parameter list:

private void listBox1_SelectedValueChanged(object sender, EventArgs e)
{
	groupBox1.Controls.Clear();

	if (listBox1.SelectedIndex < 0)
	{
		currentParameter = null;
		currentControl = null;
		groupBox1.Text = "{No Parameter Selected}";
		return;
	}

	currentParameter = parameters[listBox1.SelectedIndex];
	groupBox1.Text = currentParameter.Name;

	bool isArray = currentParameter.Elements.Count > 1;
	int arraySize = currentParameter.Elements.Count;

	Type currentParameterType;

	switch (currentParameter.ParameterType)
	{
		case EffectParameterType.Bool:
			currentParameterType = isArray ? typeof(bool[]) : typeof(bool);
			break;
		case EffectParameterType.Int32:
			currentParameterType = isArray ? typeof(int[]) : typeof(int);
			break;
		case EffectParameterType.Single:
		{
			if (currentParameter.RowCount == 1)
			{
				switch (currentParameter.ColumnCount)
				{
					case 1:
						currentParameterType = isArray ? typeof(float[]) : typeof(float);
						break;
					case 2:
						currentParameterType = isArray ? typeof(Vector2[]) : typeof(Vector2);
						break;
					case 3:
						currentParameterType = isArray ? typeof(Vector3[]) : typeof(Vector3);
						break;
					case 4:
						currentParameterType = isArray ? typeof(Vector4[]) : typeof(Vector4);
						break;
					default:
						currentParameterType = null;
						break;
				}
			}
			else
			{
				currentParameterType = isArray ? typeof(Matrix[]) : typeof(Matrix);
			}
			break;
		}
		case EffectParameterType.String:
		currentParameterType = typeof(string);
			break;
		case EffectParameterType.Texture:
		case EffectParameterType.Texture2D:
			currentParameterType = typeof(Texture2D);
			break;
		default:
			currentParameterType = null;
			break;
	}

	if (currentParameterType == null)
		return;

	string uiType = string.Empty;

	foreach (var annotation in currentParameter.Annotations)
	{
		if (annotation.Name == "UIType")
		{
			uiType = annotation.GetValueString().ToLower();
			break;
		}
	}

	Type editorType = null;
	Dictionary<string, Type> editorMatch = null;
	if (parameterEditorTypes.TryGetValue(currentParameterType, out editorMatch) &&
		editorMatch.TryGetValue(uiType, out editorType))
	{
		currentControl = Activator.CreateInstance(editorType) as IParameterControl;
		currentControl.Parameter = currentParameter;
		Control c = currentControl as Control;
		c.Location = new Point(12, 24);
		groupBox1.Controls.Add(c);
	}
}

That goes and figures out exactly what type of parameter we have, then we find the UIType annotation, and lastly we use those two pieces of information to figure out what type of control we want to use. We create an instance, set the parameter, position it, and add it to the group box. I’ll have to see if this holds up as I go, but for just colors right now it works quite well.

The idea behind all of this is to reduce the effort for implementing more UI for other parameter types. Before I had all sorts of hard coded types and different code paths based on type. With this new system, I just have to implement the new UI types and add them to my big dictionary mapping and this method will automatically work for the new UI. Should allow me to finally get down to making more UI for editing parameters.

And of course, what post on Shader Toy would be complete without yet another video. You’ll see the new color UI as well as me using copy/paste. Otherwise it’s nothing all that amazing. I just like making videos.

time * 2 + otherParameter^2

Where ‘time’ is a value supplied by my editor for the total running time of the editor and ‘otherParameter’ is some other parameter in the shader code. I want this to work. It’s fairly trivial to do value substitution, replacing those names with other numbers, but to evaluate that at runtime is something that, using just C#, is quite non-trivial.

I started off doing some internet searches to see what can be done. I found that Mono has an Evaluator class built in to leverage the C# compiler and evaluate arbitrary C# code at runtime without the mess of handling your own compiler instance and so forth. Really cool (and I wish Microsoft’s .NET supported that), but a bit overkill for my needs, plus I’d rather not switch runtimes.

Then I found a quick blurb on leveraging JavaScript from C# and using the ‘eval’ method in that language. I gave this a try and am surprised at the simplicity of the solution when you realize what you’re able to do. I decided to test this out by making a command line calculator.

First thing you want to do is create an Evaluator.js file and fill it with this code:

package Evaluator
{
  class JSEvaluator
  {
    public static function Eval(expr : String) : String
    {
      return eval(expr, "unsafe");
    }
  }
}

That’s it. It’s the most simplistic wrapper one could imagine. Next, open up a Visual Studio command line or XNA Game Studio command line (both are found in the Start menu in their respective folders). Navigate to your js file and run this command:

jsc /target:library Evaluator.js

That will compile your JavaScript file into a .NET usable DLL file.

Now create a new Windows Console Application project in Visual Studio. First add a reference to Microsoft.JScript.dll which gives us the JavaScript runtime. Then add a reference to the Evaluator.dll file we produced earlier. Next, drop this code into your Program.cs file:

using System;
using Evaluator;

namespace Calculator
{
	class Program
	{
		static void Main(string[] args)
		{
			Console.WriteLine("Calculator");
			Console.WriteLine("Enter a mathematical formula for evaluation.");
			Console.WriteLine("Type 'exit' to quit.");
			Console.WriteLine();

			string line = string.Empty;

			do
			{
				Console.Write("> ");

				line = Console.ReadLine();

				if (line == "exit")
					break;

				Console.WriteLine(JSEvaluator.Eval(line));

			} while (true);
		}
	}
}

That’s it. We just call into our JSEvaluator class’s static Eval method and write out the results. Now give it a try and play around, it’s really quite fun. I’m not sure exactly how much it handles, and of course I do no exception handling so it’ll likely break if you give it weird stuff, but it’s fun as a little calculator.

Now I just need to implement it into my Shader Toy.

I need to figure out how to deal with the editor and the shader’s default values. Right now any change to the effect blows away changes to parameters. One solution is to simply store the mapping of parameters and their values such that after a new compilation I can set the correct values. Another idea is to somehow have the changes made in the UI update your effect code such that it writes the new values into the code. Not sure how doable that really is.

Thoughts? Leave ‘em in the comments.

So far it’s coming along, slowly but surely. Hopefully this weekend I can get the parameter editing up and running. Until then, watch this demo showing the list of parameters and annotations building as I type.

I will say that I’ve determined that F# probably has good uses, but my mind is still riding the object oriented train so it’s pretty hard to see how I could do more functional programming for game development. Even my F# is very much standard OO but with a new syntax. In that respect it’s hardly worth showing off, but in the interest of humor (I’ll go with that), I’ve decided to go ahead and talk about the project and the issues to overcome.

First I wanted to use VS 2010. This immediately means no (easy) way to build content. Therefore I needed to do any graphics in code. Not a terribly big deal until I wanted to display a score, but I opted to just show dots representing points (which, by the way, are not clamped in my game so I’m sure after a dozen or two there’ll be a mess up there).

Next I wanted to target .NET 4.0 (since that’s a good part of the reason to use VS 2010). But since the XNA Framework is compiled with the .NET 2.0 CLR in mind and .NET 4.0 has a whole new CLR, there’s a bit of an issue right out of the game if you add your XNA references and hit build. This is easily solved by adding an App.config file with the following in it:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
	<startup useLegacyV2RuntimeActivationPolicy="true">
		<supportedRuntime version="v4.0"/>
	</startup>
</configuration>

I’m not a CLR person, but from what I’ve read, this allows me to use v2 runtime libraries with a v4 runtime (and no, there is no v3 runtime from what I’ve read; .NET 3.0 and 3.5 use the v2 runtime. But again, I’m not a big CLR person so correct me if I’m wrong ).

From there it was all just hacking away. Keeping in mind I learned F# just a few hours ago, here’s the entirety of my code, with no syntax highlighting since my code pasting stuff doesn’t support F#:

open System
open Microsoft.Xna.Framework
open Microsoft.Xna.Framework.Graphics
open Microsoft.Xna.Framework.Input

type Paddle(posX : int, posY : int) =
    let speed = 5
    let x = posX
    let mutable y = posY

    static member W = 10
    static member H = 80

    member this.X with get() = x
    member this.Y with get() = y and set v = y <- v
    member this.Bounds
        with get() = new Rectangle(x - Paddle.W / 2, y - Paddle.H / 2, Paddle.W, Paddle.H)

    member this.Move (keyUp : Keys) (keyDown : Keys) =
        let ks = Keyboard.GetState()
        if ks.IsKeyDown(keyUp)
            then y <- y - speed
        if ks.IsKeyDown(keyDown)
            then y <- y + speed

type Ball() =
    let mutable x = 0
    let mutable y = 0

    let mutable vx = 0
    let mutable vy = 0

    static member W = 10
    static member H = 10

    member this.X with get() = x and set v = x <- v
    member this.Y with get() = y and set v = y <- v
    member this.Bounds
        with get() = new Rectangle(x - Ball.W / 2, y - Ball.H / 2, Ball.W, Ball.H)

    member this.BounceX() = vx <- -vx
    member this.BounceY() = vy <- -vy

    member this.Start (velX : int) (velY : int) =
        vx <- velX
        vy <- velY

    member this.Update() =
        x <- x + vx
        y <- y + vy

    member this.Collide (p : Paddle) = this.Bounds.Intersects(p.Bounds)

type Game1() as this =
    inherit Game()
    let graphics = new GraphicsDeviceManager(this)

    let mutable spriteBatch = null
    let mutable texture = null

    let left = new Paddle(Paddle.W * 2, 300)
    let right = new Paddle(800 - (Paddle.W * 2), 300)
    let ball = new Ball()

    let rand = new Random()

    let mutable leftScore = 0
    let mutable rightScore = 0

    let clampY x : int =
        if x < Paddle.H / 2 then Paddle.H / 2
        else if x > 600 - (Paddle.H / 2) then 600 - (Paddle.H / 2)
        else x

    let reset (b : Ball) =
        let mutable x = 0
        let mutable y = 0

        if rand.Next() % 2 = 0 then x <- -3 else x <- 3
        if rand.Next() % 2 = 0 then y <- -3 else y <- 3

        b.X <- 400
        b.Y <- 300
        b.Start x y

    let bounce (b : Ball) =
        if b.X < Ball.W / 2 then
            rightScore <- rightScore + 1
            reset b
        else if b.X > 800 - Ball.W / 2 then
            leftScore <- leftScore + 1
            reset b

        if b.Y < Ball.H / 2 then
            b.Y <- Ball.H / 2
            b.BounceY()
        else if b.Y > 600 - Ball.H / 2 then
            b.Y <- 600 - Ball.H / 2
            b.BounceY()

    override Game.LoadContent() =
        spriteBatch <- new SpriteBatch(this.GraphicsDevice)
        texture <- new Texture2D(this.GraphicsDevice, 1, 1);
        texture.SetData([| Color.White |])
        reset ball

    override Game.Update gameTime =
        left.Move Keys.Q Keys.A
        right.Move Keys.O Keys.L
        ball.Update()
        bounce ball
        left.Y <- clampY left.Y
        right.Y <- clampY right.Y

        if ball.Collide(left) || ball.Collide(right) then
            ball.BounceX()

    override Game.Draw gameTime =
        this.GraphicsDevice.Clear(Color.Black)
        spriteBatch.Begin()
        spriteBatch.Draw(texture, left.Bounds, Color.Lime)
        spriteBatch.Draw(texture, right.Bounds, Color.Lime)
        spriteBatch.Draw(texture, ball.Bounds, Color.Lime)

        for i in 1 .. leftScore do
            let r = new Rectangle(50 + i * 10, 5, 5, 5)
            spriteBatch.Draw(texture, r, Color.White);
        for i in 1 .. rightScore do
            let r = new Rectangle(750 - i * 10 - 5, 5, 5, 5)
            spriteBatch.Draw(texture, r, Color.White);

        spriteBatch.End()
        base.Draw(gameTime)

let g = new Game1()
try g.Run()
finally g.Dispose()

So there you go. If you’ve ever wanted to make a game with XNA Game Studio using F#, it can be done. It’s interesting, to say the least, but I’m sticking with my C# for now.

A few hours later and I have something basically workable. I wrote my own XnaPanel for the graphics (slightly based on the WinForms samples, but largely my own stuff) and hooked up the rest. Basically as you type, it will try to compile your shader with every character stroke. If it compiles, it updates the view instantly so you can play around more freely without having to manually click any buttons to get an update.

Currently no support for textures or custom parameters, but these are all things I’m thinking about how to implement moving forward. I’m excited to have a project, even if it isn’t a game.

Here’s a video of my toy in action:

1) Create a new XNA GS project and add the files to your project. Should look like this:

2) Add a ‘using’ statement for the “Utility” namespace:

using Utility;

Alternatively you can just change the namespace in all the files from the TimerInterpolator.zip file to your game project’s namespace.

3) Add these fields to your game class:

Color background = Color.CornflowerBlue;
TimerCollection timers = new TimerCollection();
InterpolatorCollection interpolators = new InterpolatorCollection();

We have a Color for the window background and collections for our timers and interpolators.

4) In your Update method call Update on both collections:

protected override void Update(GameTime gameTime)
{
	timers.Update(gameTime);
	interpolators.Update(gameTime);

	base.Update(gameTime);
}

This makes sure all the timers and interpolators do their job when you create them.

5) Change the Draw method to clear with our field. This will let us test interpolators and timers without needing more graphics:

protected override void Draw(GameTime gameTime)
{
	GraphicsDevice.Clear(background);
	base.Draw(gameTime);
}

6) Now we’re ready to start playing, so I’m done numbering the steps.

First let’s do a simple example. We’ll set a timer that fires after the game has been running for three seconds that simply changes our background to pink. In your LoadContent method add this code:

protected override void LoadContent()
{
	timers.Create(
		3f, // how long (in seconds) before the timer ticks
		false, // does the timer repeat?
		timer => background = Color.Pink); // the delegate to fire when the timer ticks
}

If that last line (the ‘timer =>’ part) doesn’t make sense, give this post a read.

Give that a run and you’ll see that, sure enough, the window changes to pink after three seconds. What’s happening here? Well the TimerCollection class uses a method called Create to create timers. You set how much time passes between ticks, whether to repeat it (or just fire it once), and what to do when the timer ticks. It manages the rest inside. The method does return a Timer instance you can hang on to if you want, which is usually nice if you plan on canceling timers or stopping timers that are repeating.

Now let’s do something more interesting. We’ll still use the timer, but this time we’ll interpolate from CornflowerBlue to Pink after that three seconds. Let’s change our LoadContent method a little:

protected override void LoadContent()
{
	timers.Create(
		3f,
		false,
		timer =>
		{
			interpolators.Create(
				0f,
				1f,
				i => background = Color.Lerp(Color.CornflowerBlue, Color.Pink, i.Value),
				null);
		});
}

Now run the game and watch as the background fades from blue to pink after waiting three seconds. See how fun this is?

The Create method on InterpolatorCollection has a few overloads which are well commented, but I’ll put them here for easy reference:

/// <summary>
/// Creates a new Interpolator.
/// </summary>
/// <param name="start">The starting value.</param>
/// <param name="end">The ending value.</param>
/// <param name="step">
/// An optional callback to invoke when the Interpolator is updated.
/// </param>
/// <param name="completed">
/// An optional callback to invoke when the Interpolator completes.
/// </param>
/// <returns>The Interpolator instance.</returns>
public Interpolator Create(
	float start,
	float end,
	Action<Interpolator> step,
	Action<Interpolator> completed)

/// <summary>
/// Creates a new Interpolator.
/// </summary>
/// <param name="start">The starting value.</param>
/// <param name="end">The ending value.</param>
/// <param name="length">
/// The length of time, in seconds, to perform the interpolation.
/// </param>
/// <param name="step">
/// An optional callback to invoke when the Interpolator is updated.
/// </param>
/// <param name="completed">
/// An optional callback to invoke when the Interpolator completes.
/// </param>
/// <returns>The Interpolator instance.</returns>
public Interpolator Create(
	float start,
	float end,
	float length,
	Action<Interpolator> step,
	Action<Interpolator> completed)

/// <summary>
/// Creates a new Interpolator.
/// </summary>
/// <param name="start">The starting value.</param>
/// <param name="end">The ending value.</param>
/// <param name="length">
/// The length of time, in seconds, to perform the interpolation.
/// </param>
/// <param name="scale">
/// A delegate that handles converting the interpolator's progress to a value.
/// </param>
/// <param name="step">
/// An optional callback to invoke when the Interpolator is updated.
/// </param>
/// <param name="completed">
/// An optional callback to invoke when the Interpolator completes.
/// </param>
/// <returns>The Interpolator instance.</returns>
public Interpolator Create(
	float start,
	float end,
	float length,
	InterpolatorScaleDelegate scale,
	Action<Interpolator> step,
	Action<Interpolator> completed)

We used the first one above which does a linear interpolation over one second. The second overload simply lets you change how long it takes so you could interpolate over five seconds or .5 seconds if you wanted. The last overload is interesting with the InterpolatorScaleDelegate. This delegate does a transformation in the Interpolator which can provide you with neat effects without needing subclasses or customizing the Interpolator class.

To understand the scale, let me explain how the Interpolator works. Under the hood, the Interpolator really has two values: “progress” and “value”. Progress is the core of the interpolator, going from 0 to 1 over the desired time. The value is then computed based on the scale delegate and the progress. By default it uses linear interpolation which doesn’t do any transformations on the progress. But you could easily substitute your own delegate that does interesting transforms on the progress to get your value. However, keep in mind what value you return. A value of ‘0′ indicates the start point of your interpolation and a value of ‘1′ indicates the end point. You can return 2 if you’d like, but know that it will be well past the end value.

The code I provided comes with a small set of delegates that you can try out. They’re all in the InterpolatorScales class, including the default linear interpolation used if no other delegate is provided.

/// <summary>
/// A static class that contains predefined scales for Interpolators.
/// </summary>
public static class InterpolatorScales
{
	/// <summary>
	/// A linear interpolator scale.
	/// This is used by default by the Interpolator if no other scale is given.
	/// </summary>
	public static readonly InterpolatorScaleDelegate Linear = LinearInterpolation;

	/// <summary>
	/// A quadratic interpolator scale.
	/// </summary>
	public static readonly InterpolatorScaleDelegate Quadratic = QuadraticInterpolation;

	/// <summary>
	/// A cubic interpolator scale.
	/// </summary>
	public static readonly InterpolatorScaleDelegate Cubic = CubicInterpolation;

	/// <summary>
	/// A quartic interpolator scale.
	/// </summary>
	public static readonly InterpolatorScaleDelegate Quartic = QuarticInterpolation;

	private static float LinearInterpolation(float progress)
	{
		return progress;
	}

	private static float QuadraticInterpolation(float progress)
	{
		return progress * progress;
	}

	private static float CubicInterpolation(float progress)
	{
		return progress * progress * progress;
	}

	private static float QuarticInterpolation(float progress)
	{
		return progress * progress * progress * progress;
	}
}

Some other delegates could use Sin, Cos, or other mathematical functions. Or you can go crazy with them; I once had a delegate that combined the quadratic interpolation with a sin wave and manual offset. The key is to find some function where a progress of ‘0′ gives a value of ‘0′ and a progress of ‘1′ gives a value of ‘1′. Whatever happens in the middle is up to you.

So I hope that helps you get an idea for how to use these classes. The more you use them, the more you’ll see how nice it is to be able to fire off these objects to handle animations and pauses, rather than continually having random fields around for timing and animating things around. With that I’ll leave you with this fun LoadContent method you can toss into the test game to have some fun with your background color.

Color[] backgroundColors = new[]
{
	Color.CornflowerBlue,
	Color.Pink,
	Color.Red,
	Color.Green,
};
int currentBackground = 0;

protected override void LoadContent()
{
	timers.Create(1f, true, timer => Interpolate());
}

private void Interpolate()
{
	interpolators.Create(
		0f,
		1f,
		.5f,
		InterpolatorStep,
		i => currentBackground = (currentBackground + 1) % backgroundColors.Length);
}

private void InterpolatorStep(Interpolator i)
{
	background = Color.Lerp(
		backgroundColors[currentBackground],
		backgroundColors[(currentBackground + 1) % backgroundColors.Length],
		i.Value);
}

I’m impressed with how nice ActionScript 3 really is. I’ve never really used the language and am just winging it as I go. It has some things I don’t like, but that’s probably just because I think that C# is about the best language I’ve used.

I’m definitely excited to keep playing with this library and making more little Flash games.

EDIT: Decided to share the source in case anyone wanted to see how it was built or build upon it. The FlashPunk source is all in there and the project is a FlashBuilder one, though I’m sure you could import it into FlexBuilder or build with any other compiling tools you want. SimpleGame.zip