locked
Rotate PictureBox RRS feed

  • Question

  • I want it so that when the player moves, lets say left, the picture rotates left and then starts moving.
    Monday, December 23, 2013 1:38 AM

Answers

  • You can't easily rotate a PictureBox... a PictureBox is not a good choice for a "sprite"-like object.

    Please review this article:

    http://social.technet.microsoft.com/wiki/contents/articles/17358.how-to-create-video-games-in-vb-net-windows-forms.aspx


    Reed Kimble - "When you do things right, people won't be sure you've done anything at all"

    • Marked as answer by Carl Cai Monday, December 30, 2013 2:06 AM
    Saturday, December 28, 2013 8:10 PM
  • I want it so that when the player moves, lets say left, the picture rotates left and then starts moving.

    See here for how to rotate an image:

    http://msdn.microsoft.com/en-us/library/system.drawing.image.rotateflip(v=vs.110).aspx
    http://msdn.microsoft.com/en-us/library/system.drawing.rotatefliptype(v=vs.110).aspx

    I think you are saying that you want to rotate the image in the direction of the player (like an arrow that points in the direction of movement) so the methods there are suitable.  If you want to rotate by something other than 90 degrees at a time, a different technique is required.

    You move a picture box by updating its Location property with a new point, probably controlled by a timer.

    http://msdn.microsoft.com/en-us/library/system.windows.forms.control.location(v=vs.110).aspx

    If you are moving left (for instance) you would update the picturebox location with a new location that has the X position adjusted by the distance you want it moved.

    Picturebox1.Location = New Point (Picturebox1.Left - MoveDistance, PictureBox1.Top)

    • Proposed as answer by Mr. Monkeyboy Tuesday, December 24, 2013 1:38 AM
    • Marked as answer by Carl Cai Monday, December 30, 2013 2:06 AM
    Monday, December 23, 2013 2:13 AM
  • But whatever is bold underlined says : "RotateFlip" is not a member of 'System.Windows.Forms.PictureBox'

    What do I do now?

    What type of object is grenouille1?  The RotateFlip method is a method of the Image class, so the object to be rotated must be an image.   Your code
                        grenouille1 = grenouille1
    (which doesn't make sense) and the errors message you are receiving suggest that grenouille1 is a picturebox.  You cannot rotate a picture box - you can only rotate an image.  The example I quoted shows how to rotate the image and then display the rotated image in the picture box.


    • Edited by Acamar Saturday, December 28, 2013 7:43 PM sp
    • Marked as answer by Carl Cai Monday, December 30, 2013 2:06 AM
    Saturday, December 28, 2013 7:43 PM
  • I figured it out. It's all my fault, it was just something I didn't understand in everyone's posts, I finally put 2 and 2 together.

    You can't do that.  An image is being loaded from a disk file for each arrow key press.  That is too inefficient to be practical.  You should load your image once, using the example at the reference I posted, then use the image as required (rotated, etc) according to the current processing.  This sort of performance issue is critical if the display is to update at adequate speed.

    If you do not want to rotate your image (and I don't understand why not) at least load your four images at the start of the program, not each time a key is pressed.
    • Edited by Acamar Friday, January 3, 2014 12:05 AM sp
    • Marked as answer by Shadow_Hunter77 Saturday, January 4, 2014 4:43 PM
    Friday, January 3, 2014 12:03 AM

All replies

  • I want it so that when the player moves, lets say left, the picture rotates left and then starts moving.

    See here for how to rotate an image:

    http://msdn.microsoft.com/en-us/library/system.drawing.image.rotateflip(v=vs.110).aspx
    http://msdn.microsoft.com/en-us/library/system.drawing.rotatefliptype(v=vs.110).aspx

    I think you are saying that you want to rotate the image in the direction of the player (like an arrow that points in the direction of movement) so the methods there are suitable.  If you want to rotate by something other than 90 degrees at a time, a different technique is required.

    You move a picture box by updating its Location property with a new point, probably controlled by a timer.

    http://msdn.microsoft.com/en-us/library/system.windows.forms.control.location(v=vs.110).aspx

    If you are moving left (for instance) you would update the picturebox location with a new location that has the X position adjusted by the distance you want it moved.

    Picturebox1.Location = New Point (Picturebox1.Left - MoveDistance, PictureBox1.Top)

    • Proposed as answer by Mr. Monkeyboy Tuesday, December 24, 2013 1:38 AM
    • Marked as answer by Carl Cai Monday, December 30, 2013 2:06 AM
    Monday, December 23, 2013 2:13 AM
  • So I checked out the links you sent me, applied it to my code and it isn't being recognized as a member of Visual Basic express 2010. Here is my code for the right arrow key :

    Case Keys.Right
                    If grenouille1.Location.X < 970 Then
                        grenouille1.Rotate90FlipNone()
                        grenouille1.Left = grenouille1.Location.X + 10
                    Else
                    End If


    Friday, December 27, 2013 5:33 PM
  • So I checked out the links you sent me, applied it to my code and it isn't being recognized as a member of Visual Basic express 2010..

    If there is an error message then you need to indicate the exact message that is being displayed, the line of code that it refers to, and the values of the relevant variables.

    Please refer to the documentation for the rotate / flip methods, and in particular the declaration:    
        Public Sub RotateFlip ( rotateFlipType As RotateFlipType )

    and the example
         If bitmap1 IsNot Nothing Then
              bitmap1.RotateFlip(RotateFlipType.Rotate180FlipY)
              PictureBox1.Image = bitmap1
         End If 

    Friday, December 27, 2013 8:03 PM
  • So I checked out the links you sent me, applied it to my code and it isn't being recognized as a member of Visual Basic express 2010..

    If there is an error message then you need to indicate the exact message that is being displayed, the line of code that it refers to, and the values of the relevant variables.

    Please refer to the documentation for the rotate / flip methods, and in particular the declaration:    
        Public Sub RotateFlip ( rotateFlipType As RotateFlipType )

    and the example
         If bitmap1 IsNot Nothing Then
              bitmap1.RotateFlip(RotateFlipType.Rotate180FlipY)
              PictureBox1.Image = bitmap1
         End If 

    So I changed the code to what you said above :

    Case Keys.Right
                    If grenouille1 IsNot Nothing Then
                        grenouille1.RotateFlip(RotateFlipType.Rotate90FlipNone)
                        grenouille1 = grenouille1
                    End If
                    If grenouille1.Location.X < 970 Then
                        grenouille1.Left = grenouille1.Location.X + 10
                    Else
                    End If

    But whatever is bold underlined says : "RotateFlip" is not a member of 'System.Windows.Forms.PictureBox'

    What do I do now?

    Saturday, December 28, 2013 2:51 PM
  • But whatever is bold underlined says : "RotateFlip" is not a member of 'System.Windows.Forms.PictureBox'

    What do I do now?

    What type of object is grenouille1?  The RotateFlip method is a method of the Image class, so the object to be rotated must be an image.   Your code
                        grenouille1 = grenouille1
    (which doesn't make sense) and the errors message you are receiving suggest that grenouille1 is a picturebox.  You cannot rotate a picture box - you can only rotate an image.  The example I quoted shows how to rotate the image and then display the rotated image in the picture box.


    • Edited by Acamar Saturday, December 28, 2013 7:43 PM sp
    • Marked as answer by Carl Cai Monday, December 30, 2013 2:06 AM
    Saturday, December 28, 2013 7:43 PM
  • You can't easily rotate a PictureBox... a PictureBox is not a good choice for a "sprite"-like object.

    Please review this article:

    http://social.technet.microsoft.com/wiki/contents/articles/17358.how-to-create-video-games-in-vb-net-windows-forms.aspx


    Reed Kimble - "When you do things right, people won't be sure you've done anything at all"

    • Marked as answer by Carl Cai Monday, December 30, 2013 2:06 AM
    Saturday, December 28, 2013 8:10 PM
  • But whatever is bold underlined says : "RotateFlip" is not a member of 'System.Windows.Forms.PictureBox'

    What do I do now?

    What type of object is grenouille1?  The RotateFlip method is a method of the Image class, so the object to be rotated must be an image.   Your code
                        grenouille1 = grenouille1
    (which doesn't make sense) and the errors message you are receiving suggest that grenouille1 is a picturebox.  You cannot rotate a picture box - you can only rotate an image.  The example I quoted shows how to rotate the image and then display the rotated image in the picture box.


    Yes, grenouille1 is a pictureBox, so how would you import an image without having it in a pictureBox?
    Monday, December 30, 2013 3:56 PM
  • You can't easily rotate a PictureBox... a PictureBox is not a good choice for a "sprite"-like object.

    Please review this article:

    http://social.technet.microsoft.com/wiki/contents/articles/17358.how-to-create-video-games-in-vb-net-windows-forms.aspx


    Reed Kimble - "When you do things right, people won't be sure you've done anything at all"

    Thanks a lot for that link! It fits my situation perfectly, only problem is that's not how I was taught to do it and it's too late to switch over, that will have to wait. So if I stick to how I am doing Vb.Net now, what would be the best way to have a "sprite" in my program?
    Monday, December 30, 2013 4:07 PM
  • so how would you import an image without having it in a pictureBox?
    http://msdn.microsoft.com/en-us/library/4sahykhd(v=vs.90).aspx
    Monday, December 30, 2013 8:47 PM
  • I'm sorry Acamar, but that didn't help me :/

    I am a beginner, beginner to coding and there are a lot of functions in Visual Basic that I don't even know about, all of the functions in that link for example. I was taught to use picture boxes for images, but my sprite is very buggy because of it and can't figure out how to code it differently without being able to rotate a picturebox, so obviously I am going to need this other way but if I'm to understand it's going to have to be explained to me. 

    Sorry for the inconvenience.

    Wednesday, January 1, 2014 6:19 PM
  • I'm sorry Acamar, but that didn't help me :/

     To load an image into a picturebox at runtime you can try this
    PictureBox1.Image = Image.FromFile("C:\somefolder\myimage.png")
    

    Or this

    PictureBox1.Image = New Bitmap("C:\somefolder\myimage.png")
    

    Or you can add your picture to the applications resources and do this

    PictureBox1.Image = My.Resources.MyImage

    Wednesday, January 1, 2014 7:30 PM

  •  To load an image into a picturebox at runtime you can try this
    PictureBox1.Image = Image.FromFile("C:\somefolder\myimage.png")

    Or this

    PictureBox1.Image = New Bitmap("C:\somefolder\myimage.png")

    Or you can add your picture to the applications resources and do this

    PictureBox1.Image = My.Resources.MyImage

    Okay, I have the image in a picturebox right now and I've made it so that instead of rotating the picturebox, I make another picturebox appear already facing that direction, but it's really buggy, so do I keep it like I have it now and fix the bugs? or do I attempt this bitmap thing? If I should go through with the bitmap thing, could you explain it in detail?
    Wednesday, January 1, 2014 7:46 PM
  • I'm sorry Acamar, but that didn't help me :/

    The example code at the site I referenced loads an image into a bitmap, which is the task you described.

            Dim image1 As Bitmap = _
                CType(Image.FromFile("C:\Documents and Settings\" _
                & "All Users\Documents\My Music\music.bmp", True), Bitmap)

    Once you have an image in a bitmap you can do what you want with it, such as rotating it, or displaying it in a picture box.   That's what you are trying to do with your sprite.  If you are having trouble making that work then you need to post the code you are using and indicate what the difference is between what you want the code to do and what the code is actually doing.

    Wednesday, January 1, 2014 8:33 PM
  • Okay, I have the image in a picturebox right now and I've made it so that instead of rotating the picturebox, I make another picturebox appear already facing that direction, but it's really buggy

    You do not need more pictureboxes, but in any case you cannot make a picturebox face in the right direction - you can only change the direction of the image that is shown in the picturebox.   If your code is buggy then post the code and indicate what the bugs are, but if you are using more than one picturebox then that is probably the source of the bugs.

    Wednesday, January 1, 2014 8:37 PM

  • You do not need more pictureboxes, but in any case you cannot make a picturebox face in the right direction - you can only change the direction of the image that is shown in the picturebox.   If your code is buggy then post the code and indicate what the bugs are, but if you are using more than one picturebox then that is probably the source of the bugs.

    Private Sub Jeu_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles Me.KeyDown
            If grenouillebouge = False Then Exit Sub
            Select Case e.KeyValue

                'Pour bouger la grenouille à la gauche
                Case Keys.Left
                    If grenouille_270.Location.X > 0 Then
                        grenouille_270.Left = grenouille_270.Location.X - 48
                        If grenouille1.Visible = True Then
                            grenouille_270.Left = grenouille1.Location.X
                            grenouille_270.Top = grenouille1.Location.Y
                        ElseIf grenouille_90.Visible = True Then
                            grenouille_270.Left = grenouille_90.Location.X
                            grenouille_270.Top = grenouille_90.Location.Y
                        ElseIf grenouille_180.Visible = True Then
                            grenouille_270.Left = grenouille_180.Location.X
                            grenouille_270.Top = grenouille_180.Location.Y
                        End If

                    Else
                    End If
                    grenouille_270.Visible = True
                    grenouille1.Visible = False
                    grenouille_90.Visible = False
                    grenouille_180.Visible = False

                    'Pour bouger la grenouille à la droite
                Case Keys.Right
                    grenouille_90.Left = grenouille1.Location.X
                    grenouille_90.Top = grenouille1.Location.Y

                    If grenouille1.Location.X < 1001 Then
                        grenouille1.Left = grenouille1.Location.X + 48
                    Else
                    End If
                    grenouille_90.Visible = True
                    grenouille1.Visible = False
                    grenouille_180.Visible = False
                    grenouille_270.Visible = False

                    'Pour bouger la grenouille en haut
                Case Keys.Up
                    grenouille1.Left = grenouille1.Location.X
                    grenouille1.Top = grenouille1.Location.Y

                    If grenouille1.Location.Y > 0 Then
                        grenouille1.Top = grenouille1.Location.Y - 48
                    Else
                    End If
                    grenouille1.Visible = True
                    grenouille_90.Visible = False
                    grenouille_180.Visible = False
                    grenouille_270.Visible = False

                    'Pour bouger la grenouille en bas
                Case Keys.Down
                    grenouille_180.Left = grenouille1.Location.X
                    grenouille_180.Top = grenouille1.Location.Y

                    If grenouille1.Location.Y < 729 Then
                        grenouille1.Top = grenouille1.Location.Y + 48
                    Else
                    End If
                    grenouille_180.Visible = True
                    grenouille1.Visible = False
                    grenouille_90.Visible = False
                    grenouille_270.Visible = False

    Sorry, but it's in french, but I think it's kinda obvious about what does what. But when I move the sprite around, it jumps from spot to spot, it's kinda hard to explain. What I was trying to do was keep all the pictureboxes together so that they move together but only the one I want visible, but they are not staying together and makes it look like it's randomly jumping across the screen.

    Thursday, January 2, 2014 4:00 PM
  • I move the sprite around, it jumps from spot to spot, it's kinda hard to explain. What I was trying to do was keep all the pictureboxes together so that they move together but only the one I want visible, but they are not staying together and makes it look like it's randomly jumping across the screen.

    You are only moving one picture box - the visible one.

                    If grenouille_270.Location.X > 0 Then
                        grenouille_270.Left = grenouille_270.Location.X - 48
                        If grenouille1.Visible = True Then
                            grenouille_270.Left = grenouille1.Location.X
                            grenouille_270.Top = grenouille1.Location.Y
                        ElseIf grenouille_90.Visible = True Then
                            grenouille_270.Left = grenouille_90.Location.X
                            grenouille_270.Top = grenouille_90.Location.Y
                        ElseIf grenouille_180.Visible = True Then
                            grenouille_270.Left = grenouille_180.Location.X
                            grenouille_270.Top = grenouille_180.Location.Y
                        End If

    You need to move all the pictureboxes, whether visible or not.  This code is going to become unmanageable very quickly.  The code that you need to post so that it can be fixed is the code that rotates the image when the direction of movement changes.

    Thursday, January 2, 2014 9:16 PM
  • You can't easily rotate a PictureBox... a PictureBox is not a good choice for a "sprite"-like object.

    Please review this article:

    http://social.technet.microsoft.com/wiki/contents/articles/17358.how-to-create-video-games-in-vb-net-windows-forms.aspx


    Reed Kimble - "When you do things right, people won't be sure you've done anything at all"

    Thanks a lot for that link! It fits my situation perfectly, only problem is that's not how I was taught to do it and it's too late to switch over, that will have to wait. So if I stick to how I am doing Vb.Net now, what would be the best way to have a "sprite" in my program?

    Well, anything you do will be a kludge, but one thing I can think would be to put all of the pictureboxes  in a panel.  That way you only have to move the panel around and can still  change the visibility of each picturebox (though it seems you could just as easily change the image displayed in a single picturebox and save on the extra controls).  Since you still have the rotation issue, which requires replacing the displayed image with a rotated copy, you probably only want one picutrebox anyway (or even more pictureboxs with the rotated images preloaded).

    As Acamar said, we'd really have to see more of the code to find the bugs and the solution to those bugs will likely be the redesign already mentioned.

    So sorry you got started down the wrong path... that happens far too often and there's usually no recovering; you just have to start over on the right path.


    Reed Kimble - "When you do things right, people won't be sure you've done anything at all"

    Thursday, January 2, 2014 9:41 PM
  • I don't have code code to rotate the picturebox, i made four different ones, one for each direction, and that's how I "rotate" it
    Thursday, January 2, 2014 9:42 PM
  • I don't have code code to rotate the picturebox, i made four different ones, one for each direction, and that's how I "rotate" it
    So you have four pictureboxes - one for each direction.  How did you get the image in the picture box to point in the correct direction for that picture box?   That's the code you need to adapt to one picture box.
    Thursday, January 2, 2014 9:59 PM
  • I figured it out. It's all my fault, it was just something I didn't understand in everyone's posts, I finally put 2 and 2 together. I'll post the code for anyone else who has the same question but I can't really mark an answer because it was everyones basically, all this posts leas to me cluing in what to do.

    Thanks to everyone who helped with my question!

    Case Keys.Left

                    grenouille1.Image = Image.FromFile("\Examen\Frogger\Pics\Frogger_sprite_crunched_270CW.png")

                    If grenouille1.Location.X > 0 Then
                        grenouille1.Left = grenouille1.Location.X - 48
                    Else
                    End If

                    'Pour bouger la grenouille à la droite
                Case Keys.Right

                    grenouille1.Image = Image.FromFile("\Examen\Frogger\Pics\Frogger_sprite_crunched_90CW.png")

                    If grenouille1.Location.X < 1001 Then
                        grenouille1.Left = grenouille1.Location.X + 48
                    Else
                    End If
                    


                    'Pour bouger la grenouille en haut
                Case Keys.Up

                    grenouille1.Image = Image.FromFile("\Examen\Frogger\Pics\Frogger_sprite_crunched.png")

                    If grenouille1.Location.Y > 0 Then
                        grenouille1.Top = grenouille1.Location.Y - 48
                    Else
                    End If
                    

                    'Pour bouger la grenouille en bas
                Case Keys.Down
              
                    grenouille1.Image = Image.FromFile("\Examen\Frogger\Pics\Frogger_sprite_crunched_180.png")

                    If grenouille1.Location.Y < 729 Then
                        grenouille1.Top = grenouille1.Location.Y + 48
                    Else
                    End If

    Thursday, January 2, 2014 10:54 PM
  • I figured it out. It's all my fault, it was just something I didn't understand in everyone's posts, I finally put 2 and 2 together.

    You can't do that.  An image is being loaded from a disk file for each arrow key press.  That is too inefficient to be practical.  You should load your image once, using the example at the reference I posted, then use the image as required (rotated, etc) according to the current processing.  This sort of performance issue is critical if the display is to update at adequate speed.

    If you do not want to rotate your image (and I don't understand why not) at least load your four images at the start of the program, not each time a key is pressed.
    • Edited by Acamar Friday, January 3, 2014 12:05 AM sp
    • Marked as answer by Shadow_Hunter77 Saturday, January 4, 2014 4:43 PM
    Friday, January 3, 2014 12:03 AM

  • You can't do that.  An image is being loaded from a disk file for each arrow key press.  That is too inefficient to be practical.  You should load your image once, using the example at the reference I posted, then use the image as required (rotated, etc) according to the current processing.  This sort of performance issue is critical if the display is to update at adequate speed.

    If you do not want to rotate your image (and I don't understand why not) at least load your four images at the start of the program, not each time a key is pressed.

    Would it be better if I had the pictures in Ressources?

    And to rotate it you use the rotateflipmethod, but how do you have the picture in the form without it being in a picturebox?


    Friday, January 3, 2014 6:20 PM
  • Would it be better if I had the pictures in Ressources?

    Putting the image in resources makes it easier to distribute and install your application, but it makes it inflexible, because the picture can't be changed without changing the resource.  Keeping the picture in a file means that you have to distribute that file with your application, but it means you can change the picture just by changing the file.  I think in your case it should probably be a resource.   But that is not related to your current task.

    And to rotate it you use the rotateflipmethod, but how do you have the picture in the form without it being in a picturebox?

    Use the code provided in the example of the RotateFlip method:
    http://msdn.microsoft.com/en-us/library/system.drawing.image.rotateflip(v=vs.110).aspx

    Dim bitmap1 As Bitmap
    ...
            bitmap1 = CType(Bitmap.FromFile("C:\Documents and Settings\All Users\" _
                & "Documents\My Music\music.bmp"), Bitmap)

    Once you have your bitmap you can do what you like with it - in your case rotate it (whenever required), and show it in a picture box.

    Friday, January 3, 2014 8:54 PM


  •         bitmap1 = CType(Bitmap.FromFile("C:\Documents and Settings\All Users\" _
                & "Documents\My Music\music.bmp"), Bitmap)


    Do I just put the path to the file or do I have to put in the appendix and the settings thing? or will this work fine? 

    bitmap1 = CType(Bitmap.FromFile("\Examen\Frogger\Pics\Frogger_sprite_crunched_90CW.png), Bitmap)

    Saturday, January 4, 2014 4:04 PM
  • Do I just put the path to the file or do I have to put in the appendix and the settings thing? or will this work fine? 
    bitmap1 = CType(Bitmap.FromFile("\Examen\Frogger\Pics\Frogger_sprite_crunched_90CW.png), Bitmap)

    I don't know what you are referring to as the appendix or settings thing, but the above code should be correct.  Try it and see.

    Saturday, January 4, 2014 8:46 PM