XNA how to select tiles with mouse

Question

public void Draw(SpriteBatch spriteBatch)
    {
        for(int x = 0; x < 10; x++) 
        {
            for (int y = 0; y < 10; y++)
            {
                spriteBatch.Draw(tiles[index[x, y]], tileRect = new Rectangle(x * tileWidth, y * tileHeight, tileWidth, tileHeight), 
                                 Color.White);
            }
        }
    }

I have a random tile engine and I am wondering how I could make the tiles have a black square texture around it and selectable by clicking on them. and how I could change that tile texture when I click on it.

Answer 1

Since your storing the tiles in an array, You can use something like this to do it:

        MouseState ms = Mouse.GetState(); 

        if (ms.LeftButton == ButtonState.Pressed)
        {
            int x = Convert.ToInt32(ms.X) /16;
            int y = Convert.ToInt32(ms.Y) /16 +1;

            tiles[x, y] = //Left button Clicked, Change Texture here!

        }
        if (ms.RightButton == ButtonState.Pressed)
        {
            int x = Convert.ToInt32(ms.X) / 16;
            int y = Convert.ToInt32(ms.Y) / 16 + 1;

            tiles[x, y] = //Right button Clicked, Change Texture here!


        }

/ 16 is for the tiles size in pixels, and for some reason in my game I have to add +1 to the y value, for you it might not be the case.

For adding a Black Texture, You can either create one on the go, Or load it in LoadContent()

and then draw it like;

if (tiles[x,y].HasBlackTexture = true)
     spriteBatch.Draw(blah,Color.Black)

Answer 2

I am wondering how I could make the tiles have a black square texture around it.
and selectable by clicking on them. 
and how I could change that tile texture when I click on it.

you'd need:

a separate black square 'tile' that you draw on top when desired. Ex:

private Texture2D mBlackTile;
...
public void LoadContent()
{
   ...
   mBlackTile = ContentManager.Load<Texture2D>("blackTile");
   ...
}

a reference to the selected tile (a coordinate), which would be used so you'd know where to draw the black square tile. Ex:

private Vector2 mSelectedTileCoordinate = new Vector2();

to handle the mouse click. Ex:

public void Update(GameTime pGameTime)
{
   ...
   MouseState mouseState = Mouse.GetState();
   Vector2 mousePosition = new Vector2(mouseState.X, mouseState.Y);

   if (mouseState.LeftButton == ButtonState.Pressed)
      DoMouseClick(mousePosition);
   ...
}

to convert the clicked screen coordinate to the map tile coordinate. Ex:

public void DoMouseClick(Vector2 pMouseXY)
{
   ...
   Vector2 tileXY = ScreenToTile(pMouseXY);
   ...
}

private Vector2 ScreenToTile(Vector2 pScreenXY)
{
   // you need to get the position of the map here
   // ex: if the 'camera' is looking at (100, 100), then the map is drawn to (-100, -100)
   Vector2 mapOffset = GetMapOffset();

   // you may need to add or subtract depending what value you are using
   // if mapOffset is the coordinate you are 'looking at', add
   // if mapOffset is the coordinate that the map is being drawn to, subtract
   Vector2 mapXY = pScreenXY +/- mapOffset;

   // you need to get the width and height of the tiles
   Vector2 tileSize = GetTileSize();

   // this should now be the tile coordinate
   // you may or may not want to have rounded the XY values as well
   Vector2 tileXY = mapXY / tileSize;
   return new Vector2((int)tileXY.X, (int)tileXY.Y);
}

to change the selected tile based on the clicked coordinate. Ex:

public void DoMouseClick(Vector2 pMouseXY)
{
   ...
   Vector2 tileXY = ScreenToTile(pMouseXY);

   mSelectedTileCoordinate = tileXY;
}

and to draw the tile in your draw code. Ex:

public void Draw(SpriteBatch spriteBatch)
{
    for(int x = 0; x < 10; x++) 
    {
        for (int y = 0; y < 10; y++)
        {
            spriteBatch.Draw(tiles[index[x, y]], tileRect = new Rectangle(x * tileWidth, y * tileHeight, tileWidth, tileHeight), 
                             Color.White);
        }
    }

    // draw selection
    Vector2 screenXY = TileToScreen(mSelectedTileCoordinate);
    Rectangle drawArea = new Rectangle(screenXY.X, screenXY.Y, tileWidth, tileHeight);
    spriteBatch.Draw(mBlackTile, drawArea, Color.White);
}

private Vector2 TileToScreen(Vector2 pTileXY)
{
   // this does the reverse of ScreenToTile

   Vector2 tileSize = GetTileSize();
   Vector2 mapXY = pTileXY * tileSize;       

   Vector2 mapOffset = GetMapOffset();

   // you'll have to do this the opposite way from ScreenToTile()
   Vector2 screenXY = mapXY +/- mapOffset;       

   return screenXY;
}