ZTM-Quest へのハクトーバーフェストの貢献-jsチュートリアル-php.cn

ZTM-Quest へのハクトーバーフェストの貢献

Barbara Streisand

リリース： 2024-10-23 12:59:30

オリジナル

998 人が閲覧しました

Hacktoberfest contribution to ZTM-Quest

導入

Hacktoberfest への 3 回目の寄稿では、自分が寄稿することになるとは思ってもいなかったリポジトリを見つけました。私はすでに JavaScript の実用的な知識を持っていたため、このリポジトリは特に JavaScript での 2D ゲーム開発を中心にしていました。コードベースを詳しく調査することは問題ではなかったので、このリポジトリで問題の 1 つを取り上げて貢献することにしました。

ZTMクエスト

リポジトリの名前は ZTM-Quest でした

問題

解決するために私が取り上げた問題は、Github API から貢献者の名前を動的に取得し、アセットクレジットも取得して、それらをスクロール方法は、今日の通常の 2D ゲームの動作に似ています。

さらに含まれる予定だった機能は次のとおりです

クレジットシーンをトリガーし、シーンを終了するボタンを追加します
クレジットシーンを終了/トリガーするためのオプションをキーボード経由で提供します

カプレイ

プログラム全体で KAPLAY フレームワークを使用しました。これは、JavaScript で 2D ゲームを作成するために使用できるフレームワークです

この背後にある全体的な抽象的なアイデアは、相互作用してインタラクションをトリガーできるさまざまなコンポーネントまたはキャラクターを用意することです。開発者がプログラムで提供できる背景画像は、ここではスプライトとして知られています。キャラクターやコンポーネントを配置し、さまざまなインタラクションを引き起こすことができるマップであることもあります

私が発見したのは、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)
    ]);

ログイン後にコピー

ご覧のとおり、テキスト自体よりも画像の焦点が低くなるようにオーバーレイも配置しました

表示されるテキストについては、データを取得する 2 つの関数を作成し、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% であると私は信じています。それが私がここで行ったことです。

リポジトリに関する私の経験

正直に言うと、これは私が JavaScript で 2D-GameDev フレームワークを操作する方法を知らなかった以前に取り組んできた最も興味深い問題の 1 つです。これにより、私に切望されていた経験が得られ、これに貢献することができて楽しかったです

実際、これに貢献する中で私が学んだもう 1 つのことは、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)
    ]);

ログイン後にコピー