ゲーム開発のためのフェイザー入門

ゲーム開発のためのフェイザー入門

Phaserは、2Dビデオゲームを作成するためのフレームワークです。 HTML5 Canvasを使用してゲームを表示し、JavaScriptを使用してゲームを実行します。バニラJavaScriptよりもPhaserを使用する利点は、ビデオゲームの物理学の多くを完了する広範なライブラリを備えているため、ゲーム自体の設計に集中できることです。





Phaserは開発時間を短縮し、ワークフローを容易にします。 Phaserで基本的なゲームを作成する方法を学びましょう。



なぜフェイザーで開発するのですか？

Phaser プログラムがループ更新に基づいているという点で、他のビジュアルプログラミング言語に似ています。 Phaserには、プリロード、作成、更新の3つの主要な段階があります。





プリロードでは、ゲームのアセットがアップロードされ、ゲームで利用できるようになります。

Createは、ゲームとすべての開始ゲーム要素を初期化します。これらの各機能は、ゲームの開始時に1回実行されます。



一方、更新はゲーム全体でループで実行されます。ゲームの要素を更新してインタラクティブにするのは主力製品です。

Phaserでゲームを開発するためのシステムをセットアップする

PhaserはHTMLとJavaScriptで実行されますが、ゲームは実際にはクライアント側ではなくサーバー側で実行されます。これは、ゲームを実行する必要があることを意味します あなたのローカルホスト 。ゲームをサーバー側で実行すると、ゲームはプログラム外の追加のファイルやアセットにアクセスできます。私はお勧め XAMPPを使用してローカルホストを設定する まだセットアップが1つもない場合。



以下のコードで起動して実行できます。基本的なゲーム環境を設定します。







var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};

var gamePiece;
var game = new Phaser.Game(config);

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}


ゲームを実行するには、ローカルホストの「img」フォルダに保存された「gamePiece」というPNG画像が必要です。簡単にするために、この例では60xgamede60pxオレンジ色の正方形を使用しています。ゲームは次のようになります。



問題が発生した場合は、ブラウザのデバッガを使用して、何が問題だったかを把握してください。 1文字でも欠落していると大混乱を引き起こす可能性がありますが、通常、デバッガーはこれらの小さなエラーをキャッチします。

セットアップコードの説明

これまでのところ、ゲームは何もしません。しかし、私たちはすでに多くの分野をカバーしています！コードをさらに詳しく見てみましょう。

Phaserゲームを実行するには、Phaserライブラリをインポートする必要があります。これは3行目で行います。この例では、ソースコードにリンクしていますが、ローカルホストにダウンロードしてファイルを参照することもできます。

マイクロソフトストアが動作しないWindows10

これまでのコードの多くは、変数であるゲーム環境を構成しています。 設定 店舗。この例では、600px x 600pxの青（16進カラーコードのCCFFFF）の背景を持つフェイザーゲームをセットアップしています。今のところ、ゲームの物理学はに設定されています アルカディアン 、しかしフェイザーは異なる物理学を提供します。

ついに、 シーン プログラムに実行するように指示します プリロード ゲームが始まる前に機能し、 作成 ゲームを開始する機能。この情報はすべて、というゲームオブジェクトに渡されます。 ゲーム 。

関連している： プログラミングとコーディングに最適な6つのノートパソコン

コードの次のセクションは、ゲームが実際に形になる場所です。プリロード関数は、ゲームを実行するために必要なものをすべて初期化する場所です。この場合、ゲームピースの画像をプリロードしました。の最初のパラメータ 。画像 画像に名前を付け、2番目は画像の場所をプログラムに指示します。

gamePieceイメージがcreate関数でゲームに追加されました。 29行目は、ゲーム領域の左上隅から左270ピクセル、下450ピクセルのスプライトとして画像gamePieceを追加していることを示しています。

私たちのゲームピースを動かす

これまでのところ、これはほとんどゲームとは言えません。一つには、ゲームピースを動かすことができません。ゲーム内で物事を変更できるようにするには、更新機能を追加する必要があります。また、config変数のシーンを調整して、ゲームを更新するときに実行する関数をゲームに指示する必要があります。

更新機能の追加

構成の新しいシーン：

scene: {
preload: preload,
create: create,
update: update
}

次に、作成関数の下に更新関数を追加します。

Windows10コンピューターをクリーンアップする方法
function update(){
}

キー入力の取得

プレーヤーが矢印キーでゲームピースを制御できるようにするには、プレーヤーが押しているキーを追跡する変数を追加する必要があります。 gamePiecesを宣言した場所の下でkeyInputsという変数を宣言します。そこで宣言すると、すべての関数が新しい変数にアクセスできるようになります。

var gamePiece;
var keyInputs;

keyInput変数は、create関数でゲームを作成するときに初期化する必要があります。

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}

これで、更新機能で、プレーヤーが矢印キーを押しているかどうかを確認し、押している場合は、それに応じてゲームピースを移動できます。以下の例では、ゲームのピースは2px移動しますが、それを大きくしたり小さくしたりすることができます。一度に1pxずつピースを動かすのは少し遅いように見えました。

function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}

ゲームには可動キャラクターが登場しました！しかし、真にゲームであるためには、目的が必要です。いくつかの障害を追加しましょう。障害物をかわすことは、8ビット時代の多くのゲームの基礎でした。

ゲームに障害物を追加する

このコード例では、障害物1と障害物2という2つの障害物スプライトを使用しています。障害物1は青い正方形で、障害物2は緑です。各画像は、ゲームピースのスプライトと同じようにプリロードする必要があります。

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}

次に、ゲームピースと同様に、各障害物スプライトを作成関数で初期化する必要があります。

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}

障害物を動かす

今回はピースを移動するために、プレイヤー入力を使用したくありません。代わりに、一方を上から下に移動し、もう一方を左から右に移動させましょう。これを行うには、次のコードを更新関数に追加します。

obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}

obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}

上記のコードは、障害物1を画面の下に移動し、障害物2をゲーム領域全体で各フレーム4px移動します。正方形が画面から外れると、新しいランダムな場所で反対側に戻ります。これにより、プレーヤーにとって常に新しい障害が発生することが保証されます。

衝突の検出

しかし、まだ完了していません。プレイヤーが障害物を通り抜けることができることに気づいたかもしれません。プレイヤーが障害物にぶつかったことをゲームに検出させ、ゲームを終了させる必要があります。

Phaser物理ライブラリにはコライダー検出器があります。必要なのは、create関数で初期化することだけです。

this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});

コライダー法には3つのパラメーターが必要です。最初の2つのパラメーターは、衝突しているオブジェクトを識別します。上記のように、2つのコライダーがセットアップされています。 1つ目は、ゲームピースが障害物1と衝突したことを検出し、2つ目のコライダーはゲームピースと障害物2の間の衝突を探します。

3番目のパラメーターは、衝突を検出したらコライダーに何をするかを指示します。この例では、関数があります。衝突が発生すると、すべてのゲーム要素が破壊されます。これでゲームが停止します。これで、プレイヤーは障害物にぶつかった場合にゲームオーバーします。

ゲーム開発をフェイザーで試してみてください

このゲームを改善してより複雑にする方法はたくさんあります。作成したプレイヤーは1人だけですが、2番目のプレイ可能なキャラクターを追加して「awsd」コントロールで制御できます。同様に、障害物を追加したり、障害物の移動速度を変えたりして実験することもできます。

Windows10の重要なプロセスがループを終了しました

この紹介で始めることができますが、学ぶべきことはまだたくさんあります。 Phaserの素晴らしい点は、ゲームの物理学の多くがあなたのために行われることです。これは、2Dゲームの設計を開始するための非常に簡単な方法です。このコードに基づいて構築を続け、ゲームを改良してください。

エラーが発生した場合は、ブラウザデバッガーが問題を発見するための優れた方法です。

共有 共有 つぶやき Eメール ChromeDevToolsを使用してウェブサイトの問題をトラブルシューティングする方法

Chromeブラウザの組み込み開発ツールを使用してウェブサイトを改善する方法を学びます。

次を読む 関連トピック
  • プログラミング
  • JavaScript
  • HTML5
  • ゲーム開発
著者について ジェニファー・シートン（21の記事が公開されました）

J. Seatonは、複雑なトピックの分析を専門とするサイエンスライターです。彼女はサスカチュワン大学で博士号を取得しています。彼女の研究は、ゲームベースの学習を利用してオンラインでの学生の関与を高めることに焦点を当てていました。彼女が働いていないとき、あなたは彼女が読書をしたり、ビデオゲームをしたり、ガーデニングをしたりしているのを見つけるでしょう。

ジェニファー・シートンのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください