Top-Down Player Controller-tutorial voor Unity
Veel mensen zijn bekend met gamegenres als FPS (First-Person Shooter) en RTS (Real-Time Strategy), maar er zijn ook veel games die niet in één specifieke categorie vallen. Een voorbeeld van zo'n spel is Top-Down Shooter.
Top-Down Shooter is een spel waarbij de speler wordt bestuurd vanuit een bovenaanzicht.
Voorbeelden van top-down shooters zijn Hotline Miami, Hotline Miami 2, Original Grand Theft Auto, enz.

Om een Top-Down Character Controller te maken in Unity, volg je de onderstaande stappen.
Stap 1: Maak de scripts
Voor deze tutorial hebben we slechts één script nodig.
- Maak een nieuw script, noem het SC_TopDownController, verwijder alles eruit en plak de onderstaande code erin:
SC_TopDownController.cs
using UnityEngine;
[RequireComponent(typeof(Rigidbody))]
[RequireComponent(typeof(CapsuleCollider))]
public class SC_TopDownController : MonoBehaviour
{
//Player Camera variables
public enum CameraDirection { x, z }
public CameraDirection cameraDirection = CameraDirection.x;
public float cameraHeight = 20f;
public float cameraDistance = 7f;
public Camera playerCamera;
public GameObject targetIndicatorPrefab;
//Player Controller variables
public float speed = 5.0f;
public float gravity = 14.0f;
public float maxVelocityChange = 10.0f;
public bool canJump = true;
public float jumpHeight = 2.0f;
//Private variables
bool grounded = false;
Rigidbody r;
GameObject targetObject;
//Mouse cursor Camera offset effect
Vector2 playerPosOnScreen;
Vector2 cursorPosition;
Vector2 offsetVector;
//Plane that represents imaginary floor that will be used to calculate Aim target position
Plane surfacePlane = new Plane();
void Awake()
{
r = GetComponent<Rigidbody>();
r.freezeRotation = true;
r.useGravity = false;
//Instantiate aim target prefab
if (targetIndicatorPrefab)
{
targetObject = Instantiate(targetIndicatorPrefab, Vector3.zero, Quaternion.identity) as GameObject;
}
//Hide the cursor
Cursor.visible = false;
}
void FixedUpdate()
{
//Setup camera offset
Vector3 cameraOffset = Vector3.zero;
if (cameraDirection == CameraDirection.x)
{
cameraOffset = new Vector3(cameraDistance, cameraHeight, 0);
}
else if (cameraDirection == CameraDirection.z)
{
cameraOffset = new Vector3(0, cameraHeight, cameraDistance);
}
if (grounded)
{
Vector3 targetVelocity = Vector3.zero;
// Calculate how fast we should be moving
if (cameraDirection == CameraDirection.x)
{
targetVelocity = new Vector3(Input.GetAxis("Vertical") * (cameraDistance >= 0 ? -1 : 1), 0, Input.GetAxis("Horizontal") * (cameraDistance >= 0 ? 1 : -1));
}
else if (cameraDirection == CameraDirection.z)
{
targetVelocity = new Vector3(Input.GetAxis("Horizontal") * (cameraDistance >= 0 ? -1 : 1), 0, Input.GetAxis("Vertical") * (cameraDistance >= 0 ? -1 : 1));
}
targetVelocity *= speed;
// Apply a force that attempts to reach our target velocity
Vector3 velocity = r.velocity;
Vector3 velocityChange = (targetVelocity - velocity);
velocityChange.x = Mathf.Clamp(velocityChange.x, -maxVelocityChange, maxVelocityChange);
velocityChange.z = Mathf.Clamp(velocityChange.z, -maxVelocityChange, maxVelocityChange);
velocityChange.y = 0;
r.AddForce(velocityChange, ForceMode.VelocityChange);
// Jump
if (canJump && Input.GetButton("Jump"))
{
r.velocity = new Vector3(velocity.x, CalculateJumpVerticalSpeed(), velocity.z);
}
}
// We apply gravity manually for more tuning control
r.AddForce(new Vector3(0, -gravity * r.mass, 0));
grounded = false;
//Mouse cursor offset effect
playerPosOnScreen = playerCamera.WorldToViewportPoint(transform.position);
cursorPosition = playerCamera.ScreenToViewportPoint(Input.mousePosition);
offsetVector = cursorPosition - playerPosOnScreen;
//Camera follow
playerCamera.transform.position = Vector3.Lerp(playerCamera.transform.position, transform.position + cameraOffset, Time.deltaTime * 7.4f);
playerCamera.transform.LookAt(transform.position + new Vector3(-offsetVector.y * 2, 0, offsetVector.x * 2));
//Aim target position and rotation
targetObject.transform.position = GetAimTargetPos();
targetObject.transform.LookAt(new Vector3(transform.position.x, targetObject.transform.position.y, transform.position.z));
//Player rotation
transform.LookAt(new Vector3(targetObject.transform.position.x, transform.position.y, targetObject.transform.position.z));
}
Vector3 GetAimTargetPos()
{
//Update surface plane
surfacePlane.SetNormalAndPosition(Vector3.up, transform.position);
//Create a ray from the Mouse click position
Ray ray = playerCamera.ScreenPointToRay(Input.mousePosition);
//Initialise the enter variable
float enter = 0.0f;
if (surfacePlane.Raycast(ray, out enter))
{
//Get the point that is clicked
Vector3 hitPoint = ray.GetPoint(enter);
//Move your cube GameObject to the point where you clicked
return hitPoint;
}
//No raycast hit, hide the aim target by moving it far away
return new Vector3(-5000, -5000, -5000);
}
void OnCollisionStay()
{
grounded = true;
}
float CalculateJumpVerticalSpeed()
{
// From the jump height and gravity we deduce the upwards speed
// for the character to reach at the apex.
return Mathf.Sqrt(2 * jumpHeight * gravity);
}
}![]()
Stap 2: Maak de arcering
Deze tutorial vereist ook een aangepaste arcering, die nodig is om het doeldoel over de rest van de objecten te laten liggen (altijd bovenaan).
- Klik met de rechtermuisknop op de projectweergave -> Maken -> Shader -> Standaard Surface Shader
- Geef de arcering een naam "Cursor"

- Open de arcering, verwijder alles erin en plak de onderstaande code:
Cursor.shader
Shader "Custom/FX/Cursor" {
Properties {
_MainTex ("Base", 2D) = "white" {}
}
CGINCLUDE
#include "UnityCG.cginc"
sampler2D _MainTex;
half4 _MainTex_ST;
struct v2f {
half4 pos : SV_POSITION;
half2 uv : TEXCOORD0;
};
v2f vert(appdata_full v) {
v2f o;
o.pos = UnityObjectToClipPos (v.vertex);
o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
return o;
}
fixed4 frag( v2f i ) : COLOR {
return tex2D (_MainTex, i.uv.xy);
}
ENDCG
SubShader {
Tags { "RenderType" = "Transparent" "Queue" = "Transparent+100"}
Cull Off
Lighting Off
ZWrite Off
ZTest Always
Fog { Mode Off }
Blend SrcAlpha OneMinusSrcAlpha
Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma fragmentoption ARB_precision_hint_fastest
ENDCG
}
}
FallBack Off
}![]()
Stap 3: Stel de Top-Down Character Controller in
Laten we een Top-Down Character Controller opzetten:
- Maak een nieuw GameObject en roep het aan "Player"
- Maak een nieuwe kubus en schaal deze (in mijn geval is de schaal (1, 2, 1))
- Maak een tweede kubus, schaal deze veel kleiner en verplaats deze naar een hoger gelegen gebied (dit is eenvoudigweg om te weten in welke richting de speler kijkt)
- Verplaats beide kubussen binnen het "Player" object en verwijder hun BoxCollider-componenten

Laten we nu, voordat we verder gaan, het Aim-doelprefab maken:
- Maak een nieuw GameObject en roep het aan "AimTarget"
- Maak een nieuwe Quad (GameObject -> 3D Object -> Quad) en verplaats deze binnen het "AimTarget" Object
- Wijs de onderstaande textuur toe aan een quad en verander de materiaalarcering in 'Custom/FX/Cursor'


- Sla de "AimTarget" op in Prefab en verwijder deze uit Scene
![]()
Terug naar de Player-instantie:
- Koppel het SC_TopDownController-script aan het "Player"-object (u zult merken dat het een aantal extra componenten heeft toegevoegd, zoals Rigidbody en CapsuleCollider)
- Schaal de CapsuleCollider totdat deze overeenkomt met het spelermodel (in mijn geval is de hoogte ingesteld op 2 en het midden op (0, 1, 0)

- En tenslotte wijst u de variabelen "Player Camera" en "Target Indicator Prefab" toe in SC_TopDownController

De Player-instantie is nu klaar, laten we deze testen:
![]()
Alles werkt zoals verwacht.