Hacktoberfest-Beitrag zum ZTM-Quest

Einführung

Für meinen dritten Beitrag zum Hacktoberfest habe ich ein Repository gefunden, von dem ich nie gedacht hätte, dass es das sein würde, zu dem ich beitragen würde. Dieses Repository konzentrierte sich insbesondere auf die Entwicklung von 2D-Spielen in JavaScript, da ich bereits über praktische Kenntnisse in JavaScript verfügte. Das Eintauchen und Erkunden der Codebasis wäre kein Problem gewesen, also habe ich eines der Probleme in diesem Repository aufgegriffen, um dazu beizutragen.

ZTM-Quest

Das Repository wurde ZTM-Quest genannt

Ausgabe

Das Problem, das ich lösen wollte, bezog sich auf das Hinzufügen einer End-Credits-Szene zum Spiel, die dynamisch die Namen der Mitwirkenden von der Github-API abruft und auch die Asset-Credits abruft und sie in einem anzeigt scrollen, ähnlich wie es heutzutage bei normalen 2D-Spielen der Fall wäre.

Weitere Funktionen, die enthalten sein sollten, waren

• Hinzufügen einer Schaltfläche zum Auslösen der Credits-Szene und zum Verlassen der Szene
• Bereitstellen der Optionen über die Tastatur zum Beenden/Auslösen der Credits-Szene

KAPLAY

Das gesamte Programm nutzte das KAPLAY-Framework, ein Framework, das in Javascript zum Erstellen von 2D-Spielen verwendet werden kann

Die gesamte abstrakte Idee dahinter besteht darin, verschiedene Komponenten oder Charaktere zu haben, die miteinander interagieren können, um Interaktionen auszulösen. Das Hintergrundbild, das ein Entwickler im Programm bereitstellen könnte, wird hier als Sprite bezeichnet. Es könnte sich sogar um eine Karte handeln, auf der der Charakter oder die Komponenten platziert werden könnten und die zu unterschiedlichen Interaktionen führen kann

Was ich herausgefunden habe, war, dass die meisten 2D-Game-Entwicklungen darin bestanden, Objekte geometrisch in einer 2D-Ebene zu manipulieren, mit den zusätzlichen Funktionen der Interaktion und dynamischen Größenänderung

Grundlegende Änderungen vorgenommen

Die wesentlichen Änderungen, die ich hier vorgenommen habe, waren wie folgt

Intuition

Die daraus resultierende Intuition war, dass das Programm drei Komponenten haben würde, einen Hintergrund, einen Textcontainer oder den Text selbst und eine Exit-Schaltfläche

Meine erste Änderungsrunde bestand darin, diese vorzunehmen, aber später wurde mir klar, dass es besser wäre, auch ein Sprite im Hintergrund zu haben, also habe ich die folgenden Änderungen vorgenommen

    const background = k.add([
        k.sprite("backgroundImage", { width: k.width(), height: k.height() }),
        k.pos(0, 0),
        k.opacity(0.2),
        k.scale(1),
        k.z(60),
        k.fixed()
    ]);


    const overlay = k.add([
        k.rect(k.width(), k.height()),
        k.pos(0, 0),
        k.color(0, 0, 0),  // 40% transparent black
        k.z(50),  
        k.fixed()
    ]);

    // Add the credit text
    const center = k.vec2((k.canvas.width / 2), k.canvas.height / 2);
    const text = k.add([
        k.text(creditText, {
            size: 15 / camScale,
            width: k.width() * 0.9 / camScale,
            lineSpacing: 15 / camScale,
            align: "center"
        }),
        k.pos(k.width() / 2, k.height()),
        k.anchor("top"),
        k.color(255, 255, 255),
        k.z(101),
        k.scale(camScale)
    ]);

    const crossButton = k.add([
        k.rect(65, 35),
        k.color(255, 0, 0),
        k.anchor('topright'),
        k.z(101),
        k.area(),
        k.scale(1),
    ]);

    const exitText = k.add([
        k.text("Exit", { size: 26 / camScale }),
        k.color(255, 255, 255),
        k.anchor("topright"),
        k.z(102),
        k.scale(camScale)
    ]);

Wie zu sehen ist, habe ich auch eine Überlagerung angebracht, damit das Bild weniger scharf ist als der Text selbst

Was den anzuzeigenden Text betrifft, habe ich zwei Funktionen erstellt, die die Daten für mich abrufen, die ich dann in das Feld „creditText“ einfügen kann

export async function getAssets(){
    const fileSHA = await fetch("https://api.github.com/repos/zero-to-mastery/ZTM-Quest/contents/asset_credits.md")
    const data = await fileSHA.json()
    const fileContents = atob(data.content)
    return fileContents.split("\n").filter(content=>content.trim()!=='').join("\n")
}

export async function getContributors(){
    const contributors = await fetch("https://api.github.com/repos/zero-to-mastery/ZTM-Quest/contributors")
    const data = await contributors.json()
    return data.map((person)=>{
        return person.login
    }).join("\n")

}

Ich glaube, dass immer dann, wenn eine API für die Daten angefordert wird, 90 % der Aufgabe darin besteht, die Daten so zu transformieren, dass der Entwickler sie optimal nutzen kann, das habe ich hier getan.

Meine Erfahrung mit dem Repo

Um ehrlich zu sein, ist dies eines der interessantesten Themen, an denen ich gearbeitet habe, bevor ich nie wusste, wie man mit 2D-GameDev-Frameworks in JavaScript arbeitet. Dies gab mir die dringend benötigte Erfahrung und es hat mir Spaß gemacht, dazu beizutragen

Tatsächlich war eines der anderen Dinge, die ich bei meiner Mitarbeit gelernt habe, die richtige Verwendung von Git Rebase und Git Checkout -B

Diese Befehle haben mir buchstäblich den Tag gerettet,

Ich habe Git Rebase häufig verwendet, um meinen Issue-Zweig mit den Änderungen zu synchronisieren, die im Upstream-Hauptzweig zusammengeführt werden, und um auch Konflikte zu vermeiden

Ich habe git checkout -B verwendet, als ich den Code im Zweig durcheinander gebracht habe und zum neuesten funktionierenden Commit zurückkehren wollte

Normalerweise habe ich Folgendes gemacht

    const background = k.add([
        k.sprite("backgroundImage", { width: k.width(), height: k.height() }),
        k.pos(0, 0),
        k.opacity(0.2),
        k.scale(1),
        k.z(60),
        k.fixed()
    ]);


    const overlay = k.add([
        k.rect(k.width(), k.height()),
        k.pos(0, 0),
        k.color(0, 0, 0),  // 40% transparent black
        k.z(50),  
        k.fixed()
    ]);

    // Add the credit text
    const center = k.vec2((k.canvas.width / 2), k.canvas.height / 2);
    const text = k.add([
        k.text(creditText, {
            size: 15 / camScale,
            width: k.width() * 0.9 / camScale,
            lineSpacing: 15 / camScale,
            align: "center"
        }),
        k.pos(k.width() / 2, k.height()),
        k.anchor("top"),
        k.color(255, 255, 255),
        k.z(101),
        k.scale(camScale)
    ]);

    const crossButton = k.add([
        k.rect(65, 35),
        k.color(255, 0, 0),
        k.anchor('topright'),
        k.z(101),
        k.area(),
        k.scale(1),
    ]);

    const exitText = k.add([
        k.text("Exit", { size: 26 / camScale }),
        k.color(255, 255, 255),
        k.anchor("topright"),
        k.z(102),
        k.scale(camScale)
    ]);

Abschluss

Dies ist mein dritter Hacktoberfest-Beitrag und ich liebe es, zu Open-Source beizutragen. Die Menge an praktischer Erfahrung, die ich dieses Mal gesammelt habe, ist unschlagbar

Das obige ist der detaillierte Inhalt vonHacktoberfest-Beitrag zum ZTM-Quest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!