Friday, February 23, 2007

Making 2D games with GLXtreem - Rendering

Introduction

The use of a Game Template is only of use once we start using it to create our games. This Tutorial is the first step toward the use of a template to create a game. The Game Template being used for this tutorial is my CairnsGames Game Template.

While this tutorial refers to GLXTreem used within Delphi, the basic structure and logic throughout the series of tutorials can be used for any language and any component set.

To use the source code in the Tutorial you will need to have the GLXTreem components set up and the template from ?_~Tutorial One: Writing 2D Games with GLXTreem?_T tutorial.

Deciding what is needed

Whenever a Development Template is used in a project, the items within the template that are required must be chosen. Any Development Template has functionality that isn?_Tt required by a specific project. At the start of the development process the various options must be made and the template needs to be modified enough to implement these options.

Some examples of decisions that need to be made are: do you need a high score system, will the game run in full screen or windowed mode.
Selecting your ?_~Story?_T
One of the greatest things about making a game is deciding why the game is happening. A story can be as simple as defining the rules of the game or as complex as a historical explanation for the game.

One game I made (Desperate Defence) had a long complex story but the game play was relatively simple.

In the peaceful Kingdom of Prokien life is sweet. The winters are mild and summers always bring bountiful harvests. But the neighbouring duke of Renkdass has sent his vicious armies to destroy the Kingdom.

The few soldiers of Prokien have defended the kingdom valiantly, but the enemy have relentlessly advanced razing town after town and pillaging each village as they passed. The King has retreated to his mountain fort with as many of his subjects as possible.

You have been left to defend the capital. A few loyal soldiers have been left with you. Daily you have had reports of the Duke?_Ts men advancing toward the capital. Your final line of defence is the meagre wall surrounding the King?_Ts Palace. The enemy have entered the capital and are surging toward the Palace.

You and the few men left must defend as long as possible!

The archers hiding behind the walls must shoot and kill as many enemy soldiers as possible before being killed. The Archers will shoot at wherever you click the mouse.

The story reads nicely but the actual game play of the game consisted of clicking on the screen where you wanted your archers to shoot.


Screen Drawing


So once you have your detailed story the first real rendering you?_Tll do to the screen is the introduction screen of the game.

In the Rendering function for the Introduction Game State the lines to draw the introduction is entered. If necessary a nice background picture can be included as well as any other images that you want to include to set the theme and feeling of the game. For Desperate Defence a nice grassy background with pretty trees surrounding the text box makes a nice introduction.

As indicated in ?_~Tutorial Two: Design of a Game Template?_T each Game State has its own Rendering Function. The introductions screen drawing then goes into the RenderIntro procedure.

Pascal Code:

Procedure Tform1.RenderInto(Sender : TObject; var Done: Boolean);
Begin
GLXDraw1.Clear;

// Instructions to display the Introduction of the Game
GLXDraw1.Begin2D;
GLXImageList1.Items[2].TileDraw(0,0,12,7,0);
// Do displays
WriteText('Header',130,10,GameTitle,0,1,0);
WriteText('Standard',100,60, 'In the peaceful Kingdom of Prokien life is sweet. The winters are',0.8,0.8,0.8);
WriteText('Standard',100,75, 'mild and summers always bring bountiful harvests. But the');
WriteText('Standard',100,90, 'neighbouring duke of Renkdass has sent his vicious armies to');
WriteText('Standard',100,105, 'destroy the Kingdom.');

WriteText('Standard',100,130, 'The few soldiers of Prokien have defended the kingdom valiantly,');
WriteText('Standard',100,145, 'but the enemy have relentlessly advanced razing town after town');
WriteText('Standard',100,160, 'and pillaging each village as they passed. The King has retreated');
WriteText('Standard',100,175, 'to his mountain fort with as many of his subjects as possible.');

WriteText('Standard',100,200, 'You have been left to defend the capital. A few loyal soldiers have');
WriteText('Standard',100,215, 'been left with you. Daily you have had reports of the Duke''s men');
WriteText('Standard',100,230, 'advancing toward the capital. Your final line of defence is the');
WriteText('Standard',100,245, 'meagre wall surrounding the King''s Palace. The enemy have entered');
WriteText('Standard',100,260, 'the capital and are surging toward the Palace.');

WriteText('Standard',100,285, 'You and the few men left must defend as long as possible!',1,1,0);

WriteText('Standard',100,310, 'The archers hiding behind the walls must shoot and kill as many');
WriteText('Standard',100,325, 'enemy soldiers as possible before being killed. The Archers will');
WriteText('Standard',100,340, 'shoot at wherever you click the mouse.');
// Add some pretty trees to make it look nice
GLXImageList1.Items[1].Draw(-10,10,0);
GLXImageList1.Items[1].Draw(-40,80,3);
GLXImageList1.Items[1].Draw(600,30,1);
GLXImageList1.Items[1].Draw(580,90,2);
GLXImageList1.Items[1].Draw(-30,140,3);
GLXImageList1.Items[1].Draw(-10,220,1);
GLXImageList1.Items[1].Draw(-20,310,2);
GLXImageList1.Items[1].Draw(550,140,0);
GLXImageList1.Items[1].Draw(570,200,1);
GLXImageList1.Items[1].Draw(560,270,1);
GLXDraw1.End2D;

GLXDraw1.Flip;
End;


Note that a second font is being used ?_" it was loaded into the GLXFont component in the LoadFonts procedure. Also some new images have been added to the Images.WGL file.

Fading an Image

Various special effects can be used to make a game look more professional. One of these is the fading in an out of an image. With GLXTreem its very easy to fade an image. The GLXDraw object has a property called UseColor. This property affects everything that is drawn to the GLXDraw screen. By changing the values sent to the UseColor procedure the screen can be faded in or out. By increasing the values toward 1 the image fades into view and by decreasing the values the image fades out.

Pascal Code:

GLXDraw1.UseColor(TC,TC,TC);
IntroImage.Draw(0,0,0);
GLXDraw1.UseColor(1,1,1);


Note that the WriteText method described in the previous tutorial defines its own Colours and will therefore overwrite the settings in UseColor.

Adding the Game Logic

By now the usefulness of a template can hopefully be seen. Each step of the way we have defined a set of default behaviour for the template and then we have added specific game functionality into the base.

Hopefully you can now take this base and add your own game logic. While this tutorial only covered the rendering of an introduction screen the same process can be used to render the game screen, the game over screen and the options screens.

This is the last in my series of making games with GLXTreem. From next month I will start a series of articles on using SDL and specifically my S2DL libraries in FreePascal and Delphi.

http://www.pascalgamedevelopment.com/viewarticle.php?a=38&p=3#article