Studio: Cursor Tap To Place

Cursor Tap to Place – Niantic Studio

This project provides a tap-to-place interaction system for Niantic Studio, allowing users to position objects in a 3D scene by tapping on the screen. It includes a cursor-following system that smoothly moves towards the tapped location and an optional scaling animation for placed objects.

Project Info

This component enables object placement using raycasting and smooth cursor movement. It supports custom height offsets for the cursor and an optional grow animation to enhance visual feedback when an object is placed.

The code is fully commented, making it easy to understand, customize, and integrate into your own projects.

Custom Component Overview

Cursor Tap to Place

This component controls the placement behavior of an entity using raycasting to detect the ground position and a smoothing algorithm to guide the cursor. When a user taps the screen, the selected object is placed at the cursor's position.

Key Features:

• Smooth Cursor Movement: The cursor gradually moves toward the tap location rather than snapping instantly.
• Customizable Cursor Height (yHeight): Allows the cursor to hover at a fixed height above the detected ground.
• Tap-to-Place Functionality: Tapping the screen moves the selected entity to the cursor’s position.
• Optional Growth Animation (growOnPlace): Newly placed objects can scale up from zero size using a variety of easing functions.

Usage

1. Setup the Component

1. Add a new component script in your Niantic Studio project.
2. Copy and paste the provided code into the new component.
3. Attach the cursor-tap-to-place component to your camera entity.

2. Configure the Component

Once added, configure the following properties in the Inspector Panel:

• Cursor Entity (cursorEntity) – The entity that follows the tap position.
• Ground (ground) – The entity that acts as the placement surface.
• Placed Entity (placedEntity) – The object that will be placed at the tap location.
• Cursor Height (yHeight) – Adjusts how high above the ground the cursor hovers.
• Grow on Place (growOnPlace) – Enables or disables scaling animation on placement.
• Grow Speed (growSpeed) – Defines how fast the object scales when placed.
• Final Scale (finalX, finalY, finalZ) – Determines the object's final size after placement.
• Easing Function (easingFunction) – Select from various easing effects like Quadratic, Bounce, or Elastic.

How It Works

1. The cursor follows the ground using raycasting, smoothly interpolating to its new position.
2. When the user taps the screen, the selected object is placed at the cursor’s position.
3. If growOnPlace is enabled, the placed object scales up to its final size over time using the selected easing function.

Tips & Best Practices

• Hide the cursor entity by default and only reveal it when needed.
• Set the placed entity’s default scale to zero if using the grow animation.
• Experiment with easing functions to achieve different visual effects for object scaling.
• Use a higher yHeight value if your cursor needs to hover above the ground (e.g., for placing objects in mid-air).

Feedback

If you have any questions or need help integrating this system into your project, feel free to reach out!

Happy developing! 🚀