Move a picturebox along a game grid

Question

Public Class In_Game_Screen
    Private Sub G_Screen_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles G_Screen.Paint
        Dim x As Integer = 10 'x position of top left corner of grid
        Dim y As Integer = 20 'y position of top left corner of grid
        Dim width As Integer = 40 'The number of squares horizontally
        Dim height As Integer = 30 'The number of squares vertically
        Dim size As Integer = 20 'The size in pixels, horizontally and vertically of each grid square

        Dim xloop As Integer
        Dim yloop As Integer
        Dim objPen As Pen
        Dim objPicGraphics As Graphics = e.Graphics

        objPen = New Pen(Drawing.Color.Black, 1)
        objPen.DashStyle = Drawing2D.DashStyle.Solid

        For xloop = 0 To width
            objPicGraphics.DrawLine(objPen, x + (xloop * size), y, x + (xloop * size), y + (height * size))
        Next
        For yloop = 0 To height
            objPicGraphics.DrawLine(objPen, x, y + (yloop * size), x + (width * size), y + (yloop * size))
        Next

    End Sub
End Class

Afternoon everyone this is the drawing that I have done for the design to my game screen and set a table.

What I basically want to do is the picturebox for instance to move along the squares on the game board and set a size of how many squares does it take. Anybody have programs that carry out this functionality so I can take parts out from there and apply it to my own program? Anything will help. Thanks. 

Answer 1

Hi

Here is one way. This is a complete test Project with no error checking included. If you want to try this out, start a new Project with a Blank Form1 and copy/replace this code. This example uses the W/S/A/D keys for movement.

' New BlankcForm1 
Option Strict On
Option Explicit On
Option Infer Off
Public Class Form1
    Dim SquareSize As New Size(20, 20)
    Dim GridCol As Color = Color.DarkGray
    Dim currH As Integer = 10
    Dim currV As Integer = 11
    Dim HorizCount As Integer = 40
    Dim VertCount As Integer = 30
    Dim Hborder As Integer = 10
    Dim Vborder As Integer = 10

    ' path to image
    Dim player As Image = Image.FromFile(Application.StartupPath & "\Data\DiceImages\6.png")

    Dim pb As New PictureBox
    Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
        ClientSize = New Size(Hborder * 2 + HorizCount * SquareSize.Width, Vborder * 2 + VertCount * SquareSize.Height)
        pb.Image = player
        pb.Size = New Size(SquareSize.Width, SquareSize.Height)
        pb.Location = New Point(Hborder, Vborder)
        pb.SizeMode = PictureBoxSizeMode.Zoom
        Controls.Add(pb)
    End Sub
    Private Sub Form1_Paint(sender As Object, e As PaintEventArgs) Handles MyBase.Paint
        Dim myPen As New Pen(GridCol, 1)
        For i As Integer = Hborder To HorizCount * SquareSize.Width + SquareSize.Width Step SquareSize.Width
            e.Graphics.DrawLine(myPen, New Point(i, Vborder), New Point(i, Vborder + VertCount * SquareSize.Height))
        Next
        For i As Integer = Vborder To VertCount * SquareSize.Height + SquareSize.Height Step SquareSize.Height
            e.Graphics.DrawLine(myPen, New Point(Hborder, i), New Point(Hborder + HorizCount * SquareSize.Width, i))
        Next
    End Sub
    Private Sub Form1_KeyPress(sender As Object, e As KeyPressEventArgs) Handles Me.KeyPress
        Dim h As Integer = pb.Location.X
        Dim v As Integer = pb.Location.Y
        Select Case e.KeyChar
            Case "W"c, "w"c
                v -= SquareSize.Height
            Case "S"c, "s"c
                v += SquareSize.Height
            Case "A"c, "a"c
                h -= SquareSize.Width
            Case "D"c, "d"c
                h += SquareSize.Width
        End Select
        If h < Hborder Then h = Hborder
        If h > Hborder + SquareSize.Width * HorizCount - SquareSize.Width Then
            h = pb.Location.X
        End If
        If v < Vborder Then v = Vborder
        If v > Vborder + SquareSize.Height * VertCount - SquareSize.Height Then
            v = pb.Location.Y
        End If
        pb.Location = New Point(h, v)
    End Sub
End Class

---

Regards Les, Livingston, Scotland

Answer 2

What I basically want to do is the picturebox for instance to move along the squares on the game board and set a size of how many squares does it take. Anybody have programs that carry out this functionality so I can take parts out from there and apply it to my own program? Anything will help. Thanks. 

Please finish off your previous post by providing the information requested.
https://social.msdn.microsoft.com/Forums/vstudio/en-US/ec3caebc-b54d-4f2f-a9bd-590954c68716

If you just start over each time with a new pieces of code whenever you run into a problem, you likely won't make any progress on this task

Answer 3

Yes finish up the other questions you started?

This one uses the mouse to move the picturebox with snap to grid.

Public Class Form2
    Private WithEvents Pic As New PictureBox With {.Parent = Me}
    Private GridColRows As New Point(6, 4)
    Private GridRect As Rectangle
    Private GridSize As Size
    Private MouseMovingColRow, PicColRow, MouseDownPicLocation, MouseDownLocation As Point

    Private Sub Form3_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        DoubleBuffered = True
        Text = "Drag Picturebox Grid"
        Pic.BackgroundImage = Image.FromFile("c:\bitmaps\cr logo icon.png")
        Pic.BackgroundImageLayout = ImageLayout.Stretch
        Form3_Resize(0, Nothing)
    End Sub

    Private Sub Form3_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
        With e.Graphics
            .Clear(Color.Black)
            .FillRectangle(Brushes.DimGray, GridRect)

            Using p1 As New Pen(Color.Black, 1)
                For x = GridRect.X To GridRect.X + GridRect.Width Step GridSize.Width
                    .DrawLine(p1, x, GridRect.Y, x, GridRect.Y + GridRect.Height)
                Next
                For y = GridRect.Y To GridRect.Y + GridRect.Height Step GridSize.Height
                    .DrawLine(p1, GridRect.X, y, GridRect.X + GridRect.Width, y)
                Next
            End Using

            .DrawString("tommytwotrain", New Font("arial", 12), Brushes.SteelBlue, ClientRectangle.Width - 120, 0)
        End With
    End Sub

    Private Sub Pic_MouseDown(sender As Object, e As MouseEventArgs) Handles Pic.MouseDown
        MouseDownPicLocation = Pic.Location
        MouseDownLocation = e.Location
    End Sub

    Private Sub Pic_MouseMove(sender As Object, e As MouseEventArgs) Handles Pic.MouseMove
        If e.Button = MouseButtons.Left Then
            SetPicLocation(e.Location)
            MouseDownPicLocation = Pic.Location
        End If
    End Sub

    Private Sub Pic_MouseUp(sender As Object, e As MouseEventArgs) Handles Pic.MouseUp
        If e.Button = MouseButtons.Left Then
            SetPicLocation(e.Location)
        End If
    End Sub

    Private Sub Form3_Resize(sender As Object, e As EventArgs) Handles Me.Resize
        Dim border As Integer = 10
        Dim header As Integer = 40
        Dim h As Integer = ClientRectangle.Height - (header + border)
        If h < 10 Then h = 10
        GridRect = New Rectangle(border, header, ClientRectangle.Width - (2 * border), h)
        GridSize = New Size(CInt(GridRect.Width / GridColRows.X), CInt(GridRect.Height / GridColRows.Y))
        Pic.ClientSize = GridSize
        Pic.Location = GetGridRectFromColRow(PicColRow).Location
        Invalidate()
    End Sub

    Private Function GetGridRectFromColRow(thisColRow As Point) As Rectangle
        'make the rectangle for the grid square at col row
        GetGridRectFromColRow = New Rectangle(GridRect.X + (thisColRow.X * GridSize.Width),
                GridRect.Y + (thisColRow.Y * GridSize.Height), GridSize.Width, GridSize.Height)
    End Function

    Private Function GetColRowFromPoint(thisPt As Point) As Point
        'convert pixel location to grid cols and rows
        GetColRowFromPoint = New Point(CInt(Math.Floor((thisPt.X - GridRect.X) / GridSize.Width)),
                    CInt(Math.Floor((thisPt.Y - GridRect.Y) / GridSize.Height)))

        If GetColRowFromPoint.X < 0 Then GetColRowFromPoint.X = 0
        If GetColRowFromPoint.X > GridColRows.X - 1 Then GetColRowFromPoint.X = GridColRows.X - 1
        If GetColRowFromPoint.Y < 0 Then GetColRowFromPoint.Y = 0
        If GetColRowFromPoint.Y > GridColRows.Y - 1 Then GetColRowFromPoint.Y = GridColRows.Y - 1
    End Function

    Private Sub SetPicLocation(thisMovePt As Point)
        'snap the picturebox to the col row on the grid at mouse pointer movept in pixels
        Dim movept As New Point(MouseDownPicLocation.X + thisMovePt.X,
                                MouseDownPicLocation.Y + thisMovePt.Y)
        PicColRow = GetColRowFromPoint(movept)
        Pic.Location = GetGridRectFromColRow(PicColRow).Location
        Refresh()
    End Sub
End Class

Answer 4

thanks Tommy for the program, would I declare an If statement if I want to set a limit on how I can choose how many mouse drags the image I can do. For example I have an image of a heavy tank and what I wanna do with it is to only move 3 steps on the game board. 

As well is there a way to disable an object that is on screen so the mouse cant move it about? I might put the image in a picture box and set a disable function but I could be wrong. I have the right Idea perhaps not the approach to it 

Answer 5

thanks Tommy for the program, would I declare an If statement if I want to set a limit on how I can choose how many mouse drags the image I can do. For example I have an image of a heavy tank and what I wanna do with it is to only move 3 steps on the game board. 

As well is there a way to disable an object that is on screen so the mouse cant move it about? I might put the image in a picture box and set a disable function but I could be wrong. I have the right Idea perhaps not the approach to it 

Ok I will show you a way. But after this I am going to expect to see your attempt first. ie you show us what you have done when you are stumped. It does no good to just have us write the program for you. You need to learn how to program.

I am not convinced you have learned anything yet. You must learn the basics first else you will have no idea what to do and get frustrated. You cant just become a game programmer overnight.

In order to do this you will need to have some kind of data structure. I have made a class named Sprite. I have added multiple pictureboxes and make them into a list of pictureboxes.

So you need to learn classes and lists.

Note the class has the variable steps, and visible. Steps is how many squares the sprite can move at once. Visible allows the sprite to be not visible =0, visible but not movable (frozen) =1 and visible and movable =2.

I have set the ace heart to move two steps. YOu can see in the gif it will go two steps one way or 1 step + 1 step horz and vert.

Ace Spades is frozen, cant move it. The others can move any amount.

See if you can follow what is happening. If not you probably need to go slower learning one simple thing at a time. Pick something simpler to work on to start with. Come back to this game later.

Public Class Form4
    Private GridColRows As New Point(6, 4)
    Private GridRect As Rectangle
    Private GridSize As Size
    Private MouseMovingColRow, PicColRow, MouseDownPicLocation, MouseDownLocation As Point

    Private Class Sprite
        Public Pic As PictureBox
        Public ColRow As Point
        Public Steps As Integer = -1    '-1 = unlimited move
        Public Visible As Integer = 2   '0 = not visible  1= Frozen  2=Active
    End Class
    Private Sprites As New List(Of Sprite)
    Private MouseDownSprite As Sprite

    Private Sub Form3_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        DoubleBuffered = True
        Text = "Drag Picturebox Grid"

        For i = 1 To 4

            Dim pic = New PictureBox()
            With pic
                .Name = "Pic " & i.ToString
                .Size = GridSize
                .BackgroundImageLayout = ImageLayout.Stretch
                .BackgroundImage = Image.FromFile("c:\bitmaps\cards misc\classic-cards\" & i.ToString & ".png")
                Me.Controls.Add(pic)
                AddHandler .MouseDown, AddressOf pics_MouseDown
                AddHandler .MouseMove, AddressOf pics_MouseMove
                AddHandler .MouseUp, AddressOf pics_MouseUp
            End With

            Dim spt As New Sprite
            spt.pic = pic
            spt.ColRow = New Point(i, 0)
            Sprites.Add(spt)

        Next

        Sprites(1).Visible = 1  'frozen
        Sprites(2).Steps = 2

        Form3_Resize(0, Nothing)
    End Sub

    Private Sub pics_MouseDown(ByVal obj As Object, ByVal e As MouseEventArgs)
        If e.Button = MouseButtons.Left Then
            For Each spt As Sprite In Sprites
                If spt.Pic Is DirectCast(obj, PictureBox) Then
                    If spt.Visible = 2 Then
                        MouseDownPicLocation = spt.Pic.Location
                        MouseDownLocation = e.Location
                        MouseDownSprite = spt
                        spt.Pic.BringToFront()
                    Else
                        MouseDownSprite = Nothing
                    End If
                    Exit For
                End If
            Next
        End If
    End Sub

    Private Sub pics_MouseMove(ByVal obj As Object, ByVal e As MouseEventArgs)
        If e.Button = MouseButtons.Left AndAlso MouseDownSprite IsNot Nothing Then
            SetSpriteLocation(e.Location, MouseDownSprite)
            MouseDownPicLocation = MouseDownSprite.Pic.Location
        End If
    End Sub

    Private Sub pics_MouseUp(ByVal obj As Object, ByVal e As MouseEventArgs)
        If e.Button = MouseButtons.Left AndAlso MouseDownSprite IsNot Nothing Then
            SetSpriteLocation(e.Location, MouseDownSprite)
            MouseDownSprite.ColRow = PicColRow
        End If
    End Sub

    Private Sub Form3_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
        With e.Graphics
            .Clear(Color.Black)
            .FillRectangle(Brushes.DimGray, GridRect)

            Using p1 As New Pen(Color.Black, 1)
                For x = GridRect.X To GridRect.X + GridRect.Width Step GridSize.Width
                    .DrawLine(p1, x, GridRect.Y, x, GridRect.Y + GridRect.Height)
                Next
                For y = GridRect.Y To GridRect.Y + GridRect.Height Step GridSize.Height
                    .DrawLine(p1, GridRect.X, y, GridRect.X + GridRect.Width, y)
                Next
            End Using

            .DrawString("tommytwotrain", New Font("arial", 12), Brushes.SteelBlue, ClientRectangle.Width - 120, 0)
        End With
    End Sub

    Private Sub Form3_Resize(sender As Object, e As EventArgs) Handles Me.Resize
        Dim border As Integer = 10
        Dim header As Integer = 40
        Dim h As Integer = ClientRectangle.Height - (header + border)
        If h < 10 Then h = 10
        GridRect = New Rectangle(border, header, ClientRectangle.Width - (2 * border), h)
        GridSize = New Size(CInt(GridRect.Width / GridColRows.X), CInt(GridRect.Height / GridColRows.Y))
        DrawSprites()
        Invalidate()
    End Sub

    Private Sub DrawSprites()
        For Each spt In Sprites
            If spt.Visible > 0 Then spt.Pic.Visible = True
            spt.Pic.ClientSize = GridSize
            spt.Pic.Location = GetGridRectFromColRow(spt.ColRow).Location
        Next

    End Sub

    Private Function GetGridRectFromColRow(thisColRow As Point) As Rectangle
        'make the rectangle for the grid square at col row
        GetGridRectFromColRow = New Rectangle(GridRect.X + (thisColRow.X * GridSize.Width),
                    GridRect.Y + (thisColRow.Y * GridSize.Height), GridSize.Width, GridSize.Height)
    End Function

    Private Function GetColRowFromPoint(thisPt As Point) As Point
        'convert pixel location to grid cols and rows
        GetColRowFromPoint = New Point(CInt(Math.Floor((thisPt.X - GridRect.X) / GridSize.Width)),
                        CInt(Math.Floor((thisPt.Y - GridRect.Y) / GridSize.Height)))

        If GetColRowFromPoint.X < 0 Then GetColRowFromPoint.X = 0
        If GetColRowFromPoint.X > GridColRows.X - 1 Then GetColRowFromPoint.X = GridColRows.X - 1
        If GetColRowFromPoint.Y < 0 Then GetColRowFromPoint.Y = 0
        If GetColRowFromPoint.Y > GridColRows.Y - 1 Then GetColRowFromPoint.Y = GridColRows.Y - 1
    End Function

    Private Sub SetSpriteLocation(thisMovePt As Point, spt As Sprite)
        'snap the picturebox to the col row on the grid at mouse pointer movept in pixels
        Dim movept As New Point(MouseDownPicLocation.X + thisMovePt.X,
                                    MouseDownPicLocation.Y + thisMovePt.Y)

        PicColRow = GetColRowFromPoint(movept)

        Dim dc As Integer = PicColRow.X - spt.ColRow.X
        Dim dr As Integer = PicColRow.Y - spt.ColRow.Y
        Dim dc2 As Integer = Math.Abs(dc)
        Dim dr2 As Integer = Math.Abs(dr)

        If spt.Steps > 0 AndAlso Not spt.Steps = -1 AndAlso dc2 + dr2 > spt.Steps Then
            If dc2 > spt.Steps Then
                dc2 = spt.Steps * Math.Sign(dc)
                dr2 = 0
            Else
                If dr2 > spt.Steps - dc2 Then
                    dr2 = (spt.Steps - dc2) * Math.Sign(dr)
                    dc2 = dc
                End If
            End If
            PicColRow = New Point(spt.ColRow.X + dc2, spt.ColRow.Y + dr2)
        End If


        spt.Pic.Location = GetGridRectFromColRow(PicColRow).Location

        Refresh()
    End Sub
End Class

So this example works but needs to be debugged.

Here are the cards named 1.png, 2, 3, 4.png.

Answer 6

Thanks Tommy, yes I know I have the deadline soon perhaps I need to take time and be patient when approaching problems such as just now I figured out how I could put more than one image on the windows form. I think its just step by step and me being patient otherwise like you said I will get frustrated. 

Answer 7

Another question how did you do that gif then I can show the work thus far. Mainly how do I create it? Do i need a program for it

Answer 8

Another question how did you do that gif then I can show the work thus far. Mainly how do I create it? Do i need a program for it

Yes you need a program to make the animated gifs like I show (unless you are very good and make your own with vb). I use Gif Creator by Iron Razerz a member here on the forum. But you will need to get one. There are free ones. Just be careful as the free ones tend to come with lots of things you did not ask for. Even viruses.

But we can normally figure what you mean from a couple still shots and the code and your word description.

The other thing is you are learning several things. How to use Visual Studio, how to use MS docs, how to search for answers, and then how to program.

Try to do too much at once and you just get confusion.

Plus its easier to make simple one form examples of just the thing you are learning. Then add the technique to your larger project once you understand the simple basics a bit.

Answer 9

Thanks for the advice :) I'll take it one step at a time starting with phase 1: getting the tanks to move about on the game grid.

Phase 2: get them to move a limited number of steps.

and so on. 

I know I want to get my coursework finished but I think my rushing technique will create stress, frustration etc and all I need in the end is patience even if things are going wrong and just learn from mistakes. It's like a good person said that things are a "learning curve" 

Answer 10

Thanks for the advice :) I'll take it one step at a time starting with phase 1: getting the tanks to move about on the game grid.

Phase 2: get them to move a limited number of steps.

and so on. 

I know I want to get my coursework finished but I think my rushing technique will create stress, frustration etc and all I need in the end is patience even if things are going wrong and just learn from mistakes. It's like a good person said that things are a "learning curve" 

Oh you will get frustrated dont worry.

Everyone has a style that works best for them. Its another thing to learn.

You will get stuck on the simplest things. Then when you find it, its Eureka! Very fun and rewarding. Thats how programming, and life, goes. One puzzle after another. Never stops. Always another puzzle.

When I am building my code I have a good sized tool box with 2 hammers and 4 screwdrivers and two saws and some other. I have lots of wood and bricks and dirt to build with. I know how to saw and hammer already. When I get going on something I get totally absorbed in it. I write code all the hours I am awake. When not writing it I am reading it or thinking about it. I am working my project. Its 4am I have to sleep, but, I will just do this one more thing...

What you have is a hammer and some wood. Cant do much with that. Now you need a saw and nails. Then you can actually build a birdhouse to start with.

:)

Answer 11

I like the way you phrased it  :) way to make my day. Im not gonna give up on these problems I'll try formulate as many combos possible to fix this solution and if I can't reach the solution walk away from my laptop and think about the problem and try formulate how to solve it.