Ben Atherton 2D Side Scrolling Shooter Workflow

21
2D Side Scrolling Shooter Workflow Player Sprite The first task I had to do was to make the sprite for my player to do this I created a new sprite in game maker named it “Player_spr” to represent that it will be the player sprite and then went into the sprite editor, this editor contains a variety of tools for creating artwork such as spray can, fill, shapes, selection, ect however I elected to only use the pencil tool and use different transparencies of colours in order to make my sprite My finished sprite looked like the above I took slight inspiration from mario from the mushroom but I also knew that I didn't want to create an entirely serious game so I figured that a mushroom flying around in space with a giant mushroom cannon seemed like a good idea as you can see I used different transparencies of colours in order to add effect to the sprite The next task was to centre the origin on the sprite this is quite simple all I had to do was click the button on the origin tab that said centre this now shows the game that the centre of my sprite is the centre After this I had to modify the mask of my sprite this is to create the hitbox so that objects know when they collide with this sprite to do this I had to press the modify mask button shown above and then I am given the mask properties menu, because of the cannon on my sprite I had to use the precise hitbox because otherwise projectiles that could otherwise be dodged could hit you in the gap between the edge of the cannon and the main body of my sprite and all the other shapes would have a collision happen within this area

Transcript of Ben Atherton 2D Side Scrolling Shooter Workflow

Page 1: Ben Atherton 2D Side Scrolling Shooter Workflow

2D Side Scrolling Shooter WorkflowPlayer SpriteThe first task I had to do was to make the sprite for my player to do this I created a new sprite in game maker named it “Player_spr” to represent that it will be the player sprite and then went into the sprite editor, this editor contains a variety of tools for creating artwork such as spray can, fill, shapes, selection, ect however I elected to only use the pencil tool and use different transparencies of colours in order to make my sprite

My finished sprite looked like the above I took slight inspiration from mario from the mushroom but I also knew that I didn't want to create an entirely serious game so I figured that a mushroom flying around in space with a giant mushroom cannon seemed like a good idea as you can see I used different transparencies of colours in order to add effect to the sprite

The next task was to centre the origin on the sprite this is quite simple all I had to do was click the button on the origin tab that said centre this now shows the game that the centre of my sprite is the centre

After this I had to modify the mask of my sprite this is to create the hitbox so that objects know when they collide with this sprite to do this I had to press the modify mask button shown above and then I am given the mask properties menu, because of the cannon on my sprite I had to use the precise hitbox because otherwise projectiles that could otherwise be dodged could hit you in the gap between the edge of the cannon and the main body of my sprite and all the other shapes would have a collision happen within this area

Page 2: Ben Atherton 2D Side Scrolling Shooter Workflow

Player Object- MovementMy next job was turn the sprite I have just created into an object and make it move around to do this I selected create object in game maker and named it Player_Obj and then made sure that it was ticked to be visible and solid then I selected for the sprite of the object to be the sprite that I had just created and then I added a step event into the events tab and added the code action into it this allows to me to write code that will effect the object

I then wrote the code shown above which basically checks if the specified button is pressed on the keyboard and if it does moves the object by the defined amount of pixels in the defined direction for example y-14 moves it up by 14 pixels the parts of the code that have slashes next to them are known as hints I used three slashes for the title as game maker recognises this as a title and will then name the code that so that you can easily find your way around the code the rest only need two slashes as they are just hints to help me understand what part of the code does what

After I had written this code I created a test room and placed my player object in there and started to move it around it worked so I knew there was no errors in my code however I could move out of the room which was a problem so next I needed to work on making the boundaries for my player so that he can't be moved out of the room

Page 3: Ben Atherton 2D Side Scrolling Shooter Workflow

Player Object- BoundariesTo create a boundary for my player I went back into the movement code and added the below to it

This code basically checks where the player is constantly and if it is goes past one of the limits set it will be teleported instantly to the last possible point it can be at without breaking that boundary in the case of top this would be y 32 and whatever x the player was already at because the game is constantly checking this there is no way to actually go past a limit and therefore it creates an invisible wall effect rather than it being obvious that it's teleporting you I then tested this in my test and it worked I could no longer leave the room so now my next job was to add a scrolling background to the room to make the game themeatic and give it a level

Scrolling BackgroundTo create a background I went into the backgrounds section of game maker and selected to create a new background I then resized this background to 1024x576 as this was the size of my game and then for the first layer of my background I just made it black as this wouldn't move and would just be a backdrop for the rest of the background so I just used the fill tool to make it black

As you can see it is not interesting but it was needed for the rest of the background next I created a new room that I would actually use for my game so I went into settings and made the size of the room 1024x576 just like the background and then inserted this background into the room by going

Page 4: Ben Atherton 2D Side Scrolling Shooter Workflow

onto the backgrounds tab and making it background 0 this puts it at the back of the room so that the next pieces of my background can go on top of it

As you can see the image selected for it is “Space” which is what I named the black background next I created the other too backgrounds I wanted which was a planet and stars for the stars I just drew dots around and for the planet I just used the circle tool the finished products look like the below

Page 5: Ben Atherton 2D Side Scrolling Shooter Workflow

Although on there own all of these backgrounds look weird when they are put together they work and make something that resembles space quite well the reason why they are all on different layers is so that they can move around at different speeds and in different directions I can do this by editing the speeds of the backgrounds in the room

As you can see for my moon it moves from the speeds defined at the bottom this makes my moon move diagonally down and right my stars just move to the right but at a different speed to the moon to create differentiate them more and give a semi 3D effect of the different layers moving on there own together the background looks like the below

Page 6: Ben Atherton 2D Side Scrolling Shooter Workflow

Now that my background was done the next job is to allow the player to shoot and add some sound to the game for when he shoots

Player Object- ShootingSo the next job was to make my player shoot some form of projectile and obviously because my player is a mushroom with a mushroom cannon the projectile is going to be a mushroom so I went into the sprite creator and made a mushroom and then realised that on it's own it was not going to stand out so I added as shield around it to make it stand out so that someone playing the game was not going to lose there own bullets the finished projectile looks like the below

Next I had to set origin again and set the object mask I just used circle this time as the object is a circle anyway after this I had to turn this sprite into an object so I went into the object creator and called it mushroom_obj I then made a create event and called it movement and added the below code into it

Page 7: Ben Atherton 2D Side Scrolling Shooter Workflow

This literately means that when the object is created it will move horizontally across the screen at a speed of 20 pixels per second I also created another event which was an outside room event and added the destroy the instance action so that when the projectile went out of the room it would delete itself in order to prevent lag, next I needed to add the sound for these projectiles are shot so I went and googled for some cannon sound effects and found an effect that gave the powerful feeling feeling of a cannon that I was looking for so I downloaded that and then clicked on the add sound button and added to my game and because it was a quite a small sound file I left it uncompressed for maximum sound quality I then named this sound cannon and moved on to adding the abillity for the player to shoot the cannon

To do this I went back into my movement code and added the below code into my game

In other words it checks for if the space key is pressed and if it is then it will create a mushroom at the centre of the sprite and play the cannon sound that I just added but it won't loop it I then launched my game and tested if it worked and it did the sound played when I pressed space and it would spawn a mushroom so my next job was to add enemies to the game that my cannon could be used to shoot

Enemies- Sprite, Object and SystemTo add enemies I first had to go and create a sprite for them so I went into the sprite designer and decided to add floating robots are my enemies I also decided that I wanted to animate them so that they flashed to do this I had to create multiple sprites that it would change between these sprites would have very minor changes and would work together to animate the sprite I chose to change the transparency of the core of the robot to give it a flashing effect I used 5 sprites to do this and the robot itself looks like the below

Page 8: Ben Atherton 2D Side Scrolling Shooter Workflow

As you can see although the differences on each robot are only very minor it cycles through all of these in order to create a flashing effect next I set the origin and set the object mask I just used a rectangle for this one as it's fairly rectangular and won't doesn't make any massive gaps that could get hit that the robot could of dodged and because it will only move sideways it isn't going to be dodging anything anyway

Next I turned it into an object and began work on making it move I did this by creating a create event and adding in the below code

This code basically just sets the movement speed of the object to 10 pixels per second and makes the images animation happen at a quarter of the speed of the room as the room is 30fps this makes the objects animation happen at 7.5fps in other words it goes through each 7.5 frames every second the alarm is code that is needed later to let it shoot at the player all it does it makes it activate this alarm once every 20 frames so it fires just over once per second but because it will only fire one quite small bullet this is fine

I also added a step event and added some code to destroy the enemies after they leave the room this code is below

This code basically checks if the object is in a position greater than 0 on the x axis and if it isn't it will destroy it

Page 9: Ben Atherton 2D Side Scrolling Shooter Workflow

Next I needed to create a system that will spawn in these enemies to do this I created a new object called system and created an alarm the code for this alarm is shown below

This code basically defines y spawn as a random point along the y axis and then creates 3 enemies at the same point on the x axis right at the end of the screen and then gives them a 64 pixel gap away from each other it will also trigger it's self at a time between 90 and 120 frames after it was first set off in other words between 3 and 4 seconds after the first wave is spawned next I added the system into my room and tested the game and the enemies spawned this means that it works so the next job is to now make these enemies die when they are shot at by the player

Enemies- Death when shot and particle systemMy first job in making the enemies die was to create a particle for them to emit when they die I decided to draw a 4 leaf clover when they die as this adds in with the plant theme my game has going with the mushrooms and the overall randomness that the game already has so I once again went into the sprite editor and drew my 4 leaf clover that I was going to use as a particle and it looks like the below

Next I created an object that was going to be the particle system for this clover to do this I created a step event and added this code into it

This code defines chan and part2 as to create a part system and a part type the first line of code sets the sprite for the particle and says that it wants to be animated stretched and random, the next line sets the size of the particle making it a max of double the size of the sprite this makes it not increase in size or wiggle the next line defines the life of the particle this makes it last for a minimum of 3 seconds and maximum of 8 the next line adds random gravity to the particles which makes them fly around everywhere the alpha1 line sets how transparent the particle is it randomises it between

Page 10: Ben Atherton 2D Side Scrolling Shooter Workflow

barely viable 0.1 and quite opaque 0.75, (0 is completely transparent and 1 is opaque) and then the final line simply says to create the particle system

next I created an alarm with the following code

and a create event to trigger this alarm

This will simply destroy the particle system 5 frames after it has spawned so that the screen is not spammed with particles and so that it doesn't cause lag

Finally I have to apply this particle system to the enemy so I go onto the enemy object and add a collide event with the mushroom projectile and then added some code in which says the below

This basically means that when the mushroom collides the enemy it will turn into the particle system I have just created which deletes it's self after 5 frames therefore killing the enemy next I needed to make the enemies shoot projectiles for themselves

Enemies- ProjectilesTo add enemy projectiles into my game I needed to go back into the sprite creator and created a projectile for my enemy the red enemy I wanted to just be a basic enemy that was easy to dodge because I am going to add a variety of enemies into this game with different attacks that do different amounts of damages are different shapes and move at different speeds so the red projectile looks like the below

I then set the origin of this projectile and set the object mask I just used a circle again because it is a fairly circular object next I turned this into an object and added a create event and began to create the code that will make it shoot at the player the code that I used is shown below

Page 11: Ben Atherton 2D Side Scrolling Shooter Workflow

This code basically makes it so that if the player exists the bullets will move towards the point that the player is at and they will seek the player and head to the point where it is at when it was fired and it will move at a speed of 15 pixels per second this is ideal as this attack is supposed to be easy to avoid and do low damage next I added a collision event with the player and made it so that the projectile is destroyed when it hits the player in order to prevent lag and the player getting caught on the bullet after he gets hit and I added an outside room event and added a destroy the instance action in there too so that it won't build up and lag

Next I went onto the enemy object and added alarm 0 and added the code below

This code will make the enemy shoot the lazer and play the sound to shoot the lazer whenever it shoots it it also triggers it's own alarm every 20 frames making it shoots at just over 1 shot per second as it did on the alarm used before in the create event which triggers the initial shot

Next I tested that these enemies shot at me and carried on the next job was to create a shield variable to give the player health

Shield Variable- Defining The Variable And Health BarTo create a shield variable I went into the system and created new code in the create event this code is shown below

This code basically creates a new global variable which I have named shield a global variable means that this variable will now be recognised across my entire game and not just in this one piece of code and then I defined that shield should = 100 which means that the player will have 100 hit points

Next I used this variable to create a health bar do this I created a draw event in my system and added in the below code

This code draws a rectangle at the top left of the screen that is sized depending on the shield variable it's coloured red and doesn't have an outline

now that the health bar is in the game it's time to start making my enemy do damage to the shield

Shield Variable- Enemies Damaging Player

Page 12: Ben Atherton 2D Side Scrolling Shooter Workflow

To make the enemies damage the player I have to go onto my projectile object and create some new code in the collision event with the player this code is shown below

This code means that whenever the projectile collides with the player the shield variable takes 15 points of damage whenever this projectile hits it this is a fair amount I feel as this projectile is small and easy enough to dodge and I'll be adding in health pickups and a way to destroy enemy projectiles later on in the game next I need to add the death of the player when his health reaches 0

Shield Variable- Player Death and Player Death Particle SystemFor the player to die I need to add a death particle for the player to do this I just created a few circles of yellow/orange colour that will act as explosion particles the finished sprites look like the below

So next I need to turn this sprite into a death particle system to do this I created a particle system called explosion and made a step event and put the below code into it

This is the death particle system this system is pretty much exactly the same as the clover particle system except I've changed the sprite that is used and changed the words chan and part2 for death and part 3

next I added an alarm in with the below code

This basically means that when this alarm is triggered it will destroy the particle system and restart the game as you have lost

and then finally I added a create event which looks like the below

Page 13: Ben Atherton 2D Side Scrolling Shooter Workflow

This will basically trigger the alarm shown above and play the player death sound the player death sound is just a scream that kind of sounds horrible to discourage the player from dieing as they will have to hear that sound

Now I have to apply this particle system to trigger when the shield variable reaches 0 to do this I went onto the player object and went onto his step event and added a new piece of code which is shown below

This code will constantly check what the shield variable is at and when it becomes less than or equal to 0 it will change the player into the particle system which restarts the game and plays the death sound so now the next step is to add a score variable in the game to give the player something to attempt to achieve

Score VariableThe score variable is created in practically the same way that the shield variable was created so I went into the system and went onto the create event and added the below code

This works exactly how the shield variable works except this time it's set to 0 by default as we want to be adding to this variable and not taking away from it.

Next I want to add a score counter to my game to do this I need a font so I created a font that is size 12 and uses the segoe UI font and called it font 1

Next I went back into my system and went onto my draw event and added some new code which is shown below

Page 14: Ben Atherton 2D Side Scrolling Shooter Workflow

This code basically draws a white text just below my health bar using the font I just created and reads out the amount that the points variable is

next I need to make it so that killing an enemy gives score to do this I went onto my enemy object again and added the below line to my shot by player code in the collision event with the mushroom

This literally just makes it so that whenever an enemy dies to the mushroom the score is increased by 1.

Now that I have a score system in place the core mechanics of my game are now complete the rest of this workflow will entail extra tweaks that I have made to attempt to make the game more interesting the first of these tweaks is enemy variety

Enemy Variety- Blue EnemyTo attempt to make my game more interesting I decided to add more enemy variety to my game these are essentially just re-skins of the original enemy however they have different attacks and projectiles the first of these enemies is the blue enemy shown below

The blue enemy fires much larger projectiles than the red enemy that do a lot more damage however to compensate for this his projectiles are a lot slower and less of the blue enemies spawn in comparison to reds his projectiles looks like the below

To change how he shoots I edited his shooting code to the below

As you can see this will still seek the player however it moves at a speed of 12 pixels per second so it is very easy to dodge however it does more damage if you get hit by it as shown in the code below

Page 15: Ben Atherton 2D Side Scrolling Shooter Workflow

So if you get hit by the blue projectile you get hit for a quarter of your health, I also slowed down his fire rate to one shot every second as seen in the code below

Because alarm[0] = 30 this means that he will shoot once every 30 frames and because the game runs at 30fps that means he will shoot once every second compared to the once every 20 frames that the red enemy fires at

Finally I have to add him into the spawning I did this by adding the below code

By putting him at x 1200 he will spawn on the backline of the reds and therefore be slightly protected as there's only one of him compared to three reds and if he hits you he does a lot more damage so this formation makes more scene than having him on the front line when he fires slowly compared to the reds

Enemy Variety- YellowMy third enemy the yellow enemy looks like the below

I decided that the projectile for this enemy should resemble a shotgun spread and force the enemy to dodge as it would be quite a long projectile so I created the below projectile

To dodge this projectile you have to dodge all three of the shots this should work in order to keep the player mobile rather than just sitting in one place and dodging the easy to dodge projectiles the shooting mechanics for this are exactly the same as the red projectile so it fires fairly quickly and

Page 16: Ben Atherton 2D Side Scrolling Shooter Workflow

does 15 damage however only 2 of these spawn in comparison to the 3 red enemies that spawn as shown in the spawn code below

The yellows make up the rest of the back line with the blue and now all that is needed is one final enemy to make a line behind the blues and yellows

Enemy Variety- GreenThe final enemy that I added into my game is the green enemy and it looks like the below

The projectile for the green enemy is a re-skin of the red projectile however how he fires it will be completely different the re-skin is shown below

The green projectile will fire very quickly but also very randomly and do little damage the code for the firing is shown below

This code will literately just send the projectiles to a random point on the map so there's no guarantee that it will even hit the player the damage of the green projectile is shown below

Page 17: Ben Atherton 2D Side Scrolling Shooter Workflow

as you can see it only deals 5 damage but as these projectiles move at 30 pixels per second they are very difficult to dodge and therefore it is quite balanced to have them shot randomly and do little damage

Finally I added the greens into the spawning system as shown below

As you can see above the greens spawn on the very back line however there is three of them all shooting lots of very fast moving bullets in random directions they have the potential to do a lot of damage or be completely useless which is what makes them interesting enemies the next tweak that I added to my game was a scaling difficulty system

Scaling DifficultyFor the first minuet of the game the spawn alarm in play is the one shown above that spawns all of the enemies in a 3 line formation however I decided that for every minuet the game goes on I want this to be added again so I copied and pasted this onto multiple alarms shown in the below screenshot (except for one alarm which is used for something different that I will cover later on)

Each one of these alarms have exactly the same sapwn code except from instead of repeating alarm 0 they repeat whatever alarm they are and to trigger all these alarms I use this create event code shown below

Page 18: Ben Atherton 2D Side Scrolling Shooter Workflow

This works by trigger a new alarm every 1800 frames (1 minuet) until all alarms are in play and all these alarms will repeat themselves so every minuet you survive even more enemies are added to the game making it even more difficult to survive up until 10 minuets where the game is so near impossible you will have to be very skilled to survive for long at that difficulty to test if this worked I changed my shield variable to 99999999999 and left my pc for 10 minuets and when I came back the screen was spawning lots of enemies at once I then knew that it worked and changed my shield variable back to 100 however now that the game is this difficult I needed to add ways to balance the game out so that it was doable and not impossible the first of these was a health pickup

Health PickupTo create my health pickup I first went into the sprite editor and created the sprite shown below that I was going to use

Next I created this into an object and gave it the same movement code as an enemy would have which is shown below

This just makes it move left across the screen at 10 pixels per second next I added a step event to destroy it if it left the room which looks like the below

And then finally I added a collision event with the player which had the below code on it

Page 19: Ben Atherton 2D Side Scrolling Shooter Workflow

As you can see with this code when the player touches the health pickup he gets healed for 50hp I found this to be the best amount in play testing as when you get higher in the waves 100hp is not enough and this allows you to stack your health quite high early game to survive the later waves as these health pickups allow you to overheal

then finally I added a destroy instance action for the heal when it collides with the player so that people can't just sit on it and get unlimited health

the next thing that I wanted to do to make the game easier with skill was to add a second projectile that would destroy projectiles

Anti Projectile MissileTo create my anti projectile missile I first made a sprite for it which looks like the below

I then set the origin on this missile and used a pixel perfect object mask on it as it had some large gaps that other shapes would not ignore next I turned it into an object first I added a create event for it with the code shown below

This code makes the missile move to the right at a speed of 20 pixels per second when it is fired next I added a collision instance with all the enemy projectiles that I've added into the game and added an instance destroy other action for each of them as shown below

And I added a destroy instance self too so that now when the missile and a projectile collide they will destroy each other this adds a more tactical way of playing the game as you can defend yourself with the missiles however you have to lower your own firerate to do so and the missiles will not damage enemies

finally I added the ability for the player to shoot these missiles by adding the below code into the movement code on the player object

Page 20: Ben Atherton 2D Side Scrolling Shooter Workflow

In other words now when control is pressed a missile will be fired now the core mechanics for my game is complete so I decided that next I should add a main menu with controls and toggle-able co_op functionality

Menu and Co_OPTo create my menu and have room for my co_op game I created the below rooms

The start menu is the main hub screen which gets you to the controls or the solo/coop menu the solo game room is the game in solo the coop game room is the game in coop the solo/coop menu is where you chose to play in solo and coop and the controls menu tells you the controls my first job was to make these menus navigate-able to do so I used the text tool in the sprite editor to create a bunch of buttons to get you around the menus and then created these into objects and used the mouse left click event to send the player to the relevant rooms example shown below

I did this for the play button, back button, controls, button, solo button and coop button and then after that I created text to show the controls and turned them into objects that didn't do anything when clicked an example of this is shown below

As you can see this object does nothing other than use a sprite because when this is all put together in the controls room it looks like the below

Page 21: Ben Atherton 2D Side Scrolling Shooter Workflow

As you can see it all fits together quite well and explains the controls and the back button will take you back to the main menu I also decided around this point that my game should be called shroom trip as it plays on the idea of a mushroom going a trip or getting high off magic mushrooms so you would be a floating mushroom shooting floating robots in space it adds to the random and weird aspect of the game that I've been going for and I thought it was quite a funny name so I kept it

Finally I added co op to do this I copyed and pasted the player object and rebound all the controls to what is shown in the controls menu above by changing the keys that were bound originally to the keys I wanted it to use now and then copy and pasting any collision events with player 1 to player 2 and then adding player 2 into the co op game room so now when you click co op the game can be played with two people after that my game was pretty much finished there was just one thing that needed to be added...

MusicAfter searching the internet for a while I finally found some music worth putting in my game so I added to the sounds as a compressed file and then I created a system like object and put it in every room with the play sound action put into a create event so as soon as the system is created it plays the music and then I also added a stop all sounds action to all of the buttons and the player death particle system to stop it from endlessly looping the music throughout the game

And with that done my game was finished it has full sound effects scaling difficulty a variety of enemies and projectiles that the player can shoot and a working menu system.