Kamera-Scan-Lines in Phaser fixen

      0

Screenshot von einem Adventure Spiel. An den Seiten, links und rechts, sieht man weiße Linien, die den Spielfluss stören.

Ich möchte ein Adventure Game mit Phaser 3 entwickeln. Dabei soll die Kamera dem Protagonisten auf Schritt und Tritt folgen. Das hat bisher auch gut geklappt, allerdings kam es zwischendurch zu unerwünschten Kamera-Scan-Lines, die auf den Tiles der Map auftauchten. Scheinbar war ich aber nicht der einzige mit diesem Problem. In diesem Beitrag skizziere ich euch kurz, wie ich die Kamera-Scan-Lines repariert bekommen habe.

Um die Ausgangslage zu verdeutlichen, skizziere ich dir einmal einen Auszug aus meiner Phaser Szene:

// scenes/RandomScene.js

class RandomScene extends Phaser.Scene {
    create ()  {
        this.player = this.initPlayer()
    }

    initPlayer () {
        const playerSprite = this.add.sprite(0, 0, 'player')

        this.cameras.main.setBounds(0,0, GAME_WIDTH * 2, GAME_HEIGHT * 2)
        this.cameras.main.roundPixels = true
        this.cameras.main.startFollow(playerSprite)

        return playerSprite
    }
}

Der Code ist denke ich einfach zu verstehen,  wenn man den allgemeinen Aufbau einer Phaser Szene kennt. Wenn die Szene gestartet wird, wird zunächst der Spieler Sprite erstellt und die Kameragröße definiert. Dann wird der Kamera noch gesagt, dass sie dem Spieler Sprite folgen soll.

Nun zur Problematik. Die war, dank dem StackExchange Beitrag, schnell gefunden. Aus irgendeinem Grund hat die Phaser Kamera wohl Probleme damit einem Spieler Sprite, beziehungsweise irgendeinem Sprite, zu folgen.

Der Vorschlag war also ein Dummy Objekt zu erstellen, dem die Kamera stattdessen folgen könnte. Das habe ich dann im folgenden Code mit dem „Phaser.Geom.Point Objekt“ realisiert.

Wichtig ist dann, dass der neue Point dem Spieler folgen muss. Daher wird die Position des Points in der „update“ Methode immer wieder auf die aktuelle Position des Spielers gesetzt.

// scenes/RandomScene.js

class RandomScene extends Phaser.Scene {
    create ()  {
        this.player = this.initPlayer()
    }

    update () {
        this.cameraDolly.x = Math.floor(this.player.x)
        this.cameraDolly.y = Math.floor(this.player.y)
    }

    initPlayer () {
        const playerSprite = this.add.sprite(0, 0, 'player')

        this.cameras.main.setBounds(0,0, GAME_WIDTH * 2, GAME_HEIGHT * 2)
        this.cameraDolly = new Phaser.Geom.Point(playerSprite.x, playerSprite.y)
        this.cameras.main.startFollow(this.cameraDolly)

        return playerSprite
    }
}

Scan Lines adé!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.