Breadcrumbs

[smashapps]

Hello,

Please see the image below for what we're going to be building!

In this short simple tutorial I cover quite a few basics for game programming. This tutorial will go over having an enemy shoot the player, player health, reducing player health, and cropping a sprite sheet to use specific sprites in a game.

Let’s start off by adding our controls:
Two panels named healthRed and healthGreen
3 Picture boxes named Player, Bullet, and turret.
Two timers called tmrShoot and tmrControlBullet

Our healthGreen panel is to go inside of the healthRed panel, docked to the left, green background and 200pixels wide. The red panel is to have a red background and be 200 pixels wide.

Our ‘turret’ is going to be shooting only in the left direction for this tutorial so have it on the right side of the form, and then the bullet to the left of the turret where it will be ‘shooting out’.

I don’t use any images until after we debug/run the game, since they are cropped from a sprite/tile sheet. The 3 picture boxes have no properties, except for the bullet which is invisible.
tmrShoot is enabled and has an internal of 2000, tmrControlBullet is not enabled and has an interval of 20.

Also be sure to add your sprite sheet or download the ones I’ve used in the tutorial, and add them to your resources.

Let’s start coding!

Code: Select all

Public PlayerHealth As Integer = 100

This variable just holds the player health and will be used when we deal damage to the player

Code: Select all

Private Shared Function cropImage(img As Image, cropArea As Rectangle) As Image
        Dim bmpImage As New Bitmap(img)
        Dim bmpCrop As Bitmap = bmpImage.Clone(cropArea, bmpImage.PixelFormat)
        Return DirectCast(bmpCrop, Image)
    End Function

This function is called when we want to display part of the sprite sheet, credits for this function go to someone else. We call the function with the path of the image and the area we want to crop (0,0,0,0) basically the first two points of the rectangle is the top left hand corner where the cropping will start and the second two are the bottom right where it will stop. If you use (0,0,32,32) the crop will be from the top left of the image and be 32 wide and 32 high giving you a 32x32 image from the top left hand corner.

Code: Select all

Private Sub frmGame_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        'Load the turret'
        Turret.BackgroundImage = cropImage(My.Resources.turret, New Rectangle(13, 145, 82, 74))
        Turret.Size = New Size(82, 74)
        Turret.BackgroundImageLayout = ImageLayout.Center
        'Load the player'
        Player.BackgroundImage = cropImage(My.Resources.character1, New Rectangle(5, 99, 22, 43))
        Player.Size = New Size(22, 43)
        Player.BackgroundImageLayout = ImageLayout.Center
    End Sub

When the game loads we crop the turret, and the player, set the size of the picture boxes and image layout. Running the game at this point we should see our health bar, player and turret. As explained above so calling the function with the path and the rectangle points the image returned is the area we've selected.

A good website to find out the position of part of the sprite/tile sheet is here:

http://spritecutie.com/

With that website you drop a sprite sheet onto the page and wil generate a list, click the sprite you want to use and copy the position's over into Vb/C#.

Code: Select all

Private Sub tmrShoot_Tick(sender As Object, e As EventArgs) Handles tmrShoot.Tick
        Bullet.BackgroundImage = cropImage(My.Resources._183_Rock02, New Rectangle(1, 1, 30, 30))
        Bullet.Size = New Size(30, 30)
        Bullet.BackgroundImageLayout = ImageLayout.Center
        Bullet.Visible = True
        tmrControlBullet.Start()
        tmrShoot.Stop()
    End Sub

This is the timer that has an interval of 2000, when 2 seconds have passed we want to shoot the bullet. We set the image of the bullet from the sprite sheet, set the size and the image layout, and we make the bullet visible. We start the timer for the ControlBullet which is what will get the bullet moving, we stop the tmrShoot because we don’t want a new bullet yet, not until our current bullet is gone.

Code: Select all

Private Sub tmrControlBullet_Tick(sender As Object, e As EventArgs) Handles tmrControlBullet.Tick
        Dim bullX As Integer = Bullet.Location.X
        Dim bullY As Integer = Bullet.Location.Y

       

        If Bullet.Bounds.IntersectsWith(Player.Bounds) Then
            Bullet.Location = New Point(375, 177)
            Bullet.Visible = False
            DealDamage(10)
            tmrShoot.Start()
            tmrControlBullet.Stop()
        Else
            bullX -= 2
            Bullet.Location = New Point(bullX, bullY)
        End If
    End Sub

We have two integers declared in here which is the bullet’s location. We check if the bullet is touching the player (lol) and if so, we put the bullet back to turret, hide it, call a function called DealDamage(10) and we start the tmrShoot again. If the bullet hasn’t hit the player yet we move it closer to the player. Changing the interval of this timer will control the speed of the bullet.

Code: Select all

Public Sub DealDamage(ByVal dam As Integer)
        PlayerHealth -= dam
        Dim tmp As Integer = PlayerHealth * 2
        healthGreen.Width = tmp
    End Sub

Our final piece of code. To keep the health simple we used an equal size to work out the health. The dam integer is the amount of damage we are dealing to the player which is 10% of the player’s health. Since the width of the health is 200 10% is double of the health we are taking so we multiply the damage we are dealing by 2 then take that away from the health panel’s width.

If you have any questions or I missed anything please be sure to let me know! and thanks for reading

[M1z23R]

Cant move

[smashapps]

No you can't xD it just's to demonstrate player health, having an enemy shoot at the player and deal damage.