Programming - Games - 2D - using DX9 and visual basic

This toturial was written for me by Imran Khan (imranahmedkhan82@hotmail.com, iak1982@yahoo.com).
Copyright (c) 2004 is owned by Martin Baker

Introduction to Animation:

Til now you have learnt about surfaces, image surfaces. In this section you will learn about animating Bitmaps. You know how to draw image on surface.

Suppose you have a character of an angry man :)

The Width of this pic is 141 pixels and the height is 250 pixels. I m talking about width and length bcoz they are very important in image animation.Now suppose you want him to walk.

First we will use a Surface so that we can show this character. ( as we know how to show image )

Public Sub Init( )

psurface = Nothing
ssurface = Nothing
Dim sdesc As New SurfaceDescription()
clip = New Clipper(dddevice)
clip.Window = Me
sdesc.SurfaceCaps.PrimarySurface = True
sdesc.SurfaceCaps.Flip = True
sdesc.SurfaceCaps.Complex = True
sdesc.BackBufferCount = 1
psurface = New Surface(sdesc, dddevice)
psurface.Clipper = clip
sdesc.Clear()
sdesc.SurfaceCaps.BackBuffer = True
ssurface = psurface.GetAttachedSurface(sdesc.SurfaceCaps)
sdesc.Clear()
sdesc.SurfaceCaps.OffScreenPlain = True
charsurface = New Surface("character.bmp", sdesc, dddevice)

End Sub

This will initialize the character surface.

Make all the action of this character while walking, like :

But be careful in making images bcoz each action ( image, here there are 4 actions) must be of the same width and hieght ( here it is, width = 141 pixels ( each action ) and height = 250 , so the total width here = 141 * 4 = 564 and height is 250)

To have all the action in same bitmap is better then having them in different bitmaps.

First of all we seperate each frame ( action ) in code. Each frame is represented by the Rectangle object.In this there are 4 frames. We will define the starting and ending position of each frame in coding.

First declare the rectangle objects along with other declaration which we have done before.

Private frames(4) As Rectangle

Private charsurface As Surface

Private frm4act As Integer = 0

We define 4 objects of rectangle coz we have 4 frames ( actions).Each Index represent seperate frame. Like frame(0) represents the first action. Each index also stores the cordinates of each frame.

You know about the second decelaration.A sruface on which we will animate our character.

3rd Decelaration is a ineteger value . We will show its use later.

Now Define a method " CreateFrame " , This Method is use to create frames from the picture and store it in each index.Like in Frame(0) we will store first Action and so on...

Public Sub createframes()
Dim x As Integer
For x = 0 To 3
frames(x) = New Rectangle(141 * x, 0, 141, 250)
Next
End Sub

Call the createframes method from " Init( ) ", by writing " createframes( )" at the last of the Init( ) method.

First we have a For loop from 0 to 3, coz we have 4 frames ( 0 , 1 , 2, 3 ). The next line is the main line of creating Frames. The Rectangle object takes 4 arguments, X coordinate, Y coordinate, Width, and Height. AS we have calulated before that our each action is of width 141 and height 250.

now explanation of " 141 * x ", as it is whole a one picture we break it into 4 frames. We multiply 141 by 0 ( when x = 0 ) and we get 0, the starting point of the first frame. If the value of the x is 1 then we get 141, starting of the next frame and so on. In this way we get 4 frames each indicating different action.

The Next aurgument is " 0 "(y-cordinate), why is that ? coz if we give it greater then Zero value it will cut our frame and our picture can't be shown completely.

like this

If we give y-cordinate Zero

If we give y-cordinate value greater then Zero

The Red Line shows the Frame. In the first pic Frame covers the whole image in the next image it covers only a part not a whole action.

Now we have done with Frame Creation , We will now show it on screen.

You have the previous version of ShowSurface( ) :

Public Sub ShowSurface()
Try
ssurface.ColorFill(Color.White)
ssurface.DrawFast(150, 150, charsurface, DrawFastFlags.DoNotWait)
ssurface.ForeColor = Color.Black
ssurface.DrawText(540, 565, "Made By Imran Ahmed Khan", False)
psurface.Flip(ssurface, FlipFlags.Wait)
Catch ex As SurfaceLostException
Init()
End Try

psurface.Flip(ssurface, FlipFlags.Wait)
End Sub

Now Replace it with this :

Public Sub ShowSurface()
Try
ssurface.ColorFill(Color.Red)

ssurface.DrawFast(100, 300, charsurface, frames(frm4act), DrawFastFlags.DoNotWait)

Catch ex As SurfaceLostException
Init()
End Try

psurface.Flip(ssurface, FlipFlags.Wait)
End Sub

 

We just added one line ' ssurface.DrawFast(100, 100, charsurface, frames(frame), DrawFastFlags.DoNotWait) ' You know this method ( we used it before ). you know about the first 3 arguments and the last argument. The 4th argument is the name of the rectangle object which we have declare above and in brackets is its Index. ( means to show which frame, As we know there are 4 frames , if we put frames(0) it will show first frame , if we put frames(1) it will show second frame and so on.)

We initialize the Frame4act with Zero , so right now if you run the program it will show the first frame.

Now we will associate the movement of the character with the Arrow key.

Private Sub form1_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles MyBase.KeyDown

If e.KeyCode = Keys.Right Then

frm4act = frm4act + 1
if frm4act > 3 then
frm4act = 0

End If

ShowSurface( )

End if

If e.KeyCode = Keys.Escape Then

ending()

End

End If

End Sub

Its easy, whenever user press right key it wil increament the frm4act ( which is the Frame Number ). if the frm4act is exceed the limit of out total number of frames it will set it to zero.and then we call ShowSurface ( ) in which we will show the surface.

Now when you execute the program you will see that character is actions are changing but he is not moving towards forward.

This is because we write a static value ' 100 ' in the DrawFast 1st argument.

ssurface.DrawFast(100, 100, charsurface, frames(frm4act), DrawFastFlags.DoNotWait)

Now take a variable. Now we will show the declaration,ShowSruface and form1_keydown method again with addition of that vaialble.

Decelaration:

Private frames(4) As Rectangle

Private charsurface As Surface

Private frm4act As Integer = 0

Private x4act As Integer = 100 ' We initialize the cahracter postion , you can change it according to your desire.

 

ShowSurface( ) :

Public Sub ShowSurface()
Try
ssurface.ColorFill(Color.Red)

ssurface.DrawFast(x4act, 300, charsurface, frames(frm4act), DrawFastFlags.DoNotWait)

Catch ex As SurfaceLostException
Init()
End Try

psurface.Flip(ssurface, FlipFlags.Wait)
End Sub

From1_keydown

Private Sub form1_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles MyBase.KeyDown

If e.KeyCode = Keys.Right Then

frm4act = frm4act + 1

x4act += 5 ' we add it so that the character will move forward.

if frm4act > 3 then
frm4act = 0

End If

if x4act > 300 then ' Boudries for the character.

x4act -=5

End If

ShowSurface( )

End if

If e.KeyCode = Keys.Escape Then

ending()

End

End If

End Sub

Now when you execute your program, The character will move forward with some limit. you can change this limit.

The one this you will note is the " Grey" color around the Character . We will remove it but in the Next Section :)

 

next: transparency


metadata block
see also:
Correspondence about this page

This site may have errors. Don't use for critical systems.

Copyright (c) 1998-2023 Martin John Baker - All rights reserved - privacy policy.