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
git checkout -B issue-branch latest-working-commit
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
Top comments (0)