Week 10 - Final Evaluation

Unit 8

Evaluation


With a final product and a blog with all my research done its time to evaluate this project. I will go through each of the stages of production and give my thoughts on what went well and what I could improve on for next time.




Planning


The planning stage includes both coming up with an idea and presenting it to an audience. My idea began as a full game that would have a rock, paper, scissors combat system, however while preparing the presentation I decided to limit my idea to a demo. This proved to be a good decision as I only managed to finish the 'demo' during the final week. I aimed to keep all of my ideas simple and realizable, as I wanted to keep my idea as close to what I make as possible. During the presentation I managed to be more confident than I have in the past and spoke my ideas to the entire course. This is something that I have had trouble with in the past, but now feel more confident with it. I also had to use time management skills to plan when I had to have different tasks completed. This helped me to meet my deadlines and not get behind on my work.




Research


My initial idea was influenced by a game that I played over the holidays and this game was also used in my secondary research. The majority of my secondary research came from video games, as well as the internet. I used this to find out information on different games and the thinking behind mechanics and design. I also created a questionnaire aimed to find out what people prefer about the main characters. This all lead to some design choices aimed to meet what my research found out, most notably the design of my characters.


Even if the research did not affect a part of my game, I still looked into things that could be implemented into a project if I had more time. This included audio and level design, both of which are not necessary for the demo that I made but would be implemented if I had more time. This was to show that I still thought about these aspects and to get more research done.


Without doing the research that I did my game would not have been possible, as I also had to do research about how to make the different elements in Game Maker using tutorials. This was what taught me how to make the game itself, but it also gave me the knowledge that I needed to make my own changes to the code to fit my game. I also looked into a better way to create character sprites and this lead to an app called Piskel. This felt better to use that Game Maker's built in sprite editor and was far more suitable than illustrator. This made me more confident in my sprite making skills and lead me to making all my own characters using the app and improving my design skills.


I do wish that I could have done some more primary research for my project for things like level design and interface elements. I feel that this would have improved the quality of my work the same as it did for my character design.




Production


When I got to creating my game I began with creating the assets that I needed such as characters, backgrounds and walls. This would be the basics of my game and would be needed for working in Game Maker.


I then used tutorials in order to learn the coding that would be needed to create my game without the use of the drag and drop function. This was to get me into coding and allow me to start learning as it would be needed if I ever wanted to get into that aspect of game development. It also helped me learn how the game works as well as make the development of the game easier as it went on, as each piece of code made the next more simple.


Before the course started I had no knowledge of coding, but now I have a working game that I made using code from different, unconnected tutorials. I was even able to make changes to them in my own way, such as making a menu that goes left to right instead of up and down or adding a working health system for both the player and their opponent.


The actual outcome of the game almost meets all my expectations bar one. The one thing that I was unable to implement was the patterns for different enemies. This was due not only to time, but also to the complexity of the code that it might take. I did think of one way of doing it, by adding extra variables to the arrays to make it more likely that a specific option would be picked, but it would cause some problems such as picking an option over and over again.




Final Thoughts



Looking back over the game that I have made, I can see a lot of similarities with the outcome that I had envisioned at the start. I managed to keep to the simple aesthetic that I wanted. The characters feel like part of the world. And the combat system also matches that of what I proposed. The only difference that I can notice is the way that the combat plays out.




Something that I would have liked to implement was allowing the opponents to have set patterns of actions that they would follow. The player would need to learn them and try to predict and counter them. I was unable to complete this aspect of the game however as I did not have enough time to find the information needed to implement it. But I was able to add a random system into the game.

I am, however, very happy with the progress that I made. This is due to me being worried that I would not be able to finish the game. That proved to be untrue as I not only finished what I wanted, but managed to make it look and work better than I had hoped. This was mostly due to the research that I had done and my improving skills in both design and coding.

Week 10 - Production Part 4

Unit 8


Tutorial used:

Transitions


In my game I wanted to have it fade in-between the different rooms, this would make the transitions seem smoother and look more professional than a quick snap to new room.

To begin I created a new object and named it fadetogame_obj. This would be the object that causes the game to fade into a new room, specifically into the game. This object required two events, one Create Event and a Draw Event. Also note that I have checked the persistent box. This means that the object will travel into the next room and will only go away if a command tells it to.

First I needed to set up some variables, so I opened up a draw event and added two variables.

//fade to black
a = 0;
fade = 1;
These don't mean anything on their own, other than telling the game that these words are equal to the set variables.

Next I open up a draw event. This is what will make the transition work, by using the variables from the create event. It basically works by creating a black box fade in and out while the game changes rooms.

a = clamp(a + (fade * 0.05),0,1);
This is telling the game that the value of a will increase using the set calculation. Due to the fade variable being 1,  the value of a will increase.

if (a == 1)
{
      room_goto(overworld_rm);
      fade = -1;
}
This is telling the game that if a is equal to 1 then go to the set room and change the fade variable to -1. Changing the fade variable to -1 will cause the screen to clear until the black box is invisible.

if (a== 0) && (fade == -1)
{
      instance_destroy();
}
This is telling the game that if a is equal to 0 then destroy the object. This will remove the object from the game until it is called upon again.

draw_set_colour(c_black);
Sets the colour of the rectangle to black

draw_set_alpha(a);
Sets the alpha of the rectangle to equal the a variable.

draw_rectangle (
      view_xview[0],
      view_yview[0],
      view_xview[0] + view_wview[0],
      view_yview[0] + view_hview[0],
      0
This tells the game to make the rectangle the same size as the players view.

)
draw_set_alpha(1);
This sets the alpha so it can be changed.

By changing the goto room parts in the code to the room that you want to go to, it allows you to simply duplicate the object to work for any room transition that I want. To make this work I simply add some code to certain actions that spawn the object in the room. The object will then perform the transition before destroying the object.

Week 10 - Audio in Games

Unit 8

Audio in video games is one of the most important elements within them. It might only be a supporting piece, but simply adding some sound effects makes the game far more immersive. But you need to be careful, as it can also break the immersion due to sound being out of place or not in sync.








Undertale




As I have used this game to explore character design, I thought that I would look into the game's sound design as well. The sound of Undertale uses digital sounds to make up all of it's music and sound effects. The aim of the sound design was to make the game sound like an old SNES RPG, similar to how the visuals of the game were made with this in mind.


All of the sound was designed by the games creator Toby Fox and almost all of them were designed specifically for the game. Also before creating a level, Toby Fox made the music for the level and designed the level around this. Doing this not only allowed him to make a level that matched the music, but also give inspiration to the design process as well.

Week 9 - Production Part 3

Unit 8

Production Part 3 - Time to Battle

Tutorials used:
Rock,Paper, Scissors - 
Health - 

Now I needed to create the actual gameplay that I want my game to follow. To do this I wanted to have the player touch a character on the overworld and get taken to a battle screen. The player would then have three actions to choose from in order to 'fight' the opponent.

The first step was to create a room for the battle. this is where the player will be taken to when they touch a character on the overworld. I used some objects to design the look of the room. This reusing of assets allows me to use more time developing the game rather than creating new assets.

Next I needed to prepare the code to allow the player to make there choice on what they wanted to do, as well as code that lets the computer choose as well. To begin I made a create event and a draw event. I began with the create event.

//Choice

text = "What will you do?";

This is setting a variable that will make the computer draw some text in the room. This is due to the "" around the text.

//Wins, Draws and Losses

wins = 0;

draws = 0;

losses = 0;

This is telling the computer that the win, draw and lose variables will be zero when the room starts.

//Enemy choice

enemyText = "";

enemySprite = 3;

This is setting up the text that will appear for the opponent to tell the player what the computer chose.

//Result text

resultText = "";

This is a variable that will allow some text to appear to tell the player the result of the action and whether they won, lost or drew.

The next list is something known as a 2D array, as it works with two variables instead of one. This allows more complex strings.

//Player choice

choice[0,0] = "Attack";

choice[0,1] = attack_spr;

choice[0,2] = 0;

choice[1,0] = "Block";

choice[1,1] = block_spr;

choice[1,2] = 74;

choice[2,0] = "Break";

choice[2,1] = break_spr;

choice[2,2] = 148;

The list is split up int three parts and each part has three different pieces of infomation for the computer to use. The first is some text to represent the players choice, next is the name of the sprite for said choice and the final is a number that is where the sprite will be placed in accordance to the location of the object.

//Result

result[0,0] = "Draw";

result[0,1] = "Lose";

result[0,2] = "Win";

result[1,0] = "Win";

result[1,1] = "Draw";

result[1,2] = "Lose";

result[2,0] = "Lose";

result[2,1] = "Win";

result[2,2] = "Draw";

This 2D array will be used to write text to tell the player whether they won, lost or drew.

once I had finished the create event, I moved on to the draw event. This is where I will use the code from the create event and some new pieces to create my combat system.

draw_set_halign(fa_left);

draw_set_valign(fa_middle);

draw_set_font(menu_fnt);

draw_set_color(c_white);

This is just some code to change the appearance of the text. This was used in almost all apects of my game.

//Choose your action

Right... This next bit looks confusing so I will try to explain... This is called a for-loop. 

for (<statement1> ; <expresion>;<statement2>) <statement3>

First statement1 is executed, then the expression is checked and if true, statement3 is executed. Then statement2 is executed and if the expresion is still true then statement1 is executed...

for(value = 0;value < 3; value += 1)

First it checks some values...

{

   ///battle_scr

    draw_sprite(choice[value,1],0,x+choice[value,2],y);

... If they are true then it will draw a sprite based on two things, first what was the value equal to and then it will check the choice array I set up in the create event and pick one that's value is equal to the value of [value,1].

Next it checks choice[value,2] to determine the location of the sprites.

    if mouse_x >= x+choice[value,2] and mouse_x < x+63+choice[value,2]

    and mouse_y >= y and mouse_y < y+63

Then it checks if the mouse is on one of the sprites...

    {

        draw_rectangle(x+choice[value,2],y,x+63+choice[value,2],y+63,1);

        if mouse_check_button_released(mb_left)

... And if it is then it will draw a box around the sprite the mouse is on.

        {

            text = choice[value,0];

            enemy = irandom(2);

This is all that is needed to make the computer choose a random choice...

            enemyText = choice[enemy,0];

            enemySprite = choice[enemy,1]

            resultText = result[value,enemy];

            switch (resultText)

These are some more variables that I set to allow the game to show text that will say what the player chose, as well as what the enemy chose as well.

            {

                case "Win": wins += 1; global.ehp--; break;

                case "Draw": draws += 1; break;

                case "Lose": losses += 1; global.hp--; break;

These are are called case statements. They are basically if statements that work by checking to see if something is true and if so perform a series of actions. 

In this it is telling the computer that if the player:

Wins then add 1 to wins variable, lower the enemy's health (Explained later) then stop.

Draws then add 1 to draws then stop

Losses then add one to losses, lower players health (Explained later) then stop.

            }

        }

    }

}

//Player Interface

draw_text(x,y-50,text); // Player Selection

draw_text(150,550,"Wins: "+string(wins));

draw_text(150,600,"Draws: "+string(draws));

draw_text(150,650,"Losses: "+string(losses));

draw_text(608,350,resultText); // Player Result

This code tells the computer where to draw the text of the battle interface

//Enemy Interface

draw_text(608,100,enemyText); //Enemy Selection

if enemySprite < 3

{

    draw_sprite(enemySprite,0,608,200);

}

This draws the text that shows what the enemy chose.

Now its time to add the health system to the game. First I created a sprite that I wanted to act as my health indicator, I chose a heart as I felt that it would be clear that it is supposed to be health. I also made an empty heart, that would replace a full one if damage was taken.

Then I created an object called hp_obj and added four events:

Create

Step

Draw

Draw GUI

Draw GUI is the same as a draw event, but it is supposed to be for a Graphical User Interface, so it places it on a different layer.

First one is nice and easy. On the draw event just add a comment. This overrides the sprite so that it wont interfere with the draw GUI event.

This is also not too complex...

///Initalise the HP

global.hp = 5;

global.maxhp = 5;

This just sets the variables that tell the game how much life the player has and what is the maximum that they can get.

The global. part before each variable just tells the computer that these variables can be used in any part of the game. This allows the variables to be referenced easily in other parts of the coding.

//set the size of the GUI layer

display_set_gui_size(view_wview[0],view_hview[0]);

If you go into a room such as the overworld, that uses views, Then the GUI layer will change to match that, but will also distort anything on the layer as well. This code tells the game to keep the size of the objects the same.

This is the draw GUI event. This is where the sprites will be drawn

/// Draw the hearts

var xoffset = 48;

This variable will allow me to easily tell the game how far each heart will be from each other.

// Draw empty hearts

for (var i=0; i<global.maxhp; i++) {

    draw_sprite(emptyheart_spr, 0, xstart+(xoffset*i), ystart);

}

This for-loop tells the game to draw the empty heart sprite if the hp variable is less than the max hp and add one for each number below max.

// Use a for loop

for (var i=0; i<global.hp; i++) {

    draw_sprite(hp_spr, 0, xstart+(xoffset*i), ystart);

}

This tells the game to add one heart sprite equal to the global.hp variable. It places these sprites in correlation to the location of the objects placement in the room and spaces them out based on the xoffset variable.

This is the step event and is where we tell the game to add or subtract health and what to do if the health reaches a certain number.

/// Add or subtract health

//Add

if (keyboard_check_pressed(vk_up))

{

    global.hp++;

}

Now... The game was not supposed to have any way of adding health, but I decided to put it in to help in testing the game and making sure that the health works correctly.

// Make sure hp does not go higher than max

global.hp = clamp(global.hp, 0, global.maxhp)

This is called a clamp statement. It tells the game not to raise a variable above a certain amount, in this case I am telling the game not to raise the players hp above the maxhp variable.

if global.hp = 0

{

    instance_create(0,0,fadetogameover_obj)

}

This is telling the game that if the players hp reaches zero then to create an object that I made. This object will take the player to a game over screen, but I will talk about that in my next part...

Next I duplicated this object and replaced all of the hp variables with ehp and all of the maxhp with emax hp. This was to be the enemys health.

If placed into the battle room, this object would allow the game to raise and lower the health of the player and their opponent.

Week 9 - Production Part 2

Unit 8

Part 2 - The Main Menu

Tutorial that I used:

https://www.youtube.com/watch?v=L0NJHQ27qHo

Some parts of the code I used is different as I changed them to match my game.

My next step was to create a working title screen that allows the player to go into the game, read the controls and quit out of it. I also want to have the title of the game appear on this screen and many some other detail as well. This is an essential part of any game as it is the first thing people see when they open the game and is what will set the expectations for your game.

Before beginning production on the menu, I had to create the assets that would be used. This included an arrow to show the player the option that they have selected, a font for the text and a room for the menu to be made inside.

objects, fonts and sprites used

First I needed to create what's known as an array, this is a form of variables that can be referred to by other pieces of code. I begin by adding what's known as a Create event to an object called 'menu_obj'. Then by adding an execute code action to the event I create my array:

This array will tell the computer what the text will say and how far the space will be. It also allow me to add code to each option and make them work.

Code is in Blue

///Menu

This is a comment that I used to help organize the code

menu [0] = "Start";

menu [1] = "About";

menu [2] = "Quit";

This is what's known as a string variable, this works in a similar manner to normal ones only it allows you to make several ones that are connected. This string is telling the computer that the variable mentioned is equal to the following statement.

space = 64:

This tells the computer that the statement 'space' is 64. This is important as in later code I reference this to set the space between the text.

mpos = 0;

This is where the menu cursor starts. Also after the menu is opened, increasing or decreasing this value will make the arrow highlight different options. So by starting at 0 means that the arrow will be pointing at Start, and changing this will move the arrow.

Now I need to add a step event to the menu object. This will be what tells the computer to move the cursor between the options and how to 'select' them.

///Menu Movement and select

//Movement

var move = 0;

This is create a variable with the name move, which will be coded to create a moving action on the object.

move -= max(keyboard_check(vk_up),keyboard_check_pressed(ord("W")),0);

move += max(keyboard_check(vk_down),keyboard_check_pressed(ord("S")),0);

These are the variables that tell the computer to look for specific key presses. The max statement tells the computer to use the largest of the values given, so it will either use the up key, W key or 0. This means that if one of these keys are not being pressed, then the object will not move. Also the + and - represent the direction that the object will move, with - being up and + being down.

I actually made a mistake here and missed out the 'pressed' part of the statement on the arrow presses. This means that if you use the arrow in the game it will just continually scroll so long as you hold the key down. This is because instead of looking for just the action of a key being pressed, it is looking for if a key is pressed.

if (move != 0)

{

      mpos += move;

This tells the computer to add either of the variables to the position of the menu, making it move up or down.

      if (mpos < 0) mpos = array_length_1d(menu) - 1;

This tells the computer that if the position of the menu is less than 0 then make the position of the menu equal to the length of the array -1. This will mean that if you move the cursor above the first statement, then it will go to the last one.

      if (mpos > array_length_1d(menu) - 1) mpos = 0;

}

This is similar to the previous option only in the other direction, so if the cursor goes below the last option in the array, then make the menu position equal to position 0 in the array

The way the code is means that no matter how many statements that I add to the array, The coding will always work for it, as while 0 will always be the top option, I have set the movement past the bottom to be the bottom of the array, not a set number.

var push;
This creates a variable with the name push. This will be used to tell the computer that if a specific key is pressed then perform an action, such as travel to a new room. This will make the menu work and allow me to make it take me to the game or about page.

push = max(keyboard_check_released(vk_enter),(keyboard_check_released(vk_shift),(keyboard_check_released(vk_space), 0);
This max statement is telling the computer whichever of these is highest then push will equal it, so if one of the following Space, Shift or Enter keys is being pressed then push will Equal them, but if none are being pressed then it equals 0.

if (push == 1) menu_scr();
So if push is equal to a button pressed then refer to the menu_scr. This then perfoms the action that I will create in the mentioned script.




Next I had to create a script that the push statement could refer to.

///menu_scr


switch (mpos)
This is called a switch statement, which is similar to a series of if statements. Basically if one of the statements is true then it will do what the code tells it to do.
{
      case 0:
      {
            instance_create(0,0,fadetogame_obj);
This is a custom statement that I made to create a transition which I will go into on a later post, but basically it spawns an object that takes you to the overworld room. You can also set it to just take you to different rooms, but I did this to add a fade in transition.
            break;
This tells the computer to stop once the action is complete.
      }


     
      case 1:      {
            instance_create(0,0,fadetoabout_obj);
            break;
      }
      
      case 2:      {
            game_end();
            break;
      }


      default: break;
This tells the computer that if none of the cases are true then do the following action, which is simply break.
}


Now I create a draw event to the menu object as I can now add the visuals to the menu.

draw_set_halign(fa_left);
draw_set_valign(fa_middle);
draw_set_font(menu_fnt);
draw_set_color(c_white);



Now all I had to do was add in the enemy characters and add a collision event to them. Then add the code:

room_goto(x);

By replacing x with the name of the battle room that I want the player to be taken to I can make it so that by touching the character you can battle them.



Week 9 - Production Part 1

Unit 8

Part 1 - The Overworld Movement


To begin creating my game I had to import all my sprites into Game Maker. I did this in one of two ways, first was simply importing individual images, this was done if the sprite didn't need any animation. The next option was to import from a strip. This is something you can do with sprite sheets or strips, It allows you to take several images and put them together to make an animated sprite. I also had to name each sprite, which was done in lower case and no spaces and had "_spr". This was to help with the coding later on which one mistake could cause the whole game to stop working.



Next was to make an object version of some of them, which I gave the same name but ended in "_obj" to differentiate. These are the parts that make up the bulk of the game, its where you add code and what you control in game. Think of them as the engines and the sprites being the body.



I then created a room, which is the area of the game. Inside this room I placed the objects to build the level, this included background objects and walls. Next I placed the character objects, both NPC and Player.



Once I was happy with the look of the level I could get into the coding of the game.



I began by adding a simple collision event on the player character. I had to make one for each of the wall objects. These will stop the player from walking through the walls. This works due to the programs built in physics system, which means that I don't need to use lots of code to get the same effect.



Due to the way this system runs I need to add a Create event. Inside this event I add a piece of code to fix the rotation of the object. This will stop collisions from rolling the object.



Now it was time to add code to make the character move. The code goes as follows:

The notes above each part explain what they do, but to explain it in more depth I will break down the first one.

Code is in Blue

var D_key = keyboard_check(ord('D'));
This is whats known as a variable. its an action that can be referenced in later parts of the code. This is telling the computer that if a piece of code has D_key, in then check for the D key being pressed.

//Move Right
This is whats known as a comment, this is not technically part of the code and is usually notes wrote by the developer to explain parts of the code.
if (D_key) {
This is telling the computer that if the D key is pressed...
      phy_position_x += 4;
Then change the position of the object, increaing by 4 along the x axis.
      sprite _index = mcrightw_spr;
This is telling the computer to change the sprite of the object to mcrightw_spr
      image_speed = .2:
}
And this is telling the computer how fast the animation of the image is to play.

This code allows the character to not only move, but to have an animated walk cycle, but another piece of code is needed to tell the computer to stop the animation at the standing frame if no key is pressed.

//stop animating
if (!D_key and !W_key and !A_key and !S_key) {
If the D key, W key, A key, or S key is not being pressed...
      image_speed = 0
Set the image animation speed to 0...
      image_index = 0
}
and set the sprite to frame 0.

This one part of the code means that when the player is not pressing a key then the character will stop animating and the animation will go to frame 0 and stop, making the character appear to stand still.