Skip to content

Simple 2D space game, part I

Prepared with Unity 5.4.1f1

Preliminaries

Prepare assets

  1. Find / prepare the player star ship image and save it as starshipPlayer.png. More or less 100 by 100 pixels shuld be enought. My starship is modeled on X-Wing fighter (based on http://www.zteamproductions.com/sw-tcg.html) and is 86 by 95 pixels. If you have an image without transparency you can add it simply with GIMP following the steps below
    1. Open your image in with GIMP.
    2. Select Layer | Transparency | Add alpha Chanel.
    3. From Tools | Selecton Tools select any tool you want to use to select background, for example
      • Fuzzy select (Różdżka).
      • By Color Select (Zaznaczanie według koloru) and next adjust Treshold.

      Please refer to https://docs.gimp.org/en/gimp-tools-selection.html for details.

    4. Delete selected area. You should see white and gray checkerboard.
  2. Find / prepare the star background and save it as backgroundStar.png (for example from https://1-background.com/stars_1.htm.
  3. Find / prepare the laser beam and save it as laserBeamPlayer.png (my laser beam is 5 by 30 pixels).
  4. Find / prepare the enemy star ship and save it as starshipEnemy.png (my laser beam is 80 by 66 pixels).
Setting up the project
  1. Start Unity, select New (project). Next as its name enter Simple 2D space game, choose a location and select 2D radion button. Confirm with pressing Create project button.
  2. Select Project tab at the bottom of the screen.
  3. From Create drop-down menu select Folder. Other option is select from the popup menu we get right after clicking right mouse button on Assets folder and select Create | Folder. Name this new folder Animations. Next add other folders: Prefabs, Scenes, Scripts and Sprites.
  4. Select the Sprites folder and drag the backgroundStar.png file into it.
  5. Select the Sprites folder and drag the starshipPlayer.png file into it.
  6. Verify that the image is Sprite: click on it and verify from the Inspector tab that Texture Type is Sprite. If it isn't, change it to that (remember to click on the Apply button).
  7. Select the Sprites folder and drag the laserBeamPlayer.png file into it.
  8. Select the Sprites folder and drag the starshipEnemy.png file into it.
Creating the scene
  1. Drag and drop the player starship starshipPlayer.png from Assets | Sprites into the Scene tab.
  2. Set the position of the sprite to the center of the screen (set x and y Position on Inspector tab as (0, 0)).
  3. Now we want to add a background to our scene. There are two options:
    1. If the image is large enought we can set it directly as a background.
      1. Drag and drop it into the scene.
      2. Select the background object, and go to the Sprite Renderer component from the Inspector tab.
      3. Under Sorting Layer, select Add Sorting Layer.
      4. Click on the + (plus) icon and add at least two layers: one for background and another one for other objects.
      5. Place the objects on the appropriate layer by selecting the object and setting the Sorting Layer property for it.
    2. If the image is small, as in our case which is only 402 by 402 pixels, another approach can be used.
      1. In the Project tab select the background sprite.
      2. Change Texture Type in the Inspector tab to Texture.
      3. In the same tab change Wrap Mode to Repeat.
      4. At the first sight, next step can seems to be strange in 2D world: create a 3D cube! Do this by selecting Game Object | 3D Object | Cube from the main menu.
      5. In the Inspector tab change the cubes's name to Background.
      6. Remove Box Collider component by clicking on settings icon and selecting Remove Component.
      7. In the Project tab, select Create | Material, and name it as materialBackground.
      8. In the Inspector tab change the Shader property to Unlit | Texture.
      9. The Inspector tab should change. Click on the Texture box on the right-hand side, and select the backgroundStar texture.

      10. Set the Tiling property's x and y to a number corresponding to the texture size (8 by 8 in case of this tutorial). In short, tiling defines how many times the texture should be repeated in the x and y dimension.
      11. In the Hierarchy tab select the Background object. Next in the Mesh Renderer component click on the arrow next to Materials labels and change Element 0 item from Default-Material to materialBackground material (click on the small circle on the right side of this field).
      12. In the Transform component of the Inspector tab, change the Position to (0, 0, 1) and the Scale to (100, 100, 1).
Add scripts: starship movement
  1. In the Project tab, select Scripts folder, next Create | C# Script, and name it as ScriptPlayerBehaviour.

    The Script part in the ScriptPlayerBehaviour name is a little bit redundant, but I have found this name more descriptive than simply PlayerBehaviour which often confused readers: PlayerBehaviour, PlayerBehaviour....? Ehm... What a PlayerBehaviour is?! An object?! A texture?! Oooo! Somebody, please help me!
  2. If you don't want to use a Visual Studio as a scripts editor, under Edit | Preferences... menu select External Tools tab and as an External Script Editor select MonoDevelop.
  3. Double-click on the script and the IDE (MonoDevelop or Visual Studio) should be opened.
  4. Add the following code under the class definition

    and replace

    by

  5. Save the script and drag-and-drop it onto the starshipPlayer object or better onto this object's Inspector tab (any empty part of it).
  6. Change the Size of each of the Button variables to 2, and fill in the Element 0 value with the appropriate arrow and Element 1 with WASD letters: W for up arrow, A for left, S for down, and D for right.
  7. Add the following code inside the Update function

    PlayerRotate() function is used to rotate the player's starship to look into a mouse direction while PlayerMove() is used to move the player's starship.
  8. Every object in a scene has a Transform. It's used to store and manipulate the position, rotation and scale of the object (https://docs.unity3d.com/ScriptReference/Transform.html). Another idea used in this part of code is Quaternion (https://docs.unity3d.com/ScriptReference/Quaternion.html). Now we are going to use them. Add the following code inside the ScriptPlayerBehaviour class
  9. Now it's the first time we can test our game. Comment for a while (only for this step) a line with PlayerMove() function call and press Ctrl+P to play the game. Our starship should follow the mouse pointer.
  10. Add the following code inside the ScriptPlayerBehaviour class

    In expression

    you can try to use Space.World instead of Space.Self
  11. Add the following code inside the ScriptPlayerBehaviour class
  12. Press Ctrl+P to play the game. As before our starship should follow the mouse pointer as well as WASD keys directions.
Add scripts: starship shooting
  1. In the ScriptPlayerBehaviour script add the following code at the beginning of the ScriptPlayerBehaviour class
  2. In the Update() add call to LaserFire() function, so now Update() takes the following form
  3. Add the following code of LaserFire() inside the ScriptPlayerBehaviour class
  4. Add the following code of MakeLaserFire() inside the ScriptPlayerBehaviour class
  5. In starshipPlayer object's Inspector tab change the Size of Button Fire variable to 2, and fill in the Element 0 value with Mouse0 and Element 1 with Space.
  6. In the Project tab, select Scripts folder, next Create | C# Script, and name it as ScriptLaserBehaviour.
  7. Add the following code under the class definition
  8. Update class' methods Start() and Update()
  9. Drag and drop the laser beam laserBeamPlayer.png from Assets | Sprites into the Scene tab.
  10. Save the script and drag-and-drop it onto the laserBeamPlayer object or better onto this object's Inspector tab (any empty part of it).
  11. Add a Box Collider component by selecting the laser object and then going to Component | Physics 2D | Box Collider 2D.
  12. Add also a colider for our star ship but in this case use a Circle Collider 2D.
  13. Select the Assets | Prefabs folder in the Project, and drag-and-drop the laser object (laserBeamPlayer) from the Hierarchy tab into Prefabs. The name in object hierarchy should turn blue to show that now it is a prefab.
  14. Delete the laser object from the scene.
  15. In the starshipPlayer object's Inspector tab find the ScriptPlayerBehavior component. Next drag-and-drop the laserBeamPlayer prefab into the Laser property of this component.
  16. Press Ctrl+P to play the game. Now we should be able to fire lasers.
Add scripts: enemy starships
  1. Drag and drop the enemy starship starshipEnemy.png from Assets | Sprites into the Scene tab.
  2. In the Project tab, select Scripts folder, next Create | C# Script, and name it as ScriptEnemyBehaviour.
  3. Add the following code under the class definition
  4. Update class' methods Start() and Update()
  5. Add the following code inside the ScriptEnemyBehaviour class
  6. Save the script and drag-and-drop it onto the starshipEnemy object or better onto this object's Inspector tab (any empty part of it).
  7. Add a Box Collider component by selecting the enemy starship object and then going to Component | Physics 2D | Box Collider 2D.
  8. Add a Rigidbody 2D component to our enemy by going to Component | Physics 2D | Rigidbody 2D. Change the Gravity Scale to 0 so it will not fall.
  9. Let's change enemy starship into prefab as we did with laser beam. Select the Assets | Prefabs folder in the Project, and drag-and-drop the enemy starship object (starshipEnemy) from the Hierarchy tab into Prefabs. The name in object hierarchy should turn blue to show that now it is a prefab.
  10. Delete the enemy starship object from the scene.
  11. Create an empty game object selecting GameObject | Create Empty. Having the object selected, in it's Inspector set its name to ControllerEnemy.
  12. In the Project tab, select Scripts folder, next Create | C# Script, and name it as ScriptControllerEnemy.
  13. Add the following code to this script
  14. Save the script and drag-and-drop it onto the ConrollerEnemy's Inspector tab (any empty part of it).
  15. Next, drag-and-drop the enemy prefab (starshipEnemy) into the Enemy variable in the ScriptControllerEnemy component on Inspector tab of the ConrollerEnemy.
  16. In ScriptEnemyBehaviour script update a function OnCollisionEnter2D to the following form
  17. Press Ctrl+P to play the game. Now we should be able to fight with limited number of enemies.
Tasks:
  1. There should be two lasers from player's wings starship.
  2. Add eneymy lasers.
  3. Decrease player's energy after collision with enemies or laser hit; when energy equal to 0 - destroy it.
  4. Rmove code duplication. For example in ScriptPlayerBehavior there is

    while in ScriptControllerEnemy