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

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:

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

1. Locate the sprite (a circular shape, usually) in your Project window under Assets > Sprites.

2. Drag the sprite into the Scene View or the Hierarchy.

3. 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

1. In the Project window, go to Assets > Scripts.

2. Create a subfolder named Gameplay.

3. Right-click in the folder and create a C# script named Target.

4. 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.

5. 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.

1. Open Tags & Layers > Sorting Layers (from the top of the Inspector).

2. Add the following layers in this order:

   • Target

   • Pin

   • CanvasLayer

   • Number

3. 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

1. Right-click the Target GameObject and choose Duplicate.

2. Rename the duplicated object to “Pin”.

3. 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

1. Right-click on Pin in the Hierarchy → Create Empty → name it e.g. PinCount.

2. 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

1. In Scripts > Gameplay, create a script called Pin.cs.

2. Paste the following code:

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 stops and becomes a child of the target, so it rotates with it.

Step 5: Apply Script & Settings

1. Drag and attach the Pin script to the Pin GameObject.

2. Set the Sorting Layer to “Pin”.

3. Set Order in Layer = 1 (to appear in front of the Target).

4. Adjust any script variables in the Inspector if needed.

Step 6: Create Pin Prefab

1. Drag the Pin GameObject into your Prefabs folder in the Project window.
   This makes it reusable at runtime.

2. 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

1. In the Hierarchy, right-click and choose Create Empty.

2. Rename the GameObject to Spawn Point.

3. 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

1. Inside your Scripts > Gameplay folder, create a new C# script named Spawner.cs.

2. Open the script and add the following:

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

1. Attach the Spawner script to the Spawn Point GameObject.

2. 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

1. Right-click in the Hierarchy → UI > Text (or UI > Text - TextMeshPro if you use TMP).

2. Rename it to ScoreText.

3. 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

1. Inside Scripts > Gameplay, create a script named ScoreManager.cs.

2. Add the following:

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

1. Create an empty GameObject in the Hierarchy, name it ScoreManager.

2. Attach the ScoreManager script to it.

3. Drag the ScoreText UI element into the scoreText field of the script.

Step 4: Update the Pin Script to Add Score

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

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

Final Checklist

 

Download Code Here: Pin the Needle Classic Game