Simple sprite movement help pretty please?

marksquall

Active member
Joined
Oct 17, 2009
Messages
28
Programming Experience
3-5
Dear members and administrators,

Hello, and a pleasant day.

I am new to such animations in VB .NET, I just want to ask how to animate this pictures of 1 character with 16 different angles/position? They say it's a sprite, but one thing I have an idea on how I could animate this is to slice it one by one (with the help of Adobe Photoshop maybe), and with a Timer and a KeyDown Event in a Form, I could load picture one after the another. But is there way to animate this but still using only this file?

Any tutorial/code on how cold I get started? :joyous:

Thanks a lot and more power.

Respectfully Yours,

Mark Squall
 

Attachments

  • spritexb-7343.png
    spritexb-7343.png
    11.1 KB · Views: 60
Google for vb.net sprite sheet. You'll find plenty of examples. You will probably have to measure up your sprite sheet to find the pixel sizes of the rows and columns. Vic
 
Eureka...I got It!

VicJ,

Thank you for your tips, I finally got it, I just did on one direction (going down) and the sprite "moves successfully." (YAHOO!)
But I have a question/s though, I want to have at least two buttons that a user can alternatively used in moving the character. Example:

VB.NET:
[COLOR="#0000FF"]Private Sub[/COLOR] MyForm_KeyDown([COLOR="#0000FF"]ByVal[/COLOR] sender [COLOR="#0000FF"]As Object[/COLOR], [COLOR="#0000FF"]ByVal[/COLOR] e [COLOR="#0000FF"]As[/COLOR] System.Windows.Forms.KeyEventArgs) [COLOR="#0000FF"]Handles MyBase[/COLOR].KeyDown
    [COLOR="#0000FF"]Case[/COLOR] Keys.S
          [COLOR="#008000"]'I do sprite moving down here[/COLOR]
    [COLOR="#0000FF"]End Select[/COLOR]
[COLOR="#0000FF"]End Sub[/COLOR]

From this example, I use the S keyboard key to move the character down, I want to have two possible buttons, the other one would be the DOWN arrow key.

And how would I tell the sprite to "stop" at something that blocks in his/her way? I tried to put a Label with black background, so I would try to serve this as the wall the sprite cannot pass through.

Thank you again and hope someone could give me some key points in here.

Warm regards,

Mark Squall
 
Well done so far Mark. What you are asking about now is called "collision detection" and it's not as difficult as its name suggests. The easiest way is to use the Rectangle.Intersects function, for example:
VB.NET:
If spriteBounds.Intersects(Label1.Bounds) Then ... 'stop or change direction of sprite, according to taste
One thing you need to be careful about is the coordinates of each rectangle. Label1.Bounds is the rectangle of Label1 in Form coordinates. To be more precise, Bounds gives the rectangle of a control relative to its Parent control. So if you have a label inside a Panel, for example, its Bounds property is relative to the Panel, not to the Form.

Maybe you can work it out from here. If you need more detailed help, please post the code you are using. In particular, it's necessary to know where and how you are drawing your sprites (on the Form, on a PictureBox etc.)

Vic
 
Codes added. How to detect collision between two Form objects?

Hello VicJ,

I am sorry for not replying right away, kind of busy though. Anyway this is the sample code I had came up with, the character is just moving/walking downwards (just as of now as I am still in testing mode).

VB.NET:
[COLOR="#0000FF"]Public Class[/COLOR] Sprite
   [COLOR="#0000FF"] Inherits [/COLOR]System.Windows.Forms.Form
    [COLOR="#0000FF"]Dim[/COLOR] frames(15) [COLOR="#0000FF"]As[/COLOR] Bitmap
    [COLOR="#0000FF"]Dim[/COLOR] img [COLOR="#0000FF"]As New[/COLOR] Bitmap(Application.StartupPath & "\img\char.png")
    [COLOR="#0000FF"]Dim[/COLOR] x [COLOR="#0000FF"]As Integer[/COLOR]
    
    [COLOR="#0000FF"]Private Sub[/COLOR] Sprite_KeyDown([COLOR="#0000FF"]ByVal[/COLOR] sender [COLOR="#0000FF"]As Object[/COLOR], [COLOR="#0000FF"]ByVal[/COLOR] e [COLOR="#0000FF"]As[/COLOR] System.Windows.Forms.KeyEventArgs) [COLOR="#0000FF"]Handles MyBase[/COLOR].KeyDown

       e.Handled = [COLOR="#0000FF"]True[/COLOR]
       frames(x) = [COLOR="#0000FF"]New[/COLOR] Bitmap(32, 48)
       [COLOR="#0000FF"]Dim[/COLOR] gr [COLOR="#0000FF"]As[/COLOR] Graphics = Graphics.FromImage(frames(x))
       [COLOR="#0000FF"]Dim[/COLOR] leftPos [COLOR="#0000FF"]As Integer[/COLOR] = 0
       [COLOR="#0000FF"]Select Case[/COLOR] x
            [COLOR="#0000FF"]Case[/COLOR] 0
                leftPos = 0
            [COLOR="#0000FF"]Case[/COLOR] 1
                leftPos = 32
            [COLOR="#0000FF"]Case[/COLOR] 2
                leftPos = 64
            [COLOR="#0000FF"]Case[/COLOR] 3
                leftPos = 96
        [COLOR="#0000FF"]End Select[/COLOR]

        [COLOR="#0000FF"]Select Case[/COLOR] (e.KeyCode)
             [COLOR="#0000FF"]Case[/COLOR] Keys.S [COLOR="#008000"]'Use the S key to move down[/COLOR]
             
                e.Handled = True
                gr.DrawImage(img, 0, 0, [COLOR="#0000FF"]New[/COLOR] RectangleF(leftPos, 0, 70, 70), GraphicsUnit.Pixel)
                PictureBox1.Image = frames(x)
                [COLOR="#0000FF"]Me[/COLOR].PictureBox1.Top += 3
                [COLOR="#0000FF"]If [/COLOR]x = 3 [COLOR="#0000FF"]Then[/COLOR]
                    x = 0
                [COLOR="#0000FF"]Else[/COLOR]
                    x += 1
               [COLOR="#0000FF"] End If[/COLOR]
        [COLOR="#0000FF"]End Select[/COLOR]
[COLOR="#0000FF"]End Sub[/COLOR]

[COLOR="#0000FF"]End Class[/COLOR]

Based from the code above, I have used PictureBox as a means of displaying my sprite.

I just want to ask how (or rather where) would I put my codes for collision detection? And how would I use the DOWN arrow key as an alternative to the S Key? One thing that I want to do...I do prefer lines rather than Labels, but I can not see the Line component similar to VB6. What component should I add so that I could draw line in the form? And lastly I find it difficult to "generate" the Intersects() method. I hope you could help me.

P.S. : I am using Visual Studio .NET 2003 using the .NET Framework that comes up with the installer. This is my "requirement" so I must not somehow go in advance .NET Framework. :courage:


Warm regards,

Mark Squall
 
Unfortunately I've been very busy myself, so maybe this comes a bit late. You can add lines to the form in various ways. If you have the VB.Net PowerPack for .NET 2003 you could use the the LineShape tool to add lines in the designer. Alternatively you could draw lines in the form's Paint event sub with Graphics.DrawLine -- that is something you will need to learn about sooner or later. But by far the simplest for this kind of game would be to add your lines in the form of long, narrow labels. You can set the width or height to as little as 1, and for anything wider you could set the Backcolor or even add a background image to the label. You can just delete the label text if you don't want it.

Assuming you have four "line" obstacles called Label1, Label2, Label3 and Label4, put them in array, for example:
VB.NET:
Dim Obstacles() As Label = {Label1, Label2, Label3, Label4}
In the code you have posted, you are doing the moving in the line Me.PictureBox1.Top += 3. And that is where you need to check for a collision. You doing each direction separately, so you can check for a collision when moving down like this::
VB.NET:
For Each L As Label In Obstacles
     If PictureBox1.Bottom < L.Top - 2 Then
          Me.PictureBox1.Top += 3
     End If
Next
This is an alternative to checking if the bounds of the two controls intersect which I suggested earlier. I trust you won't find it hard to apply the same idea to moving the sprite up, left or right.

BB
 
Last edited:
Eureka...I did it (again)!

VicJ,

Happy New Year to you!

Sorry if this took a long time to thank you, but it's better late than never...thanks I got it now (at long last!). You are awesome VicJ!
Well, the next will be the rest of the directions. But I can handle them now...thanks to you! And also I got the arrow keys working too...really great!

Hmm, I just wonder how about monster sprite wondering around my form by its own? How would I achieve that? I am thinking of using a Timer, is that okay? Or is there something better?

I am thinking of something like:

(1) a monster sprite moving in a "predetermined" path, but that will just make my player avoid it so easily, or
(2) a monster sprite moving in a "random" path, so it will be just a surprise for the player, as he/she thought the monster will be going left, then suddenly going right...then boom, fight the monster! Or perhaps...
(3) if the player is 1 to 2 pixel (or whatever unit that might be) away from the monster sprite, the monster will automatically chase the player until the player has attained enough distance to cut the chase.

Any of these three options will do. Any tips?

Thank you.

Warm regards,

Mark Squall
 
Back
Top