DEV Community: Genoma Games

Using Unity UI for in-game HUDs

Alberto Fernandez Medina — Wed, 14 Oct 2020 22:00:00 +0000

This article covers how to implement a basic U ser I nterface on Unity using Unity UI to display info to players.

Requirements

Basic knowledge of Unity
Complete “ Unity Physics 2D Using Collider2D and Kinematic Rigidbody2D ” or checkout the code from Genoma Invaders’ Github repository, branch tutorial/03

Intro

Last time we end up updating all the movement logic to be handled by Unity’s Physics engine and make use of its collision system to detect our player’s bullets colliding with the enemies to be destroyed.

This time we’ll be showing the Score Points on the game screen.

Unity’s UI

Unity has three types of “UI Toolkits” to display user interfaces:

UIElements : This is a new UI Toolkit in active development.
Unity UI : This is the most used UI Toolkit for Unity until now.
IMGUI : This is a UI Toolkit commonly used to display development UIs due to its simplicity and ease to use.

We will be using Unity UI for our game UI, starting with the score display.

To display our player’s score points, we will need to use the Text Visual Component. Let’s start by adding one to our Game Scene.

Canvas and Layout

As you can see, this will create 3 Game Objects in our Hierarchy Window, a Canvas containing Text, and something called EventSystem.

The Canvas serves to define an area that will render UI components. It has different render options to help place UI Components all over our game world (checkout the docs!). The Render Mode we will be using is the “Screen Space - Overlay” set by default.
The Text Object is the one in charge of display our text.
The EventSystem is a subsystem in charge of controlling the UI events and inputs. It handles navigation, input activation, and selection.

Select the Text Object and rename it to Score Text, then go to its Text Component and put some placeholder score in its Text input (like 1978) to have a reference of how it would look.

Now you may probably have noticed that there is no text shown in the Scene Window. This happens because the Canvas, as we said, is like a sticker in our camera, it is not part of the game world. To center our Game Window in the Canvas Game Object, select it in the Hierarchy Window and then, with the cursor over the Game Window, press F, this will move the Game Window view to fit the Game Object you have selected, in this case, the Canvas.

With the canvas on sigh now, it’s time to position the Score Text, select it, and in its Inspector Window under the Rect Transform section, click on the icon similar to a red reticle, this is the Anchor Presets selector. Now with the Anchor Presets selector opened when pressing Shift+Alt</kbd> you'll see that the selection icon change, select the one under the row with "top" label and the column with "right" label while pressing Shift+Alt</kbd>. This will place the Score Text Object on the top right corner of the Canvas and anchor it.

Note: You can read more about Rect Transform Component in Unity UI Documentation - Basic Layout section

If you now switch to Game Window should see something like this.

Unity UI Text Style

Now that our Text is positioned in the Canvas, let’s give it some styles and appearance similar to our game visuals.

First, we are going to change the font used for the text. We’ll be using Press Start 2P you can download it from codeman38’s webpage (the author). We placed the fonts under /Assets/Genoma Invaders/Fonts/Press Start P2/ to organize the project’s files.

To change the font for the Score Text Object:

Select it and change the Font Property under its Text Component.
Set its Font Size Property to 8 (this is the recommended size for this font),
Update the Alignment to the right and centered vertically.
Update the Color Property to be White (FFFFFF).

As a final tweak to adjust the size and position of the element, go to the Score Text Object’s Rect Transform Component and set the next properties:

Pos X: -8
Pos Y: -8
Pos Z: 0
Width: 64
Height: 8

Note: You should see the changes applied in the Game Window (remember to set the Taito 8080 resolution configured in the first lesson).

Updating Unity UI Text

The Score Text Object is ready to display our Game Score, and now we need some logic to update its Text value.

Create a new C# Script in the Project Window called Score.cs and place it under /Assets/Genoma Invaders/UI/ (new folder). We will use this Component to maintain the Score points for our Game.

Score.cs

using UnityEngine;
using UnityEngine.UI;

public class Score : MonoBehaviour
{
    private int score = 0;
    // https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/script-Text.html
    private Text text;

    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/MonoBehaviour.Awake.html
    private void Awake()
    {
        text = GetComponent<Text>();
    }

    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/MonoBehaviour.Start.html
    private void Start()
    {
        text.text = score.ToString();
    }

    public void AddScore (int points)
    {
        score += points;

        text.text = score.ToString();
    }
}

The previous code does set the Text value to the initial score (0) whenever the Game Starts and update it when someone calls the method AddScore. Attach it to the Score Text Object and Play the Game, you should see the Score Points to 0.

With this new Component attached to the Text Score Object, we can use the Score.AddScore method to increment our Game Score. Let’s update the Enemy.cs to communicate with the Score Component inside the Score Text Object. We need to find and store a reference to the Score Component to call its AddScore method whenever the player kills an Enemy.

Enemy.cs

// ...
public class Enemy : MonoBehaviour
{
    // ...

    private Score score;

    private void Awake()
    {
        // ...

        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Object.FindObjectOfType.html
        score = FindObjectOfType<Score>();
    }

    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/MonoBehaviour.OnDestroy.html
    private void OnDestroy()
    {
        score.AddScore(100); // Increment game score by 100
    }
}

This way, whenever Destroy method is called (remember that the Bullet Component is calling this method over the Enemy Object) with a Game Object containing an Enemy Component, it will update the Score points before being destroyed from the Scene.

Let’s try it

Conclusion

We ended up with a game displaying a score text that updates whenever an enemy is killed and learning a bit about Unity UI systems.

You can get the code generated by following this tutorial in Genoma Invaders’ Github repository, branch tutorial/04.

Happy Game Dev! 👾

Unity Physics 2D Using Collider2D and Kinematic Rigidbody2D

Alberto Fernandez Medina — Tue, 25 Aug 2020 22:00:00 +0000

Learn how to handle 2D game objects collisions while making a space invaders 2D game using the Unity physics 2D engine with 2D colliders and kinematic 2D rigid bodies.

Requirements

Unity 2020.1
Visual Studio Editor
Complete “ How to Move 2D Objects in Unity ” or checkout the code from Genoma Invaders’ Github repository, branch tutorial/02

Intro

In the last tutorial, we walked through How to Move 2D Objects in Unity using the Unity’s Scripting API, ending up with a Scene containing a Player Game Object that moves when pressing directional input buttons and shooting bullets that move upwards in a consistent manner when a Fire1 related input is pressed.

Our next steps will be to:

Make Bullets collide with the Enemies
Organize our code

Until now, the Game Objects of our game were moving by updating its Transform.position values by calling Transform.Translate method. But, to let Unity detect collisions between objects, this is a bad practice, we need to change this approach to make use of Unity’s Physics 2D engine so that it can notify us about collisions between Game Objects.

Unity’s Kinematic Rigidbody2D, Moving Objects with Physics

To move a Game Object using Unity’s 2D Physics we need to add Rigidbody2D Component to it and call Rigidbody2D.MovePosition to move it, this way the Physics2D engine can handle the movement and take care of the physics calculations implied on it.

Player Movement with Physics

Let’s start with the Player Game Object by adding the Rigidbody2D Component to it.

Now there is a small point in adding physics to game objects in Unity. If you play the game, you will see how our Player Game Object now falls into the abyss.

“Goodbye dear friend!”

The Player Game Object is falling because Unity’s 2D Physics engine is now applying gravity to the Player Game Object. The thing is, we don’t want gravity in this game. We want them to move whenever we want them to move. We are only going to use Unity’s 2D Physics engine for collision detection. To achieve this, we need to switch the Rigidbody2D.bodyType property.

Using the Unity Inspector window, change the Player’s Rigidbody2D Body Type property to Kinematic.

Note: Now if you play the game will see that the Player stay still.

Kinematic Rigidbodies will ignore all forces and collision applied to them, so it will stay still unless moved by scripting. One thing more to do with the Rigidbody2D properties is to check “ Use Full Kinematics Contacts ” checkbox to tell the Unity’s 2D Physics engine that this object can collide with other kinematic objects.

Note: Checkout Unity’s Manual section “Rigidbody 2D” to have more context about this topic.

There, our Player is now in position. It’s time to update Player’s Component code to use RigidBody2D instead of Transform to move the Player Game Object.

First, we need the Player Component to depends on Rigidbody2D Component.

Player.cs

using UnityEngine;

// https://docs.unity3d.com/2020.1/Documentation/ScriptReference/RequireComponent.html
[RequireComponent(typeof(Rigidbody2D))]
public class Player : MonoBehaviour
{
    // ...
}

Note: Some code has been hidden under // ... to show only relevant code.

By using the RequireComponent Attribute, whenever a Player Component is added to a Game Object, if there is not Rigidbody2D Component attached, it will be added.

Now we need the Player Component to store a reference to the RigidBody2D Component to communicate with it.

Player.cs

// ...
public class Player : MonoBehaviour
{
    [SerializeField]
    private float speed = 2;

    [SerializeField]
    private GameObject bullet;

    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Rigidbody2D.html
    private Rigidbody2D rb2D;

    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/MonoBehaviour.Awake.html
    private void Awake()
    {
        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Component.GetComponent.html
        rb2D = GetComponent<Rigidbody2D>();
    }

    private void Update()
    {
        // ...
    }
}

We have added a new method to our Player Component called Awake, and inside we are using GetComponent method to obtain a reference to the attached Rigidbody2D. Awake method serves to hook any logic needed for our Component when the game starts a Scene or when a Game Object containing this Component is instantiated. It is usually used to setup references like we did for the Rigidbody2D Component.

Note: To get more info about this topic checkout Unity’s Manual section about “Order of Execution for Event Functions”.

Now that our Player Component has the reference to Rigidbody2D stored, we can focus on the logic to move the Game Object.

Player.cs

     // ...

     // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Rigidbody2D.html
     private Rigidbody2D rb2D;
+    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Vector3-zero.html
+    private Vector3 move = Vector3.zero;

     private void Awake()
     {
         // ...
     }

     private void Update()
     {
         // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Input.GetAxisRaw.html
         float rawHorizontalAxis = Input.GetAxisRaw("Horizontal");

-        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Vector3-zero.html
-        Vector3 direction = Vector3.zero;
-        direction.x = rawHorizontalAxis;
-
-        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Time-deltaTime.html
-        float timeSinceLastFrame = Time.deltaTime;
-
-        Vector3 translation = direction * speed * timeSinceLastFrame;
-
-        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Transform.Translate.html
-        transform.Translate(
-          translation
-        );
+        move.x = rawHorizontalAxis;

         // ...
     }

+    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/MonoBehaviour.FixedUpdate.html
+    private void FixedUpdate()
+    {
+        if (move != Vector3.zero)
+        {
+            // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Time-fixedDeltaTime.html
+            Vector3 translation = move * speed * Time.fixedDeltaTime;
+            Vector3 newPosition = transform.position + translation;
+
+            // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Rigidbody2D.MovePosition.html
+            rb2D.MovePosition(newPosition);
+        }
+    }
 }

Note: The syntax shown here is in diff unified format to show replaced code. Due to syntax highlighter limitations, C# syntax colors are disabled.

Let’s explain the changes. We have removed all related old movement logic except the logic in charge of checking for movement input with Input.GetAxisRaw, added a new private property to Player class called move of type Vector3 with a default value of Vector3.zero, then we are updating the property move.x value in Player’s Update method with the value retrieved from the horizontal axis input. We had defined a new method FixedUpdate to handle physics-related logic. In here, if move property value differs from Vector3.zero, it will calculate the Game Object translation based on the move and the speed values multiplying it by the time passed (in this case Time.fixedDeltaTime). This computed translation is added to the current position. Then we call Rigidbody2D.MovePosition method to move the Game Object. This way, the Player Game Object is moved by the Rigidbody2D Component and taken into account b the physics engine.

If you play the game, there should be no difference in the movement or any noticeable changes. The difference here is that the physics engine works behind the curtains paying attention to each movement of our Player Game Object.

Bullet Movement with Physics

Now that we have done this with the Player, let’s do it with its Bullets.

Go to your Project window in the Unity editor and attach a Rigidbody2D Component to Bullet Game Object Prefab. Remember to set it to Kinematic and to check the “Use Full Kinematics Contacts” checkbox. After this, you should play the game. If everything is configured correctly, the bullets should move straight up when shooting.

Edit Bullet.cs code and add the RequireComponent attribute to require Rigidbody2D.

Bullet.cs

using UnityEngine;

// https://docs.unity3d.com/2020.1/Documentation/ScriptReference/RequireComponent.html
[RequireComponent(typeof(Rigidbody2D))]
public class Bullet : MonoBehaviour
{
    // ...
}

Add the logic in Bullet.cs to store the reference to the RigidBody2D Component.

Bullet.cs

// ...
public class Bullet : MonoBehaviour
{
    // ...

    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Rigidbody2D.html
    private Rigidbody2D rb2D;

    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/MonoBehaviour.Awake.html
    private void Awake () {
        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Component.GetComponent.html
        rb2D = GetComponent<Rigidbody2D>();
    }

    // ...
}

And finally, update its logic to move using the physics engine.

Bullet.cs

// ...
 public class Bullet : MonoBehaviour
 {
     // ...

     // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Rigidbody2D.html
     private Rigidbody2D rb2D;
+    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Vector3-up.html
+    private Vector3 move = Vector3.up;

     private void Awake()
     {
         // ...
     }

-    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/MonoBehaviour.Update.html
-    private void Update()
-    {
-        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Vector3-up.html
-        Vector3 direction = Vector3.up;
-
-        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Time-deltaTime.html
-        float timeSinceLastFrame = Time.deltaTime;
-
-        Vector3 translation = direction * speed * timeSinceLastFrame;
-
-        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Transform.Translate.html
-        transform.Translate(
-          translation
-        );
-    }
+    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/MonoBehaviour.FixedUpdate.html
+    private void FixedUpdate()
+    {
+        if (move != Vector3.zero)
+        {
+            // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Time-fixedDeltaTime.html
+            Vector3 translation = move * speed * Time.fixedDeltaTime;
+            Vector3 newPosition = transform.position + translation;
+
+            // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Rigidbody2D.MovePosition.html
+            rb2D.MovePosition(newPosition);
+        }
+    }
 }

Notice that the Update method has been removed since it is no longer needed, and we are using the same code as with the Player Component for the FixedUpdated method.

No changes should be noticed when playing the game (physics engine working).

Enemies with physics

Last but not least, update the Enemies Game Objects to have a Rigidbody2D of type Kinematic and “Use Full Kinematics Contacts” checkbox checked.

And update its Enemy.cs Component code to require and store the reference of Rigidbody2D.

Enemy.cs

using UnityEngine;

[RequireComponent(typeof(Rigidbody2D))]
public class Enemy : MonoBehaviour
{
    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Rigidbody2D.html
    private Rigidbody2D rb2D;

    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/MonoBehaviour.Awake.html
    private void Awake()
    {
        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Component.GetComponent.html
        rb2D = GetComponent<Rigidbody2D>();
    }
}

This one was the hardest. We are not going to implement any movement logic yet on the Enemy.

Yay! We have finished providing our Game Objects with physic properties and movement. Play the game to ensure everything moves correctly, and nothing falls into the void. It’s time to make things clash.

Unity’s Collider2D, Detecting Collisions

Now that Game Objects has physical body representation, the physics engine needs a way to detects collisions between these bodies. This can be made using 2D Colliders. There are several types of Collider2D based in their shape, we will use Box Collider 2D Component given its simplicity and that we do not need complicated shapes yet for the project.

To make a collision possible, we need 2 Game Objects with Colliders2D attached to them to communicate collisions between them. We are going to make our Bullets collide with Enemies Game Objects.

Bullet to Enemy Collision

Start with the Bullet Game Object Prefab. Open the Bullet Prefab on the Editor by making double click on it.

Add the Box Collider 2D Component, check “Is Trigger” box, this will set the collider to act as a trigger making the physics engine notify the collisions rather than simulate them. Set the Size property to X = 0.125 and Y = 0.25 units. This size makes the Collider area equal in size to the Sprite, the Bullet Sprite have a size of 2x4 pixels, that translated to game units (1 unit -> 16 pixels) is equal to 2 / 16 = 0.125 and 4 /16 = 0.25.

Do the same for both Enemy Game Objects in the Game Scene, this time the Size is X = 0.5 and Y = 0.5625 (8x9 pixels), and we will need to set Offset property Y = 0.03125 (this moves the collider 0.5 pixels up to center it with the sprite).

You can copy Components with its property values to other Game Object using the Inspector Window. Click on the “3 dots button” at the top left corner of the Enemy’s Box Collider 2D Component, select “Copy Component”, then select the other Enemy Game Object and click on the “3 dots button” at the top left corner of its Transform Component, select “Paste Component As New”. This will attach a new Box Collider 2D Component to the Game Object with the same property values.

Now that we have two kinds of Game Objects (Bullets and Enemies) with physical bodies and collision detection, we can handle collisions between them. If you play the game, there shouldn’t be any relevant changes (nothing falls and bullets still pass through).

Coding time! Edit the Bullet Component script. We are going to add a new method called OnTriggerEnter2D. This method is called whenever a collision is detected by any Collider2D attached to the Game Object with property “Is Trigger” enabled. It will be called when our Bullet Game Objects collide with the Enemy’s Collider2D.

Bullet.cs

// ...
public class Bullet : MonoBehaviour
{
    // ...

    // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/MonoBehaviour.OnTriggerEnter2D.html
    private void OnTriggerEnter2D(Collider2D collider2D)
    {
        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Component.CompareTag.html
        if (collider2D.CompareTag("Enemy"))
        {
            //https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Object.Destroy.html
            Destroy(collider2D.gameObject);
        }
    }
}

The Bullet Component is now detecting collisions. To avoid it from destroying every Collider2D it collides with, we have added a condition to check if the Game Object it collides with has the Tag “Enemy” and destroying it if so. But wait, if you play the game still nothing happens, we need to tag our Enemy Game Objects with the “Enemy” tag.

Unity Tags for Collider Filtering

To set a Tag in our Enemy Game Object, select the Enemy in the Editor and go to the Inspector Window, the Tag select input is placed in the upper part of the Inspector Window. We need to add a new one, to add a new Tag click on the Tag input, and select the “Add Tag…” option, then add the “Enemy” Tag.

Now select both Enemy Game Objects and add to them the “Enemy” Tag. If you play the game, you can now kill enemies. Pew! Pew!.

Conclusion

We have covered a lot in this post:

Represent Game Objects in Unity as physic bodies to be handled and moved by its 2D Physics engine
Detect collisions between Game Objects and apply some logic to it
Manage Tags in a Unity Project and tag Game Objects to be filtered during collision detection logics

You can get the code generated by following this tutorial in Genoma Invaders’ Github repository, branch tutorial/03.

Remember to dig into documentation sites to have more context on what does what:

Happy Game Dev! 👾

Getting Started in Unity 2D Game Development

Alberto Fernandez Medina — Sun, 02 Aug 2020 16:28:53 +0000

This tutorial covers some basic concepts about start developing 2D games in Unity. Game Object, Components, Sprites, how to handle Pixel Art for games in Unity, and helps to get used to Unity editor interface.

Requirements

To follow this Unity tutorial, you will need to:

Genoma Invaders Game

The game we will be developing during this tutorial series is Genoma Invaders.

Genoma Invaders is a Fixed shooter from the Shoot 'em up game genre where you are a microscopic submarine killing bacteria, virus, and other microorganisms inside a human body.

To define this project and its scope, a very simple Game Design Document has been created.

Note: Don't use this project as an example for game design as there is not much design process behind this project due to its educational purpose

Project File Structure

It is not mandatory, but a way to keep things tidy is to create a new directory inside /Assets with the name of your game, in this case, /Assets/Genoma Invaders, and move the Scenes directory inside of it. This way, all the game-related assets are contained inside this directory so they do not get mixed with 3rd party assets or plugins.

Building the First Game Scene

Let's start with the Scene Unity creates whenever you create a new project by renaming it from SampleScene to Game. Here is where all the game action will happen.

Every game in Unity is contained within one or multiple scenes. For this project, we will be using them to store one level in each one and the main menu in another one, but for now, we only need one to start our game development.

Game Objects

The next item smaller than a Unity scene is a Game Object. They comprehend the bricks to build a game, graphics, sounds, and logic. A Game Object can represent multiple things in a Unity game, players, enemies, lights, the ground, trees, cameras. These objects can also represent things that the player can not see, like the camera itself or an object in charge of reviving the player whenever it dies.

Unity starts a project always by placing a Camera Game Object inside the Scene (depending on the project template it could put more stuff). A Camera is essential since it represents the player's eyes as they will see what the camera sees. Do not mind it too much since we will not be handling it yet.

A Game Object will represent the player. To create Game Objects in the Scene, click on the menu GameObject > 2D Object > Sprite.

It will create a new Game Object in the Scene called New Sprite. Rename it to Player and ensure its position is in X=0 Y=0 Z=0 in the Inspector window.

Components

This Game Object we renamed Player should show a Sprite Renderer in the Inspector window.

Each section in the Inspector window, divided by a line and a header, represents a Component which is the next piece smaller than a Game Object. Game Objects contains Components that provide different features to the Game Object, the most common Component you can find in a Game Object is the Transform Component. It gives the Game Object the ability to be positioned, rotated, or scaled inside the Scene, so if the Game Object renders something, it will be placed based on that values or could calculate its distance against other entities in the Scene.

Sprites

Time to inject some graphics into the game. Take this Player sprite:

And put it into the project. You can do it by dragging it into the Project window or placing it with your operating system file explorer into the project Assets directory. Place it under Assets/Genoma Invaders/Player/Player.png.

Let assign the Player sprite to the Player Game Object in the Scene:

Select the Player in the Scene Hierarchy window
In the Inspector window, on the Sprite Renderer component, click on the circle of the left to the Sprite field to open the Select Sprite window
Select the Player sprite on the Select Sprite window

Now the Player entity is visible within the game Camera. To check this, go to the Game view view, you should see something like this:

That little dot is our Player rendered by the camera. The reason it is so small is that the size of the sprite is 16x16 pixels. Sprites, Cameras, and settings in Unity need to be configured to render Pixel Art correctly.

Pixel Art in Unity

To render pixel art correctly in Unity, we need to make a few changes.

Unity Texture 2D Import Settings for Pixel Art

The primary problem Unity has with Pixel Art is that it treats the images used for the Game Objects as Textures, and it applies some optimization over them to improve load and render times. The problem is that that optimization is useful only if we are working with large resolution images that need to be compressed or optimized. In the case of Pixel Art, these optimizations are not required since these graphics are so small in size.

To configure Player Sprite with proper settings, select it on the Project window to display its settings on the Inspector window.

Pixels Per Unit: 16 (It will make the sprite bigger in the Scene because when applying this value, it means that for this sprite 16 pixels will have to be rendered inside 1 game world unit)
Filter Mode: Point (no filter) (Will prevent blurriness with the pixels since that option is in charge of filtering the texture when it gets stretched)
Compression: None (This prevents Unity from compressing the image that also will cause blurriness)

Press the Apply button to save the changes.

Note: This process needs to be made with every sprite included in the project.

If you look now in the Game view, the Player Sprite should look bigger.

2D Pixel Perfect Package

Another tweak we can do to help the Unity project render pixel graphics is to install the 2D Pixel Perfect package.

2D Pixel Perfect Package Installation

If you created the project selecting the 2D Project Template in Unity Hub you already have this package installed.

To install the package, open the Package Manager window.

Set Packages option to show All packages.

Select the 2D Pixel Perfect package and the press the Install button.

2D Pixel Perfect Package's Pixel Camera

The 2D Pixel Perfect package comes with a Component called Pixel Camera. Unity Cameras are not prepared to render pixel graphics correctly, and this Component provides Unity's Cameras with behavior to handle pixel viewport logics and other features to help your game look more pixelated.

Select the Main Camera in the Hierarchy window to show its Inspector window. To add the Pixel Camera Component to the Main Camera, click on the Add Component button. Go to Rendering and then select Pixel Perfect Camera (you can also find it using the search input).

Once the Main Camera has the Pixel Perfect Camera Component, edit its parameters.

Assets Pixels Per Unit: 16 (the same value we used for the Player Sprite)
Reference Resolution: 224x256 (you'll know why these values later)
Upscale Render Texture: checked
Crop Frame: X and Y checked

Note: checkout 2D Pixel Perfect package documentation for more info.

Arcade Cabinet Taito 8080

Space Invaders were played in an arcade cabinet with a Taito 8080 motherboard which could render a resolution of 224x256 pixels.

Unity can simulate resolutions and aspect ratios freely. Let's begin by setting up a new Aspect configuration on the Game view:

To simulate a Taito arcade machine create a mew aspect with 224 with and 256 height:

When the new aspect is selected, the Game view will change to represent this resolution. To try how the game looks under this resolution, press the Play button and select it.

Stop the game by pressing the Play button again.

Enemies

Let's make the same process with this Enemy sprite:

Place it under /Assets/Genoma Invaders/Enemy/Enemy.png and update its settings as we did with the Player sprite.

Pixels Per Unit: 16
Filter Mode: Point (no filter)
Compression: None

Now, to create the Enemy Game Object in the Scene, there is another way to create it. Drag and drop the Enemy Sprite from the Project window to the Hierarchy window, this will create a new Game Object with a Sprite Renderer Component called "Enemy" in the Scene.

Now that we have two visible game objects in the Scene let's place them where they suppose to be in the game. Move the Player and the Enemy to be positioned similar to this.

Now select the Enemy Game Object and press Ctrl/Cmd + D, in the Hierarchy should appear an Enemy (1) Game Object, you have just duplicated a Game Object, place it next to its partner, and you should end with something that starts to smell like a game.

Wrap Up

We have seen:

How to import Sprites in a Unity project
How to create Game Objects in Unity
How to add components to a Game Object in Unity
How to adapt a Unity project, its camera, and sprites to be Pixel Art friendly

This is all for now.

The resulting work of this tutorial can be checked out in the Genoma Invaders Github, branch tutorial/01.

Happy Game Dev! 👾

How to Move 2D Objects in Unity

Alberto Fernandez Medina — Fri, 31 Jul 2020 22:00:00 +0000

This tutorial shows basics for Unity 2D Game Development concepts like adding custom components to Game Object, fundamental Unity scripting with C#, 2D Game Object movement in Unity, how to handle inputs in Unity, and how to instantiate Game Object in Unity.

Disclaimer

Due to this course's intention, we will not cover basic knowledge in programming with C# in Unity but rather provide info with complex terms in this language or Unity Scripting API.

To get more info and learn about these topics, you can refer to:

Requirements

Complete "Getting Started in Unity 2D Game Development" or checkout the code from Genoma Invaders' Github repository, branch tutorial/01
Have basics knowledge in programming with C#
Visual Studio Editor (you should have installed it when installing Unity) or another code editor of your preference

In the previous tutorial, "Getting Started in Unity 2D Game Development", we walk through basic concepts about developing 2D games in Unity, ending up with a scene with some still Game Objects. It’s time to give them some movement logic starting by the Player.

This time we will learn to move 2D Object in Unity by scripting in C# using Game Components.

Custom Components

To move our Player, we will need to add some logic to its dumb Game Object. We will do it by creating a Custom Component containing C# code and adding it to the Player Game Object.

Select the Player Game Object and press the “Add Component” button in the Inspector window. Then, write in the search input Player, select New Script, and press the “Create and Add” button.

Note: checkout Unity’s Manual section “Creating components with scripting” for more info.

This action will create a C# file under /Assets/Player.cs that defines a component named “Player”, and then it will add this Component to the Player Game Object. Move the Player.cs file to /Assets/Genoma Invaders/Player/ directory using the Project window to maintain the project’s files organized.

Player Controller

The Player component will be the Player Controller or, in other words, the Component in charge of handle the player’s logic.

If you open the file you’ll see this:

Player.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Player : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {

    }
}

That is the basic code structure Unity Editor creates for every script/component created in the project.

Now we are going to make de same, and create an Enemy Custom Component for the Enemy Game Objects. This time we are using a different technique. On the Project window, go to /Assets/Genoma Games/Enemy right click on it to open the contextual menu and select Create > C# Script, then name the file Enemy.

When Enemy.cs file is created, Unity reloads for a sort time and will register a new component to be added to Game Object named Enemy. Go ahead and add it to both Enemy Game Objects.

Note: Remember to add the Enemy component to both enemies.

Game Object Movement

To make the Player Game Object move, edit Player.cs file. First, we will clean it up a bit, so it doesn’t have unnecessary code:

Player.cs

using UnityEngine;

public class Player : MonoBehaviour
{
    private void Update()
    {
    }
}

Now, we will add some logic into its Player Controller’s Update loop method.

Player.cs

using UnityEngine;

public class Player : MonoBehaviour
{
    private void Update()
    {
        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Vector3-right.html
        Vector3 right = Vector3.right;

        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Time-deltaTime.html
        float timeSinceLastFrame = Time.deltaTime;

        Vector3 translation = right * timeSinceLastFrame;

        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Transform.Translate.html
        transform.Translate(
          translation
        );
    }
}

Note: Visit any of the links in the code’s comments for more info.

This code is creating a Vector3 pointing to the right (1, 0, 0) and multiplying it by time elapsed since the last frame, and then calls Transform.Translate method with the resulting Vector3 which will move the Game Object that distance.

TL;DR; This will make the player move 1 Scene unit per second to the right.

To see the result go to Unity Editor and press the “Play” button (You can use the keyboard shortcut Ctrl/Cmd+P).

It’s alive!!! But we need to be able to control this little guy.

Detect Player Input

To control the Player, we need to use Unity’s Input Manager. With the Input.GetAxisRaw method, you can retrieve the corresponding axis input value, in this case, if some left or right key is pressed.

Player.cs

using UnityEngine;

public class Player : MonoBehaviour
{
    private void Update()
    {
        // https://docs.unity3d.com/ScriptReference/Input.GetAxisRaw.html
        float rawHorizontalAxis = Input.GetAxisRaw("Horizontal");

        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Vector3-zero.html
        Vector3 direction = Vector3.zero;
        direction.x = rawHorizontalAxis;

        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Time-deltaTime.html
        float timeSinceLastFrame = Time.deltaTime;

        Vector3 translation = direction * timeSinceLastFrame;

        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Transform.Translate.html
        transform.Translate(
          translation
        );
    }
}

Now you can control the player.

The problem is, it is a bit slow. To fix this, we are going to add one more value to our player logic. Edit the Player component code, add a speed property to it, and include this value in the translation calculus.

Player.cs

using UnityEngine;

public class Player : MonoBehaviour
{
    private float speed = 2;

    private void Update()
    {
        // ...

        Vector3 translation = direction * speed * timeSinceLastFrame;

        // ...
    }
}

Note: Some code has been hidden under // ... to show only applied changed.

Now the Player should move twice as fast if you try it. But there is one small problem here if we want to change our Player speed value we need to open its code and edit the value and then wait for Unity to recompile. Unity provides various ways to allow the exposure of properties in the editor so you can tweak as many values as you want without editing any code. You could set the property to be public (which I don’t recommend to enforce code cleanliness), or you could add the SerializeField attribute to the Player’s speed property, we will do the second.

Player.cs

using UnityEngine;

public class Player : MonoBehaviour
{
    [SerializeField]
    private float speed = 2;

    // ...
}

Now, if you go to the Unity Editor and checkout the Player Component at the Inspector window, you’ll see that now the Component has a new input called Speed.

Now the 2 we set for the speed property will be a default value when the Component is added to a Game Object, and the final used value for the logic will be the one set at the editor. You can edit it even while playing to adjust it to your preferred value.

Note: Properties changed during Play mode will not be saved and will reset to its value before stating Play mode. More info in Unity’s Manual section “Game View“

Instantiate Game Objects

Time to make our Player shoot some bullets. Download this Bullet sprite:

And place it under /Assets/Bullet/ (new directory). Remember to edit the Sprite settings as we did with the Player and Enemy sprites in the previous tutorial. Then use it to create a new Game Object in the Scene called Bullet.

This Bullet Game Object will need custom logic to move and do stuff, so let’s create a new C# Script called Bullet and add its Component to the Bullet Game Object. Edit the file.

Bullet.cs

using UnityEngine;

public class Bullet : MonoBehaviour
{
    [SerializeField]
    private float speed = 5;

    private void Update()
    {
        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Vector3-up.html
        Vector3 direction = Vector3.up;

        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Time-deltaTime.html
        float timeSinceLastFrame = Time.deltaTime;

        Vector3 translation = direction * speed * timeSinceLastFrame;

        // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Transform.Translate.html
        transform.Translate(
          translation
        );
    }
}

We have added similar logic to our Bullet Game Object as we did to the player, but this time it only moves upwards and with a higher speed.

The problem now is that we only have one Bullet, and it appears and starts moving whenever we start playing. We need it only to appear when we are pressing the fire button. To achieve this, we will need to create a Prefab from our Bullet Game Object.

To create a Unity Prefab from an already existing Game Object, you need to drag and drop it to the Project window.

A Prefab is like a blueprint of a Game Object. It allows us to create multiple copies of the same Game Object without having them in the Scene. If you take a look at the Hierarchy window, you will see that the Bullet Game Object now has a different color, icon, and a little arrow to the right, this is the way Unity indicates if a Game Object in the Scene is related with a Prefab. Delete this Game Object from the Scene.

Check the Bullet Prefab properties within the Inspector window and ensure that it has Transform.position to x=0 y=0 z=0 and Bullet speed=0. We need to update the Player’s logic to instantiate this Game Object whenever we press the “Fire1” button (which is mapped to left ctrl, mouse 0 and joystick button 0).

Note: Checkout Unity’s Manual section “Input Manager” to know more on how to configure input mappings.

Player.cs

using UnityEngine;

public class Player : MonoBehaviour
{
    // ...

    [SerializeField]
    private GameObject bullet;

    private void Update()
    {
        // ...

        // https://docs.unity3d.com/ScriptReference/Input.GetButtonDown.html
        if (Input.GetButtonDown("Fire1"))
        {
            Vector3 playerPosition = transform.position;

            // https://docs.unity3d.com/2020.1/Documentation/ScriptReference/Quaternion-identity.html
            Instantiate(bullet, playerPosition, Quaternion.identity);
        }
    }
}

Note: Some code has been hidden under // ... to show only applied changed.

We have defined a new Player Component property called bullet that will store the reference to the Bullet Prefab Game Object. Then we have updated the Update with more code to check if any input mapped to the button “Fire1” has been pressed down during this frame, if it has, then the script will instantiate a new Bullet Game Object in the Scene at the Player’s position (with no rotation). Select the Player Game Object in the Scene and update its properties in the Inspector window dragging the Bullet prefab to its Bullet property in the Player Component.

Now you are ready to fire!!!

Conclusion

Summing Up we have:

Add a new custom Player Component made with C# to our Player Game Object
Implement moving mechanics to the Player and Bullet Game Objects
Handle Player Inputs to move and shoot Bullets

You can get the code generated by following this tutorial in Genoma Invaders Github repository, branch tutorial/02.

Remember to dig into documentation sites to have more context on what does what:

Happy Game Dev! 👾

How To Install Unity 2020.1

Alberto Fernandez Medina — Wed, 01 Jul 2020 22:00:00 +0000

In this article, you will learn how to install Unity 2020.1.0b13 (Beta) using UnityHub 2.3.2 to start developing games.

UPDATE: Unity 2020.1 is no longer in beta but you can still use this guide for stable releases

Requirements

To install Unity, you will need first to install UnityHub.

Unity Installation

Now to install Unity start UnityHub and go to Installs section and then click on the ADD button.

Then select the Unity version you would like to install, in this case Unity 2020.1.0b13 (Beta) and click NEXT.

Check the box of Microsoft Visual Studio Community 2019 to install it as it will be the IDE you will be using for coding.

You will have to agree to Microsoft Visual Studio Community 2019 License terms.

After that, you will see a box with a loading bar meaning that the installation of Unity and Visual Studio is in progress.

Once the installation completes, you will be ready to open or start a new project with Unity 2020.

Checkout Unity 2020.1 Manual "Installing Unity" Chapter for more info

Happy Game Dev! 👾