The name “Dazed About” is fairly old for me and goes back to when I did some freelance web development (however then it was “Dazed About Dot Com”).  Anyway, I’m pretty pleased with the quality of this image; mostly thanks to a friend with meticulous attention to detail!

My projects site can be found at http://projects.jason-mitchell.com or by clicking the Projects link at the top of the page.  Right now it just has some filler content but I will be getting this sorted ASAP.  My previous approach for my really really old projects site was to stick absolutely everything on there but this time I’m going for quality, not quantity.  As such, despite the amount of programming I actually do in my spare time, I can only think of three projects that I plan to post initially.

On a side note, I also signed up to LinkedIn.  Find me here.

UPDATE:

I verified that the 3D API isn’t available.  The likes of the Effect class aren’t available on the Zune.

In order to play with the accelerometer, I made a quick test project that allows the user to roll a ball about in a lovely blank black background. See this video:

Ok, so it’s not quite a ball….its a big white dot!  Who cares?

This was actually incredibly simple to achieve and was much easier than I had originally anticipated.  The XNA extensions provide a new class under Microsoft.Xna.Framework.Input called Accelerometer.  As with the other input devices, this class provides a GetState() method so it very much keeps in line with what XNA developers are already used to.  This method returns an object of type AccelerometerState which has a Vector3 property called Acceleration.  This property holds all the information you need for detecting tilt on the device.

Since the code is so simple, I don’t think I will walk through it step by step but rather I will just post my very quick code below.  Please ignore the rubbish boundary collisions – I didn’t feel like it was very important to make them perfect.  Rough and ready…just the way I like it!

Edit:

The projects site mentioned above is no longer a Silverlight site.  I have updated it to be a simple ASP.NET just to get it up and online.

The sample from the creators club website isn’t without it’s flaws; it’s a great way to easily get terrain in your game however it does hard code the name of the height map and it’s texture in the processor itself.  This doesn’t provide much flexibility at all and isn’t an ideal solution.  I will be looking into whether or not it is possible to pass in extra details to the processor (ie the height map file) which would provide a much nicer solution.  I also want to remove the texturing from the processor and do this via an HLSL effects file and provide multi texture splatting functionality.  If anyone knows a good resource for information on this please feel free to leave a comment.

Despite using a ready made processor for loading my terrain, my experience with getting this working wasn’t so simple due to some XNA functionality that seems relatively undocumented and doesn’t seem to come up in 3D tutorials.  When setting up my terrain, I was completely unaware that my use of a SpriteBatch object to draw some debug text to the screen would modify the GraphicsDevice render states and not reset them.  This resulted in the errors seen in the two following images:

The image on the left was caused by the SpriteBatch object disabling the depth buffer on the GraphicsDevice.  This will allow parts of the scene in the background to appear to be drawn in front of larger foreground sections.  The problem on the right was caused by the SpriteBatch object changing the UV coordinates for the texture sampler.  To fix this, I simply added the following code just before rendering my terrain:

GraphicsDevice.RenderState.DepthBufferEnable = true;

GraphicsDevice.SamplerStates[0].AddressU = TextureAddressMode.Wrap;

GraphicsDevice.SamplerStates[0].AddressV = TextureAddressMode.Wrap;

For more information on the effects a SpriteBatch object will have on your render states, check out this article by Shawn Hargreaves.

After figuring all that out thanks to help of the community on the XNA Creators Club website, I got my terrain working quite well and looking relatively nice:

1. Create a new Silverlight 3 + website project (obviously) in Blend 3
2. Create 3 rows in the default grid layout
3. Add MediaElement control to top row
4. Add Slider control to middle row
5. Add two Button controls to bottom row
6. Set Slider maximum value to 360
7. Set MediaElement source to your video
   • Embedded in project or…
   • web address
8. Select Slider control, open Common Properties pane, right click Value textbox, select Data Binding
9. Select Element Property tab, click MediaElement control from left-hand list
10. Check “Use custom path expression” box and enter Projection.RotationY into the textbox
11. Expand Data Binding window and select TwoWay from the Binding Direction radio buttons
12. Select MediaElement, open Transform pane and make sure the X centre of rotation is 0.5 and Y is 1
13. Run application and you should be able to turn the video using the slider
14. Create a new storyboard called Down
15. Move to 1.5 seconds on timeline and set X value of Projection of the MediaElement to –90
16. Click the key frame on the time line to open the Easing pane
17. Select Bounce Out from drop down list
18. Select a Button control and open it’s event pane (small icon in the top left with a lightning bolt)
19. Enter FallDown into the Click text box and press enter
20. Type “Down.Begin();” in the new method
21. Run application and click the button to make the video fall over
22. Create a new storyboard called Up
23. Move to 1.5 second on timeline and set X value of Projection of the MediaElement to 0
    • If this is already 0, click the Add New Key Frame button on the timeline
24. Add a Bounce Out easing effect
25. Select the second Button control and create a click event for it and enter “Up.Begin();” into the new method

And there you have it!  25 steps to create a useless and impractical video player, at least I hope its only 25!

To make this application, I used Expression Blend 3 although since Silverlight is based on XAML, it is entirely possible to do this just from Visual Studio.  Personally, I don’t really like writing XAML unless I really have to and prefer to use the automatically generated code from Expression Blend.

The first step in creating this application was to give the default grid layout three rows, one for the video, one for the slider and one for the up and down buttons.  For this example, this step isn’t all that important but I did it anyway! The layout for this application is very straightforward to create; we need to add a MediaElement control to the top row, a Slider control to the second row finally two Button controls to the bottom row.  If you don’t know where to find the MediaElement and Slider controls, you can search for them in the assets dialog box which is shown in the image to the right.  Once you have added the Slider to your application, you can change the minimum and maximum values in the Common Properties pane.  I set mine to go from 0 to 360 so the Slider will spin the MediaElement around fully.  You will also want to set the media source for the MediaElement control, you can embed a video in the project and reference it in the Source box, however this will create a very large XAP package that will take some time to download.  To solve this you can specify a web address to use as your video source which is what I have done.

Next, we want to link the value of my Slider control, to the Projection.RotationY property to rotate the video around the Y-axis.  This is really simple to do , in Blend if you select the Slider control, open the Common Properties pane, right click on Value and select Data Binding you will see a new dialog box on the screen allowing to create a new data binding.  We want to bind the Slider value to the property of another element in the application so select the Element Property tab at the top of this window.  You should now see two lists, one that displays the elements in your application and another that displays the element properties.  Select your MediaElement control from the list on the left (I called mine mediaElement).  Unfortunately we can’t select the RotationY property from the second list so we need to check the box below the lists that say “Use a custom path expression” and enter Projection.RotationY.  We need to set the binding direction option to TwoWay, so click the arrow below the custom expression box and select TwoWay then click ok.  To make the MediaElement rotate about it’s centre, we need to change it’s centre of rotation in the Transform pane; make sure that the value of X is 0.5 (the range goes from 0 to 1).   Now if you build and run the application you should be able to rotate the video using the Slider.

Now we need to make the buttons make the MediaElement fall down and come back up again.  First step is to make another change to it’s centre of rotation, so if we open the Transform pane again and set it’s Y value to 1 to indicate that we want it to rotate on the X-axis around the bottom of the element.  In order to create the animations we need to use Storyboards, you can create a new storyboard by clicking the “+” in the Objects and Timeline pane.  Name your storyboard “Down”, we will use this to to make the MediaElement rotate and make it look like it fell over.  Once you create your storyboard, the timeline should automatically open; move the yellow marker to 1.5 seconds and with the MediaElement selected, go to the Transform pane and set the value of X under Projection to –90.  Now click play on the timeline and you should see the MediaElement “fall “ down….but it doesn’t look very realistic!!  To make this animation look a bit better, we can use something called Easing, a feature new to Silverlight 3. Click on the key frame in the timeline and the Easing pane should open up (by default this appears on the right hand side of the screen).  The Easing pane contains a drop down list with all the different types of easing, you should definitely have a play about with these and see their effects.  For my example, I chose Bounce Out to make it look as if the MediaElement has actually hit something that’s stopping it falling further.  Click play on the timeline and see what happens!

We now need to tell our application when to play this animation.  So select the button you want to use to make the video fall and open the events pane (little icon in the top right of the window with a lightning bolt on it).  In the Click box, type MoveDown and press enter (oh look Blend 3 has a built-in code editor), this will automatically hook up the event and create the method to handle it.  In your method type in “Down.Begin();” this will tell the storyboard to begin playing.

Creating the Up animation is similar to the Down animation.  Create a new storyboard and call it Up, then in the timeline move the yellow marker to 1.5 seconds and this time click the Record Keyframe button.  You MediaElement should already be displayed in the up-right position so we don’t need to change any properties.  If it isn’t upright, then set the X value for Projection in the Transform pane to 0.  Follow the same steps to add an Easing effect to this animation.  I used a Bounce Out effect again and set it’s bounces to 1 and bounciness to 23.  Don’t forget to set the event to your Up button!

Boy that was a lot of waffling, thinking back I should have maybe just made a numbered list of steps; maybe I will do that later!

The current view and field of vision are defined in two matrices; the View matrix and the Projection matrix. 

In order to define the the View matrix we need 3 Vector3 objects; one for the position of the camera, one for the target the camera is pointing at and a vector defining which way is up for the camera. We don’t need to worry about what goes on to define the View matrix as the Matrix class in XNA provides a method called CreateLookAt which accepts the position, target and up vectors as parameters and returns the view matrix.

Matrix viewMatrix = Matrix.CreateLookAt(position, target, upVector);

To create the Projection matrix, we need to know the angle of the field of view in radians, the aspect ratio of the screen, the near plane distance and the far plane distance. The near and far planes dictate the planes to draw between, everything outside of these planes will not be rendered. It is worth remembering that setting a very low near plane and a very large far plane may negatively impact your games performance if there is a lot going on. As with the View matrix, we do not need to worry too much about the details about how the Projection matrix is created as XNA again provides a useful method for this:

projectionMatrix= Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4, GraphicsDevice.Viewport.AspectRatio, 1, 400);

For my game, I decided to make a base camera class which handles all this for me so I don’t need to worry about it again.  The code for this class is very straight forward and simply handles the basic camera functionality.

Camera.cs

using Microsoft.Xna.Framework;
 
namespace Cameras
{
    public class Camera : GameComponent
    {
        public Vector3 position;
        public Vector3 target;
        public Vector3 upVector;
 
        public Matrix viewMatrix;
        public Matrix projectionMatrix;
        public float fieldOfView = MathHelper.PiOver4;
        public float nearPlaneDistance = 1f;
        public float farPlaneDistance = 500f;
 
        public Camera(Game game, Vector3 position, Vector3 target, Vector3 upVector)
            : base(game)
        {
            this.position = position;
            this.target = target;
            this.upVector = upVector;
        }
 
        public override void Initialize()
        {
            UpdateViewMatrix();
            float aspectRatio = Game.GraphicsDevice.Viewport.AspectRatio;
            projectionMatrix= Matrix.CreatePerspectiveFieldOfView(fieldOfView, aspectRatio, nearPlaneDistance, farPlaneDistance);
 
            base.Initialize();
        }
 
        protected void UpdateViewMatrix()
        {
            viewMatrix = Matrix.CreateLookAt(position, target, upVector);
        }
    }
}

For this class, I have made all it’s variables public for the purposes of this article so the code is much shorter.  I would strongly recommend encapsulating these variables if you are using it in any of your projects.

All this class does is allow us to point the camera in one direction and does not have any built in functionality for movement so that is our next step.  So far, I’ve always found myself wanting to be able to move around and get a better look at what I’m currently working on, so for that reason my next step was to create a first person camera.  This was a bit trickier, however with a bit of playing around I was eventually able to get it working!  Following is the code for the class and then I will explain it a bit afterwards.

FirstPersonCamera.cs

using Microsoft.Xna.Framework;
 
namespace Cameras
{
    public class FirstPersonCamera : Camera
    {
        public Vector3 cameraReference;
 
        public float leftRightRot;
        public float upDownRot;
 
        public float rotationSpeed = 0.05f;
        public float translationSpeed = 1f;
 
        public FirstPersonCamera(Game game, Vector3 position, Vector3 target, Vector3 upVector)
            : base(game, position, target, upVector)
        {
            cameraReference = target;
        }
 
        public void Update(Vector3 translation, float leftRightRot, float upDownRot)
        {
            this.leftRightRot += leftRightRot * rotationSpeed;
            this.upDownRot += upDownRot * rotationSpeed;
            Matrix rotationMatrix = Matrix.CreateRotationX(this.upDownRot) * Matrix.CreateRotationY(this.leftRightRot);
            Vector3 transformedReference = Vector3.Transform(cameraReference, rotationMatrix);
            position += Vector3.Transform(translation, rotationMatrix) * translationSpeed;
            target = transformedReference + position;
 
            UpdateViewMatrix();
        }
    }
}

Possibly the most important part of this is the cameraReference variable.  This holds the original target vector we set up for our camera and is used for calculating our resulting camera target after rotation.  This was the part that was catching me out for a little while!  The leftRightRot and upDownRot variables keep track of how far we have moved from the original target and are also used in calculating our rotated camera target.

I created a new Update method that accepts the translation (ie the amout to move the camera by), left-right rotation and up-down rotation as parameters.  My next step was to add this onto my rotation variables and create the rotation matrix.  The purpose for adding the rotations to my class variables rather than just assigning them, is so that the camera rotation will persist even after, for example, the thumbstick has been released and is at it default position.  If we were to just assign the rotations to the variables, The camera would have limited movement in the desired direction and then reset to the centre once the thumbstick has been released.

Now that I have the rotation matrix, I can use this, along with the cameraReference the calculate the rotated camera target.  All that is left to do is to calculate the rotated translation, add it to the camera position and set the new camera target by adding our transformedReference to the camera position.  Finally we called the UpdateViewMatrix method from the Camera class to generate our new view matrix.

It is worth noting that if you are rotating in any possible combination of the x, y and z axis, you may encounter an issue known as Gimbal Lock.  I have read that this can be solved by using Quaternions for the rotations but I have yet to look into this too much.  If anyone has any useful information about how to do this please let me know!

Lastly we will need a way to test our camera out so here is a small class I used for my testing; I’m not going to explain it as it’s all fairly straight forward!

Game1.cs

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
 
namespace Cameras
{
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        private GraphicsDeviceManager graphics;
 
        private FirstPersonCamera camera;
        private VertexPositionColor[] verts;
 
        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }
 
        protected override void Initialize()
        {
            camera = new FirstPersonCamera(this, new Vector3(0, 0, 20), Vector3.Forward, Vector3.Up);
            Components.Add(camera);
 
            base.Initialize();
        }
 
        protected override void LoadContent()
        {
            verts = new VertexPositionColor[4];
            verts[0] = new VertexPositionColor(new Vector3(-3, -3, 0), Color.Red);
            verts[1] = new VertexPositionColor(new Vector3(3, -3, 0), Color.Green);
            verts[2] = new VertexPositionColor(new Vector3(-3, 3, 0), Color.Blue);
            verts[3] = new VertexPositionColor(new Vector3(3, 3, 0), Color.Yellow);
        }
 
        protected override void UnloadContent()
        {
 
        }
 
        protected override void Update(GameTime gameTime)
        {
            GamePadState gamepadState = GamePad.GetState(PlayerIndex.One);
 
            if (gamepadState.Buttons.Back == ButtonState.Pressed)
                this.Exit();
 
            Vector3 translation = new Vector3(gamepadState.ThumbSticks.Left.X, 0, -gamepadState.ThumbSticks.Left.Y);
            camera.Update(translation, -gamepadState.ThumbSticks.Right.X, gamepadState.ThumbSticks.Right.Y);
 
            base.Update(gameTime);
        }
 
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);
            GraphicsDevice.RenderState.CullMode = CullMode.None;
 
            GraphicsDevice.VertexDeclaration = new VertexDeclaration(GraphicsDevice, VertexPositionColor.VertexElements);
 
            BasicEffect effect = new BasicEffect(GraphicsDevice, null);
            effect.World = Matrix.Identity;
            effect.View = camera.ViewMatrix;
            effect.Projection = camera.ProjectionMatrix;
 
            effect.VertexColorEnabled = true;
 
            effect.Begin();
            foreach (EffectPass pass in effect.CurrentTechnique.Passes)
            {
                pass.Begin();
                GraphicsDevice.DrawUserPrimitives(PrimitiveType.TriangleStrip, verts, 0, 2);
                pass.End();
            }
            effect.End();
 
            base.Draw(gameTime);
        }
    }
}