Archive

Archive for the ‘WP7 Development’ Category

How To: Draw A Line in XNA for WP7

December 11, 2010 2 comments

While working on my most recent game (super top secret!) I realized there was no drawLine function in XNA… At least, not an easy to use one! So I asked my Digipen friend about it (after attempting to derive my own formula) and he gave me this particularly useful link;


http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm

I quickly converted the psuedo-code into C# and came up with these two functions. Enjoy! I haven’t really had to time to logically step through it but essentially the gist(from what I understand) is that it determines where to place a “pixel” image based on the slope using a specific pattern that looks really good.

I recommend using a circular, 8x8ish texture for the pixel you use to render. Here is the code!

        private void DrawLine(SpriteBatch spriteBatch, float x0, float y0, float x1, float y1)

        {

            bool steep = (Math.Abs(y1 – y0) > Math.Abs(x1 – x0));

            if (steep)

            {

                Swap(ref x0, ref y0);

                Swap(ref x1, ref y1);

            }

            if (x0 > x1)

            {

                Swap(ref x0, ref x1);

                Swap(ref y0, ref y1);

            }

            float deltax = x1 – x0;

            float deltay = Math.Abs(y1 – y0);

            float error = 0;

            float deltaerror = deltay / deltax;

            int ystep;

            float y = y0;

            ystep = (y0 < y1) ? 1 : -1;

            for(float x = x0; x < x1; x++)

            {

                Vector2 position;

                if (steep)

                    position = new Vector2(y, x);

                else

                    position = new Vector2(x, y);

                spriteBatch.Draw(pixelTexture, position, Color.White);

                error += deltaerror;

                if (error >= 0.5f)

                {

                    y = y + ystep;

                    error -= 1.0f;

                }

            }

        }

        private void Swap(ref float a, ref float b)

        {

            float temp = a;

            a = b;

            b = temp;

        }

Hope this helps! 🙂

Advertisements

How To Make the Coolest Snow EVER in WP7/XNA: Part 1

December 10, 2010 Leave a comment

Alright, I wanted to get a programming article written up so I decided to publicize how I do snow in my app – Christmas Lyrics. Took me a long time to realize parametric sine/cosine functions were where its at! Using the method I describe, you will be able to easily include windy snow in any XNA-based app you create! 😀

The math I use can essentially be bubbled down to these two formulas:

ASin(X * B);

ACos(X * B);

MY frameworks generally consist of a base class called a “Renderable” and then a “Scene” which has a list of renderables and bubbles events like OnUpdate() and OnDraw() to each object in the list.

So you start out with a class, Snowflake : Renderable and it looks like this.

public class Snow : Renderable

{

    public Vector2 Position { get; set; }

    private Random r;

    private float scale { get; set; }

    private int iteration { get; set; }

    private int sign { get; set; }

    private int algo { get; set; }

    

    private float theX = 0;

    private float xCoef = 0;

    private float sineCoef = 0;

    private float speed = 0;

    public float alpha = 0;

The above code basically just gets us ready to use a single snowflake. How my system is designed is essentially like this; you generate an amount of these snowflake objects. Usually between 300 – 400 of them (the perf is surprisingly good) and then just let them take care of their own updating. Its a really simple system designed to abstract all the logic away from the main scenes and allow the objects themselves to process their own changes.

A lot of the variables are self explanatory. I create a Position variable for storing the snowflakes position, a Random for the random number, and so on. Most of the other variables are just used for the mathematics. What I do is generate a random function for each snowflake so they have a proper amount of variance between eachother. The rest of the variables simply define the function that the snowflake will be using.

Next we will create the heart of the snowflake – basically the OnLoad method which generates the random mathematical function that the snowflake will bind to.

public void Reset(int seed)

{

        //Generate a new random instance based on various information

        r = new Random((int)DateTime.Now.Ticks + seed * 500);

        //Randomize the alpha channel

        alpha = r.Next(140) + 115;

        //Give it a random speed

        speed = r.Next(5) + 1;

        //SineCoef is used in the mathematical function

        sineCoef = r.Next(5) + 1;

        //XCoef is also used in the math

        xCoef = r.Next(5) / 10 + 0.5f ;

        //theX Basically keeps track of time.

        theX = 0;

The two odd variables are sineCoef and xCoef. You can relate them back to the mathematical function at the top by replacing A with sineCoef and B with xCoef. These are simply the modifiers for the function that give it variety.

The next code-block sums up the “Reset” function by randomizing scale, setting a random starting X position, and choosing whether to use sine or cosine.

        if (r.Next(2) == 0)

            scale = (speed / 10) + 0.3f;//5.0f/((float)r.Next(10) + 5);

        else

            scale = 5.0f / ((float)(r.Next(10) + 5));

        Position = new Vector2(r.Next(350) + (50 * seed), -10);

        if (scale > .8f)

            alpha = 255;

        algo = r.Next(2);

        if (r.Next(2) == 1)

            sign = -1;

        else

            sign = 1;

}

The only thing of note in that code block is the algo variable which is what determins which algorithm to use (sine or cosine). Additionally, you will notice that I randomly set the scale using two different methods. One of them is a pure random size while the other one adjusts the size based on the speed of the snowflake. This trick gives it a sort of paralax/layering feel by making slower snowflakes appear larger. But the ones that do not adhere to that scale tend to look like random wind gusts. So it works out pretty well.

Next up I simply define the constructor for my snowflake and tell it to reset the snow. I allow the user to pass in a “Seed” which it uses to give a nice randomness about each snowflake. I realized without this feature – they tend to clump together when first created so I tried to play around with methods to randomly reset them.

    public Snow(int seed)

    {

        Reset(seed);

    }

    public Snow() : this(0) { }

Next I create a public method called “GetScale”. In retrospect I should have just used the smooth .NET 4.0 syntax when defining the variable at the top but this is, at the end of the day, a learning project. So I will keep it in its original form 🙂

    public float GetScale()

    {

        return scale;

    }

The very last part of my snowflake class is the OnUpdate function which gets run every gameloop in the Update() method call. A relatively simple method which just uses the mathematical information we generated to reposition the snowflake over time.

    public void Update()

    {

      

        theX += 0.1f;

        float x = 0;

        float y = speed;

        if (algo == 0)

            x = sineCoef * (float)Math.Sin(theX * xCoef);// 0.01f;

        else

            x = sineCoef * (float)Math.Cos(theX * xCoef);

        Position += new Vector2(x * sign,y);

        

    }

}

Essentially I use a vector-like system based off the sine/cosine functions to determin how far in one direction to update the snowflakes position.

That is it for Part-1! The next section will show how to implement the snowflake class into a “Scene” and I will describe my framework in a little more detail. I hope this has helped give you ideas for snow of your own. If you wish I can also upload my finished code for the world to use because honestly – this generates some really awesome snow and I would love to see my code be put to good use!

If you want to see the snowfall in action check out my app, ChristmasLyrics (There is a free trial which demonstrates this method of snowfall)

Christmas Lyrics Download