2D Endless Runner programmieren

Gefällt Dir der Artikel? Dann teile ihn doch, um diese Informationen auch anderen zugänglich zu machen!

Seiteninhalt

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Projektstart

Wir starten mit einem neuen Unity Projekt, vergeben einen beliebigen Namen und selektieren 2D. Danach importieren wir all die für das Spiel notwendigen Grafiken. Dazu erstellst du dir einen neuen Ordner innerhalb von Unity “Sprites” und ziehst danach die Grafiken in dein Projekt.

Alle Projektdateien für den 2D Endless Runner herunterladen

Hindernisse vorbereiten

Im vorherigen Schritt haben wir beim Importieren der Grafiken auch unsere Hindernisse mit importiert. Aus diesen Hindernissen erstellen wir jetzt wiederverwendbare GameObjects.

Ziehe nun ein Hindernis deiner Wahl auf die Szene. Durch die Spielvorschau kannst du sehen wie groß die Objekte im Spiel dargestellt werden. Du kannst die Größe über den Scale-Wert jederzeit kleiner machen, vergiss hierbei nicht, dass du am besten alle Element gleichzeitig selektiert hast, damit die Werte auch übereinstimmen. Im nächsten Schritt fügen wir nun folgende Komponenten hinzu:

  • Box Collider 2D
  • Rigidbody 2D
  • Constraints – Freeze Z Rotation

Nachdem die Hindernisse nun fertig konfiguriert sind, kannst du aus den GameObjects wiederverwendbare Prefabs erstellen. Ziehe dazu die einzelnen GameObjects in den Asset des Projektordners. Hierzu ist es sinnvoll einen eigenen Ordner mit dem Namen “Prefabs” zu erstellen. Sobald du diesen Prozess verstanden hast, kannst du weitere Hindernisse die später in deinem Spiel zu finden sein sollen auf diese Weise erstellen.

Spieler erstellen

Kommen wir zum Charakter den der Spieler innerhalb unseres Projekts steuern wird. Im Ordner “Player” findest du die Grafiken dazu. Wir ziehen per Drag and Drop eine beliebige Grafik des Spielers auf die Szene und wie du siehst der Spieler scheint ein wenig zu groß zu sein, wir können über die Einstellungen die Pixelgröße festlegen (250 Pixel) und somit die standardgröße verändern oder auch jederzeit über das transformieren Werkzeug den Charakter skalieren.

Wir selektieren alle Grafiken des Spielers und per Drag and Drop auf unsere Szene, dadurch erstellst du automatisch eine Animation für den Spieler. Durch das Klicken auf den “Play”-Button siehst du die fertige Animation. Zusätzlich zur Animation fügen wir dem Spieler noch folgende Komponenten hinzu:

  • Box Collider 2D
  • Rigidbody 2D
  • Constraints – Freeze Z Rotation

Somit hast du nun die Animation des Spielers fertiggestellt und kannst auch aus diesem GameObject ein Prefab erstellen.

Gegner erstellen

Nachdem du nun sowohl die Hindernisse als auch den Spielcharakter erstellt hast kümmern wir uns um den Gegner. Im Ordner “Enemies” findest du die Ordner “Female” und “Male”. Hier hast du also die Wahl ob du in dein Spiel einen weiblichen oder männlichen Zombie einbauen möchtest. Aus den Grafiken des Zombies erstellen wir jetzt analog zum Spieler ein vorgefertigtes GameObject. Auch hier ist die Änderung der Pixel pro Einheit notwendig, da der Gegner sonst zu Groß ist.

  • Box Collider 2D
  • Rigidbody 2D
  • Constraints – Freeze Z Rotation

Nicht vergessen, sobald dein GameObject fertig ist, dies auch als Prefab in unserem “Prefabs” Ordner ablegen.

Hintergrund erstellen

Der Hintergrund ist für unser Spiel essentiell und da das Spiel auch ohne ein festes Ende sein soll können wir jetzt hier nicht einfach die Hintergrundgrafik einfügen und unendlich Mal hintereinander platzieren. Damit du also einen endlosen Hintergrund erzeugen kannst musst du folgendermaßen vorgehen:

  • 3D Object < Quad
  • Umbenennen zu “Background”
  • Mesh Collider löschen weil es für 3D ist
  • Materials Ordner erstellen
  • Neues Material “Background Material”
  • Neues Material “Ground Material”
  • Shader -> Mobile/Particles/Alpha Blended
  • Image -> Background auswählen
  • gleiches für den Ground machen
  • Background Material auf Background
  • Ground Material auf Ground
  • Script BG Scaler

Wichtig für die Scale Funktion ist, dass du dein Quad auch direkt in die Position hast, denn sonst können am Rand Lücken entstehen.

BGScaler.cs Skript

				
					using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BGScaler : MonoBehaviour {

	// Use this for initialization
	void Start () {
		float height = Camera.main.orthographicSize * 2f;
		float width = height * Screen.width / Screen.height;

		if (gameObject.name == "Background") {
			transform.localScale = new Vector3 (width, height, 0);
		} else 
		{
			transform.localScale = new Vector3 (width +3f, 2, 0);
		}
	}

	// Update is called once per frame
	void Update () {

	}
}
				
			

Hintergrund-Loop

Wenn du nun das Spiel startest, dann bewegt sich der Hintergrund, aber er wiederholt sich nicht. Es ist nur diese Textur die in die länge gezogen wird zu sehen. Um dies zu beheben, werden wir das Verhalten des Hintergrundbildes verändern. Dazu klicken wir im Assets Bereich auf die Hintergrundgrafik und bei den Eigenschaften im Inspektor wählen wir bei “Wrap Mode” anstatt “Clamp” -> “Repeat” aus. Schon kannst du dein Spiel erneut starten und hast den Loop-Effekt für deinen Hintergrund.

Für den Vordergrund gelten die gleichen Regeln wie für den Hintergrund. Zusätzlich müssen wir hier aber noch einen Box Collider 2D hinzufügen, damit der Spieler dann auch auf dieser Fläche laufen kann.

Auf unserer Lernplattform findest du übrigens ausführliche Workshops und Online-Kurse, um 2D, 3D, VR und AR Anwendungen problemlos zu erstellen. Dort erhältst du das nötige Wissen, um deine Ideen und Anwendungen perfekt umzusetzen. Teste jetzt die Lernplattform, um dir weitere, grundlegende und fortgeschrittene Fähigkeiten anzueignen.

BGLooper.cs Skript

				
					using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BGLooper : MonoBehaviour {

	public float speed = 0.1f;
	private Vector2 offset = Vector2.zero;
	private Material mat;

	// Use this for initialization
	void Start () {
		mat = GetComponent<Renderer> ().material;
		offset = mat.GetTextureOffset ("_MainTex");
	}

	// Update is called once per frame
	void Update () {
		offset.x += speed * Time.deltaTime;
		mat.SetTextureOffset ("_MainTex", offset);

	}
}
				
			

Sprung-Mechanik

  • Gravity Scale: 2 – damit er schneller fällt
  • UI -> Button erstellen
  • Canvas -> Screen Space – Camera
  • Main Camera auf Screen Space ziehen
  • UI Scaler – Scale with Screen Size
  • Reference 1280×720
  • Button auf die untere Hälft des Spiels platzieren
  • PlayerMovementScript.cs

Wichtig zu verstehen ist, dass der Spieler in der Mitte nur nach oben springen darf. Sobald er aber zurück fällt durch das Blockieren eines Hindernisses springt der Spieler nicht nur nach oben sondern auch nach vorne. Daher überprüfen wird die Position des Spielers beim Drücken der Springen-Taste.

PlayerMovement.cs Skript

				
					using System.Collections.Generic;
using UnityEngine;

public class PlayerMovement : MonoBehaviour {

	[SerializeField] float jumpForce = 4f;
	float forwardForce = 0f;

	Rigidbody2D myBody;
	bool canJump;


	// Use this for initialization
	void Start () {
		myBody = GetComponent<Rigidbody2D> ();
	}

	// Update is called once per frame
	void Update () {

	}

	public void Jump()
	{
		if (canJump) 
		{
			canJump = false;

			if (transform.position.x < 0) {
				forwardForce = 1f;
			} else
				forwardForce = 0f;

			myBody.velocity = new Vector2 (forwardForce, jumpForce);

		}
	}

	void OnCollisionEnter2D(Collision2D other)
	{
		canJump = true;
	}
}
				
			

Hindernisse fertigstellen

Damit das Spiel nun zu einer Herausforderung wird, werden wir die Hindernisse im Spiel platzieren. Ziehe dazu eines deiner Prefabs auf die Szene und starte dein Spiel. Wie du siehst, bleibt das GameObject immer an der gleichen Stelle stehen und wir erreichen mit unserem Charakter einfach nicht das Hindernis. Wie kannst du dies nun ändern? Mit Hilfe einer Bewegung entlang der negativen X-Achse. Dazu erstellen wir jetzt ein Skript und dieses Skript wenden wir auf all unsere Hindernisse an.

Obstacle.cs Skript

				
					using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Obstacle : MonoBehaviour {

	float speed = -3f;
	Rigidbody2D myBody;

	// Use this for initialization
	void Start () {
		myBody = GetComponent<Rigidbody2D> ();
	}

	// Update is called once per frame
	void Update () {
		myBody.velocity = new Vector2 (speed, 0);
	}
}
				
			

Hindernisse spawnen

Wir erstellen ein leeres GameObject mit dem Namen “Obstacle Spawner”. Diesen Spawner positionieren wir am rechten Ende der Szene, am besten du vergibst hierfür ein Icon, damit siehst du auch an welcher Stelle sich das leere GameObject sich befindet. In unserem Endless Runner sollen die Hindernisse automatisch erscheinen, dazu erstellen wir nun ein neues Skript “ObstacleSpawner”.

  • Liste aus GameObjects
  • Initialisieren

Hierbei haben wir aber nun das Problem, dass die Objekte direkt hintereinander erscheinen. Für unser Spiel ist es wichtig, dass die Objekte zu einem zufälligen Zeitpunkt erscheinen und der Spieler dadurch überrascht wird.

MyObstacleSpawner.cs Skript

				
					using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class MyObstacleSpawner : MonoBehaviour {

	[SerializeField] GameObject[] hindernisse;
	List<GameObject> hindernisseZumErscheinen = new List<GameObject>();

	// Use this for initialization
	void Start () {
		InitialisiereHindernisse ();
	}

	// Update is called once per frame
	void Update () {

	}

	void InitialisiereHindernisse()
	{
		int index = 0;
		for (int i = 0; i < hindernisse.Length; i++) 
		{
			GameObject obj = Instantiate (hindernisse [index], transform.position, Quaternion.identity);
			hindernisseZumErscheinen.Add (obj);
			index++;
			if (index == hindernisse.Length)
			{
				index = 0;
			}
		}
	}
}
				
			

Gefällt Dir der Artikel? Dann teile ihn doch, um diese Informationen auch anderen zugänglich zu machen!

Weitere Blogartikel

Bist du bereit deine eigenen Anwendungen zu erstellen?

Teste jetzt alle Online-Kurse auf der Lernplattform und erstelle problemlos deine eigenen 2D/3D, Virtual oder Augmented Reality Anwendungen.

Bist du bereit deine eigenen Anwendungen zu erstellen?

Teste jetzt alle Online-Kurse auf der Lernplattform und erstelle problemlos deine eigenen 2D/3D, Virtual oder Augmented Reality Anwendungen.