ゲーム開発フェーズの開始

自分のゲームを書き始める方法をお探しですか？ phaserは、あなたが探しているゲーム開発フレームワークかもしれません...

Phaserは、2Dビデオゲームを作成するためのフレームワークです。ゲームの表示にはhtml5canvasを使用し、実行にはJavaScriptを使用しています。バニラJavaScriptの代わりにPhaserを使う利点は、ビデオゲームの物理学のほとんどを行う豊富なライブラリを持っているため、ゲーム自体の設計に集中できることです。

Phaserで基本的なゲームを作る方法を学びましょう。

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

Phaserは、プログラムが周期的な更新に基づいている点で、他のビジュアルプログラミング言語と似ています。phaserは、プリロード、作成、更新の3つの主要なフェーズを持ちます。

プリロードでは、ゲームのアセットをアップロードして利用できるようにします。

初期ゲームとすべての開始ゲーム要素を作成します。各関数は、ゲームの開始時に一度だけ実行されます。

一方、アップデートは、ゲーム中に周期的に実行され、ゲーム要素を更新してインタラクティブにする主役となるものです。

phaserでゲームを開発するためのシステム構築

PhaserはHTMLとJavaScriptで動作しますが、実はゲームはクライアントサイドではなく、サーバーサイドで実行されます。つまり、ローカルホスト上でゲームを実行する必要があるのです。サーバーサイドでゲームを実行することにより、ゲームはプログラム外の他のファイルやアセットにアクセスすることができます。まだの方は、XAMPPを使ってローカルホストを設定することをお勧めします。

次のコードは、基本的なゲーム環境を構築するためのものです。

<html> <head> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> </head> <body> <script> 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'); } </script> </body></html>

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

問題が発生した場合は、ブラウザのデバッガを使用して問題の原因を突き止めます。たった一文字でも欠けると大きなダメージになりますが、通常はデバッガがこうした小さなエラーをキャッチしてくれます。

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

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

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

これまでのところ、ほとんどのコードはゲーム環境を設定し、configという変数にその環境が格納されています。この例では、600px x 600pxの青色（16進数のカラーコードではCCFFFF）の背景を持つPhaserゲームを設定します。現在、ゲームフィジックスはアーケードに設定されていますが、Phaserでは異なるフィジックスが提供されています。

最後に、シーンは、ゲームが始まる前に、プリロード関数とクリエイト関数を実行するようにプログラムに指示します。これらの情報はすべてgameと呼ばれるゲームオブジェクトに渡されます。

関連：プログラミングやコーディングに最適なノートパソコン6選

次のコード部分は、ゲームが本当に形になる部分です。preload関数は、ゲームを実行するために必要なものを初期化する場所です。この例では、ゲームの画像をプリロードしています。imageの最初の引数は画像の名前、2番目の引数は画像がどこにあるかをプログラム側に伝えます。

create関数では、gamePieceの画像をゲームに追加しています。29行目では、プレイエリアの左上から左270px、下450pxのスプライトとして、画像gamePieceを追加しています。

チェスの駒を動かそう

今のところ、これはゲームとは呼べない。まず、駒を動かせない。ゲームの内容を変更できるようにするためには、アップデート機能を追加する必要があります。また、更新時にどの関数を実行するかをゲームに伝えるために、config変数でシナリオを調整する必要があります。

アップデート機能の追加

コンフィギュレーションに新しいシナリオを追加。

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

次に、create関数の下にupdate関数を追加します。

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();}

さて、update関数では、プレイヤーが矢印キーを押しているかどうかをチェックし、押していればそれに応じてゲームブロックを移動させることができます。下の例では、ゲームブロックを2倍で動かしていますが、この数字を大きくしたり小さくしたりすることができます。1pxずつ移動するのは少し遅いような気がします。

ゲームのキャラクターが動かせるようになった!でも、本当にゲームになるためには、ゴールが必要なんです。障害物を追加しよう。障害物回避は、8ビット時代の多くのゲームの基本です。

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

このコード例では、obstacle1 と obstacle2 という2つの障害物スプライトを使っています。obstacle1 は青い四角形、obstacle2 は緑色です。各画像は、ゲームのスプライトのようにあらかじめロードしておく必要があります。

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

次に、各障害物スプライトは、ゲームと同じように、create関数で初期化する必要があります。

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');}

障害物の移動

今回、駒を動かすために、プレイヤーの入力を利用するのは避けたい。その代わり、一方は上から下へ、もう一方は左から右へ動くようにしましょう。そのためには、以下のコードをupdate関数に追加してください。

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をプレイエリアに、それぞれ1フレームあたり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番目のパラメータは、衝突が検出された後のコライダの動作を指定します。この例では、ある関数があります。衝突が発生すると、すべてのゲーム要素が破壊され、ゲームが停止します。さて、プレイヤーが障害物にぶつかると、ゲームが終了してしまいます。

ゲーム開発におけるphaserの実験

このゲームを改良し、より複雑なものにする方法はいろいろあります。今回は1人しか作成していませんが、2人目のプレイヤーを追加し、「awsd」コントロールを使用してコントロールすることも可能です。ここでも、障害物を増やしたり、移動速度を変えてみたり。

この紹介で始めることができますが、まだ学ぶことがたくさんあります。Phaserの最も良い点の1つは、多くのゲーム物理学があなたのために作られていることです。2Dゲームのデザインを始めるには、とても簡単な方法です。このコードをビルドして、ゲームを最適化してください。

エラーが発生した場合は、ブラウザのデバッガを使用すると、問題を発見することができます。

2021-03-30 00:58 に公開
閲覧 ( 29 )
分類：プログラミング