ThePentiumGuy
Well-known member
I will be making a set of 5 or 6 tutorials, each of which include source for Visual Basic.NET 2002 and Visual Basic.NET 2003. C# tutorials may or may not follow. These tutorials are to give you guys a jumpstart to some Direct3D. I hope you enjoy these.
edit: ARGH! Font got screwed up on this one. Stupid thing doublespaces it automatically. The source code got squished together. I patched up as much of it as possible. Please bear with me, but the source code is fully commented and follows along with this tutorial - so it might be better to paste from there rather than here.
This tutorial will teach you how to display a textured quad(square).
In this tutorial were going to get into some hardcore definitions as we move along.
Well the first thing you need to know:
Whats the simplest polygon? A triangle of course! This is why Direct3D constructs all of its shapes from triangles. A square is 2 triangles of course (draw a diagonal line from corner to corner and voila). This is how were going to construct our square in this tutorial.
Well get into more terminology as we move along.
Create a new project. Copy the same GameClass as the previous project ("Initializing The Device"), and use the same Form1 code as before.
For this tutorial, were going to make an adjustment here which well discuss in the next tutorial(dealing with Matrices/Transformations). Go to your GameClass (in your new project), and at the very end of the Initialize sub, type this in:
D3Ddev.Transform.View = Matrix.OrthoOffCenterLH(0, DP.Width, DP.Height, 0, 0, 10)
Again, dont worry about this line in this tutorial, Ill explain more in the next tutorial.
Create a new class called clsSprite and at the top, Import the 3 DLLs which you usually import:
Imports Microsoft.DirectX
Imports Microsoft.DirectX.Direct3D
Imports Microsoft.DirectX.Direct3D.D3DX
Dim the following global variables in your class.
Holds a copy of the device to be used in the class
Private dxDevice As Device
Holds the image that will be drawn onto the square
Public SpriteImage As Texture
This is the buffer in which the vertices of the square will be stored
Public vBuffer As VertexBuffer
Create a contstructor:
Public Sub New(ByVal lDevice As Device, ByVal ImageName AsString, ByVal TopLeft As Point, ByVal Width As Integer, ByVal Height As Integer)
Store a copy of our device in the class
dxDevice = lDevice
Load the image, we specify the arguments that we need to create a square
Load(ImageName, TopLeft, Width, Height)
EndSub
Dont worry about the error, were going to create a Load sub in a minute http://www.computerhelp.forum/x_images/images/smilies/smile.gif.
First, a quick note: We can create a square given the TopLeft coordinate. the Width, and the Height. It works like this:
TopLeft = (TopLeft.X, TopLeft.Y)
TopRight = (TopLeft.X + Width, TopLeft.Y)
BottomLeft = (TopLeft.X, TopLeft.Y + Height)
BottomRight = (TopLeft.X + width, TopLeft.Y + Height)
With some simple sketches, youll realize that this holds true.
Now its time to do some hardcore coding.
Create a sub called Load:
Public Sub Load(ByVal ImageName As String, ByVal topleft As Point, ByVal width As Integer, ByVal height As Integer)
The next thing were going to do is talk about Direct3D Vertices.
The thing about these vertices is that they are different from Math vertices.
A D3D Vertex can hold various proprties. Some of it includes
Position - Just like a math vertex
Color - .. yes, color, vertices can hold colors
Texture - you can place an image on top of the vertices
Normal - Stuff to do with lighting
In our case, we want our vertices to hold the Position and the Texture.
So in the Load sub,
Declares an array of vertices that will make up the square.
Dim Vertices() As CustomVertex.PositionTextured
Now we have to set the texture:
SpriteImage will hold our .. Image
.
SpriteImage = TextureLoader.FromFile(dxDevice, ImageName)
-----
Now for a quick note. We know that a square is composed of 2 Triangles. That means that wed need 6 vertices (3 per triangle) to make up a square! Nope ;0, thank goodness Direct3D has a way around it. Later in our code, were going to set the PrimativeType (Primitiave means Triangle). The primitave type specifies how our shape will be creative. The 2 most common PrimativeTypes are:
PrimativeType.TriangleList - Using this method, wed have to create 6 vertices for a square
PrimativeType.TriangleStrip - Using this method, we only need 4 triangles per square.
Take a look at these links from MSDN, they have pictures with explanations to help you understand what this is all about.
TriangleList - A triangle list is a list of isolated triangles. They might or might not be near each other. A triangle list must have at least three vertices. The total number of vertices must be divisible by three.
TriangleStrip - A triangle strip is a series of connected triangles. Because the triangles are connected, the application does not need to repeatedly specify all three vertices for each triangle.
So when we create our square, it is better to use a TriangleStrip. This way, There are 3 vertices (TopLeft, TopRight, BottomLeft) for the triangle - and D3D senses that 4th vertex (BottomRight) is "alone" and connects that vertex with the TopRight and BottomLeft. Thus, I opted to use a TriangleStrip to save memory.
-Splitting post into 2 to overcome character limit
edit: ARGH! Font got screwed up on this one. Stupid thing doublespaces it automatically. The source code got squished together. I patched up as much of it as possible. Please bear with me, but the source code is fully commented and follows along with this tutorial - so it might be better to paste from there rather than here.
This tutorial will teach you how to display a textured quad(square).
In this tutorial were going to get into some hardcore definitions as we move along.
Well the first thing you need to know:
Whats the simplest polygon? A triangle of course! This is why Direct3D constructs all of its shapes from triangles. A square is 2 triangles of course (draw a diagonal line from corner to corner and voila). This is how were going to construct our square in this tutorial.
Well get into more terminology as we move along.
Create a new project. Copy the same GameClass as the previous project ("Initializing The Device"), and use the same Form1 code as before.
For this tutorial, were going to make an adjustment here which well discuss in the next tutorial(dealing with Matrices/Transformations). Go to your GameClass (in your new project), and at the very end of the Initialize sub, type this in:
D3Ddev.Transform.View = Matrix.OrthoOffCenterLH(0, DP.Width, DP.Height, 0, 0, 10)
Again, dont worry about this line in this tutorial, Ill explain more in the next tutorial.
Create a new class called clsSprite and at the top, Import the 3 DLLs which you usually import:
Imports Microsoft.DirectX
Imports Microsoft.DirectX.Direct3D
Imports Microsoft.DirectX.Direct3D.D3DX
Dim the following global variables in your class.
Holds a copy of the device to be used in the class
Private dxDevice As Device
Holds the image that will be drawn onto the square
Public SpriteImage As Texture
This is the buffer in which the vertices of the square will be stored
Public vBuffer As VertexBuffer
Create a contstructor:
Public Sub New(ByVal lDevice As Device, ByVal ImageName AsString, ByVal TopLeft As Point, ByVal Width As Integer, ByVal Height As Integer)
Store a copy of our device in the class
dxDevice = lDevice
Load the image, we specify the arguments that we need to create a square
Load(ImageName, TopLeft, Width, Height)
EndSub
Dont worry about the error, were going to create a Load sub in a minute http://www.computerhelp.forum/x_images/images/smilies/smile.gif.
First, a quick note: We can create a square given the TopLeft coordinate. the Width, and the Height. It works like this:
TopLeft = (TopLeft.X, TopLeft.Y)
TopRight = (TopLeft.X + Width, TopLeft.Y)
BottomLeft = (TopLeft.X, TopLeft.Y + Height)
BottomRight = (TopLeft.X + width, TopLeft.Y + Height)
With some simple sketches, youll realize that this holds true.
Now its time to do some hardcore coding.
Create a sub called Load:
Public Sub Load(ByVal ImageName As String, ByVal topleft As Point, ByVal width As Integer, ByVal height As Integer)
The next thing were going to do is talk about Direct3D Vertices.
The thing about these vertices is that they are different from Math vertices.
A D3D Vertex can hold various proprties. Some of it includes
Position - Just like a math vertex
Color - .. yes, color, vertices can hold colors
Texture - you can place an image on top of the vertices
Normal - Stuff to do with lighting
In our case, we want our vertices to hold the Position and the Texture.
So in the Load sub,
Declares an array of vertices that will make up the square.
Dim Vertices() As CustomVertex.PositionTextured
Now we have to set the texture:
SpriteImage will hold our .. Image
.SpriteImage = TextureLoader.FromFile(dxDevice, ImageName)
-----
Now for a quick note. We know that a square is composed of 2 Triangles. That means that wed need 6 vertices (3 per triangle) to make up a square! Nope ;0, thank goodness Direct3D has a way around it. Later in our code, were going to set the PrimativeType (Primitiave means Triangle). The primitave type specifies how our shape will be creative. The 2 most common PrimativeTypes are:
PrimativeType.TriangleList - Using this method, wed have to create 6 vertices for a square
PrimativeType.TriangleStrip - Using this method, we only need 4 triangles per square.
Take a look at these links from MSDN, they have pictures with explanations to help you understand what this is all about.
TriangleList - A triangle list is a list of isolated triangles. They might or might not be near each other. A triangle list must have at least three vertices. The total number of vertices must be divisible by three.
TriangleStrip - A triangle strip is a series of connected triangles. Because the triangles are connected, the application does not need to repeatedly specify all three vertices for each triangle.
So when we create our square, it is better to use a TriangleStrip. This way, There are 3 vertices (TopLeft, TopRight, BottomLeft) for the triangle - and D3D senses that 4th vertex (BottomRight) is "alone" and connects that vertex with the TopRight and BottomLeft. Thus, I opted to use a TriangleStrip to save memory.
-Splitting post into 2 to overcome character limit
Last edited by a moderator:
.