none
How do I "move" a picturebox image around a grid of pictureboxes? RRS feed

  • 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?


     
    Wednesday, June 20, 2018 3:20 PM

All replies

  • Here is an example of moving a picturebox.

    There are many ways to do things and the best way to do this kind of animation depends on the desired result.

    So my next question is what is it you are making overall? A chess game? Using pictureboxes as you describe will quickly become awkward and there are better ways to do a game. But if you just want to practice learning to move controls then this is what you need.

    Describe more of what you want or an image or link.

    PS I guess you want a grid to move on. I see you just want to move the image to a new picturebox in a grid of pictureboxes.

    So yes what you describe is sort of a start.

    However again there are other ways to do it maybe better. What is the purpose?

    If it was a like a chessboard how many rows and columns will it have. What type of graphics? A checker? Or a Queen image? etc.

    Are you making the worlds best game or is it just for practice to learn something?

    This example moves one picture box with the arrow keys.

    Public Class Form5
    
        Private Sub Form5_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            KeyPreview = True
    
        End Sub
    
        Private Sub Form5_KeyDown(sender As Object, e As KeyEventArgs) Handles Me.KeyDown
            Select Case e.KeyCode
                Case Keys.Up
                    PictureBox1.Location = New Point(PictureBox1.Location.X, PictureBox1.Location.Y - 1)
                Case Keys.Left
                    PictureBox1.Location = New Point(PictureBox1.Location.X - 1, PictureBox1.Location.Y)
                Case Keys.Right
                    PictureBox1.Location = New Point(PictureBox1.Location.X + 1, PictureBox1.Location.Y)
                Case Keys.Down
                    PictureBox1.Location = New Point(PictureBox1.Location.X, PictureBox1.Location.Y + 1)
            End Select
    
            If PictureBox1.Left < 0 Then PictureBox1.Left = 0
            If PictureBox1.Left > ClientSize.Width - 1 Then PictureBox1.Left = ClientSize.Width - 1
            If PictureBox1.Top < 0 Then PictureBox1.Top = 0
            If PictureBox1.Bottom > ClientSize.Height Then PictureBox1.Top = ClientSize.Height - PictureBox1.Height
        End Sub
    
    End Class




    Wednesday, June 20, 2018 6:37 PM
  • Here is something more like what you mean I think. It has a grid of pictureboxes and as you move with the arrow keys it moves the image from picturebox to picturebox.

    The grid position is saved as you moved in rows and cols to match the grid. Then, the trick, the col, row is converted to the corresponding serial index ie for 3x3 that would be 0 to 8. Now with the index we can change the picturebox we have in our list of pictureboxes at that index.

    However if you have many more pictureboxes then there are more efficient ways to draw the screen.

    The example makes the pictureboxes in code in the form load event.  All you have to do to run it is paste the code into an empty form.

    Public Class Form5
        Private gridRow As Integer = 1
        Private gridCol As Integer = 1
        Private gridMax As Integer = 2
        Private gridWidth As Integer = 50   'pixels
        Private OriginalBmp As Image = Image.FromFile("c:\bitmaps\sphere1.png")
        Private PicsList As New List(Of PictureBox)
    
        Private Sub Form5_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            KeyPreview = True
            Dim r, c As Integer
    
            'arrange the pictureboxes in 3 x 3 grid
            For r = 0 To gridMax
                For c = 0 To gridMax
                    Dim p As New PictureBox
                    With p
                        .Name = "Pic" & c.ToString & r.ToString
                        .Location = New Point(gridWidth + (c * gridWidth), gridWidth + (r * gridWidth))
                        .BackColor = Color.White
                        .Size = New Size(gridWidth, gridWidth)
                        .BackgroundImageLayout = ImageLayout.Stretch
                        Controls.Add(p)
                        PicsList.Add(p)
                    End With
                Next
            Next
    
            PicsList(4).BackgroundImage = OriginalBmp
    
        End Sub
    
        Private Function GetPicIndex(c As Integer, r As Integer) As Integer
            'convert saved grid col, row to piclist serial index
            GetPicIndex = c + (r * (gridMax + 1))
        End Function
    
        Private Sub Form5_KeyDown(sender As Object, e As KeyEventArgs) Handles Me.KeyDown
            'clear the current picturebox using the list of pictureboxes
            Dim i As Integer = GetPicIndex(gridCol, gridRow)
            PicsList(i).BackgroundImage = Nothing
    
            Select Case e.KeyCode
                Case Keys.Up
                    gridRow -= 1
                Case Keys.Left
                    gridCol -= 1
                Case Keys.Right
                    gridCol += 1
                Case Keys.Down
                    gridRow += 1
            End Select
    
            If gridRow < 0 Then gridRow = 0
            If gridRow > 2 Then gridRow = 2
            If gridCol < 0 Then gridCol = 0
            If gridCol > 2 Then gridCol = 2
    
            i = GetPicIndex(gridCol, gridRow)
            PicsList(i).BackgroundImage = OriginalBmp
    
        End Sub
    End Class

    Wednesday, June 20, 2018 10:49 PM