2D game
07/11/2018
I’m making a 2D game that makes the 2D character move, I got my character idea from the 17th century paper cutting. (picture below)
The idea is to draw out the character in Photoshop and then break him down into peaces so then you use him in ‘unity’ program to make him move. I went into Photoshop and traced around the character I wanted and then I edited him a little bit, I created his feet because he didn’t have any (all pictures below)
The man with the axe (picture above) is the character I’ll be using. I went and traced him and added feet to him and this is what I’ve created/come up with. (picture below)
I then deleted the background and then went around the character to smooth out the edges of him.
Now I need to cut him up into parts so it will be easier to edit him in the program ‘unity’ and to make him move from help of Jacob.
(picture below) I’ve now Photoshopped my character and now have all the body parts so you can now move them.
I’m now going to save them separately, example I’m going to save the head only as a PNG and then save the body as PNG but separately. (pictures below)
I’ve now saved them separately and now it will be easier to use/edit.
This picture below is just an example of what you probably could do, I moved the body parts around so it looks like he moved. As you can see in the picture I put all the body parts back together but made it different to the original one.
I went on google and looked at a couple of tutorials on how to create 2D sprite in unity.
link to the video that I watched : https://www.youtube.com/watch?time_continue=81&v=gbgIA3pwpHc
I’ve been watching a couple of more videos to get the idea on how to use it a bit more but I’ll be watching more while using unity because it’s my first time using the program.
What is Unity?
Unity is a cross-platform game engine developed by Unity Technologies, first announced and released in June 2005 at Apple Inc.’s Worldwide Developers Conference as an OS X-exclusive game engine. As of 2018, the engine has been extended to support 27 platforms
Research help from Chris
Chris sent us all some pictures from a place he went to, the pictures explain information about a game and how they made it, with all their ideas to make the game is it today. I’ll post a couple of pictures below- these pictures can help me and others to get better research and to have more of an idea on how to prepare our game and make it.
My Idea
My idea for my game is from the old Mario games, where you move the character to the other side of the map to win. When you go across you have to collect coins the more you get the more points you get.
Here’s a quick sketch I made in Photoshop, not the best but its gotta be done, the plan and idea is the make my character jump over gaps and not falling down the gap and die. But with the mario game you had to kinda do the same where you jumper over bad guys etc and try not to die, this is the similar sort of idea. I’m going to add spooky/Halloween stuff to the game to make it more of spooky game too.
The Keys to control the game
In my game the keys in the game will be easy and simple to use, to make the character move it going to be ‘A’ and ‘D’ , A to move left and D to move right. Also the Space bar will be the key to make the character jump.
My Plan For My Game
I have got all my information for my game and put it into one picture. the main idea is from super Mario I did explain in the text above but I put more here.
Here are some of my sketches in my book that Chris gave me I’ll leave a slide show of the pictures below.
Each scene will have a different background, one background will be similar to the first ever super Mario 2D game and second background will be a different version of super Mario and the third background will be Halloween themed.
About super Mario game.
The game’s plot is similar to its predecessors, focusing on Mario and Luigi’s efforts to rescue Princess Peach from Bowser and the Koopalings. New Super Mario Bros. 2 has a heavier emphasis on coin-collecting than other Super Mario games, with multiple unique items dedicated to producing large numbers of coins. The game features a specialized mode called “Coin Rush” that focuses exclusively on quickly completing a series of stages while collecting as many coins as possible.
The successor to the 1983 arcade game, Mario Bros., it was released in Japan in 1985 for the Famicom, and in North America and Europe for the Nintendo Entertainment System in 1985 and 1987 respectively.
Are graphics important?
I’ve created a different WordPress blog for this and created a little survey, the link I posted below will take you straight to the survey on about the graphics on video games.
Link to my survey: https://wordpress.com/view/adams2.home.blog
Who are my audience?
I’ve created a different WordPress blog for this and created a little blog explaining and giving evidence on my age group for my game and the age group for Mario game which my game is based on, I’ll leave my link to the blog below.
Link to my age group blog: https://adams2.home.blog/2018/12/05/who-are-my-game-audience/
Creating Character and making code for my Characters movement
After going through my game ideas I thought I would re do my character to make it fit more into my game idea because my other character design didn’t go too well with the theme of the game. So I started my character all over again and made a new one, I found a character online and used Photoshop to trace over him. All I done is change the colours of the clothes so it’s not all the same. The one on the left is the on online and the one on the right is my one.
After following a tutorial on how to move the character I got the character to move to the left on its own but that’s a start, next I will try to make him move by using the keyboard keys.
YouTube tutorial link: https://www.youtube.com/watch?v=HpJMhNmpIxY
He started from the middle and went over to the left.
After watching more tutorials I got my character to move left to right using the ‘A’ and ‘D’ key, I’ll leave my code down below and screen shots of my character left to right.
Code
I’m really happy with my progress so far! I had no idea I could create a character and make him move in a software, so I’m happy.
Following the next tutorial I’m learning how to flip the character left to right, so when I go left so does the character (slide show below will make you understand more) I’ll also leave the code below in case anyone needs help too.
YouTube tutorial link: https://www.youtube.com/watch?v=FHQyPgccD4M
Left to right screen shots
Code
public class player : MonoBehaviour
{
private Rigidbody2D myRigidbody;
[SerializeField]
private float movementSpeed;
private bool facingRight;
// Use this for initialization
void Start()
{
facingRight = true;
myRigidbody = GetComponent<Rigidbody2D>();
}
// Update is called once per frame
void FixedUpdate()
{
float horizontal = Input.GetAxis(“Horizontal”);
print(facingRight);
HandleMovement(horizontal);
Flip(horizontal);
}
private void HandleMovement(float horizontal)
{
myRigidbody.velocity = new Vector2(horizontal * movementSpeed, myRigidbody.velocity.y);
}
private void Flip(float horizontal)
{
if (horizontal > 0 && !facingRight || horizontal < 0 && facingRight)
{
facingRight = !facingRight;
Vector3 theScale = transform.localScale;
theScale.x *= -1;
transform.localScale = theScale;
}
}
}
I went onto Photoshop and made the character 4 times but moved his body parts so it looks like hes moving, because in the program I’m adding the animation onto him so when he moves it looks like hes moving, (pictures below).
Update on my Character
After going through the tutorials I decided to change my character a little bit, I changed the body to make it more of a ninja type of character but nothing else has changed just the character so no code or anything has been touched. I changed it to a ninja because ninjas like to jump and do crazy things like that and my game is based around jumping so I thought it was a good idea.
So far I’ve got my character to move left or right, I’ve added animations on him too – running and moving animations. I’ll leave two screen shots of my character running right to left.
I had a couple of problems on the game where when I play the game the character would just fall through the map so I now have fixed that, and if I started to run the character would fall over and now again I’ve fixed that, by watching tutorials on YouTube, will provide a link below in case anyone needs help.
Game Changes
Background update
About my Character
Describe the nature of your character
Old but stealthy.
Is your character a heroic, morally righteous person? Is she a gunslinger? Is he a cunning rogue? A smelly trickster? A fiendish creature? This archetypal play can help you define some parameters and focus your brainstorm.
What’s your characters ‘back story’
…….
Describe the habits of your character
Jumping around the place, being quite and shy, getting things done, he love music it helps him get through the day, he goes to bed around 10pm and wakes up at 7am every morning.
How does your character move?
He moves at a steady pace but hes very stealthy/quite.
I am now following a tutorial to make my character jump so he can jump from platform to platform.
After following the tutorial I had a problem within the code, when I tested the game the character would just fly into the air and not stay on the ground, I sat down with Chris and we managed to sort out the code and now my character moves and jumps. I’ll post the updated code below. the error was just an easy mistake I didn’t put enough brackets in which are ‘ { }’ and after I put them where they was needed the code worked fine.
Updated code – moving and jumping.
public class Player : MonoBehaviour
{
private Rigidbody2D myRigidbody;
[SerializeField]
private float movementSpeed;
private bool facingRight;
[SerializeField]
private Transform[] groundPoints;
[SerializeField]
private float groundRadius;
[SerializeField]
private LayerMask whatIsGround;
private bool isGrounded;
private bool jump;
[SerializeField]
private float jumpForce;
// Use this for initialization
void Start()
{
facingRight = true;
myRigidbody = GetComponent<Rigidbody2D>();
}
private void Update()
{
HandleInput();
print(jump);
}
// Update is called once per frame
void FixedUpdate()
{
float horizontal = Input.GetAxis(“Horizontal”);
isGrounded = IsGrounded(); //at this point the value is false
Handlemovement(horizontal);
Flip(horizontal);
HandleInput();
ResetValues();
}
private void HandleInput()
{
if (Input.GetKeyDown(KeyCode.Space))
{
jump = true;
}
}
private void Handlemovement(float horizontal)
{
{
myRigidbody.velocity = new Vector2(horizontal * movementSpeed, myRigidbody.velocity.y);
}
if (isGrounded && jump)
{
isGrounded = false;
myRigidbody.AddForce(new Vector2(0, jumpForce));
}
}
private void ResetValues()
{
jump = false;
}
private void Flip(float horizontal)
{
if (horizontal > 0 && !facingRight || horizontal < 0 && facingRight)
{
facingRight = !facingRight;
Vector3 theScale = transform.localScale;
theScale.x *= -1;
transform.localScale = theScale;
}
}
private bool IsGrounded()
{
if (myRigidbody.velocity.y <= 0)
{
foreach (Transform point in groundPoints)
{
Collider2D[] colliders = Physics2D.OverlapCircleAll(point.position, groundRadius, whatIsGround);
for (int i = 0; i < colliders.Length; i++)
{
if (colliders[i].gameObject != gameObject)
{
return true;
}
}
}
}
return false;
}
}
After completing the code to make the character move and jump I wanted a background/game set where the character can jump over and onto to collcect coins, so I deleted my old background and made a new one – I done research and found a picture on google and wanted to make it like that – picture below.
I opened up Photoshop and got sketching, I didn’t want to have colours just black and white and some grey because I want to keep to my paper cut out theme, so after about 1hour 30minutes of Photoshop this is what I made – picture below.
As you can see it’s black and white and some grey, I made some platforms too and set it as my main background.
After adding it into my game I also kept the idea of having a castle so I added that into it aswell. I now need to add a box collider 2D to each platform and the other places I want the character to go on and not to go on.
5/12/2018
Today I’m now going to get the main camera in the unity software to follow my character when I move it. I’m going to do this by following a tutorial from YouTube, I’ll leave a link below.
Tutorial link:
After following the tutorial the camera now follows my character when I move or jump, I’ll leave screen shots and the code below.
Screen shots
Code
public class CameraFollow : MonoBehaviour {
[SerializeField]
private float xMax;
[SerializeField]
private float yMax;
[SerializeField]
private float xMin;
[SerializeField]
private float yMin;
private Transform target;
// Use this for initialization
void Start () {
target = GameObject.Find(“player”).transform;
}
// Update is called once per frame
void LateUpdate ()
{
transform.position = new Vector3(Mathf.Clamp(target.position.x, xMin, xMax), Mathf.Clamp(target.position.y, yMin, yMax), transform.position.z);
}
}
I’ve now added a new platform in, I put it where the hole was and now filled it in with the new platform (picture below)
I was thinking instead of adding a coin I’m going to added a bit of paper so you collect bits of paper around the game and not coins. (I opened PhotoShop and designed an simple paper layout) (picture below)
I followed a tutorial to add the paper icons and then get them to rotate and make them collect able so when the character goes over the icons they are collected. I’ll leave three screen shots of the icons rotating and one after I collected it with my character.
YouTube tutorial link:
I’m now going to try and add a counter so it can show/tell you how many bits of paper you have collected during the game.
Communicating your game vision
Down below I’ve information about my game! I’ve put it into a download file below so you can download it and check it out!
Counter:
At the end of my game after collecting all the papers I wanted something to pop up like saying congrats or well done, so I did some research on YouTube and google and I found a tutorial where after you collect all the papers it pops up saying ‘You win!’ and that’s why happens at the end of my game now! I’ll leave a link to the YouTube tutorial and a screenshot of the ending of my game.
YouTube tutorial:
Screen shot of ‘You Win’
After completing all of the code and the game I’ll leave the code down below just in case anyone needs help at all.
My Code:
using UnityEngine;
using UnityEngine.UI;
public class Player : MonoBehaviour
{
private Rigidbody2D myRigidbody;
[SerializeField]
private float movementSpeed;
private bool facingRight;
[SerializeField]
private Transform[] groundPoints;
[SerializeField]
private float groundRadius;
[SerializeField]
private LayerMask whatIsGround;
private bool isGrounded;
private bool jump;
[SerializeField]
private float jumpForce;
private int count;
public Text countText;
public Text winText;
// Use this for initialization
void Start()
{
facingRight = true;
myRigidbody = GetComponent<Rigidbody2D>();
count = 0;
winText.text = “”;
SetCountText();
}
private void Update()
{
HandleInput();
print(jump);
}
// Update is called once per frame
void FixedUpdate()
{
float horizontal = Input.GetAxis(“Horizontal”);
isGrounded = IsGrounded(); //at this point the value is false
Handlemovement(horizontal);
Flip(horizontal);
HandleInput();
ResetValues();
}
void OnTriggerEnter2D(Collider2D other)
{
if (other.gameObject.CompareTag(“PickUp”))
{
other.gameObject.SetActive(false);
count = count + 1;
SetCountText();
}
if (other.tag == “FallDectector”)
{
}
}
void SetCountText()
{
countText.text = “Papers: ” + count.ToString();
if (count >= 27)
{
winText.text = “You win!”;
}
}
private void HandleInput()
{
if (Input.GetKeyDown(KeyCode.Space))
{
jump = true;
}
}
private void Handlemovement(float horizontal)
{
{
myRigidbody.velocity = new Vector2(horizontal * movementSpeed, myRigidbody.velocity.y);
}
if (isGrounded && jump)
{
isGrounded = false;
myRigidbody.AddForce(new Vector2(0, jumpForce));
}
}
private void ResetValues()
{
jump = false;
}
private void Flip(float horizontal)
{
if (horizontal > 0 && !facingRight || horizontal < 0 && facingRight)
{
facingRight = !facingRight;
Vector3 theScale = transform.localScale;
theScale.x *= -1;
transform.localScale = theScale;
}
}
private bool IsGrounded()
{
if (myRigidbody.velocity.y <= 0)
{
foreach (Transform point in groundPoints)
{
Collider2D[] colliders = Physics2D.OverlapCircleAll(point.position, groundRadius, whatIsGround);
for (int i = 0; i < colliders.Length; i++)
{
if (colliders[i].gameObject != gameObject)
{
return true;
}
}
}
}
return false;
}
}
I am now creating scene 2 on my game but I am doing my step by steps on a different blog post link below:
https://adams2.home.blog/2019/01/09/creating-mood-board-new-zealand/
Now we’re adding sound effects into our game I’ve added background music and now adding in sound effects for jumping, moving and collecting icons. I’ll leave a YouTube link below that helped me out a lot because I got stuck for a couple of days on how to add sound effects and this link helped me!
Tutorial:
Following the same person above I found an easy way to make and add the Main Menu, so when you first load up the game it will say ‘Play Game’ and ‘Quit Game’ I followed an easy tutorial I will leave the link below, now I’ve got the main menu working I’m now going to design my own button designs so it makes it look better instead of just a plan menu.
Tutorial link:
My new Main Menu, this is the before picture and when I’ve finished the final design I’ll post the picture below.
Update:
This is my loading/main menu so far (picture below) what I want to do is have a black background with all old retro game characters, examples- packman – super Mario, old games like that.
New Update:
Here’s my final background for my main menu for my game that I’ve been creating over the past couple of months.
I added some old retro game characters and put it into a background and got old space invaders text and used that for my game name ‘Super Paper Cutting’
I’ve now added a Pause button in the game and you can now pause the game or quit to the main menu, I followed a simple tutorial on YouTube (will leave a link below) and I’ll also leave a screenshot below of the pause menu in the editing of the game and in game.
Pause menu tutorial link:
Everything freezes apart from background soundtrack, but it all works, I did try to add a restart button but I kept getting errors and I couldn’t fix them.
Update:
I’m now going to be adding all the menus I added in Level 1 into Level 2, I’ll leave a link below to my level 2 progress and also going to be adding sounds too.
Level/Scene 2 for my game :
https://adams2.home.blog/2019/01/09/creating-mood-board-new-zealand/
Update:
I’ve been trying to get scenes to change when completed level so it goes to the next scene, I’ve been trying for good 3weeks and I’ve finally found a way to get it to work, I found this tutorial on YouTube will leave a link below, helped me out a lot! so now when I collect all my paper icons I can go to the door I created and now go to the next level.
YouTube link:
The picture above is the door I created for the next level, as soon as you connect the character and the door it changes levels.
Little bug:
I had a little bug where when I collect the icons the counter is only meant to go up by 1 but when I was collecting them it would go up by 2 then up by 3 and so I have done some research I someone said to make sure you only have one collier on your character, I had two on my character I must have added another by mistake and since I took the second one of it was fixed and all working back to normal.
New Update:
I’ve decided to delete the old main menu design and redesign it in Photoshop, the old one didn’t really go well with it and this new one does, it all fits in. (picture below)
I added more retro characters to make it a more retro feel, I added some old characters from the game ‘worm’ and some from ‘Super Mario’.
Feedback:
I got my brother to play my game and this is what he said after playing it ‘I really like the game, it’s different but similar to the retro games, the only thing that needs adding is more levels but with the same theme as level 1 and not level 2, maybe add moving platforms make it more of a challenge’ so with this feedback I’m going to remove level 2 and carry on from level 1 theme and try and add moving platforms for the new level and make it more challenging.
New Level
So far on making my new level I’ve created a rough layout for my platforms (all done in Photoshop) the picture below is the new layout and where the tall platform is on the right, I’m going to have a platform moving left to right over towards it so you can use the platform, to collect items.
Photoshop picture.
Moving platform
I’ve now got the platforms all set up the way I want it to so far (more to add) and I’ve now got a platform moving left to right (will leave screenshots below) I followed a YouTube tutorial it was really easy I’ll leave the video link below too in case anyone needs help with that.
YouTube link:
I’ve now added an extra platform in my game you will see on the picture on the left-hand side, and I’ve now added the paper icon (the pickups) and when you collect them the count goes up, the count is at the top left, and when you collect all the paper icons you will see the text saying ‘You Win!’ . Everything is in the picture below.
Update:
I’ve now added 27 icons onto the new level (picture below) and made all the icons rotate, and also made the camera follow my character when moving.
Because I removed the New Zealand scene I had to make the new level link up with the first level, so when I complete level 1 I can go to the new level, so I changed a couple of things with the building settings and now it all works.
On this level I’m going to try and add a key to unlock a door, so when I collect the key a door opens and you can go to the next part to complete the level.
I’m not going to use keys now to unlock a door, I’m now going to use a switch, I found a YouTube tutorial and going to be following that, I’ll leave a link to the video below.
YouTube Link:
I’ve now created two switches for the game using Photoshop, one is green and one is red, for on and off, I’ll leave screenshots below.
Update:
Having trouble getting this to work (picking up a key to unlock a door), so I’m going rethink what I can do to sort this out, I’ll going through tutorials again to try and solve this problem.
tutorials:
New Update on key:
I can now pick up a key and put it into my inventory, I found and followed a tutorial in order because last time I have done it I need to add other bits into the game/code and it was a tutorial before it, so I restarted and followed step by step, below I’ll out the tutorials I followed to make this happen. And also below I’ll show some screenshots of the code working in a game where I pick up the key and it stores it in the inventory.
First tutorial:
Setting up Intractable Objects – Picking up Objects
Second tutorial:
Adding an Item to Inventory
I’ve now got my character to pick up the key and go over to the door and unlock it (screenshot below) but I now need to make and add an animation to my door so when I unlock the door the animation will play and the door will swing open. But I’m having trouble finding a tutorial for the animation.
Audio Update:
I’ve now created a new sound effect for my game so a new sound when I jump if you would like to see how created the new effect CLICK HERE
I’ve now got to add the effect in both of my levels in unity.
I’ve now added my new sound into the game as the new jump sound, I also made a new folder in Unity and named it ‘My own sounds’ so when I create the other sounds for the game I know where to put them and not get mixed up.
UPDATE
I was trying to add a door system where you get a key and then unlock a door, but I couldn’t find the right code to do it and to get it working, I’ve been working on the door system for about two weeks and got nowhere, so it’s for the best just the leave it out of the game.
What I need to do now is get the pause menu over from level 1 and put in into the new level which I’m working on now.
I’ve now got the pause menu on the game but when I play the game I can’t click on the button to bring up the main menu, so going to look more into it.
Post Processing
What is Post Processing?
Post–processing is the process of applying full-screen filters and effects to a camera. The output is either drawn to the screen or captured as a texture. See in Glossary’s image buffer before it is displayed to screen. It can drastically improve the visuals of your product with little setup time.
Now after looking at Post Processing I’m now going to try and add it into my game and make the effects in the game better then they’re now, first I’m starting off with the Main Menu, below I’ll post screenshots before and after adding the effects.
I’m following a tutorial on YouTube on how to add Post Processing to help me through the process, link below.
YouTube link:
Before the effects:
After effects:
I now will be creating the rest on a new blog post, I’ll link it just below.
https://adams2.home.blog/2019/03/28/creating-a-2d-game-final-project/
Adams Blogs 
So was everybody designing a 2D game today? I was absent so I’m not 100% entirely sure…
LikeLike
not really sure lol, think other people are making different things
LikeLiked by 1 person
After I posted my first comment I looked at your Units 3 and 4 post and noticed a timeline about paper cutting. I guess everyone must have continued from what they researched in their timeline and started designing their game based on what they’ve researched (I already did mine last week). Until then I thought either of these two: 1. Matt set everyone a challenge to make a new 2D game, or 2. Everyone was given a new task to go towards Unit 6 lol
LikeLike
By the way I think the man with the axe in the paper cutting did have feet – it just looks to have been heavily covered by the black ground being in the way, I might be wrong though.
LikeLike