Introduction

For my third contribution to Hacktoberfest, I found a repository that I never thought would be the one that I would contribute to, this repository was particularly centered around 2D-Game Dev in JavaScript since I already had a working knowledge of JavaScript, diving and exploring the codebase wouldn't have been a problem so I picked up one of the issues in this repository to contribute to.

ZTM-Quest

The repository was named ZTM-Quest

Issue

The issue that I picked up to solve was related to adding a end-credits scene to the game which would dynamically fetch the name of the contributors from the Github API and would also fetch the asset credits as well and display them in a scrolling manner, something similar to how normal 2D games would do nowadays.

Further features which were to be included were

• Adding a button to trigger the credits scene and to exit the scene
• Providing the options via the keyboard to exit/trigger the credits scene

KAPLAY

The entire program used the KAPLAY framework, which is a framework that can be used in Javascript to make 2D games

The whole abstract idea behind this is to have various components or characters that can interact with each other to trigger interactions. The background image that a developer could provide in the program is known as a sprite here, it could even be a map where the character or the components could be placed and can lead to different interactions

What I found was most of 2D-Game Dev involved manipulating objects geometrically in a 2D plane with the added features of interaction and dynamic resizing

Core Changes Made

The core changes that I made over here were as follows

Intuition

The intuition that followed this was that the program would have 3 components, a background, a text container or text itself, and an exit button

My first iteration of changes involved making those but later on I realized it would be better to have a sprite in the background as well, so I made the following changes

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

as can be seen, I put an overlay as well to make the image be less in focus than the text itself

as for the text that is to be displayed I made two functions that would fetch the data for me, which then I could put in the creditText field

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

}

I believe that whenever an API is being requested for the data, 90% of the task is to transform the data so that the developer can utilize it optimally, that's what I did here.

My Experience With the Repo

To be honest, this is one of the most interesting issues I have worked on before I never knew how to work with 2D-GameDev frameworks in JavaScript, this gave me the much-needed experience, and I enjoyed contributing to this

In fact one of the other things that I have learned while contributing to this was the proper usage of git rebase and git checkout -B

These commands literally saved the day for me,

I utilized git rebase frequently to make my issue branch in sync with the changes being merged into the main branch upstream and to avoid conflicts as well

I utilized git checkout -B when I used to mess up the code on the branch and wanted to go back to the latest working commit

I usually used to do the following

    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

This is my 3rd Hacktoberfest contribution and I am loving contributing to Open-Source, the amount of hands-on experience I have gained this time around is unbeatable

The above is the detailed content of Hacktoberfest contribution to ZTM-Quest. For more information, please follow other related articles on the PHP Chinese website!