ZTM-Quest에 대한 Hacktoberfest 기여-JS 튜토리얼-php.cn

ZTM-Quest에 대한 Hacktoberfest 기여

Barbara Streisand

풀어 주다： 2024-10-23 12:59:30

원래의

983명이 탐색했습니다.

Hacktoberfest contribution to ZTM-Quest

소개

Hacktoberfest에 대한 세 번째 기여로 저는 제가 기여하게 될 것이라고는 전혀 생각하지 못했던 저장소를 찾았습니다. 이 저장소는 특히 JavaScript에 대한 실무 지식을 갖고 있었기 때문에 JavaScript의 2D 게임 개발에 중점을 두었습니다. 코드베이스를 다이빙하고 탐색하는 것은 문제가 되지 않았기 때문에 이 저장소의 문제 중 하나를 선택하여 기여했습니다.

ZTM-퀘스트

저장소 이름은 ZTM-Quest

문제

제가 해결하기 위해 선택한 문제는 Github API에서 기여자의 이름을 동적으로 가져오고 자산 크레딧도 가져와서 스크롤 방식은 오늘날 일반 2D 게임이 수행하는 방식과 유사합니다.

포함될 추가 기능은

크레딧 장면을 실행하고 장면을 종료하는 버튼 추가
키보드를 통해 크레딧 장면 종료/트리거 옵션 제공

카플레이

전체 프로그램은 2D 게임을 만들기 위해 자바스크립트에서 사용할 수 있는 프레임워크인 KAPLAY 프레임워크를 사용했습니다

이것의 전체적인 추상적 아이디어는 상호작용을 유발하기 위해 서로 상호작용할 수 있는 다양한 구성요소나 캐릭터를 갖는 것입니다. 개발자가 프로그램에서 제공할 수 있는 배경 이미지를 여기에서는 스프라이트라고 하며, 캐릭터나 구성 요소를 배치할 수 있는 맵일 수도 있고 다양한 상호 작용으로 이어질 수도 있습니다

제가 발견한 것은 대부분의 2D 게임 개발이 상호 작용 및 동적 크기 조정 기능을 추가하여 2D 평면에서 객체를 기하학적으로 조작하는 것과 관련이 있다는 것이었습니다.

핵심 변경 사항

여기서 제가 적용한 핵심 변경 사항은 다음과 같습니다

직관

이에 따른 직관은 프로그램에 배경, 텍스트 컨테이너 또는 텍스트 자체, 종료 버튼의 3가지 구성 요소가 있다는 것입니다.

첫 번째 변경 사항은 이러한 내용을 만드는 것과 관련이 있었지만 나중에 배경에도 스프라이트를 두는 것이 더 낫다는 것을 깨닫고 다음과 같이 변경했습니다.

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

로그인 후 복사

보시다시피 오버레이도 넣어서 텍스트 자체보다 이미지의 초점이 덜 맞도록 했습니다

표시할 텍스트에 대해 데이터를 가져오는 두 가지 함수를 만든 다음 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")

}

로그인 후 복사

데이터에 대한 API가 요청될 때마다 작업의 90%는 개발자가 데이터를 최적으로 활용할 수 있도록 데이터를 변환하는 것이라고 믿습니다. 이것이 제가 여기서 한 일입니다.

Repo에 대한 나의 경험

솔직히 말해서 이것은 JavaScript에서 2D-GameDev 프레임워크를 사용하여 작업하는 방법을 전혀 몰랐기 전에 제가 작업한 가장 흥미로운 문제 중 하나입니다. 이는 나에게 절실히 필요한 경험을 제공했으며 이 작업에 기여하는 것을 즐겼습니다.

사실 제가 이 작업에 기여하면서 배운 또 다른 것 중 하나는 git rebase와 git checkout -B의 올바른 사용법이었습니다

이 명령 덕분에 문자 그대로 하루를 절약할 수 있었습니다.

나는 이슈 브랜치를 메인 브랜치 업스트림에 병합되는 변경 사항과 동기화하고 충돌을 피하기 위해 자주 git rebase를 활용했습니다.

브랜치에서 코드를 엉망으로 만들고 최신 작업 커밋으로 돌아가고 싶을 때 git checkout -B를 활용했습니다

저는 주로 다음과 같은 일을 하곤 했습니다

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

로그인 후 복사