Tank Handling

Requirements: V6.1 Registered

 

Introduction:

Hi and welcome to the "Tank handling tutorial", this tutorial will show you how to make a tank from above that can rotate, drive forwards, backwards and finally shoot.  I will also give you some basic sprites you can use during this tutorial, and i will try to explain as good as i can, what all the code means and such.

 

-x-

 

How to understand this guide:

Black text is normal text

Text in bold red are warnings and errors you can easily make by mistake, also very important notices

Green italic text are hints and some alternative things you can add if you want to

Blue bold italic texts are code explanations

Purple bold text are buttons to click

 

-x-

 

Tank and turret sprites:

At this moment, I think you already have Gamemaker open, and you have pressed "new".

If you haven't, open Gamemaker, and click on File>New.

You can also press Ctrl+N to make a new game

 

A very important thing about a game, is the sprites. Especially the player sprite, since you will see it so many times. But in this tutorial, it really doesn't matter that much.

 

-x-

 

Tank sprite:

Now we are gonna make the main body for the tank, that is, everything but the turret.

First off, right click the "Sprites" folder and click Add sprite.

Now the name of the sprite is up to you, but in this guide, name it like i do, but I, and many others, name their sprites with the extension "spr_".

for easy use in the code editor, name all your resources with small letters.

Name it "spr_tank".

Never use a spacebar in a sprite name, or an object name, or any other resources.

It will cause trouble for the code editor, instead, use an underscore "_".

 

Click Edit sprite.

The Default sprite size is 32x32.

Since the tank shall be able to rotate, it should have a sprite with a midpoint, so the rotation will be as accurate as possible.

To make it possible, resize the sprite by clicking Transform>Resize Canvas.

You can also use ctrl+alt+C to open the transform dialogue

Make sure "Keep aspect ratio" is checked, this way, the sprite will resize with the same value in both % boxes.

Write 97%, or you can write 31 Pixels.

Press the ok button to apply the settings.

Now we are ready to make the sprite.

Double click the green image to edit it.

Before you make the tank, I just gotta say that the color of the down left pixel is the transparency color, if transparency is checked (Transparency is checked by default).

Also, when making rotating sprites, it has to face to the right.

The reason to this is that 0 degrees is right, 90 degrees is up, 180 degrees is left and 270 degrees is down.

 

First, change the background color so the transparency is a color that's not so military as the green one.

In this case, make it purple.

Zoom in as much as you can, and turn on the grid.

Select the color picker (under the pen tool) and right click the purple image to get the purple color as a secondary color, this way, you can erase any errors easily.

 

Select the pen tool again, click on the black color, and start drawing the outline of the tank.

Make sure the tank is centred when you are done.

If you want, you can use my template and load it into Gamemaker.

tanktuttanktemp5

 

Now that you're done with the sprite, press the green ok button.

Now press it again in this new window.

Now you're almost done with the spite, we just have to press a little button that says center.

This makes the origin jump to the center of the sprite, which in this case is x15 y15.

Origin is the position that registers the x and y position of the object, the sprite also rotates around this point, therefore, its important to have it in the middle.

 

Now you're done, Click the green ok button.

 

-x-

 

Turret sprite:

This time, things are a little bit different.

Insert another sprite, and name it "spr_turret".

Make the canvas x32 y15.

Make the background purple as we did before, and start drawing the turret.

You can also use my turret:

tanktutturrtemp0kj

 

Now remember what i said about origin, the sprite rotates around it.

So in this turret (if you used my template), the origin is x7 y7.

 

Click all the ok buttons you have until no windows are up.

 

If something went wrong during the past steps, or you just didn't do them, download this .gm6 file containing the template sprites with the origin set.

 

> Download <

File info:

Type: .gm6

Size: 3.46 kb

 

-x-

 

The tank object:

Now we are going to turn this into a game.

Right click the Objects folder and select add object.

Name the object "tank".

Most people uses the extension "obj_", but i don't, since to objects are the main thing.

Under the object name, it says <no sprite>, click that text, and select "spr_tankbody".

Do not mix together sprites and objects, Sprites are pictures that is added to objects, objects contains data, which sprites does not.

Now click Add event>Step>Step

To the right you have a bunch of tabs, click the control tab and then right click on an icon that looks like this:

action_code

 

That means that you are going to write some code, with the language called "GML".

If you are new to this, don't worry, I'll explain.

Insert this code:

 

if speed>5 speed=5;

friction=0.3;

 

So what means this?  I'll tell you:

 

if speed>5 speed=5;

 

This means, that if the speed, is larger than 5, the speed is 5. It basically sets the max speed for the tank.

 

friction=0.3;

 

This makes the tank glide a little bit when you have stopped to drive. The higher value you have, the longer will it glide.

 

That's it for the step event!

 

Now click add event>keyboard>up.

In that event, insert this code:

 

motion_add(image_angle,+0.4);

 

This means that an amount of motion (0.4) is added in the angle the sprite is facing.

 

Add a similar event, but for the left key instead.

In that event, insert this code:

 

direction+=5;

image_angle+=5;

 

Now to explain what it does:

 

direction+=5;

 

The direction the tank is travelling, adds 5 degrees. This is the code that actually makes the tank turn.

 

image_angle+=5;

 

This is the same as above, but this doesn't change the direction of the car, this changes the sprite angle, so its the same as the direction.

Do not mix up direction and image_angle, direction is the direction the car travels, image_angle is the angle the sprite is set to.

 

Do the same for the right key, but use this code:

 

direction-=5;

image_angle-=5;

 

This is the same code as for the left key, only this time it goes the other way.

 

Insert this code for a down key:

 

motion_add(image_angle,-0.4);

 

This is the same as for the up key, only this time it's reversed.

Note that this goes after the image angle, not the direction, since direction is always the direction the car is travelling.

 

Now we are done with the tank object! Press all the ok buttons.

 

-x-

 

The turret object:

Make an object named "turret" and apply your turret sprite. Set the depth to -5 to make sure it will be above the tank all the time. Make a Step Event and insert this code:

 

image_angle=point_direction(x,y,mouse_x,mouse_y);

x=tank.x;

y=tank.y;

 

Now its a bit more complicated:

 

image_angle=point_direction(x,y,mouse_x,mouse_y);

 

This makes the turret angle towards the mouse.

it means: The image angle, is the same angle as a line between my x position, my y position, the mouse x position and the mouse y position.

 

x=tank.x;

y=tank.y;

 

This means, my x position, is the same as the tanks x position, and my y position, is the same as the tanks y position.

 

Now were done with the turret! (for now)

 

If something went wrong during the past steps, or you just didn't do them, download this .gm6 file containing the objects I went through.

 

> Download <

File info:

Type: .gm6

Size: 5.72 kb

 

-x-

 

Bullet object and sprite:

Now we are about to add some action to the game!

first off, make a bullet sprite that's x10 y1.

make it full white.

Uncheck transparent.

name it "spr_bullet".

Set depth to -2, so it's between the tank and the turret.

 

Now make an object named "bullet", add the bullet sprite to it.

Press add event>create

Insert this code:

 

direction=point_direction(x,y,mouse_x,mouse_y);

 

This means, The direction of motion, is the angle of a line between me and the mouse.

 

Add a step event, and insert this code:

 

image_angle=direction;

speed=10;

 

This makes the image angle be the same as the direction the bullet travels.

and sets the speed to 10.

 

Now click Add event>Other>Outside Room

add the code:

 

instance_destroy();

 

This destroys the instance.

 

That's it for the bullet!

 

 

Completing the tank:

There's only one event to add now!

open the turret object, click add event>Mouse>Global mouse>Global left pressed

Insert this code:

 

instance_create(x,y,bullet);

 

This creates a bullet when you press the left mouse button when the cursor is anywhere (Hence 'Global left pressed')

 

Now create a new room, and insert the turret and the tank there, press the ok button, then finally test by clicking the little green play button.

You can also set the room speed to 60 to get smoother gameplay

----------------------------------------------------------------------------------------------

 

That's it!

You have now completed the tutorial!

If something went wrong, or you just want to see how it looks, download the complete file here:

 

> Download <

File info:

Type: .gm6

Size: 6.68 kb

 

Acegikmo - Revision #1