How do I "move" a picturebox image around a grid of pictureboxes? - vb.net

Question

I cannot figure out how to move an image from one picturebox to another inside a grid of pictureboxes (all of the pictureboxes are created in an 2 dimensional array, for x and y ) with WASD/arrow keys. Is there a way I can assign each picturebox with co ordinates where I can manipulate it to change in the image in the pictureboxes to give the illusion of movement?
For example: program starts with picturebox (3,3) to have the player image set and a variable called "CurrentPicBox = picturebox(Xpos,Ypos)" ; User presses W/Up arrow; this makes the picturebox (that has the player image set) to clear the image and makes "CurrentPicBox = picturebox(Xpos, Ypos + 1). Which then makes the picturebox(3,4) have the image set.
Would this work or is this logic incorrect?

Answer 1

Your logic should work just fine! Although I think it would be easier to manage if you'd use (0, 0) as the top-left corner and (4, 4) as the bottom-right one.
Moving the player would then be:
Up: (Xpos, Ypos - 1)
Down: (Xpos, Ypos + 1)
Left: (Xpos - 1, Ypos)
Right: (Xpos + 1, Ypos)
Here's an example class for creating and using a game grid:
Public NotInheritable Class GameBoard
'The size of each picture box.
Public Shared ReadOnly GameTileSize As New Size(16, 16)
'The 2D array holding our grid.
Private Grid As PictureBox(,)
Private PosX As Integer = 0
Private PosY As Integer = 0
Public Sub MovePlayer(ByVal Direction As MovementDirection)
Select Case Direction
Case MovementDirection.Left
If PosX - 1 < 0 Then Return 'Error checking. Cannot move outside grid.
Grid(PosX - 1, PosY).Image = Grid(PosX, PosY).Image 'Move image to the left.
Grid(PosX, PosY).Image = Nothing 'Clear the current picture box.
PosX -= 1
Case MovementDirection.Right
If PosX + 1 >= Grid.GetLength(0) Then Return
Grid(PosX + 1, PosY).Image = Grid(PosX, PosY).Image
Grid(PosX, PosY).Image = Nothing
PosX += 1
Case MovementDirection.Up
If PosY - 1 < 0 Then Return
Grid(PosX, PosY - 1).Image = Grid(PosX, PosY).Image
Grid(PosX, PosY).Image = Nothing
PosY -= 1
Case MovementDirection.Down
If PosY + 1 >= Grid.GetLength(1) Then Return
Grid(PosX, PosY + 1).Image = Grid(PosX, PosY).Image
Grid(PosX, PosY).Image = Nothing
PosY += 1
End Select
End Sub
Public Sub New(ByVal Container As Container, ByVal PlayerSprite As Image, ByVal TilesX As Integer, ByVal TilesY As Integer) As PictureBox(,)
'Initialize our array.
Grid = New PictureBox(TilesX - 1, TilesY - 1) {}
'Iterate every "coordinate" and add a game tile to it.
For x = 0 To TilesX - 1
For y = 0 To TilesY - 1
'Create a tile of the appropriate size and place it at a location that is a multiple of its size.
Dim Tile As New PictureBox() With {
.Size = GameBoard.GameTileSize,
.Location = New Point(x * GameBoard.GameTileSize.X, y * GameBoard.GameTileSize.Y),
.BorderStyle = BorderStyle.FixedSingle 'Add a border to the tile.
}
'Add the tile to our array.
Grid(x, y) = Tile
'Add the tile to the specified container.
Container.Controls.Add(Tile)
Next
Next
'Place the player at the initial coordinates.
Grid(PosX, PosY).Image = PlayerSprite
End Sub
Public Enum MovementDirection As Integer
Left = 0
Right
Up
Down
End Enum
End Class
Then you can use it like so:
'The variable holding our game board.
Dim Board As GameBoard
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
'Create the grid inside the form (Me), 4 tiles tall and wide.
Board = New GameBoard(Me, My.Resources.Player, 4, 4)
End Sub
Private Sub Form1_KeyDown(sender As Object, e As KeyEventArgs) Handles Me.KeyDown
'Handle movement.
Select Case e.KeyCode
Case Keys.Left, Keys.A : Board.MovePlayer(MovementDirection.Left)
Case Keys.Right, Keys.D : Board.MovePlayer(MovementDirection.Right)
Case Keys.Up, Keys.W : Board.MovePlayer(MovementDirection.Up)
Case Keys.Down, Keys.S : Board.MovePlayer(MovementDirection.Down)
End Select
End Sub
Replace My.Resources.Player with your actual player sprite.