Set up your 2D game world

Make a flying obstacle prefab

Random obstacle size, direction, and speed

Steer the player

Add a scoring system

Restart the game with a bang

 Optional bonus features

Build and publish to web

In this tutorial, you'll preview the finished version of Sprite Flight: a simple, 2D arcade game where you steer a triangular ship to dodge flying obstacles. Then, you'll create a new Unity project using Unity’s 2D template and set up the basic play area for your 2D game, complete with walls around the edges of the screen. 

Overview

Create a new 2D project

Set up your layout

Navigate around a new 2D scene

Add an Obstacle sprite

Change the size and background of the camera

Create the first screen border

Duplicate to make other screen borders

Lock the aspect ratio and adjust borders

Organize the Hierarchy window and Assets folder

Optional: More things to try

Next steps

Configure the scenes in the build

Switch to the Web platform

Build your project

Publish to Unity Play 

Test your game

Optional: More things to try 

Share your project [SUBMISSION STEP]

 Your next steps 

In this course, you’ll build a 2D game in Unity — starting from a completely blank project with no assets provided, you’ll create the entire game from start to finish. In the game, you fly a simple triangle-shaped ship using mouse clicks (or screen taps on mobile). Your goal: stay alive for as long as you can by dodging flying obstacles while your score increases over time.

Along the way, you’ll learn the fundamentals of working in 2D, from navigating the Scene view to coding simple gameplay interactions. You’ll also explore key Unity systems like a user interface (UI), particle effects, audio, and publishing. By the end, you’ll not only have a complete, playable game, but you’ll also have the skills to start building your own original 2D projects.

2D Beginner Game: Sprite Flight

ee82400b-5a4f-5082-ab1e-7954b1ead8c5:YHChT3yPJEkdVLlydIFN4W

 Track elapsed time

Add a score multiplier

Round the score to an int

 Set up a UI document

Add the score label

Style the label

Get a reference to the UI document

Set the score text with true score

Scale with screen size

Final script sample

Control the execution of code with common logic structures 

Level 1 Application Scripting

Joy Horvath

Instructional Designer

Create simple functional user interfaces, including images, text, buttons, toggles, and sliders.  

Beginner User Interface

ElizabethMidgley

GameObjects

lunaduranp

5.1 - Overview.mp4

5.2 - Track elapsed time.mp4

5.3 - Add a score multiplier.mp4

5.4 - Round the score to an int.mp4

5.5 - Set up a UI document.mp4

5.6 - Add the score label.mp4

5.7 - Style the label.mp4

5.8 - Get reference to the UI document.mp4

5.9 - Set the score text with true score.mp4

5.10 - Scale with screen size.mp4

In many games, scoring helps provide feedback and motivation to players. In this tutorial, you'll add a basic scoring system to your game that tracks how long the player survives and displays their score on the screen using Unity's UI Toolkit system.

Gaming

Implement simple logic in code by using if and if-else statements

Control the execution of code by using logical operators such as AND and OR in conditional statements

Control how many times certain lines of code run by using for loops, foreach loops, and while loops

Control the order and timing of executed code by using coroutines

Control the execution of code by using switch statements

Modify the values of numeric variables by using mathematical operators

Control the execution of code with common logic structures

Reduce redundancy and improve code's readability by correctly naming variables and methods

Describe common naming conventions including PascalCase and camelCase

Cultivate a code style that is efficient and easy to read

Control how the entire UI responds to changes in screen resolution by understanding different Canvas Scaler modes, such as "Constant Pixel Size" and "Scale with Screen Size"

Control how UI elements scale, rotate, and reposition relative to other objects on screen by editing anchor and pivot points.

Identify the use cases for different Canvas render modes: Screen Space - Overlay, Screen Space - Camera; World Space.

Effectively use anchos by understanding the importance of parent and child relationships for UI elements

Change the aspect ratio of the Game View window in order to preview how your UI will appear on different screens

Understand the role of the Canvas GameObject in designing a UI

Position 2D elements on screen by using the Rect Transform component and Rect tool

Anchor a UI element to different parts of a Canvas by using presets and by positioning it manually

Customize Text element styling in the Inspector

Apply and configure materials to an Image component

Create and configure visual UI components in a manner that will respond appropriately to different screen sizes and resolutions

Create a GameObject component with a script 

To begin calculating a score, you first need to measure how long the player has been alive. Unity provides a helpful built-in value called Time.deltaTime, which returns the time in seconds since the last frame. By adding this value to a running total each frame, we can track how long the player has survived — regardless of frame rate. In this step, you’ll implement this timer inside your PlayerController script.

1.  Declare a variable to store elapsed time:

Near the top of the class (after your other variable declarations), add the following line of code:

Note: Writing private is not required — Unity automatically treats variables as private if you don’t specify them as private or public. Still, it’s a good habit to include private explicitly. This makes your code easier to understand by clearly showing which variables are private and which are public.

2.  Increment elapsed time using Time.deltaTime:

Inside the Update() method, add the following line of code at the top:

+=  is a shorthand for "add to this variable."

elapsedTime += Time.deltaTime; is the same as writing: elapsedTime = elapsedTime + Time.deltaTime;

Time.deltaTime is the time (in seconds) since the last frame.

If you add that small number every frame, it adds up over time. The result is a running total of how much time has passed since the game started — this works no matter what the frame rate is.

3.  Log the result in the Console window:

Below the line you just added, add the following line of code:

Debug.Log("Elapsed time: " + elapsedTime);

Save the script, return to Unity, and enter Play mode to test.

Watch the Console window to see the timer increase over time.

Let the Player GameObject collide with an obstacle and notice that the log stops. This script is attached to the Player GameObject, so when it gets destroyed — the timer stops because the script is no longer in the scene.

Your game now tracks how long the player survives using Time.deltaTime.

Now that you’re tracking how long the player has survived, it’s time to turn that into a score. It wouldn’t be very interesting if the score just went up by 1.0 every second. 

In this step, you’ll create two new variables: one to hold the final score and one to define a score multiplier. Then, you’ll display that score using Debug.Log.

1.  Declare the score and multiplier variables:

In the PlayerController script, add the following lines of code near your other variables:

private float score = 0f;
public float scoreMultiplier = 10f;

Note: You might want the score multiplier to be public if you want to adjust it in the Inspector window later. 

Just below where you update elapsedTime, add the following line of code:

Replace the existing Debug.Log line with the following line of code: 

This Debug.Log line will display the score instead of the elapsed time.

Watch the Console window to see the score increase over time.

Because both values are floats, your result will include decimal points (for example, Score: 17.32647). Don’t worry — you’ll round that value to an integer in the next step.

Right now, the score displays as a long decimal number, which can be hard to read and doesn’t feel very game-like. Most games use whole numbers for score displays. In this step, you’ll use Mathf.FloorToInt(), a Unity function that rounds a decimal number down to the nearest whole number. You’ll also learn what an int is and why you’d use it instead of a float when displaying clean numbers.

1.  Round the score using Mathf.FloorToInt():

Replace the line where you calculate the score with the following line of code:

score = Mathf.FloorToInt(elapsedTime * scoreMultiplier);

An int is a whole number (like 0, 1, 25). It doesn’t store decimal places.

Mathf.FloorToInt() takes a decimal (float) and returns the largest whole number less than or equal to that value.

For example: Mathf.FloorToInt(3.7f) gives 3.

This ensures the score only increases after full seconds have passed — which is useful if, for example, you want the player to earn 1 point per second of survival.

Without flooring, a score like 3.7 would round up to 4, giving credit before the full second has actually passed.

The Console window should display clean whole numbers like Score: 47, instead of Score: 47.39214.

Now that the score is being calculated correctly, it’s time to display it on the screen. In Unity, you can create user interfaces using the UI Toolkit, which uses assets called UI Documents written in UXML (a markup language similar to HTML). This step walks you through creating a UI Document and connecting it to your scene so you can begin building a heads-up display (HUD) for your score.

1.  Create a UI Document GameObject in the scene:

Right-click in the Hierarchy window and select UI Toolkit > UI Document.

In the Project window, right-click the Assets folder, select Create > Folder, and name the new folder “UI”.

Right-click the UI folder and select Create > UI Toolkit > UI Document. 

3.  Link the asset to the scene's UI Document:

Select the GameUI GameObject in the Hierarchy window.

Select the Source Asset picker (⊙) and select the UILayout asset. 


A UI Document GameObject in the scene is what actually displays the interface during gameplay.

A UXML asset (like the UILayout asset you just created) defines the structure and layout of the UI.


You won’t actually see any UI elements on the screen yet; you’ve just created the UI container that will hold your score display.

With the UI container set up in your scene, the next step is to design the actual interface that’ll display your score. You’ll do this using the UI Builder window, a drag-and-drop editor for creating UI layouts visually. In this step, you’ll add a Label, give it a clear name, and set some placeholder text.

1.  Open the UILayout asset in UI Builder:

In the Project window, double-click the UILayout asset you created earlier.

This opens the UI Builder window, which contains a live Viewport window (similar to the Scene view), a Library window (similar to the Project window), a Hierarchy window, and an Inspector window, just like the Unity Editor.


From the Library window (usually on the left), drag a Label element into the Hierarchy window.

You’ll now see a text label appear in the Viewport window that says Label by default.


In the Hierarchy window of the UI Builder window, select the new Label element.

In the Inspector window (on the right), rename the Label element by setting its name at the very top of the Inspector panel to “ScoreLabel”.

Spelling is important here — you’ll use this name in your script to reference the label later.

In the Attributes section, in the Text box, change the placeholder text to “Score: 0”.

Press Ctrl+S (macOS: Cmd+S) to save the UILayout asset.

You can now close or minimize the UI Builder window.

Back in the Unity Editor, you will see the “Score: 0” text appear in the upper left corner of the screen, though it may be hard to see against a dark background — you’ll fix that next.

By default, UI elements added in UI Builder are small, plain, and usually tucked in the upper-left corner. In this step, you’ll center the label horizontally and give it some visual breathing room using inlined styles — direct style settings applied to individual UI elements.

1.  Reopen the UILayout in UI Builder (if closed):

In the Project window, double-click the UILayout asset to reopen it in the UI Builder window.

Tip: If the Viewport window looks zoomed or misaligned, select Fit Viewport at the top of the window to recenter it.

2.  Select the ScoreLabel in the UI Hierarchy panel:

In the Hierarchy window, select the ScoreLabel element you created earlier.

In the Inspector window on the right side, expand the Inlined Styles section.

Under Position, set the Top Offset to around 20px (pixels). This will move the score down a bit so it’s not overlapping the top border wall.

Under Align > Align Self, select Center to center the label horizontally.

In the Text section of the Inlined Styles section, try the following changes:

Select a Color that contrasts well with your background.

Optionally, add Font Style like Bold if you want the score to stand out.

Press Ctrl+S (macOS: Cmd+S) to save the UILayout asset and return to the Unity Editor to preview your score UI formatting.


After this step, the ScoreLabel should be clearly visible, centered near the top of the screen, and easy to read.

Before your script can update the score label, it needs to access the UI that’s visible in the scene. To do that, you’ll get a reference to the UI Document component attached to your GameUI GameObject. 

Near your other variable declarations, add the following line of code:

Note: Declaring this as public makes the variable appear in the Unity Inspector window, where you can assign it manually without writing extra code. This is a common and beginner-friendly way to connect scene references.

If UIDocument is underlined or causes an error, add the following line of code to the top of your script:

Note: This line gives your script access to Unity’s UI Toolkit classes. If you're using autocomplete in your IDE, it may have already added this line for you automatically.

3.  Assign the UI Document in the Inspector window:

Save your script and return to the Unity Editor. 

With the Player GameObject selected, in the Inspector window, locate the UI Document property that now appears in the PlayerController component.

Drag the GameUI GameObject from the Hierarchy window into the UI Document box.


Note: You must assign the GameObject from the scene, not the UILayout UXML asset from the Project window. 

After this step, your script has access to the UI and is ready to find and modify specific elements inside it.

Now that your script can access the UI document in the scene, the next step is to find the score label inside it and update its text. 

1.  Add a variable to reference the label:

In your PlayerController script, add the following line of code with your other variables:

Note: A Label is the specific UI Toolkit class used for displaying text. This line prepares a variable to hold the reference to the ScoreLabel UI element.

Inside your Start() method, add the following line of code to initialize the variable:

scoreText = uiDocument.rootVisualElement.Q<Label>("ScoreLabel");

.rootVisualElement gives you access to the top-level container of the UI layout.

.Q<Label>("ScoreLabel") uses Unity’s query system to find the first element of type Label with the name ScoreLabel.

Make sure the name exactly matches what you set in UI Builder — spelling, capitalization, and all.


After you calculate the score (the score = ... line), add the following line of code:

Notice that you’re now setting the text with the same message that you had previously logged to the Console window: "Score: " + score.

Tip: If the label doesn’t update during Play mode, double-check the following possible causes:

That the UI Document was assigned to the Player GameObject in the Inspector window.

That the ScoreLabel name in the UI Builder window exactly matches what you entered in the script.

After this step, your score will be displayed live on screen and will update smoothly during gameplay.

The score label looks fine on your current screen, but if you resize the Game view or change aspect ratios, it might shift or appear too small. With these settings in place, if someone plays your game on a huge high resolution monitor or on a small low resolution phone, the UI could change in unexpected ways.  To address this, you’ll adjust the Panel Settings so your UI scales automatically with the screen. This is an easy way to ensure your UI remains readable and correctly positioned on any resolution or device.

1.  Experiment with different Game view resolutions: 

In the Game view, use the aspect ratio dropdown to select a few different screen resolutions. 

Notice that the score text gets smaller and changes position at higher resolutions. 


In the Project window, locate the Panel Settings asset that was automatically created when you added the UI Document to the scene. It’s usually inside a folder called UI Toolkit or next to your UILayout asset.


Tip: You can search the entire Assets folder using the search bar.


3.  Set it to scale with the screen size:

With the Panel Settings asset selected, in the Inspector window, set the Scale Mode property to Scale With Screen Size.


4.  Adjust the reference resolution if needed:

If the UI elements became smaller or larger than you’d like, under the Scale Mode Parameters section, increase or decrease the Reference Resolution Width and Height properties.



After changing this setting, test different Game view aspect ratios from the dropdown in the Game view or by dragging the top edge of the Game view up and down. The score label should now stay anchored and readable regardless of window size.

If you have any errors in your code or you just want to make sure your script matches exactly what has been taught up to this point, feel free to reference or copy the final code sample below. 

Add a scoring system

1. Overview

2. Track elapsed time

3. Add a score multiplier

4. Round the score to an int

5. Set up a UI document

6. Add the score label

7. Style the label

8. Get a reference to the UI document

9. Set the score text with true score

10. Scale with screen size

11. Final script sample

12. Optional: More things to try

13. Next steps

Complete this tutorial