Contribution du Hacktoberfest à ZTM-Quest

Introduction

Pour ma troisième contribution au Hacktoberfest, j'ai trouvé un dépôt que je n'aurais jamais pensé être celui auquel je contribuerais, ce dépôt était particulièrement centré sur le développement de jeux 2D en JavaScript puisque j'avais déjà une connaissance pratique de JavaScript, plonger et explorer la base de code n'aurait pas été un problème, j'ai donc choisi l'un des problèmes de ce référentiel pour y contribuer.

Quête ZTM

Le référentiel s'appelait ZTM-Quest

Problème

Le problème que j'ai décidé de résoudre était lié à l'ajout d'une scène de générique de fin au jeu qui récupérerait dynamiquement le nom des contributeurs de l'API Github et récupèrerait également les crédits des actifs et les afficherait dans un format de fichier. manière de défilement, quelque chose de similaire à la façon dont les jeux 2D normaux feraient de nos jours.

D'autres fonctionnalités qui devaient être incluses étaient

• Ajout d'un bouton pour déclencher la scène du générique et sortir de la scène
• Fournir les options via le clavier pour quitter/déclencher la scène du générique

KAPLAY

L'ensemble du programme a utilisé le framework KAPLAY, qui est un framework qui peut être utilisé en Javascript pour créer des jeux 2D

L'idée abstraite derrière tout cela est d'avoir différents composants ou personnages qui peuvent interagir les uns avec les autres pour déclencher des interactions. L'image de fond qu'un développeur pourrait fournir dans le programme est ici connue sous le nom de sprite, il peut même s'agir d'une carte où le personnage ou les composants pourraient être placés et peut conduire à différentes interactions

Ce que j'ai découvert, c'est que la plupart des développeurs de jeux 2D impliquaient la manipulation géométrique d'objets dans un plan 2D avec les fonctionnalités supplémentaires d'interaction et de redimensionnement dynamique

Modifications fondamentales apportées

Les principaux changements que j'ai apportés ici étaient les suivants

Intuition

L'intuition qui a suivi était que le programme aurait 3 composants, un arrière-plan, un conteneur de texte ou le texte lui-même et un bouton de sortie

Ma première itération de modifications impliquait de les apporter, mais plus tard, j'ai réalisé qu'il serait préférable d'avoir également un sprite en arrière-plan, j'ai donc apporté les modifications suivantes

    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)
    ]);

comme on peut le voir, j'ai également mis une superposition pour que l'image soit moins nette que le texte lui-même

en ce qui concerne le texte à afficher, j'ai créé deux fonctions qui récupéreraient les données pour moi, que je pourrais ensuite mettre dans le champ creditText

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")

}

Je crois que chaque fois qu'une API est demandée pour les données, 90 % de la tâche consiste à transformer les données afin que le développeur puisse les utiliser de manière optimale, c'est ce que j'ai fait ici.

Mon expérience avec le repo

Pour être honnête, c'est l'un des problèmes les plus intéressants sur lesquels j'ai travaillé auparavant. Je n'ai jamais su travailler avec les frameworks 2D-GameDev en JavaScript, cela m'a donné l'expérience indispensable et j'ai aimé y contribuer

En fait, l'une des autres choses que j'ai apprises en contribuant à cela était l'utilisation appropriée de git rebase et git checkout -B

Ces commandes m'ont littéralement sauvé la mise,

J'ai fréquemment utilisé git rebase pour synchroniser ma branche de problème avec les modifications fusionnées dans la branche principale en amont et pour éviter également les conflits

J'ai utilisé git checkout -B lorsque j'avais l'habitude de gâcher le code sur la branche et que je voulais revenir au dernier commit fonctionnel

J'avais l'habitude de faire ce qui suit

    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)
    ]);

Conclusion

C'est ma troisième contribution au Hacktoberfest et j'adore contribuer à l'Open-Source, la quantité d'expérience pratique que j'ai acquise cette fois-ci est imbattable

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!