Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411512 Posts in 69376 Topics- by 58430 Members - Latest Member: Jesse Webb

April 26, 2024, 03:42:18 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityTownhallForum IssuesArchived subforums (read only)TutorialsScrolling Shooter Tutorial Updated!
Pages: [1]
Print
Author Topic: Scrolling Shooter Tutorial Updated!  (Read 7410 times)
Venks
Level 0
***


View Profile
« on: November 25, 2013, 01:03:33 PM »

So back in 2009 I downloaded a program called Game Maker 7 and taught myself how to make a couple silly games. It's 2014 now and I have a lot of experience under my belt. Yoyo Games has recently released its new program Game Maker Studio for free and I have started a tutorial series in celebration.

This is the first tutorial series I've ever written so any suggestions or general feed back would be highly appreciated!

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

Part 1: Let's Make A Game
Part 2: Scoring and Shooting!
« Last Edit: February 21, 2014, 06:45:45 PM by Venks » Logged
Venks
Level 0
***


View Profile
« Reply #1 on: December 07, 2013, 06:33:52 AM »

Game Maker: Scrolling Shooter Tutorial - Part 1



Welcome to my first tutorial! Here I'll be showing you how to use Game Maker to make a Scrolling Shooter game like Galaga or Gradius. This tutorial is for people unfamiliar with Game Maker. Let's have fun learning how to make a game!

To follow this tutorial you'll need to download...

Game Maker Studio which you can download for free here.
Alternatively you can also use an older version of Game Maker if you prefer.

You'll also need to download these sprites.

Alright once Gamer Maker is fully installed boot it up and let's get going. Select the 'New' tab at the top, choose where you want to save your project, and give it a cool name like DivineSpace_Tut01.

To start off let me tell you about sprites. In simple terms sprites are pictures. To be more detailed sprites are the images we use to display objects in the game world. Most objects in games need a sprite. For an obvious example, if you were to make a scrolling shooter you would need a sprite to display the player.
Let's do that shall we? Click on the green Pac-man looking logo at the top-left of the program or right click the folder titled 'Sprites' and click 'Create Sprite'.

A new window will open in the center. This is what we'll use to load up a sprite for the player. Click in the name box and rename our new sprite spr_player.
The 'spr' in the beginning of the name stands for sprite of course. As you'll be working with sprites and objects it's usually a good policy to add a prefix like 'spr' to your sprites. Now just under the name is the button 'Load Sprite'. When you click on that a new window will open and allow us to browse through the computer to find our sprite. Make you way to the 'Divine Space' folder you downloaded at the beginning of this tutorial. Open that folder and select the png file 'redShip'. Now quickly click the 'Center' box, I'll explain what exactly this does later. Hit the 'OK' button to successfully finish making your sprite.


Now we need to create an object for the player. While a sprite displays what the player's ship looks like, an object tells the player's ship what it can or can not do. To create an object you can either click on the green circle at the top of the screen or right click on the 'Objects folder' and click 'Create Object'.
Let's rename our object obj_player. Now just under the name box we can assign a sprite to our object. Seeing as there is only one sprite available I think we should select that one. Click OK at the bottom and bam! We have created our first object.

Now that we've learned to create sprites and objects I think it is time we created a room. Rooms are where we pack all of our objects. Basically you can think of them as levels or stages. To create a room click on the white square icon right next to the object icon at the top of the screen. In this new window I want you to click on the 'objects' tab. You'll see our player object highlighted on the left and the newly created room to the right.



I'm not really digging the gray look we have going currently. Above the highlighted player object you should see some tabs. Click on the 'backgrounds' tab and click on the color. Since the game we're making is taking place in space I think it's a pretty good idea to use black for our background color. Once you've selected the color hit OK. Now let's return to the 'objects' tab. Since we only have one object, our ship, the window is showing us that object. Let's add it to the room. Move your cursor over to our black room and click somewhere in middle.
Now our player is in the room! If you accidentally created more than one player ship just right click on it and choose 'delete'.

Let's test run our game now shall we? Click on the green arrow at the top of the screen(not the one next to a page). The program will take a second to load our game. But now you should see our lone ship alone in the vastness of space! Don't bother pressing the keys and trying to make the ship move yet. We haven't told our ship that it can move! Close that window and return to the Game Maker project. Click the green check mark at the top left to close the room and temporarily save the progress you've made.

Alright let's add some interactivity into our game. Reopen obj_player by double clicking it. Now this time I'd like to point out the two sections to the right: Events and Actions.
An event is a chain of actions that can be triggered.
An action is a command that is performed when a certain event is transpiring.
Click 'Add Event' on the bottom and choose 'Keyboard'. A lot of keys to choose from will pop up. For now we'll start with < Left >.

We have successfully created an event. Now let's tell the game to perform an action when the left arrow key is pressed. To the right of the Actions section you'll see a bunch of icons and tabs. The move tab should be selected by default. Look at the icon listed under -Jump- and choose the first one.
The 'Jump To Position' Action.



Drag it into the actions section and a new box will appear. There will be three options at the top: Self, Other, and Object. Leave 'Self' selected as that would be our player ship which is what we're trying to get moving. Next you'll see two boxes that are set to 0. One for the horizontal axis x and one for the vertical axis y.


If you've ever worked with grids before this should be very simple. If not please carefully examine the Mario picture.
With Game Maker, when ever you're moving something to the left or right you're working along the x-axis. Thus in order to move something to the right you add 1 to that object's x position. Conversely to move something to the left you subtract 1 from the object's x position.
Now armed with this knowledge let's put it into motion. In the x field I want you to enter '-1'. Make sure the 'Relative' box is checked and then hit the 'Okay' button. We should check to see if everything works. Press the 'green arrow' at the top of the screen and load up the game. If you did everything correctly the player should now be able to move to the left when you press the left arrow key. Though it might be a bit slow. Feel free to change the number from a 1 to something slightly higher.

Did something go wrong? If not go ahead and skip this paragraph. If your ship teleported to the top-left part of the screen that would be because you forgot to 'check' the relative box in the 'Jump to Position' action. Simply return to the action we just made and check the box. Did the ship move to the right instead of the left? Well that would be because you entered a positive 1 into the x field instead of -1. Simply go back and put a minus sign in front of your number.

Now that we can move to the left I'd like you to add an event for the rest of the arrow keys. Make sure each arrow key has its own 'Jump to Position' action. Also when you're doing the 'up' and 'down' arrows its important to note that positive numbers go down while negative numbers go up along the y-axis. Once you're finished with all four arrow keys test your game again and make sure everything works.

Let's create a new sprite by clicking on that green pacman at the top of the screen like we did before. Let's give this sprite its own unique name so we don't mix it up with our other sprite. Let's name this sprite spr_enemy.
Next click the Load Sprite and let's choose a sprite to use for our enemy. For this enemy I'd like to use the Kamekazi sprite. Once you've selected that click on the center box to set the origin for this sprite. Basically when ever we do anything with a object using this sprite we'll consider the center of the sprite our starting point. It'll make positioning a lot easier. Click the 'OK' button to finish this sprite.

Now create a new object with the name obj_enemy and assign it to the correct sprite. We'll have this enemy start at the top of the screen and fly recklessly downwards. It'll be up to the player to skillfully dodge out of the way(we'll worry about implementing shooting later).
Add an event to our enemy. This time instead of selecting 'Keyboard' I want you to select 'Step' and out of the next three options choose 'Step' again. Basically this event is triggered every single 'Step' of the game. Think of a 'Step' as something that happens thirty times as one second passes. So what ever action we assign to this 'Step' event will be repeated over and over again.

We're going to use the same action as we did for the player. Drag the 'Jump To Position' action into the actions section. Now we want this enemy ship to fly from the top of the screen all the way down to the bottom.
Do you remember what number to add to which field in order to move a object downwards? Well hopefully you do because I'm not gonna spell it out for you. I want you to think while you do this tutorial and not just copy everything I say. You won't learn much that way. Anyways even if you don't remember just plug some numbers in there anyway and you'll soon see if it'll work or not.

So we can see this bad boy in action we need to re-open the room we made earlier. This time add the enemy ship somewhere near the top of the screen. If you're not too happy with how its positioned on the grid right click on the enemy and choose 'Change Position...' Once you've done that hit the green arrow on the top left and lets see what we've got.

Huzzah! If all went well than we now have a enemy ship that oh so brazenly flies downwards without a care in its mind for how it effects others. Unfortunately it doesn't actually effect others. Even if the player flies into the enemy ship the game currently isn't checking for collision. This is something we need to fix.

So what do we want to happen when the player's ship crashes into the enemy? Since we're not making a car insurance simulation I think we should leave out the drivers exchanging information. Instead I think we need a nice, shiny explosion! Channel the spirit of Michael Bay and create a new sprite. We'll name this one spr_explosion and of course load the explosion sprite from the Divine Space folder. Make sure to center the sprite then hit 'okay'.

Now we need a container for our sprite. To keep things simple let's create an obj_explosion and assign it to the correct sprite. Right now the sprite is going to animate too fast so we should slow it down. Add a create event (the light bulb icon) and click on the 'control' tab on the actions side. Drag over the 'Execute Code' icon that looks like a simple piece of paper. Double click on that and a code window will open. No worries we're not going to be doing anything crazy.


Write down: image_speed = 0.65;

As you can probably guess this slows down the image speed. It'll run at 65% of the speed it would have normally run at. If image_speed was set to 1 it would run at full speed. And trust me that's just a little too fast for the explosion animation we're using.

Now instead of putting this explosion into the room like we did with other objects, we're going to create it dynamically. To do this I want you to open up obj_player. Add a new event under the 'Collision' category. Of course since we're going to make the player's ship crash into the enemy you should choose the collision event that says obj_enemy.

Now for the actions. This time I want you to click on the tab titled 'main1'. Drag over the 'Destroy Instance' icon which looks like a recycling bin. A window will pop up and ask you what the action applies to. Let's choose 'Self'. But the player isn't going down all by himself. He's taking the enemy down with him! Drag another 'Destroy Instance' action over and assign this one to 'Other'. Great now they will both be destroyed when they collide. To finish this all up I want you to drag over the 'Create Instance' action that looks like a light bulb. In the object field choose obj_explosion and make sure to check the relative box. Hit 'okay' for everything and then click the green arrow at top.


If everything went smoothly then both ships should now blow up, but it seems the explosion goes on indefinitely. We need to sort that out. Open up obj_explosion and click on the 'main2' tab. Inside our create event drag a 'Set Alarm' action (which looks like a clock) next to our 'Execute Code' action. Enter the number 13 into the 'number of steps' field and hit okay. Basically this means that after 13 steps an alarm event will go off. So let's make that alarm event now shall we?
Click add event and choose Alarm, Alarm 0. For our action go to the 'main1' tab and drag over the 'Destroy Instance' action. Now our explosion will only stay on screen for about 13 frames and then dissipate. Hit the green arrow to try it out for yourself.

If the timing seems off feel free to tweak the animation's image_speed or how many steps it takes to destroy the obj_explosion. Heck you could also give both the enemy and the player their own explosions rather than just using the one. Though make sure to use the x and y fields to move the explosions where you want them so they're not just right on top of each other.

Now let's wrap up this section of the shooter tutorial by making what we have thus far into a small game. First off we need add more enemy ships, but we want them to be created dynamically. Open up the room and right click on the enemy ship to delete it. We are going to create an infinite amount of ships and well they aren't all gonna fit in the room at the same time.

Create a new object named obj_enemySpawner. As the title implies we'll be using this to create our infinite enemy ships. This time don't assign a sprite to our object. This object is something that will just be executing actions in the background that the player shouldn't be able to see or interact with. Make a Create Event and give it a 'Set Alarm' action. Set Alarm 0 to 50 steps.

Now add the Alarm 0 Event. First add the 'Create Instance' action and set the object to obj_enemy.

In the x field enter: random(room_width-64)+32

What this does is generate a random number. The random number will be somewhere between 0 and 576. This is because we take the room_width which is 640 and subtract 64 from it. Once we have our random number the game adds 32 to it. Basically this means the number our enemy ship can spawn on is between 32 and 608. Remember the room's left border starts at 0 and the right border ends at 640. By having a number between 32 and 608 our enemy ship can't spawn half way inside of a border. That would probably look pretty weird.

The next action you need to add is another 'Set Alarm' 0 to 50. If we don't reset the alarm then it will only go off once, but now because this action goes off inside of the Alarm 0 Event it will always reset itself every time it goes off.

Now that we have an object that can spawn an infinite amount of ships its pretty important we make sure we don't overwork your game. Keeping track of millions of ships can be incredibly overbearing for Game Maker. There's no reason to keep track of enemy ships that have left the game's screen so lets get rid of them. Open up obj_enemy and lets add two more actions to the Step Event.

Go to the 'control' tab and locate the 'Test Variable' action which resembles a gray octagon with the word 'VAR' written on it. Drag 'Test Variable' into our actions and its window will open up.

For the variable enter: y
For the value enter: room_height+14
For the operation enter: greater than

Now what this action does is check if our enemy is a bit lower than the room's height. However it doesn't actually do anything to our enemy ship. It's only comparing its y position with the room's height. Now if we add a new action just under our 'Test Variable' action it will only be activated if the enemy ship has left the screen. Add a 'Destroy Instance' under the 'Test Variable' action and we now get rid of all those pesky ships we don't need to keep track of anymore.


We can't actually tell if our code is running correctly or not because it's impossible to see the enemy ship when it leaves. In order for all our changes to take place make sure to add a single obj_enemySpawner into the game's room. Without it none of the enemies will ever spawn! Hit the green arrow and try out your avoider game!

If you would like to see if the enemy ships are actually being destroyed or not try changing the value for obj_enemy's 'Test Variable' to a number like 200. That should show you that everything is working correctly. Once you've done that feel free to fix it back to room_height+14.

If you find avoiding the enemies is too easy why don't you try tweaking some numbers around? Increase or decrease the player ship's speed. Increase the speed of the enemy ships! Though be careful to not make it so high they travel faster than the eye can see. You can also make the number of steps in the obj_enemySpawner's Alarm 0 is set to even smaller so that enemies spawn faster. Experiment and have fun! 

You can get the full source files for this part of the tutorial here.

That wraps it up for this part of the tutorial. Come back later to learn how to add shooting to the game and a scoring system! Feel free to post any questions or suggestions you have in the comments below!

As always I'll be updating this thread with the successive parts of this tutorial. Alternatively you can visit my game development website Berathen Games.
« Last Edit: February 21, 2014, 06:47:09 PM by Venks » Logged
Venks
Level 0
***


View Profile
« Reply #2 on: February 21, 2014, 06:44:45 PM »

Game Maker: Scrolling Shooter Tutorial - Part 2




Welcome to part two of my scrolling shooter tutorial!

The sprites needed for this article can be found here: Divine Space Resources

In the last tutorial we learned how to create sprites and objects, make our objects move across the screen, create collision events, and how to spawn our enemy objects dynamically.
This time around we're going to work on making the player ship shoot and adding a score display at the top of the screen.

Let's start off with adding shooting shall we? First we're going to need to create a 'shot' sprite and object. For the sprite we'll be using the redShot.png file. Don't forget to center the sprite and name it.
The name will be 'spr_redShot' using the same naming conventions as we did before. This time though the name of the sprite itself consists of two words, 'red' and 'shot'. In the future there will be a few other colored shots so we need to make this distinction. We don't use another underscore to separate the words as we're only using that to point out the type of file (sprite or object). Instead we capitalize the first letter of the second word.
In all honesty you can name your sprite what ever you want, but having naming conventions makes your program easier to understand and will win you a lot of game development karma points.


Create a 'obj_redShot' and assign it to the correct sprite. Add a 'Step' Event and for the action let's look in the 'Move' tab. Since these bullets will only ever move vertically I want you to use the 'Speed Vertical' action which looks like a white arrow pointing down.
We want these bullets to fly upwards so in the vert. Speed tab I want you to enter -7. We need to give these shots the same treatment as the enemies. We don't want them to pile up off screen and slow down our game. So go to the control tab and add a 'Test Variable' action (the light gray octagon that says VAR).
*Set variable to: y
*Set the value to: -6
*Set the operation to: less than

With this action we are now checking every 'Step' to see if obj_redShot is outside of the room. Now we need to tell Game Maker to destroy shots when the above is true. Go to the main1 tab and drag the 'Destroy Instance' action under the Test Variable action.
Hit 'OK' to close the action and hit 'OK' again to close the object.

Now we need to make it so the player ship can shoot those shots. Open up obj_player and add a 'Create Event'. Select the control tab and choose the 'Execute a piece of code' action (the piece of paper icon).
In this window I want you to write: shotCoolDown = 0;


What this code does is create a variable called 'shotCoolDown' and sets its value to 0 when the player's ship is first created. We'll be using this variable to tell obj_player when it can and can not shoot. Next open up a 'Step' event and also add a execute code action inside of it.

In this window write: if (shotCoolDown>0) shotCoolDown -= 1;

This code is very similar to the 'Test Variable' action we've used before. We ask Game Maker a question by asking 'if (shotCoolDown>0)'. So our game will check if the cool down for shooting is greater than 0 or not in every 'Step'. If that condition statement is true then the game will subtract 1 from the shotCoolDown variable. So if say our shotCoolDown variable was equal to fifteen then after the next step it would only equal 14 and in the step after that it would equal 13. The variable will continue to decrease until it hits 0.

Finally it's time to make obj_player shoot. Add a keyboard event for the Space key and once again add a execute code action.

This time I want you to write:

if ( shotCoolDown==0 )
{
     instance_create( x-8 , y-7 , obj_redShot );
     instance_create( x+8 , y-7 , obj_redShot );
     shotCoolDown = 6;
}



As you can see at the top we have another condition statement. This time once the space button is pressed we check to see if shotCoolDown is equal to 0. Make sure you have the two equal signs '=='. If you only write one equal sign in a conditional statement that will lead you down the dark path of game programming. Trust me. You don't want to do that.

The line just under the condition has a open curly bracket and a few lines under that is a closing curly bracket. These brackets are telling the game to execute ALL of the code between them when the above condition is true.
The first line inside the brackets is instance_create(x-8,y-7,obj_redShot);
That line of code does what you might suspect. It creates a object and in this case the object is obj_redShot. The x-8 and the y-7 position the shot a slight distance away from the player ship in the hopes of making it look like the shots are coming from the ship.

The second line in the brackets is very similar to the first. It creates an additional shot at the same time a bit further to the right. Yup. The player ship will be shooting two shots at the same time.
The last line 'shotCoolDown=6;' is very important. This line sets the cool down for shooting to 6. Without this line the player's ship would shoot two shots every single 'Step' of the game. Since there are 30 steps in a second that's a bit too much. By writing this last line we make the conditional statement at the top false. The game now has to wait some 'Steps' as the shotCoolDown makes it way back to 0.


Feel free to save your progress and give the game a test run. If all is well then you should be able to use the space key to shoot at a pretty decent speed. The only problem now is that the shots don't effect the enemies we're shooting at. Last time I checked you're supposed to be able to destroy your enemies in shooting games. It's time to make that so.

Open up obj_redShot and add a collision event with obj_enemy. Just like we did in the last tutorial go to the main1 tab and drag in two 'Destroy Instance' actions. One set to 'Self' and the second set to 'Other'. Lastly add a Create Instance action and set it to obj_explosion with the relative box checked. Or if you're feeling pretty cool you can use the execute code action and use the same instance_create function you used before to create the shots from obj_player earlier. I'll leave that experimentation up to you.

Bam! If you save everything and run the game you should now be able to shoot down your enemies rather than simply avoid them. For our next task we need to add a score display that increases each time you shoot down a enemy. This is gonna be a bit trickier then it sounds.

To start off let's create an object called obj_score. Add a 'Create' event and a execute code action. In it I want you to write:

points = 0;
scoreText="";
display="Score: ";
displayScore="";



Alright with that we have created four variables. 'points' will be keeping track of the uh... points we get for shooting enemies. 'scoreText' is what we programmers would call a string variable. A string variable is a variable that contains text. Currently scoreText is set to equal nothing, not even a single white space. This was accomplished by writing the two quotation marks right next to each other. A string variable will equal what ever is in between those two quotation marks.
'display' is another string variable and this one is equal to the "Score: ". Take note that there is a space between that colon and the closing quotation mark. 'displayScore' is the same as 'scoreText' and also contains no text.

We needed to declare these variables so that we could access them in other events. It's good practice to declare all of your variables in the 'Create' event so I'm not going to show you how to declare them in other events. Anyways lets do something with these variables. Add a 'Step' Event and give it the oh so common execute code action.

In this window write:

scoreText = string(points);
displayScore = display + scoreText;


In every 'Step' of the game this code will now execute. The first line takes the number from points and turns it into a string, or text, and gives it to the variable scoreText. To us humans a 0 is always a 0, but to a computer a number 0 and a text 0 are two very different things. So we have to appease Game Maker by doing this or it will get very mad and crash when we try to play our game.
The second line combines the strings display and scoreText and gives them to displayScore.
Remember 'display' contains the text "Score: " and 'scoreText' contains how many points we have. So at the start of the game 'displayScore' will contain the text "Score: 0".

Now to make this text actually display on the screen. Add a 'Draw' event to our object and give it a execute code action. In this one write:

draw_set_color(c_red);
draw_text(520,20,displayScore);



The first line sets the color of our text to red. The default is black and that won't work really well with our space game. The second line draws the text from 'displayScore' onto the screen on the right side of the screen, near the top.
We almost have everything we need.

For starters open up the room that contains all our objects thus far and add obj_score in it where ever you want. Then open obj_redShot back up and click on the 'enemy collision event'. I want you to add a execute code action. This time write: obj_score.points+=10;

You first write obj_score and then follow that with a "." dot/full stop. The dot is saying that the variable coming after it belongs to the object before it. Thus 'points' belongs to obj_score. Lastly we write '+=10;' which tells our game to add ten points every time a shot collides with the enemy.

That about wraps up this part of the tutorial series. I'd love it if you'd experiment with the code you've learned to write today.
The code is called GML and is the scripting language that Game Maker understands. Hopefully you've found writing code to be a pretty simple process. If you have any questions or feedback feel free to leave me a message in the comments below. 

You can get the full source files for this part of the tutorial here.

As always I'll be updating this thread with the successive parts of this tutorial. Alternatively you can visit my game development website Berathen Games.
Logged
Eljugganot
Level 0
**


View Profile
« Reply #3 on: February 26, 2014, 09:23:55 AM »

Thanks, i'm going to try this. I haven't been able to follow Derek's tutorial, because I think copying the steps in i guess whatever version i have of studio (just recently went to pro, haven't tried it there) isn't fully compatible.
Logged
Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic