Home > Games Programming, Graphics, Programming, XNA > XNA Picking Tutorial Part III

XNA Picking Tutorial Part III

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


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…

Generals Contruction Dozer


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.

  1. Lee
    26/01/2011 at 8:09 pm

    great explanation and screenshots !


    • Fuchs
      26/01/2011 at 9:02 pm

      Thanks for reading 😀
      I really appreciate your feedback 😀

  2. 10/03/2011 at 9:05 pm

    you touch perfectone here !

  3. Tiwi
    26/06/2013 at 5:29 am

    hi, i’m Tiwi…

    i’m a new learner of xna game studio…
    do you have a tutorial about drag and drop multiple images?
    thanks 😀

    • Fuchs
      26/06/2013 at 7:04 am

      Hi Tiwi,
      I’ll be happy to help but I don’t quite understand what you mean.
      Could you please explain what you’re trying to do :)?

  1. 16/12/2010 at 1:13 pm
  2. 16/12/2010 at 1:13 pm

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: