Tutorial 6 - Drawing with Lines
If you'd like, you can download the source for this tutorial here. See Tutorial 3 for the basis for this game. We'll use the keyboard to control the player, and the vector drawing component to render it.Lines, Lines, and more Lines...
A simple method of drawing an object in a game is by using vector drawing. This technique is used in the Asteroids Evolution demo that comes with the engine. You'll also recognize this as the technique used in early games, from Atari and other developers, such as Battlezone, Lunar Lander, Star Castle, and Tempest. While this style of drawing is rudimentary, it is the quickest way to get objects rendered within your game.
Drawing the player will be done with the Vector2DComponent. All the component needs is a set of points, along which to draw the path. The points are a representation of the shape of the object, relative to it's origin. Unfortunately, this is going to require a little graph paper and some patience. But, the results are quite nice when done properly.
Plotting the Object's Shape
Alright folks, get your pencils and your graph paper and let's get started! First, mark a point, somewhere on your paper, which will be the center (or origin) of your shape.
Next you'll draw out the shape you want, relative to that origin.
Yes, we're drawing a star... I know you were expecting something really cool like a viking juggernaut, or a dragon, but I don't have that much time on my hands. There's nothing wrong with being more detailed, but do consider that the more you draw, the more time will be spent rendering the shape. With vector drawing, we're leaving a lot up to the player's imagination. You'll also notice that I didn't complete the shape. Because the shape will be a "closed manifold" (no open spaces between the start and end points) we don't want to duplicate the first point... It'll just be excess time drawing the shape.
Now we select what will be our starting point. We'll then connect the dots to get our final shape as shown above. The starting point is this one:
Finally, we get the coordinates of the points, and store them into a simple array of X and Y value arrays. This will become our shape's points.
This can be translated into this code:
// The object shape var shape = [[-4,-1], [-1,-1], [0,-5], [1,-1], [4,-1], [1,1], [4,4], [0,2], [-4,4], [-1,1]];