# How do I see how close one picture box is to another ? (GAME DEV)

• ### Question

• Im making a game. I want to make a "tracker feature" I want to see if i can get a button to turn green when picturebox1 is 32 pixels from picturebox2.

any help?

Thursday, June 22, 2017 11:13 PM

• Im making a game. I want to make a "tracker feature" I want to see if i can get a button to turn green when picturebox1 is 32 pixels from picturebox2.

any help?

Hi,

Vector Norm? (In 2d Pythagoras). To compute the distance from point to point. If you want to compute the distance of the edges, you only need to compute the distance of some parallel lines.

Regards,

Thorsten

Sorry to be a pain, but im lost :( when searching about calculating the distance between to parallel lines it comes up with the equations for graphs etc. any more information you could give me?

Hi

Give this code a try out. It doesn't use any calculations of the type suggested in other posts, but depending on your needs, may be of use. This example just sets an invisible rectangle around PictureBox1 and checks for an intersection with PictureBox2. It uses the keys WASD to move PictureBox2 around to test for intersections.Try it as a new Project , Form1 with 2 PictureBoxes

' Form1 with PictureBox1, PictureBox2
Option Strict On
Option Explicit On
Public Class Form1
Dim x, y As Integer
Dim r As New Rectangle()
x = PictureBox2.Location.X
y = PictureBox2.Location.Y

PictureBox1.Size = New Size(100, 100)
PictureBox1.Location = New Point(10, 10)
r.Location = New Point(PictureBox1.Left - 35, PictureBox1.Top - 35)
r.Size = New Size(PictureBox1.Size.Width + 70, PictureBox1.Size.Height + 70)
End Sub

Private Sub Form1_KeyDown(sender As Object, e As KeyEventArgs) Handles Me.KeyDown
Select Case e.KeyCode
Case Keys.W
y -= 4
Case Keys.S
y += 4
Case Keys.D
x += 4
Case Keys.A
x -= 4
End Select
PictureBox2.Location = New Point(x, y)
If checkIntersect() Then
PictureBox1.BackColor = Color.Red
Else
PictureBox1.BackColor = Color.Yellow
End If
End Sub
Function checkIntersect() As Boolean
If PictureBox2.Bounds.IntersectsWith(r) Then
Return True
End If
Return False
End Function
End Class

Regards Les, Livingston, Scotland

• Proposed as answer by Friday, June 23, 2017 12:02 AM
• Marked as answer by Friday, June 23, 2017 12:58 AM
Thursday, June 22, 2017 11:59 PM

### All replies

• Im making a game. I want to make a "tracker feature" I want to see if i can get a button to turn green when picturebox1 is 32 pixels from picturebox2.

any help?

Hi,

Vector Norm? (In 2d Pythagoras). To compute the distance from point to point. If you want to compute the distance of the edges, you only need to compute the distance of some parallel lines.

Regards,

Thorsten

Thursday, June 22, 2017 11:26 PM
• im not too advanced with VB.. Could you be a bit more specific please? This is my first time really using it for gaming.. ive made an electrical engineers calculator, which is just simple calculations.

thanks!

Thursday, June 22, 2017 11:27 PM
• Im making a game. I want to make a "tracker feature" I want to see if i can get a button to turn green when picturebox1 is 32 pixels from picturebox2.

any help?

Hi,

Vector Norm? (In 2d Pythagoras). To compute the distance from point to point. If you want to compute the distance of the edges, you only need to compute the distance of some parallel lines.

Regards,

Thorsten

Sorry to be a pain, but im lost :( when searching about calculating the distance between to parallel lines it comes up with the equations for graphs etc. any more information you could give me?
Thursday, June 22, 2017 11:36 PM
• im not too advanced with VB.. Could you be a bit more specific please? This is my first time really using it for gaming.. ive made an electrical engineers calculator, which is just simple calculations.

thanks!

Ok,

here's what we have to think about: Do you want to compute the distance of the centers of the pictureboxes, or the distance of the boundaries of the pictureboxes?

For the center, just get both center points (by taking the Location Property and the Width and Height Property. Add half of width to the Location.X and half of the hieght to location.Y respectively). Now you can compute the distance of those points by subtracting the coordinates, squaring, adding and taking the root.

(pseudo code, where c1 and c2 are the centers of the pictureboxes)

Dim xD as Double = c2.X - c1.X

Dim yD as Double = c2.Y - c1.Y

Dim distance as double = Math.Sqrt(xD*xD + yD*yD)

Regards,

Thorsten

Thursday, June 22, 2017 11:39 PM
• For computing the distance of the edges of the pictureboxes, consider each edge as a line (segment) and compute the shortest distance to all edges of the corresponding other picturebox.

https://stackoverflow.com/questions/2824478/shortest-distance-between-two-line-segments

https://stackoverflow.com/questions/627563/calculating-the-shortest-distance-between-two-lines-line-segments-in-3d

Or use this:

https://en.wikipedia.org/wiki/Skew_lines#Distance

https://en.wikipedia.org/wiki/Distance_between_two_straight_lines

Regards,

Thorsten

Thursday, June 22, 2017 11:50 PM
• Im making a game. I want to make a "tracker feature" I want to see if i can get a button to turn green when picturebox1 is 32 pixels from picturebox2.

any help?

Hi,

Vector Norm? (In 2d Pythagoras). To compute the distance from point to point. If you want to compute the distance of the edges, you only need to compute the distance of some parallel lines.

Regards,

Thorsten

Sorry to be a pain, but im lost :( when searching about calculating the distance between to parallel lines it comes up with the equations for graphs etc. any more information you could give me?

Hi

Give this code a try out. It doesn't use any calculations of the type suggested in other posts, but depending on your needs, may be of use. This example just sets an invisible rectangle around PictureBox1 and checks for an intersection with PictureBox2. It uses the keys WASD to move PictureBox2 around to test for intersections.Try it as a new Project , Form1 with 2 PictureBoxes

' Form1 with PictureBox1, PictureBox2
Option Strict On
Option Explicit On
Public Class Form1
Dim x, y As Integer
Dim r As New Rectangle()
x = PictureBox2.Location.X
y = PictureBox2.Location.Y

PictureBox1.Size = New Size(100, 100)
PictureBox1.Location = New Point(10, 10)
r.Location = New Point(PictureBox1.Left - 35, PictureBox1.Top - 35)
r.Size = New Size(PictureBox1.Size.Width + 70, PictureBox1.Size.Height + 70)
End Sub

Private Sub Form1_KeyDown(sender As Object, e As KeyEventArgs) Handles Me.KeyDown
Select Case e.KeyCode
Case Keys.W
y -= 4
Case Keys.S
y += 4
Case Keys.D
x += 4
Case Keys.A
x -= 4
End Select
PictureBox2.Location = New Point(x, y)
If checkIntersect() Then
PictureBox1.BackColor = Color.Red
Else
PictureBox1.BackColor = Color.Yellow
End If
End Sub
Function checkIntersect() As Boolean
If PictureBox2.Bounds.IntersectsWith(r) Then
Return True
End If
Return False
End Function
End Class

Regards Les, Livingston, Scotland

• Proposed as answer by Friday, June 23, 2017 12:02 AM
• Marked as answer by Friday, June 23, 2017 12:58 AM
Thursday, June 22, 2017 11:59 PM
• im not too advanced with VB.. Could you be a bit more specific please? This is my first time really using it for gaming.. ive made an electrical engineers calculator, which is just simple calculations.

thanks!

Ok,

here's what we have to think about: Do you want to compute the distance of the centers of the pictureboxes, or the distance of the boundaries of the pictureboxes?

For the center, just get both center points (by taking the Location Property and the Width and Height Property. Add half of width to the Location.X and half of the hieght to location.Y respectively). Now you can compute the distance of those points by subtracting the coordinates, squaring, adding and taking the root.

Say center1 has a x1 and a y1 part, centerpoint2 = x2 and y2. Subtract x2 from x1 and y2 - y1. Now square both distances, add them and take the root like: (pseudo code)

Dim xD as Double = c2.X - c1.X

Dim yD as Double = c2.Y - c1.Y

Dim distance as double = Math.Sqrt(xD*xD + yD*yD)

Regards,

Thorsten

okay. i understand them calclations, but how would i go about getting the centre point for an image?

im using 2 images.

Sprite (the character) and nextlevel (the door).

the only way i can think of saying that is like the following;

nextlevecentre = 89, 309 (this image never moves)

not sure how i would get a live tracking of the centre point of the sprite.

in the end i want to say;

if distance = 96 then picturebox1 = red

end if

if distance = 64 then picturebox1 = green

end if

i will be replacing the red and green with something else, dont worry.

ben

Friday, June 23, 2017 12:00 AM

• Hi

Give this code a try out. It doesn't use any calculations of the type suggested in other posts, but depending on your needs, may be of use. This example just sets an invisible rectangle around PictureBox1 and checks for an intersection with PictureBox2. It uses the keys WASD to move PictureBox2 around to test for intersections.Try it as a new Project , Form1 with 2 PictureBoxes

Regards Les, Livingston, Scotland

Hi, what a great idea!! [Maybe use a set of rectangles to get the closest vertices when hittesting, so you could compute the correct distance when there's no perpendicular lines hitting the "other" picturebox (when the top of pb2 is lower than the baseline of pb1) - ... ore always do an additional computation of the distances of the vertices]

Very nice.

Regards,

Thorsten

Friday, June 23, 2017 12:01 AM
• Im making a game. I want to make a "tracker feature" I want to see if i can get a button to turn green when picturebox1 is 32 pixels from picturebox2.

any help?

Hi,

Vector Norm? (In 2d Pythagoras). To compute the distance from point to point. If you want to compute the distance of the edges, you only need to compute the distance of some parallel lines.

Regards,

Thorsten

Sorry to be a pain, but im lost :( when searching about calculating the distance between to parallel lines it comes up with the equations for graphs etc. any more information you could give me?

Hi

Give this code a try out. It doesn't use any calculations of the type suggested in other posts, but depending on your needs, may be of use. This example just sets an invisible rectangle around PictureBox1 and checks for an intersection with PictureBox2. It uses the keys WASD to move PictureBox2 around to test for intersections.Try it as a new Project , Form1 with 2 PictureBoxes

' Form1 with PictureBox1, PictureBox2
Option Strict On
Option Explicit On
Public Class Form1
Dim x, y As Integer
Dim r As New Rectangle()
x = PictureBox2.Location.X
y = PictureBox2.Location.Y

PictureBox1.Size = New Size(100, 100)
PictureBox1.Location = New Point(10, 10)
r.Location = New Point(PictureBox1.Left - 35, PictureBox1.Top - 35)
r.Size = New Size(PictureBox1.Size.Width + 70, PictureBox1.Size.Height + 70)
End Sub

Private Sub Form1_KeyDown(sender As Object, e As KeyEventArgs) Handles Me.KeyDown
Select Case e.KeyCode
Case Keys.W
y -= 4
Case Keys.S
y += 4
Case Keys.D
x += 4
Case Keys.A
x -= 4
End Select
PictureBox2.Location = New Point(x, y)
If checkIntersect() Then
PictureBox1.BackColor = Color.Red
Else
PictureBox1.BackColor = Color.Yellow
End If
End Sub
Function checkIntersect() As Boolean
If PictureBox2.Bounds.IntersectsWith(r) Then
Return True
End If
Return False
End Function
End Class

Regards Les, Livingston, Scotland

I'll give this a try. Thanks Thorsten and Leshay for the help. Its much appreciated!

ben

Friday, June 23, 2017 12:07 AM

• okay. i understand them calclations, but how would i go about getting the centre point for an image?

im using 2 images.

Sprite (the character) and nextlevel (the door).

Hi,

both the door and the character are displayed at distinct coordinates and both have a width and a height.

Regards,

Thorsten

Friday, June 23, 2017 12:11 AM
• Im making a game. I want to make a "tracker feature" I want to see if i can get a button to turn green when picturebox1 is 32 pixels from picturebox2.

any help?

Hi,

Vector Norm? (In 2d Pythagoras). To compute the distance from point to point. If you want to compute the distance of the edges, you only need to compute the distance of some parallel lines.

Regards,

Thorsten

Sorry to be a pain, but im lost :( when searching about calculating the distance between to parallel lines it comes up with the equations for graphs etc. any more information you could give me?

Hi

Give this code a try out. It doesn't use any calculations of the type suggested in other posts, but depending on your needs, may be of use. This example just sets an invisible rectangle around PictureBox1 and checks for an intersection with PictureBox2. It uses the keys WASD to move PictureBox2 around to test for intersections.Try it as a new Project , Form1 with 2 PictureBoxes

' Form1 with PictureBox1, PictureBox2
Option Strict On
Option Explicit On
Public Class Form1
Dim x, y As Integer
Dim r As New Rectangle()
x = PictureBox2.Location.X
y = PictureBox2.Location.Y

PictureBox1.Size = New Size(100, 100)
PictureBox1.Location = New Point(10, 10)
r.Location = New Point(PictureBox1.Left - 35, PictureBox1.Top - 35)
r.Size = New Size(PictureBox1.Size.Width + 70, PictureBox1.Size.Height + 70)
End Sub

Private Sub Form1_KeyDown(sender As Object, e As KeyEventArgs) Handles Me.KeyDown
Select Case e.KeyCode
Case Keys.W
y -= 4
Case Keys.S
y += 4
Case Keys.D
x += 4
Case Keys.A
x -= 4
End Select
PictureBox2.Location = New Point(x, y)
If checkIntersect() Then
PictureBox1.BackColor = Color.Red
Else
PictureBox1.BackColor = Color.Yellow
End If
End Sub
Function checkIntersect() As Boolean
If PictureBox2.Bounds.IntersectsWith(r) Then
Return True
End If
Return False
End Function
End Class

Regards Les, Livingston, Scotland

for some reason, maybe obivous but im half asleep lol, when using the code you supplied me with, my character seems to bounce straight back to its starting position.

Option Explicit On
Option Strict On
Public Class Level3

Private Sub Level3_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles Me.KeyDown
Select Case e.KeyCode
Case Keys.A
Me.Sprite.Left -= 8
Case Keys.W
Me.Sprite.Top -= 8
Case Keys.D
Me.Sprite.Left += 8
Case Keys.S
Me.Sprite.Top += 8
End Select
Sprite.Location = New Point(x, y)
If checkIntersect() Then
hotbartracker.BackColor = Color.Green
End If
If Sprite.Bounds.IntersectsWith(top_border.Bounds) Then
Me.Sprite.Left = 465
Me.Sprite.Top = 342
End If
If Sprite.Bounds.IntersectsWith(bottom_border.Bounds) Then
Me.Sprite.Left = 465

Me.Sprite.Top = 342
End If
If Sprite.Bounds.IntersectsWith(right_border.Bounds) Then
Me.Sprite.Left = 465
Me.Sprite.Top = 342
End If
If Sprite.Bounds.IntersectsWith(left_border.Bounds) Then
Me.Sprite.Left = 465
Me.Sprite.Top = 342
End If

End Sub
Dim x, y As Integer
Dim r As New Rectangle()
x = Sprite.Location.X
y = Sprite.Location.Y
NextLevel.Size = New Size(64, 64)
NextLevel.Location = New Point(121, 341)
r.Location = New Point(NextLevel.Left - 121, NextLevel.Top - 341)
r.Size = New Size(NextLevel.Size.Width + 92, NextLevel.Size.Height + 92)
End Sub
Function checkIntersect() As Boolean
If Sprite.Bounds.IntersectsWith(r) Then
Return True
End If
Return False
End Function
End Class

ben

Friday, June 23, 2017 12:29 AM
• Hi,

you change the Location of the sprite, but not the location of the surrounding rect.

Case Keys.A Me.Sprite.Left -= 8
x -= 8

and so on for the other keys...

Regards,

Thorsten

Friday, June 23, 2017 12:34 AM
• this is my issue. My sprite no longer moves 8 pixels up, down, left or right. its starting position is

465, 342

when pressing W, A, S or D it just returns to its starting position.

ben

Friday, June 23, 2017 12:36 AM
• Hi

There are numerous items in your code that may be incorrect.

Did you try my code as a stand alone new Project?

I believe you are setting/using things withing the code you posted in the wrong way. For example, you use:

Sprite.Location = New Point(x, y)

and unless you alter x and y elsewhere, then the Sprite will ALWAYS be set to the original/old position regardless of the key presses.

BTW: in the example I posted, the first PictureBox was considered as static and had the rectangle surrounding it - the second PictureBox is the one that is set up to move and has no invisible rectangle.

If you have more than 1 PictureBox moving then you would need to consider having all of them with 1/2 intersection distance rectangles so that any collision could be found. In such a case, you would test for any pair of invisible rectangles intersecting.

Regards Les, Livingston, Scotland

• Edited by Friday, June 23, 2017 12:44 AM
Friday, June 23, 2017 12:37 AM
• Hi

There are numerous items in your code that may be incorrect.

Did you try my code as a stand alone new Project?

I believe you are setting/using things withing the code you posted in the wrong way. For example, you use:

Sprite.Location = New Point(x, y)
and unless you alter x and y elsewhere, then the Sprite will ALWAYS be set to the original/old position regardless of the key presses.

Regards Les, Livingston, Scotland

Im so sorry. I see what ive done wrong now. Im changing the position value of X and Y, not my actual me.sprite.

Thanks again !

ben

• Marked as answer by Friday, June 23, 2017 12:57 AM
• Unmarked as answer by Friday, June 23, 2017 12:58 AM
Friday, June 23, 2017 12:39 AM
• Here is something using the mouse.

This uses the distance between points method Thorsten mentioned. There are two data points that are manipulated and then when the screen is updated pictureboxes are used to represent the points. You could have more points. etc.

Just copy and paste to an empty form. It makes the pictureboxes in the code.

Public Class Form2
Private WithEvents Pbox1 As New PictureBox With {.Parent = Me, .Size = New Size(30, 30),
.BackColor = Color.Red, .Name = "Pbox1"}
Private WithEvents Pbox2 As New PictureBox With {.Parent = Me, .Size = New Size(30, 30),
.BackColor = Color.Blue, .Name = "Pbox2"}
Private rnd As New Random(Now.Millisecond)
Private pt1, pt2, MdPt, PboxMdPt As Point

Text = "Chase Me!"
ClientSize = New Size(300, 300)
BackColor = Color.DimGray
pt1 = New Point(rnd.Next(0, 100), rnd.Next(0, 100))
pt2 = New Point(rnd.Next(200, 270), rnd.Next(200, 270))
End Sub

Private Sub Pbox1_MouseDown(sender As Object, e As MouseEventArgs) Handles Pbox1.MouseDown
MdPt = e.Location
PboxMdPt = pt1
End Sub

Private Sub Pbox2_MouseDown(sender As Object, e As MouseEventArgs) Handles Pbox2.MouseDown
MdPt = e.Location
PboxMdPt = pt2
End Sub

Private Sub Pbox_MouseMove(sender As Object, e As MouseEventArgs) Handles _
Pbox1.MouseMove, Pbox2.MouseMove

If e.Button = MouseButtons.Left Then
Dim dx As Integer = e.X - MdPt.X
Dim dy As Integer = e.Y - MdPt.Y

Dim theName As String = DirectCast(sender, PictureBox).Name
Select Case theName
Case "Pbox1"
pt1.X += dx
pt1.Y += dy
Case "Pbox2"
pt2.X += dx
pt2.Y += dy
End Select

If CheckCollision(pt1, pt2) Then
If theName = "Pbox1" Then
pt2 = New Point(rnd.Next(0, 270), rnd.Next(0, 270))
Else
pt1 = New Point(rnd.Next(0, 270), rnd.Next(0, 270))
End If
End If

End If
End Sub

Pbox1.Location = New Point(CInt((pt1.X - Pbox1.ClientSize.Width / 2)), CInt(pt1.Y - Pbox1.ClientSize.Height / 2))
Pbox2.Location = New Point(CInt((pt2.X - Pbox2.ClientSize.Width / 2)), CInt(pt2.Y - Pbox2.ClientSize.Height / 2))
End Sub

Private Function CheckCollision(ptA As Point, ptB As Point) As Boolean
CheckCollision = False

Dim dx As Integer = ptB.X - ptA.X
Dim dy As Integer = ptB.Y - ptA.Y
Dim r As Integer = CInt(Math.Sqrt((dx * dx) + (dy * dy)))
If r < 50 Then CheckCollision = True

End Function
End Class

Friday, June 23, 2017 1:23 AM