Creating Gameplay UI and Animations Project (Pin The Needle Game) in Android

Projects Inventory

2 days ago

Creating Gameplay UI and Animations

Submitted by: razormist
Operating System: Android

Step 1: Creating the Gameplay UI Canvas

Go to GameObject → UI → Image.
Unity auto-creates a Canvas, an Image, and an EventSystem if not already present.
Rename the Canvas to Gameplay UI.
In the Canvas component:
- Render Mode: Screen Space - Overlay
- Canvas Scaler:
  - UI Scale Mode: Scale With Screen Size
  - Reference Resolution: 1080 x 1920
  - Match: 0.5
Leave Graphic Raycaster as default.

Step 2: Adding the Background Image

In the Canvas, rename the created UI Image to Background.
Assign a sprite from the Sprites folder to the Source Image property.
Set RectTransform to stretch and fill the screen (Anchor preset: Alt + Stretch).
Adjust Image Type to Simple and enable Preserve Aspect if needed.

Step 3: Adding the Quit Notification Prompt

Right-click on Gameplay UI → UI → Image.
Rename it to Notification.
Set the size (e.g., 800 x 600) and position to center.
Assign a panel-style sprite or set color with transparency (alpha < 255).
Add a Canvas Group component to control its visibility.

Inside Notification:

Add a Text or TextMeshPro - Text → Rename it to NotificationText.
- Text: “Are you sure you want to quit?”
- Font Size: ~36, Alignment: Center
Add two Buttons: Cancel and Quit.
- Set their positions horizontally.
- Label them appropriately using child Text objects.

Step 4: Creating Notification Animation

Select the Notification object.
Add an Animator component.
Create and assign an Animator Controller (e.g., NotificationUI.animator).
Open the Animation window (Window → Animation → Animation).
Create a new animation clip (e.g., NotificationFadeIn):
- Animate the Canvas Group alpha: from 0 → 1 over 0.5–1s.
Create another clip (e.g., NotificationFadeOut) for reverse (1 → 0).

Step 5: Camera Animation (Optional)

Select the Main Camera.
Add an Animator and assign a new controller (CameraAnim).
In the Animation window, create a clip (e.g., ZoomIn) to animate:
- Orthographic Size (if 2D): e.g., 5 → 4
- or Position/Rotation (if 3D): pan or zoom effect
Use a script to trigger the animation at the right moment.

Step 6: Triggering Animations via Script

Example Script to Show Notification:

using UnityEngine;

public class NotificationTrigger : MonoBehaviour
{
    public Animator notificationAnimator;

    public void ShowNotification()
    {
        notificationAnimator.Play("NotificationFadeIn");
    }

    public void HideNotification()
    {
        notificationAnimator.Play("NotificationFadeOut");
    }
}

using UnityEngine;

public class NotificationTrigger : MonoBehaviour

{

public Animator notificationAnimator;

public void ShowNotification()

{

notificationAnimator.Play("NotificationFadeIn");

}

public void HideNotification()

{

notificationAnimator.Play("NotificationFadeOut");

}

Attach this to a GameObject and link the Notification animator in the inspector.

Final Output

A responsive Android UI with a background image.
A notification panel with smooth fade animations.
Optional camera animation for visual enhancement.
Scripts to trigger animations on user actions.

Pin The Needle Tutorial — Simple Classic Game for Android/iOS

Submitted by: razormist
Operating System: Android

Overview

In this tutorial, we will create a simple arcade-style game called “Pin The Needle” using the Unity Game Engine and C# scripting. Unity is a powerful cross-platform development environment used for creating both 2D and 3D games. It supports drag-and-drop functionality, real-time previews, and scripting in both C# and JavaScript.

Minimum Requirement:
Unity Version 5.6.1f1 or higher.
(Recommended: Use a recent version of Unity as older ones may cause compatibility issues.)

Tutorial Outline

1. Getting Started – Creating the Project

Launch Unity and select New Project.
Set the project name as Pin The Needle.
Choose 2D as the project type.
Select a location and create the project.

2. Setting Up – Resolution, Platform & Asset Organization

Change platform to Android via File → Build Settings → Android → Switch Platform.
Set game resolution for portrait mode (e.g., 1080×1920).
Create folders in the Assets directory:
- Scripts/
- Prefabs/
- Sprites/
- Scenes/
- Animations/

3. Creating Gameplay UI and Animations

Set up a Canvas for UI elements (GameObject → UI → Image).
Add a Background, a Notification prompt, and buttons.
Animate elements using the Animator and Animation windows.
Use CanvasGroup.alpha to create fade effects for prompts and popups.

4. Creating Rotator and Pin Object

Create a Rotator object:
- A simple circle or gear sprite.
- Add a rotation script to make it rotate over time.
Create a Pin prefab:
- A small stick or needle sprite.
- Position it below the rotator for launch.

5. Creating Spawn Point and Scoring

Set a spawn point where pins will instantiate.
Create a Score UI using Text or TextMeshPro.
Add a script to handle score increment when a pin is successfully placed.

6. Creating Gameplay Controller

Create a script to:
- Launch pins on tap.
- Check for collision with existing pins.
- Handle win/lose logic.
Attach this script to an empty GameObject called GameController.

7. Creating Success and Failed Scenes

Create two new scenes: SuccessScene and FailScene.
Add buttons to restart or return to menu.
Load these scenes based on the game state using SceneManager.LoadScene().

8. Publishing the Game

Go to File → Build Settings.
Set the platform to Android or iOS.
Configure:
- Package Name
- Icon
- Splash Screen
Click Build and Run to deploy to your mobile device.

Result

After following the steps, you’ll have a working version of Pin The Needle with:

Rotating central object
Launching pins
Collision detection
UI and scoring system
Success and fail conditions

PART 1: Creating the Rotator (Target Object)

Objective

Create a circular GameObject that continuously rotates. The pins will attach to this.

Step 1: Add the Target Sprite to the Scene

Locate the sprite (a circular shape, usually) in your Project window under Assets > Sprites.
Drag the sprite into the Scene View or the Hierarchy.
Rename the GameObject to “Target” for clarity.

Step 2: Set Up Components

Add Circle Collider 2D

With Target selected, click Add Component.
Search for and add Circle Collider 2D.
Check the “Is Trigger” checkbox.
This makes the collider act as a trigger (no physical collision, just detection).

Step 3: Create a Script for Rotation

In the Project window, go to Assets > Scripts.
Create a subfolder named Gameplay.
Right-click in the folder and create a C# script named Target.
Double-click to open and paste the following code:

Explanation:

speed: Determines how fast the object rotates.
Update(): Called every frame. This rotates the object along the Z-axis.

Attach the script to the Target GameObject:
- Drag the script to the Inspector of the Target.
- In the Inspector, set Speed = 100.

Step 4: Sorting Layers

Sorting Layers define render order in 2D.

Open Tags & Layers > Sorting Layers (from the top of the Inspector).
Add the following layers in this order:
- Target
- Pin
- CanvasLayer
- Number
Assign the Target GameObject to the “Target” sorting layer.

PART 2: Creating the Pin Object

Objective

Create the pin GameObject that is thrown toward the target and sticks to it upon contact.

Step 1: Duplicate the Target

Right-click the Target GameObject and choose Duplicate.
Rename the duplicated object to “Pin”.
Remove the Target script from the Pin.

Step 2: Configure Pin Components

Add Rigidbody2D

Add a Rigidbody2D to the Pin.
Set Body Type = Kinematic.
Kinematic means it won’t be affected by physics forces (gravity, etc.) but can be moved by scripts.

Add AudioSource

Add an AudioSource component.
Uncheck Play On Awake.
This allows the audio to be played via script only.

Step 3: Add Child GameObject and UI

Right-click on Pin in the Hierarchy → Create Empty → name it e.g. PinCount.
Create a UI > Text inside the PinCount GameObject.
- This will show the pin count or any related information.
- Customize the Text, Font, Size, Color, etc., as per UI design.

Step 4: Create the Pin Script

In Scripts > Gameplay, create a script called Pin.cs.
Paste the following code:

csharp

using UnityEngine;

public class Pin : MonoBehaviour
{
    public float moveSpeed = 20f;
    private bool isPinned = false;
    private Transform target;

    void Start()
    {
        target = GameObject.Find("Target").transform;
    }

    void Update()
    {
        if (!isPinned)
        {
            transform.Translate(Vector3.up * moveSpeed * Time.deltaTime);
        }
    }

    void OnTriggerEnter2D(Collider2D col)
    {
        if (col.tag == "Target")
        {
            isPinned = true;
            transform.SetParent(col.transform);
        }
    }
}

using UnityEngine;

public class Pin : MonoBehaviour

{

public float moveSpeed = 20f;

private bool isPinned = false;

private Transform target;

void Start()

{

target = GameObject.Find("Target").transform;

}

void Update()

{

if (!isPinned)

{

transform.Translate(Vector3.up * moveSpeed * Time.deltaTime);

}

void OnTriggerEnter2D(Collider2D col)

{

if (col.tag == "Target")

{

isPinned = true;

transform.SetParent(col.transform);

}

Explanation:

moveSpeed: Speed of the pin moving upward.
In Update(), the pin moves upward constantly.
When the pin collides with the Target (detected by OnTriggerEnter2D()), it s tops and becomes a child of the target, so it rotates with it.

Step 5: Apply Script & Settings

Drag and attach the Pin script to the Pin GameObject.
Set the Sorting Layer to “Pin”.
Set Order in Layer = 1 (to appear in front of the Target).
Adjust any script variables in the Inspector if needed.

Step 6: Create Pin Prefab

Drag the Pin GameObject into your Prefabs folder in the Project window.
This makes it reusable at runtime.
Delete the Pin GameObject from the scene.
You’ll spawn it via script when the player throws a pin.

PART 3: Creating the Spawn Point (Spawner)

Objective

To spawn a Pin prefab from a fixed position every time the player taps the screen.

Step 1: Create a Spawn Point GameObject

In the Hierarchy, right-click and choose Create Empty.
Rename the GameObject to Spawn Point.
Position it slightly below the target (where the pin should originate from).
- Example: Set its Transform.Position to something like (0, -4, 0) (adjust as needed).

Step 2: Create the Spawner Script

Inside your Scripts > Gameplay folder, create a new C# script named Spawner.cs.
Open the script and add the following:

csharp

using UnityEngine;

public class Spawner : MonoBehaviour
{
    public GameObject pinPrefab;
    public Transform spawnPoint;

    void Update()
    {
        // Touch for mobile OR click for editor testing
        if (Input.GetMouseButtonDown(0) || Input.touchCount > 0)
        {
            if (Input.touchCount > 0 && Input.GetTouch(0).phase != TouchPhase.Began)
                return;

            Instantiate(pinPrefab, spawnPoint.position, spawnPoint.rotation);
        }
    }
}

using UnityEngine;

public class Spawner : MonoBehaviour

{

public GameObject pinPrefab;

public Transform spawnPoint;

void Update()

{

// Touch for mobile OR click for editor testing

if (Input.GetMouseButtonDown(0) || Input.touchCount > 0)

{

if (Input.touchCount > 0 && Input.GetTouch(0).phase != TouchPhase.Began)

return;

Instantiate(pinPrefab, spawnPoint.position, spawnPoint.rotation);

}

Explanation:

pinPrefab: The Pin object to be spawned.
spawnPoint: The position where the pin will appear.
Update() checks for mouse click or screen tap and spawns the pin at the defined location.

Step 3: Attach and Configure

Attach the Spawner script to the Spawn Point GameObject.
In the Inspector:
- Drag the Pin prefab into the Pin Prefab field.
- Drag the Spawn Point itself into the Spawn Point field.

Now when the user taps or clicks, a pin will be instantiated at the correct position.

PART 4: Creating the Scoring System

Objective

To keep track of the number of successfully pinned objects and display the score on the screen.

Step 1: Add UI Text for Score

Right-click in the Hierarchy → UI > Text (or UI > Text - TextMeshPro if you use TMP).
Rename it to ScoreText.
Customize it in the Inspector:
- Font Size: e.g., 36
- Alignment: Center
- Position: Top-center of screen (e.g., (0, 200, 0) for anchored canvas)
- Color: White or something visible
- Initial Text: Score: 0

Step 2: Create a ScoreManager Script

Inside Scripts > Gameplay, create a script named ScoreManager.cs.
Add the following:

csharp

using UnityEngine;
using UnityEngine.UI;

public class ScoreManager : MonoBehaviour
{
    public static ScoreManager Instance;

    public Text scoreText;
    private int score = 0;

    void Awake()
    {
        if (Instance == null)
            Instance = this;
        else
            Destroy(gameObject);
    }

    public void AddScore()
    {
        score++;
        scoreText.text = "Score: " + score;
    }
}

using UnityEngine;

using UnityEngine.UI;

public class ScoreManager : MonoBehaviour

{

public static ScoreManager Instance;

public Text scoreText;

private int score = 0;

void Awake()

{

if (Instance == null)

Instance = this;

else

Destroy(gameObject);

}

public void AddScore()

{

score++;

scoreText.text = "Score: " + score;

}

Explanation:

ScoreManager uses a singleton pattern so other scripts (like Pin) can access it easily.
AddScore() increases the score and updates the UI.

Step 3: Link UI to Script

Create an empty GameObject in the Hierarchy, name it ScoreManager.
Attach the ScoreManager script to it.
Drag the ScoreText UI element into the scoreText field of the script.

Step 4: Update the Pin Script to Add Score

Open the Pin.cs script and modify the OnTriggerEnter2D() method like this:

csharp

void OnTriggerEnter2D(Collider2D col)
{
    if (col.tag == "Target")
    {
        isPinned = true;
        transform.SetParent(col.transform);
        ScoreManager.Instance.AddScore();  // Add this line
    }
}

void OnTriggerEnter2D(Collider2D col)

{

if (col.tag == "Target")

{

isPinned = true;

transform.SetParent(col.transform);

ScoreManager.Instance.AddScore(); // Add this line

}

Now each time a Pin hits the Target, the score increases by 1.

Final Checklist

Feature	Done?
Spawn Point created	✅
Pin spawns on tap/click	✅
Pin prefab configured	✅
UI Text created for score	✅
ScoreManager script functional	✅
Score increases on successful pin	✅

PART 6: Creating the Success Scene

Objective

To display a success message when the player completes a level and provide a button to go to the next level.

Step 1: Create the Success Scene

Go to File > New Scene, then Save As → name it Success.
In the Hierarchy, right-click → UI > Canvas.
Also add UI > Event System if not automatically created.

Step 2: Add a UI Image for Background

Inside the Canvas, right-click → UI > Image.
Select the image in the Inspector.
- Assign a suitable sprite from Sprites folder to the Source Image field.
- Resize it to cover the full screen.

Step 3: Add Success Text and Button

Inside the Canvas:
- Add a Text object → set it to something like “Level Complete!”.
- Add a Button below the text.
  - Change its label to “Next Level”.
  - Adjust color, font, size, alignment as needed.

Step 4: Create the NextLevelController Script

Create a new Empty GameObject in the scene, name it Next Level Controller.
In Scripts > GameControllers, create a script: NextLevelController.cs.
Add this code:

csharp

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class GameplayController : MonoBehaviour
{
    public static GameplayController instance;

    [Header("Game Objects")]
    public GameObject spawnPoint;
    public GameObject pinPrefab;
    public Text scoreText;
    public GameObject gameOverPanel;

    [Header("Gameplay")]
    public float spawnDelay = 0.3f;
    private bool isGameOver = false;
    private int score = 0;

    void Awake()
    {
        if (instance == null)
            instance = this;
        else
            Destroy(gameObject);
    }

    void Start()
    {
        StartCoroutine(SpawnPinRoutine());
    }

    IEnumerator SpawnPinRoutine()
    {
        while (!isGameOver)
        {
            Instantiate(pinPrefab, spawnPoint.transform.position, Quaternion.identity);
            yield return new WaitForSeconds(spawnDelay);
        }
    }

    public void IncreaseScore()
    {
        if (isGameOver) return;
        score++;
        scoreText.text = "Score: " + score;
    }

    public void GameOver()
    {
        isGameOver = true;
        gameOverPanel.SetActive(true);
    }

    public void RestartGame()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex);
    }
}

using UnityEngine;

using UnityEngine.UI;

using UnityEngine.SceneManagement;

public class GameplayController : MonoBehaviour

{

public static GameplayController instance;

[Header("Game Objects")]

public GameObject spawnPoint;

public GameObject pinPrefab;

public Text scoreText;

public GameObject gameOverPanel;

[Header("Gameplay")]

public float spawnDelay = 0.3f;

private bool isGameOver = false;

private int score = 0;

void Awake()

{

if (instance == null)

instance = this;

else

Destroy(gameObject);

}

void Start()

{

StartCoroutine(SpawnPinRoutine());

}

IEnumerator SpawnPinRoutine()

{

while (!isGameOver)

{

Instantiate(pinPrefab, spawnPoint.transform.position, Quaternion.identity);

yield return new WaitForSeconds(spawnDelay);

}

public void IncreaseScore()

{

if (isGameOver) return;

score++;

scoreText.text = "Score: " + score;

}

public void GameOver()

{

isGameOver = true;

gameOverPanel.SetActive(true);

}

public void RestartGame()

{

SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex);

}

Step 5: Hook Up the Button

Select the Next Level Button in the Canvas.
In the OnClick() section:
- Drag the Next Level Controller GameObject into the slot.
- Select the method: NextLevelController → LoadNextLevel().

PART 7: Creating the Failed Scene

Objective

To show a “Level Failed” screen with a button to retry the current level.

Step 1: Create the Failed Scene

Duplicate or create a new scene, name it Failed.
Copy these from your Success scene or Gameplay scene:
- Canvas
- EventSystem
Paste them into the Failed Scene‘s Hierarchy.

Step 2: Update UI Text and Button

Change the main Text to something like “Level Failed!”.
Change the Button Label to “Try Again” or “Retry”.

Step 3: Create the RestartController Script

Create a new Empty GameObject → rename it to Restart Controller.
In Scripts > GameControllers, create a script: RestartController.cs.
Add the following code:

csharp

using UnityEngine;
using UnityEngine.SceneManagement;

public class RestartController : MonoBehaviour
{
    public void RestartLevel()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex);
    }
}

using UnityEngine;

using UnityEngine.SceneManagement;

public class RestartController : MonoBehaviour

{

public void RestartLevel()

{

SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex);

}

Step 4: Hook Up the Retry Button

Select the Retry Button in the Canvas.
In the OnClick() section:
- Drag the Restart Controller GameObject into the slot.
- Select the method: RestartController → RestartLevel().

Final Integration Tips

Task	Details
Add all scenes to Build Settings	`File > Build Settings > Add Open Scenes`
Use SceneManager.LoadScene()	To move between scenes
UI elements reuse	Canvas, Buttons, Text for consistency
Button OnClick() binding	Drag GameObject with script into slot and select method

Download Code Here: Pin the Needle Classic Game