Wednesday, January 2, 2008

Vector Graphics

 

Get ready to build your space ship. Before performing any task in space, N.A.S.A. spends most of its time running simulations to ensure that the mission will be a success. On the ground engineers perform many exercises and learn what to expect during their mission. It’s much easier to try and fail on the ground than in space.

We are going to continue to build our space simulator where we will practice landing the space ship on the moon’s surface. In this chapter, we will build the outer frame for your space ship.

We are going to build our spaceship out of a single polygon. You have seen polygons before, but do you know what a polygon is? A polygon is a shape with at least three points. So a triangle is a polygon and so is a square. Let’s start by writing drawing a simple triangle.

We need to define a new polygon object called SpaceShip. In previous chapters, we defined variables as Integers. Now we are going to define an object called SapceShip as a Polygon.

An object defines properties and methods that allow us to interact with the object. Properties tell us about the object. Methods perform tasks on the object.

For example, a cell phone is an object. The cell phone is made up of many different parts that together make the phone. This collection of parts is known as an object. The cell phone has many different properties about it. On the phones screen you can see the phone’s volume, the amount of battery remaining, signal strength and the time. You can also perform actions with the phone. For example, you can choose to call someone or answer an incoming call.

Properties

Methods

Volume

AnswerCall()

Battery strength

Dial()

Signal strength

AddContact()

Time

Let’s look at the code needed to define a polygon object and create a triangle.

Program SpaceShip

Method Main()

Define SpaceShip As Polygon

SpaceShip.AddPoint(50,0)

SpaceShip.AddPoint(100,100)

SpaceShip.AddPoint(0,100)

SpaceShip.Color = Colors.Red

SpaceShip.IsFloating = True

SpaceShip.Visible = True

End Method

End Program

A polygon requires at least three points and we use the .AddPoint() method to add each point. The .AddPoint() method requires two arguments X and Y. X and Y provide the coordinates for the polygon you are creating. Remember, X is the number across and Y is the number down. An easy way to remember this is the X looks like a cross and the Y points down.

To define the objects color, we use the objects color property. The computer defines a set of colors which you can choose from. Try changing colors. For example, Colors.Black.

Finally, the SpaceShip.IsFloating property and SpaceShip.Visible property must be set to true for the triangle to be displayed.

clip_image002

Sprites

A sprite is another type of object. You have learned how to use other types of objects like polygon and joystick. A sprite object allows you to display and positions graphics easily on the console window. With poloygons, you have to programmatically draw the graphics for your game on the screen. With sprites, you design the graphics using a drawing program and then programmatically load the sprite to display on the console window. Sprite objects provide several methods that allow you to control the location, size and position of the graphics on the screen.

An animated gif file is a single file composed of several images. When the individual images are show in sequence, the image appears to animate. The following is an example of a dancing hula girl. Notice that each image is slightly different. The 8 images shown one after the other make the hula girl appear to dance.

clip_image004

Sprites allow the developer of the game to focus on the programming logistics of the game and the graphics designer to focus on the graphics for the game. This allows each person to focus on their area of expertise. Most complex games developed today and written by dozens people each with different roles such as developers, testers and graphic artists.

To use a sprite, you must first define a new variable and load the sprite into memory.

Ship.Load ("AnimatedShip.gif" )

Ship.MoveTo (100,150)

Ship.Show()

To move a sprite on the screen you can use one of several different methods.

MoveTo(x, y) allows you to move a sprite to a known set of coordinates, X and Y. This is useful if you know exactly where you want to place the sprite.

The following move methods are useful if you don’t need to specify the exact location. For example, the user presses the LEFT arrow on the keyboard and you simply want to move the ship to the left.

MoveByAmount (X,Y) moves the sprite based on the current location. For example, adding Ship.MoveByAmount (10,15) would move the sprite Ship over left 10 and down 15.

MoveLeft (Pixels) moves the spite to the left by the number of pixels specified.

MoveRight (Pixels) moves the sprite to the right by the number of pixels specified.

To spin or rotate a sprite set the property Rotation to a value between 0 and 360. 0 is North, 180 is South. For example, to spin the ship once you can add the following code to the example above.

For x = 1 To 360

Delay(10)

Ship.Rotation = x

Next

The Delay() method pauses the computer program a number of milliseconds specified. Decrease this number to reduce the delay and increase the speed of the ship spinning.

Scaling

You can determine the size of a sprite by setting the ScaleX and ScaleY properties of a sprite. ScaleX = 200 and ScaleY=200 will double the size of the sprite. ScaleX = 50 and ScaleY= 50 will reduce the size of the sprite in half.

LAB

Write a program that displays the ship in the center of the screen.

Hint use the function ScreenWidth() to get the width of the consolescreen and ScreenHeight() to get the height of the screen. The center of the screen is half the height and half the width.

Create a Loop that rotates the ship left or right depending on if the user presses the Left or right arrow keys.

Hint, is the Function IsKeyDown( "Right" ) and IsKeyDown( "Left" ) to check if the user is pressing the left or right arrow keys.

Bonus, exit the program when the user presses “Q” on the keyboard.

No comments: