前のパートでは、ゲームの基本構造を作成しました。このパートでは、プレイヤーの船の作成を開始し、それを動かしたり撃ったりします。
最終的なソース コードは私の GitHub リポジトリにあります
ゲームをプレイしたい場合は、ここで見つけることができます
プレーヤーのセットアップを開始する前に、キーボード イベントを処理する方法が必要です。このために、kittykatアタックの PixiJS チュートリアルにあるキーボード コントローラーを使用し、それを TypeScript に適合させました。
私の GitHub リポジトリで見つけることができます。
このプロジェクトの範囲外であるため、その仕組みについては詳しく説明しませんが、キーダウン イベントとキーアップ イベントをリッスンし、押されたキーごとにブール値を設定します。解放されました。このようにして、キーが押されたか放されたかをゲームループで確認し、それに応じてプレイヤーの動作を更新できます。
キーボード コントローラーを使用するには、上記のコミットからキーボード.ts ファイルをダウンロードし、プロジェクトの src/helpers フォルダーに配置します。
キーボード イベントを処理する方法ができたので、プレーヤーの作成を開始できます。今後のチュートリアルでは、より複雑なゲームを作成し、プロジェクトを複数のファイルに分割します。現時点では、1 つのファイルに限定します。
PixiJS アプリケーションの await app.init({ を main.ts ファイルに初期化した直後に、次のコードを追加します:
const Player = new Graphics();
Player
.poly([
0, 0,
50, 0,
25, -25,
])
.fill(0x66CCFF);
Player.x = app.screen.width / 2 - Player.width / 2;
Player.y = app.screen.height - 50;
これにより、新しい Graphics オブジェクトが作成され、poly メソッドで三角形を描画し、水色で塗りつぶして、画面の下部に配置されます。
ここでゲームを開始すると、画面の下部に小さな三角形が表示されます。しかし、私たちはそれを移動できるようにしたいと考えています。これを行うには、キーボード入力に基づいてプレーヤーの位置を更新する必要があります。
まず、キーボード入力をキャプチャする必要があります。プレーヤーを作成した場所の直後に次のコードを追加します:
let playerSpeedX = 0;
const arrowLeftHandler = KeyHandler(
"ArrowLeft",
() => playerSpeedX = -500,
() => {
// To prevent player from stopping moving if the other arrow key is pressed
if(!arrowRightHandler.isDown) {
playerSpeedX = 0;
}
}
);
const arrowRightHandler = KeyHandler(
"ArrowRight",
() => playerSpeedX = 500,
() => {
// To prevent player from stopping moving if the other arrow key is pressed
if(!arrowLeftHandler.isDown) {
playerSpeedX = 0;
}
}
);
このコードは 2 つの KeyHandler を作成します。1 つは左矢印キー用、もう 1 つは右矢印キー用です。キーが押されると、X 軸上のプレーヤーの速度は -500 または 500 に設定されます。キーが放されると、プレーヤーの速度は 0 に設定されます。このようにして、プレーヤーを左右に移動できます。
これだけではプレーヤーは移動しません。ゲーム ループ内のプレーヤーの位置を更新する必要があります。 app.ticker.add 呼び出しを次のコードに置き換えます:
app.ticker.add((ticker) => {
const delta = ticker.deltaTime / 100;
Player.x += playerSpeedX * delta;
});
コードに app.ticker.add 呼び出しがなかった場合は、KeyHandler を定義した直後に追加するだけで済みます。
これでゲームを開始すると、プレーヤーを左右に移動できるようになります。素晴らしい！撃ってみよう
プレイヤーにシュートをさせたい場合は、次の 3 つのことを考慮する必要があります:
したがって、箇条書きを作成し、それを箇条書きの配列に追加し、ゲーム ループを介して箇条書きの位置を更新し、境界外にある場合は削除するメソッドが必要です。
箇条書きを作成するメソッドから始めましょう。main.ts ファイルの最後に次のコードを追加します。
let bulletTemplate: PIXI.Graphics | undefined = undefined;
function createBullet(source: PIXI.Graphics) {
if(!bulletTemplate) {
bulletTemplate = new Graphics();
bulletTemplate
.circle(0, 0, 5)
.fill(0xFFCC66);
}
const bullet = bulletTemplate.clone();
bullet.x = source.x + 25;
bullet.y = source.y - 20;
return bullet;
}
箇条書きを作成するたびに新しい Graphics オブジェクトを作成するとコストがかかるため、新しい箇条書きを作成するたびに複製するテンプレート箇条書きを作成します。クローン作成は、毎回新しいオブジェクトを作成するよりもコストがかかりません。
次に、ソース (弾丸を撃った人) を使用して弾丸を正しい場所に配置し、グラフィックス オブジェクトを返します。
わかりました。現在、このメソッドは使用されておらず、画面には何も描画されていません。それを修正しましょう。
プレイヤーがスペースバーを押して射撃できるようにします。これには再び KeyHandler を使用します。 KeyHandler にスペースバーを使用するように指示するには、キーとして " " を与える必要があります。
左矢印キーと右矢印キーの KeyHandler を定義した場所の直後に次のコードを追加します。
KeyHandler(
" ",
() => {
const bullet = createBullet(Player);
bullets.push(bullet);
app.stage.addChild(bullet);
}
);
このコードは、スペースバーが押されたときに新しい箇条書きを作成し、それを箇条書きの配列に追加してステージに追加します。これにより、それが表示されます。
まだ弾丸配列がなかったので、Player オブジェクトを定義した直後に追加しましょう:
const bullets: PIXI.Graphics[] = [];
これでゲームを開始すると、プレイヤーを左右に動かし、弾を撃つことができるようになります。しかし、弾丸は永遠に画面上に残ります。それを修正しましょう。
ゲームループでは弾丸の位置を更新し、弾丸が範囲外に出た場合は削除します。次のコードをゲーム ループの、プレーヤーの位置を更新する場所のすぐ下に追加します。
for(let i = 0; i
<p>This part of the code will loop over all the bullets, update their position by moving them up 10 pixels and check if they are out of bounds. If they are, we remove them from the stage and the bullets array.</p>
<p>And that's it! You now have a player that can move left and right and shoot bullets. In the next part we'll create enemies and shoot them down!</p>
<hr>
<div class="ltag__link">
<div class="ltag__link__pic">
<img src="https://img.php.cn/upload/article/000/000/000/172152276283279.png" alt="スペースディフェンダー - プレイヤーの一部" loading="lazy">
</div>
<div class="ltag__link__content">
<h2>PixiJS Setup with Vite and TypeScript</h2>
<h3>Mr. Linxed ・ Apr 20</h3>
<div class="ltag__link__taglist">
#webdev
#javascript
#beginners
#tutorial
</div>
</div>
</div>
<div class="ltag__link">
<div class="ltag__link__pic">
<img src="https://img.php.cn/upload/article/000/000/000/172152276283279.png" alt="スペースディフェンダー - プレイヤーの一部" loading="lazy">
</div>
<div class="ltag__link__content">
<h2>Accomplish more with the "Cult of Done"</h2>
<h3>Mr. Linxed ・ Feb 18</h3>
<div class="ltag__link__taglist">
#productivity
#beginners
#discuss
#motivation
</div>
</div>
</div>
<hr>
<p>Don't forget to sign up to my newsletter to be the first to know about tutorials similar to these.</p>
以上がスペースディフェンダー - プレイヤーの一部の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
