Ghoscher's Blog

Welcome to the third picking tutorial! 😀
1- Ray picking.
2- RTS style selection box (two approaches).
3- Projection and why you need it.

Introduction:

This tutorial is really short..It’s not actually about picking but somehow related to it, I wanted to write this in the same post as Part II but Part II was already long enough.. 🙂

Another use for Viewport.Project:

In part II we used Viewport.Project to get the positions of 3D objects on the 2D screen, well.. that was useful for picking…Another excellent use of Viewport.Project is displaying 2D elements over 3D objects such as units names in a game or the health bar for example…

on the left is a screen shot from EA Games C&C Generals
on the right is a Screen shot from F16 notice how the hostile aircraft is surrounded by some sort of  a box

Click on an image to view full size

What we’re going to do here is drawing a rectangle around selected objects.

First of all we need to project our 3D object using Viewport.Project… in my sample we have multiple objects that can be selected, so we’ll loop through all selected objects and project them to get the 2D position of each one:

foreach (DrawableObject d in selectedObjects)
{
    // Project the 3d position first
    Vector3 screenPos3D = myViewport.Project(d.Position, camera1.Projection, camera1.View, Matrix.Identity);

    // Just to make it easier to use we create a Vector2 from screenPos3D
    Vector2 screenPos2D = new Vector2(screenPos3D.X, screenPos3D.Y);

    // Draw the selection rectangle
    spriteBatch.Draw(selectionBoxTex,screenPos2D-new Vector2(myViewport.X,myViewport.Y)- new Vector2(selectionBoxTex.Width/2f,selectionBoxTex.Height/2f), Color.White);
}

Notes about the code above:
1-The first and second lines are straight forward, nothing new…
2-The third line does the drawing which is a little tricky, sceenPos2D can only be used directly in case of there’s only one viewport in the game (see notes after 3rd code block in part II) , we also need to make the center of the rectangle match the center of  screenPos2D.

Well…that’s it :), short & simple as promised ;).

Sample was updated:

Click on image to view full size

XNA Picking Sample Bin Final (39 KB)

XNA Picking Sample Source Final(67 KB)

That concludes the picking series :D, I hope you had fun reading :D.