Phaser 3 Masterclass: Tutorial 1

👋 Willkommen in der Welt der Sprites

Ein Sprite ist das Herzstück fast jedes 2D-Spiels. Es ist ein Bild, das auf dem Bildschirm angezeigt wird. Aber in Phaser ist ein Sprite mehr als nur ein Bild – es ist ein Game Object.

Stell dir ein Sprite wie einen Schauspieler auf einer Bühne vor:

Es hat eine Position (Wo steht es?).
Es hat ein Aussehen (Welches Kostüm trägt es?).
Es hat Eigenschaften (Ist es gedreht? Ist es transparent?).

💡 Best Practice: Arbeite immer mit einer config-Datei oder einem sauberen Konfigurationsobjekt. Trenne Logik von Daten. Phaser nutzt standardmäßig WebGL für maximale Performance.

🏗️ Das Grundgerüst (Boilerplate)

Jedes Phaser-Spiel besteht aus drei Hauptfunktionen. Das ist der "Game Loop".

1. preload()

Der Laderaum. Hier lädst du Bilder und Sounds. Das Spiel startet erst, wenn alles fertig geladen ist.

2. create()

Die Bühne. Hier platzierst du deine Sprites, fügst Text hinzu und startest die Physik.

3. update()

Die Action. Diese Funktion wird 60 Mal pro Sekunde ausgeführt. Hier steuerst du Bewegung und Kollisionen.

Der Code:

const config = {
    type: Phaser.AUTO, // Phaser wählt WebGL oder Canvas
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: { gravity: { y: 0 } }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

function preload() {
    // Bilder laden (Key, URL)
    this.load.image('player', 'https://labs.phaser.io/assets/sprites/phaser-dude.png');
}

function create() {
    // Sprite erstellen (x, y, Key)
    let player = this.add.sprite(400, 300, 'player');
}

function update() {
    // Logik hier...
}

🎮 Interaktives Labor: Erlebe es live!

Ich habe hier eine Phaser-Instanz direkt in diese Seite eingebaut. Du kannst sehen, wie Code die Welt verändert.

Tipp: Schau dir den Code im "Inspect Element" an oder lies unten weiter, um zu verstehen, wie die Buttons funktionieren.

🧠 Deep Dive: Koordinaten & Ursprungspunkte

Das ist der häufigste Fehler bei Anfängern!

1. Das Koordinatensystem

In Phaser ist (0,0) immer oben links.

x wird größer, wenn du nach rechts gehst.
y wird größer, wenn du nach unten gehst.

2. Der Ursprungspunkt (Origin)

Wenn du ein Sprite bei (400, 300) platzierst, wo genau liegt der Punkt (400, 300)? In der Mitte des Sprites? Oben links?

Standardmäßig ist der Ursprung in der Mitte (0.5, 0.5).

// Ursprung auf die obere linke Ecke setzen
sprite.setOrigin(0, 0);

// Ursprung auf die Mitte setzen (Standard)
sprite.setOrigin(0.5, 0.5);

🛠️ Wichtige Methoden & Best Practices

Skalierung (Scale)

Nutze setScale() statt die Bildgröße manuell zu ändern. Es ist performanter.

sprite.setScale(2); // Doppelte Größe

Rotation

Phaser nutzt Radiant, nicht Grad!

90 Grad = Math.PI / 2
180 Grad = Math.PI
360 Grad = Math.PI * 2

Flip (Spiegeln)

Perfekt für Platformer. Wenn der Spieler nach links läuft, spiegle das Bild einfach.

sprite.setFlipX(true); // Spiegelt horizontal

💡 Pro-Tipp: Nutze setInteractive(), um Sprites anklickbar zu machen. Das ist der einfachste Weg, UI-Buttons oder interaktive Objekte zu erstellen.

🏁 Hausaufgabe & Ausblick

Jetzt bist du dran!

Erstelle eine lokale HTML Datei.
Kopiere den Boilerplate-Code von oben.
Lade ein eigenes Bild (z.B. ein Emoji als PNG) und zeige es in der Mitte an.
Lass es sich drehen, wenn du eine Pfeiltaste drückst (Tipp: Nutze die update() Funktion).

Im nächsten Tutorial lernen wir Animationen und Physik kennen, damit sich unsere Sprites nicht nur bewegen, sondern auch springen und kollidieren können!