PDA

View Full Version : So you want to make a game using Scar?



solemn wishes
07-01-2008, 06:59 PM
So you want to make a game using Scar?

So you want to make your first game in scar huh? Trust me when i say its not only a fun experience but with scar the possiblilys are allmost endless, within two dimensions of-course and lack of imagination =]. In this tutorial i am going to describe the simple aspescts that you need to create a working canvas to draw your works of art onto aswell as discuss some of the concept of scar game making.

Here We Go!

The Very fundementals of scar game making are FastDrawing. FastDrawing is the command you will be using to achurly imput or place your images onto the 'Game Window' so that they are visable. Lets Start out simply by creating our 'Game Window' and compiling it to check that it works correctly -

Program CanvasTest;
Var
Buffer : Integer;
Begin
DisplayDebugImgWindow(400, 400);
Buffer:= BitmapFromString(400, 400, '');
SafeDrawBitmap(Buffer, GetDebugCanvas, 0, 0);
End.


Explained -


Buffer : Integer - Our integer that we will be using as out buffer, this will be explained later.


DisplayDebugImgWindow(400, 400); - This simply calls scar to draw a window with the measurements of 400 x 400. Please change this to any number (within reason) to suite your game.



Buffer:= BitmapFromString(400, 400, ''); - Specifies out buffer variable to be the same dimesntions as our DisplayDebugImgWindow command. This is used to refresh the screen so that any movement changes on the game window are seen.



SafeDrawBitmap(Buffer, GetDebugCanvas, 0, 0); - Draws our Buffer image over the convas.



Now compile the code, if all goes well (it should) then you see a black screen appear, the same dimentions as those that you specified earlier. Well Done! Now this progress for this and create something that we can view visually on the screen now that we have a window to put stuff into.


The command that we will be using to draw our new objects onto the game screen is -



procedure FastDrawSizeTransparent(x1, y1, x2, y2: Integer; sourcebitmap, targetbitmap: Integer);
Draws source bitmap to target bitmap and stretches to rectangle specified by x1, y1, x2, y2.


This has the ability to draw an image with the specified dimensions. For this tutorial we will be using an image that i have created earlier. Please download this image or use your own.


http://img382.imageshack.us/img382/3303/testwre6.png (http://imageshack.us)


Lets Implement this into our code using the FastDrawSizeTransparent function. Insert this code into your script, i will explain everything that goes into it.


FastDrawSizeTransparent(235, 30, 235+19, 30+26, TestW, Buffer);

What this means is that the bitmap (TestW) will be loaded at the coridinates set on the buffer. You may have noticed the +19 and +26, these are so that the object is now flat. If the object was fla tit would not be visable. This should eb changed to suit the size of the image you are using to draw.

Now lets just add the variable 'TestW' to our vars and load the image. add this code :


Add this to your list of vars - TestW : Integer;

And this near the start of our main code - TestW:= Loadbitmap('C:\Users\MuNky\Desktop\TestW.bmp')

All that this means is that the variable 'TestW' is loading the image from an outside source. This runs faster in scar rather than placing the image into a string and loading it.


Here is how our code is currently shaping up -

Program Test;
Var
Buffer : Integer;
TestW : Integer;

Begin

TestW:= Loadbitmap('C:\Users\MuNky\Desktop\TestW.bmp')

DisplayDebugImgWindow(400, 400);
Buffer:= BitmapFromString(400, 400, '');
SafeDrawBitmap(Buffer, GetDebugCanvas, 0, 0);
FastDrawSizeTransparent(235, 30, 235+19, 30+26, TestW, Buffer);

End.

When you compile -

http://img300.imageshack.us/img300/7262/imageundrawnbl0.jpg



load this, you iwll notice that our image is not being drawn. This is because scar laods the image once then finishes. Lets make it so we can achurly see our image. We can acheive this by simply adding a repeat before our SafeDrawBitmap command and an until(false); bellow our FastDrawSizeTransparent. This is how it should look now.


Program Test;
Var
Buffer : Integer;
TestW : Integer;

Begin

TestW:= Loadbitmap('C:\Users\MuNky\Desktop\TestW.bmp')

DisplayDebugImgWindow(400, 400);
Buffer:= BitmapFromString(400, 400, '');

Repeat
SafeDrawBitmap(Buffer, GetDebugCanvas, 0, 0);
FastDrawSizeTransparent(235, 30, 235+19, 30+26, TestW, Buffer);
Until(False);

End.

and when compiled. -

http://img391.imageshack.us/img391/7301/imagedrawntv5.jpg


So we have our image drawn! lets add a movement system! For this example i am using the arrow keys for movement. This can be down very simple with a few If's and the IsArrowDown. Lets replace the cords of our FastDrawSizeTransparent with some variables and specifiy them.


I used - x1, y1 : integer;

my code now looks like this -


FastDrawSizeTransparent(x1, y1, x1+19, y1+26, TestW, Buffer);


Then i just specified what these mean -



x1:= 300;
y1:= 50;

Here is my completed movement controls -



If IsArrowDown(0) Then y1:= y1 - 1;

If IsArrowDown(1) Then x1:= x1 + 1;

If IsArrowDown(2) Then y1:= y1 + 1;

If IsArrowDown(3) Then x1:= x1 - 1;


Here is the script compiled and working with movement -



Program Test;
Var
Buffer : Integer;
TestW : Integer;
x1, y1 : integer;


Begin

TestW:= Loadbitmap('C:\Users\MuNky\Desktop\TestW.bmp')

DisplayDebugImgWindow(400, 400);
Buffer:= BitmapFromString(400, 400, '');


x1:= 300;
y1:= 50;

Repeat
SafeDrawBitmap(Buffer, GetDebugCanvas, 0, 0);
FastDrawSizeTransparent(x1, y1, x1+19, y1+26, TestW, Buffer);


If IsArrowDown(0) Then y1:= y1 - 1;

If IsArrowDown(1) Then x1:= x1 + 1;

If IsArrowDown(2) Then y1:= y1 + 1;

If IsArrowDown(3) Then x1:= x1 - 1;

Until(False);

End.




So that is the basics of scar game making! ovbiously it gets alot mroe complicated and alot more will be happening at once if you are creating a much biegger game. Here are some exampes of code i have used in the past more my game scripts -







Procedure IntialiseGame;
Begin

ranger1still := loadbitmap('C:\Users\MuNky\Desktop\Scar\game\monst ers and characters\ranger1still.bmp')
CombatScreen := loadbitmap('C:\Users\MuNky\Desktop\Scar\game\maps\ BattleScreen.bmp');
ranger1still := loadbitmap('C:\Users\MuNky\Desktop\Scar\game\monst ers and characters\ranger1still.bmp')
ranger1at := loadbitmap('C:\Users\MuNky\Desktop\Scar\game\monst ers and characters\ranger1attack.bmp')

healthbar := loadbitmap('C:\Users\MuNky\Desktop\Scar\game\entit ys\health.bmp')
TargetHealth := loadbitmap('C:\Users\MuNky\Desktop\Scar\game\entit ys\mana.bmp')
SpriteCharr := loadbitmap('C:\Users\MuNky\Desktop\Scar\game\monst ers and characters\testW.bmp')
mapstarter := loadbitmap('C:\Users\MuNky\Desktop\Scar\game\maps\ mapstarter.bmp')


DisplayDebugImgWindow(400, 400);
Buffer:= BitmapFromString(400, 400, '');

SetTransparentColor(SpriteCharr, clblack);
SetTransparentColor(sprite2l, clblack);
SetTransparentColor(sprite3r, clblack);
SetTransparentColor(sprite4b, clblack);
SetTransparentColor(sprite4battack, clyellow);
SetTransparentColor(enemy1, clyellow);
SetTransparentColor(enemysquidswordb, clyellow);
SetTransparentColor(noobsword, clblack);
SetTransparentColor(ringE, clblack);

x1:= 300;
y1:= 50;
goldA:= 250;
hpd:= 25;

// FastDrawClear(Buffer, clblack);
Repeat

FastDrawSizeTransparent(0, 0, 400, 400, mapstarter, Buffer)
FastDrawSizeTransparent(x1, y1, x1+23, y1+27, spriteCharr, Buffer);

HandleMovements;

Inventoryitemspositions('sword');
Inventoryitemspositions('ringE');
InventoryDisplay;
Pickup;

AttackDetermine;

GoldText(inttostr(goldA))
ChatMessages[1]:= 'welcome To 2';
ChatMessages[2]:= 'Amethlion';
GameChat('')

Writeln('x : '+inttostr(x1)+'y : '+inttostr(y1))


If(IsKeyDown('s'))and(goldA>49)then begin
goldA:= goldA - 50;
FastDrawSizeTransparent(x+50, y+50, x+19+50, y+26+50, spriteCharr, Buffer);
End;

Case Random(20) of
1 : hpd:= hpd-2;
end;
FastDrawSizeTransparent(35, 226, 83, 241, healthbar, Buffer); // HealthBar
FastDrawSizeTransparent(35, 242, 83, 257, TargetHealth, Buffer); // TargetHealth

//stairway collisions
if(y1<78) and (x1=156) then x1:= x1 + 1;
if(y1<78) and (x1=176) then x1:= x1 - 1;

//box collisions
if(y1>209)then y1:= y1 - 1;
if(x1>210)then x1:= x1 - 1;
if(x1<62) then x1:= x1 + 1;
if(y1<82) and (x1<155) then y1:= y1 + 1;
if(y1<82) and (x1>179) then y1:= y1 + 1;

//chest collisions
if(y1<210)and(x1=107)and(y1>182) then x1:= x1 + 1;
if(x1<102)and(x1>80)and(y1=185) then y1:= y1 - 1;
if(x1=75)and(y1<210)and(y1>187) then x1:= x1 - 1;

//chest collisions
if(y1<210)and(x1=107)and(y1>182) then x1:= x1 + 1;
if(x1<102)and(x1>80)and(y1=185) then y1:= y1 - 1;
if(x1=75)and(y1<210)and(y1>187) then x1:= x1 - 1;

//table collisions
if(x1=168) and(y1<157)and(y1>121) then x1:= x1 + 1;
if(y1=119) and(x1>74)and(x1<163) then y1:= y1 - 1;
if(x1=67) and(y1>122)and(y1<153) then x1:= x1 - 1;
if(y1=157) and(x1>79)and(x1<160) then y1:= y1 + 1;

//draw collisions
if(x1=142) and(y1<108)and(y1>0) then x1:= x1 + 1;
if(y1=105) and(x1>75)and(x1<136) then y1:= y1 + 1;
if(x1=70) and(y1>80)and(y1<101) then x1:= x1 - 1;
if(y1=157) and(x1>79)and(x1<160) then y1:= y1 + 1;


SafeDrawBitmap(Buffer, GetDebugCanvas, 0, 0);
Until(AreaComplete)
End;

And -




Procedure Attackdetermine;
Var
wt, gb, c : Integer;
bigtime : Integer;
bx1, bx2, bx3, bx4 : Integer;

Begin

If(XR = 0) Then XR:= 258; If(YR = 0) Then YR:= 121; hpd:= 100;

If(xr < 173)Then Direction:= DirRight;
If(xr > 329)Then Direction:= DirLeft;

GB:= CreateMirroredBitmap( ranger1still );
SetTransparentColor(GB, clwhite);
SetTransparentColor(ranger1still, clwhite);

If(Direction = DirRight)Then
FastDrawSizeTransparent(xr , yr, xr + 13 , yr + 17 , ranger1still, Buffer) Else
FastDrawSizeTransparent(xr , yr, xr + 13 , yr + 17, GB, Buffer);

If ( Direction = DirRight ) Then xr:= xr + 1;
If ( Direction = DirLeft ) Then xr:= xr - 1;

bx1:= Xr - 5;
bx2:= yr - 5;

bx3:= Xr + 23;
bx4:= yr + 22;

If(y1=yr)And(not(x1<bx1))And(X1>bx1)And(x1<bx3)And(y1<bx2)And(y1<bx4)Then
Begin
Direction:= Attacking;
End;

If(Direction = Attacking)Then Begin

Buffer:= BitmapFromString(400, 400, '');
FastDrawClear(Buffer, clblack);

Repeat

FastDrawSizeTransparent(0, 0, 400, 400, CombatScreen, Buffer)


FastDrawSizeTransparent(235, 30, 235+19, 30+26, spriteCharr, Buffer); // Top Right
FastDrawSizeTransparent(50, 235, 50+19, 235+26, spriteCharr, Buffer); // Bottom Left

FastDrawSizeTransparent(200, 200, 200+hpd, 200+26, healthbar, Buffer); // HealthBar
FastDrawSizeTransparent(25, 30, 25+hpd, 30+26, TargetHealth, Buffer); // Target HealthBar


Bigtime:= bigtime + 1 //Perhaps Scrolling Combat Method #1
If(bigtime>1000)Then begin
If(ChatMessages[1] <> '')Then ChatMessages[1] := '';
CombatText('Replace 1'); // Calls Combat Text
End;


SafeDrawBitmap(Buffer, GetDebugCanvas, 0, 0);

Until(False)
End;
End;



still these exams may seem alot more complicated but its bassicly the code i have shown you just extended and repeated. Enjoy!

Dan Cardin
07-01-2008, 09:43 PM
thats a pretty nifty tutorial :). It might be a little better if you actually created a simple game. (you already have the base of it, you just need a purpose)

Hobbit
07-06-2008, 02:11 AM
Moved to Advanced Tutorials

Daniel
07-06-2008, 02:40 AM
Oh, Solemn Wishes still visits SRL :p Nice tutorial, by the way.

@Hobbit, wouldn't this belong in the Moderate section of tutorials?

mastaraymond
07-07-2008, 06:28 PM
Oh, Solemn Wishes still visits SRL :p Nice tutorial, by the way.

@Hobbit, wouldn't this belong in the Moderate section of tutorials?
In the eyes of many people this will belong to the "advanced" section..
If you know canvasses, this will belong to the moderate section... It's up to you!

TheGuyWhoGotOn
07-08-2008, 02:07 PM
Thanks for this tutorial, I just wanted to know how to use SCAR to show images on the screen. I think I may make a game...If only I could convert Turing to SCAR easily XD.

solemn wishes
07-13-2008, 11:17 AM
Thanks for this tutorial, I just wanted to know how to use SCAR to show images on the screen. I think I may make a game...If only I could convert Turing to SCAR easily XD.

Cool. Then hopefully this is the right tutorial for you then. I was unsure where to put this so im glad i didnt have to make the decision on where it goes. I think this is probly it's best home thinking about it.

If anyone is having any issues using this tutorial i am willing to do a followup on things that i have not covered. if you are going to attempt to make a game in scar amoungt other things you do need general knowledge of what a game needs, keep that in mind.

Best of luck everyone.

WhoCares357
08-17-2008, 03:49 AM
Hmm, I'm having a strange effect. I used the image you provided (converted it to a bmp) and I used your example code for the basic game (arrow keys to move that image). When I move left or up I leave behind a brown line. If I go right or down I leave a black line. This may be because my bitmap is 32 bit, though. I'll try it with 24 bit.

Edit: Nope, still the same effect. Is there a way to fix this?

Edit2: After playing around with it for a few days I figured out that you have to set the transparent color, then use the procedure FastDrawClear to clear the screen of everything. :)

BazzBarrett
09-14-2008, 10:52 PM
so there was a tut on making games.. very nice ;) same as how i do it altough u could extend on how to make TFroms and a simple game window id do it but i realy cba XD