コアポイント

• ReactとPHPを使用して、Reactがフロントエンドユーザーインターフェイスに責(zé)任を負(fù)い、PHPはバックエンドとゲームロジックを管理します。
• ゲーム開発のセットアッププロセスには、非同期PHPサーバーのセットアップ、非laravelプロジェクトでのLaravelミックスの使用、WebSocketを使用してバックエンドとフロントエンドを接続することが含まれます。
• Aerysライブラリは、アプリケーションのHTTPおよびWebSocket部分で使用でき、高い並行性とWebSocketをサポートできます。
Laravel Mixは、非Laravelプロジェクトであっても、ReactJSファイルを構(gòu)築するために使用でき、ビルドチェーンを構(gòu)成および拡張する簡単な方法を提供します。
WebSocketsを使用してバックエンドとフロントエンドを接続して、サーバーとクライアント間のリアルタイム通信を可能にします。

私は、PHPと反応でゲームを構(gòu)築することを決めた瞬間からこれについて考え始めました。 「スターデューバレーに似たマルチプレイヤー経済ゲームを作りたいと思っていますが、プレイヤー主導(dǎo)の経済システムは、マルチプレイヤーゲームのダイナミクス、またはプレーヤーベースの経済をどのように考えて実裝するかです。システムは無知です。

私はそれを使用することを正當(dāng)化するのに十分な反応の知識(shí)を知っているかどうかさえ確信していません。つまり、私の最初のインターフェース - 私はサーバーとゲームの経済性に非常に焦點(diǎn)を合わせていましたが、Reactに最適です。しかし、私が物事の農(nóng)業(yè)/インタラクティブな側(cè)面を作り始めたときはどうでしょうか？私は、経済システムの周りに等尺性界面を構(gòu)築するというアイデアが好きです。

PHPで中世のゲームを構(gòu)築するプロセスを説明したDead_lugosiのスピーチを見ました。マーガレットは私にインスピレーションを與えました。そのスピーチは、私がJSゲーム開発に関する本を書いた理由の1つでした。私は自分の経験を書き留めることを決意しています。他の人も私の間違いから學(xué)ぶことができるかもしれません。

---

（このパートのコードは、github.com/assertchris-tutorials/sitepoint-making-games/tree/part-1にあります。 Chromeそれはテストされました

バックエンド設(shè)定

---

私は最初に、複數(shù)人の経済システムの構(gòu)築に関するガイダンスを検索しました。私は、人々が考慮すべきさまざまなことを説明する優(yōu)れたスタックオーバーフローポストを見つけました。私は間違った場所で始めたかもしれないことに気付く前に途中でした。 「最初：PHPサーバーが必要です。反応クライアントの束がありますので、高い並行性（そしておそらくWebSocket）を処理できるものが必要です。それは永続的である必要があります。オンラインではありません 非同期PHPサーバーのセットアップを開始し、高い並行性とサポートWebSocketを処理しました。 PHP Preprocessorで最近の作業(yè)を追加して、物事をより明確にし、最初のいくつかのエンドポイントを作成しました。

：

から

$host = new Aerys\Host();
$host->expose("*", 8080);

$host->use($router = Aerys\router());
$host->use($root = Aerys\root(.."/public"));

$web = process .."/routes/web.pre";
$web($router);

$api = process .."/routes/api.pre";
$api($router);

アプリケーションのHTTPおよびWebSocket部分にAerysを使用することにしました。このコードは、Aerysのドキュメントとは大きく異なって見えますが、それは私が必要なものをよく理解しているからです。

Aerysアプリケーションを?qū)g行する通常のプロセスは、次のようなコマンドを使用することです。

vendor/bin/aerys -d -c config.php

繰り返されるコードがたくさんあり、PHPを使用して事前に処理したいという事実を処理しません。ローダーファイルを作成しました。

：loader.phpから

return Pre\processAndRequire(__DIR__ . "/config.pre");

その後、依存関係をインストールしました。これは

：composer.jsonからです

"require": {
  "amphp/aerys": "dev-amp_v2",
  "amphp/parallel": "dev-master",
  "league/container": "^2.2",
  "league/plates": "^3.3",
  "pre/short-closures": "^0.4.0"
},
"require-dev": {
  "phpunit/phpunit": "^6.0"
},

を使用して、ブロッキングコードを非同期サーバーから移動(dòng)したいのですが、安定したタグでインストールすることはできません。これが、amphp/parallelブランチを使用する理由です。 amphp/aerys dev-amp_v2ある種のテンプレートエンジンとサービスロケーターを含めることをお?jiǎng)幛幛筏蓼?。私はPHPリーグの各バージョンを選びました。最後に、カスタム構(gòu)文を

に処理するために使用され、後で使用する予定の短い閉鎖にも使用されています...

pre/short-closuresその後、ルーティングファイルの作成を開始しました。 config.pre：

から

routes/web.preおよび

：

use Aerys\Router;
use App\Action\HomeAction;

return (Router $router) => {
  $router->route(
    "GET", "/", new HomeAction
  );
};

から

routes/api.preそれは単純なルートですが、これにより

でコードをテストするのに役立ちます。私はこれらのルーティングファイルをクロージャーに戻すことにしたので、それらはそれらが獨(dú)自のルートを追加できるタイプされた

use Aerys\Router;
use App\Action\Api\HomeAction;

return (Router $router) => {
  $router->route(
    "GET", "/api", new HomeAction
  );
};

に渡すことができました。最後に、2つの（同様の）操作を作成しました。

config.pre $router：

から

app/Actions/HomeAction.pre最後のタッチは、ショートカットスクリプトを追加して、Aerysサーバーの開発と生産バージョンを開始することです。

namespace App\Action;

use Aerys\Request;
use Aerys\Response;

class HomeAction
{
  public function __invoke(Request $request,
    Response $response)
  {
    $response->end("hello world");
  }
}

：

から

composer.jsonこの結(jié)果、新しいサーバーを起動(dòng)して、次のコマンドを入力することでhttp://127.0.0.1:8080にアクセスできます。

"scripts": {
  "dev": "vendor/bin/aerys -d -c loader.php",
  "prod": "vendor/bin/aerys -c loader.php"
},
"config": {
  "process-timeout": 0
},

フロントエンド設(shè)定

composer dev

「さて、PHP側(cè)で比較的安定したものを作ったので、ReactJSファイルを構(gòu)築するにはどうすればよいですか？Laravel Mixを使用できますか？」 私は本當(dāng)に新しいビルドチェーンを作成したくありません。また、Mixは非Laravelプロジェクトでうまく機(jī)能するように再構(gòu)築されています。構(gòu)成と拡張機(jī)能は比較的簡単ですが、デフォルトではVUEJS指向です。

最初にしなければならないことは、いくつかのnpm依存関係をインストールすることです。

：

から

MIXは、Webパックを使用してPREPROCESSおよびBUNDLE JSおよびCSSファイルをバンドルします。また、JSXファイルを構(gòu)築するには、Reactおよび関連するBabelライブラリをインストールする必要があります。最後に、ブートストラップファイルを追加して、デフォルトのスタイルを取得しました。

package.jsonミックスはカスタム構(gòu)成ファイルを自動(dòng)的にロードするため、以下を追加しました。

：

"devDependencies": {
  "babel-preset-react": "^6.23.0",
  "bootstrap-sass": "^3.3.7",
  "jquery": "^3.1.1",
  "laravel-mix": "^0.7.5",
  "react": "^15.4.2",
  "react-dom": "^15.4.2",
  "webpack": "^2.2.1"
},

から

JSXファイルを処理する方法をミックスする必要があるため、通常は

に配置されているファイルと同じ構(gòu)成を追加しました。アプリケーションのさまざまな部分に単一のJSとCSSのエントリポイントを取得する予定です。 webpack.mix.js

注：MIXの將來のバージョンには、ReactJSアセットの構(gòu)築を組み込んだサポートがあります。その時(shí)點(diǎn)で、mix.webpackConfigコードを削除できます。

もう一度、私は多くのタイピング作業(yè)を保存するためにいくつかのショートカットスクリプトを作成しました。 package.json：

から

$host = new Aerys\Host();
$host->expose("*", 8080);

$host->use($router = Aerys\router());
$host->use($root = Aerys\root(.."/public"));

$web = process .."/routes/web.pre";
$web($router);

$api = process .."/routes/api.pre";
$api($router);

3つのスクリプトはすべて、WebPack変數(shù)コマンドを使用していますが、それ以外の操作が異なります。 JSファイルとCSSファイルのデバッグバージョンをビルドします。 devスイッチはWebpackモニターを起動(dòng)します（バンドルを部分的に再構(gòu)築できるように）。 -wスイッチは、合理化された生産バージョンのバンドルを有効にします。 -p

バンドルバージョンコントロールを使用しているため、ハッシュ値を知らずに

のようなファイルを參照する方法が必要です。 Mixがマニフェストファイルを作成するのが好きだと気づいたので、クエリするためにヘルパー機(jī)能を作成しました。 /js/app.60795d5b3951178abba1.js：helpers.preから

vendor/bin/aerys -d -c config.php

aerysは、

の形で表示されるときに約束を処理する方法を知っているので、AMPの約束の実裝を使用しました。ファイルを読み取り、デコードした後、一致するファイルパスを見つけることができます。調(diào)整しました$val = yield $promise。 HomeAction：app/Actions/HomeAction.preから

return Pre\processAndRequire(__DIR__ . "/config.pre");

私は、約束を返す関數(shù)を作成し続け、コードを非同期に保つためにこの方法でそれらを使用できることに気付きました。これは、

：assets/js/component.jsxの私のJSコードです

"require": {
  "amphp/aerys": "dev-amp_v2",
  "amphp/parallel": "dev-master",
  "league/container": "^2.2",
  "league/plates": "^3.3",
  "pre/short-closures": "^0.4.0"
},
"require-dev": {
  "phpunit/phpunit": "^6.0"
},

…そして

：assets/js/app.jsxから

use Aerys\Router;
use App\Action\HomeAction;

return (Router $router) => {
  $router->route(
    "GET", "/", new HomeAction
  );
};

結(jié)局のところ、MixがJSXファイルをコンパイルするかどうか、そしてAsync

関數(shù)を使用して再度見つけることができるかどうかを確認(rèn)したいだけです。うまくいきました！ mix

注：特に同じファイルをロードしている場合は、毎回関數(shù)を使用することは高価です。代わりに、サーバーブートフェーズ中にすべてのテンプレートをロードし、必要に応じて操作內(nèi)部から參照できます。開始する構(gòu)成ファイルは、Aerys（mixで與えられたものなど）を返すことができるため、サーバーが開始される前にすべてのテンプレートを解析できます。 Amp\all

websocketsを使用して接続

私はそれをほとんどセットアップしました。最後にすべきことは、WebSocketsを介してバックエンドとフロントエンドを接続することです。新しいクラスを使用して、これが比較的簡単であることがわかりました。

：app/Socket/GameSocket.preから

use Aerys\Router;
use App\Action\Api\HomeAction;

return (Router $router) => {
  $router->route(
    "GET", "/api", new HomeAction
  );
};

…そして、Webルーティングのマイナーな変更（

から）：routes/web.pre

namespace App\Action;

use Aerys\Request;
use Aerys\Response;

class HomeAction
{
  public function __invoke(Request $request,
    Response $response)
  {
    $response->end("hello world");
  }
}

JSを変更してこのWebSocketに接続し、接続されたすべての人にメッセージを送信できます。

：assets/js/component.jsxから

"scripts": {
  "dev": "vendor/bin/aerys -d -c loader.php",
  "prod": "vendor/bin/aerys -c loader.php"
},
"config": {
  "process-timeout": 0
},

新しいオブジェクトを作成すると、WebSocketサーバーに接続し、新しいメッセージのイベントリスナーを追加します。いくつかのデバッグコードを追加しました - それが正しく接続し、新しいメッセージを送信することを確認(rèn)します。 Component

後でPHPとWebSocketsの詳細(xì)について説明します。心配しないでください。

概要このセクションでは、単純な非同期PHP Webサーバーのセットアップ方法、Laravel Non-LaravelプロジェクトでLaravel Mixを使用する方法、さらにはWebSocketを使用してバックエンドとフロントエンドを接続する方法について説明しました。

すごい！多くのコンテンツをカバーしており、ゲームコードのラインをまだ作成していません。 2番目の部分に參加すると、ゲームロジックとReactインターフェイスの構(gòu)築を開始します。

（この記事はNiklas Kellerによってピアレビューされました。SitePointのすべてのピアレビュアーにSitePointのコンテンツを最高の狀態(tài)にしてくれてありがとう！） ReactJSとPHP を使用したゲーム開発の

FAQ ゲーム開発におけるReactJとPHPの互換性はどうですか？

ReactJSとPHPは、ゲーム開発において非常に互換性があります。 ReactJSは、特にシングルページアプリケーションにユーザーインターフェイスを構(gòu)築するのに最適なJavaScriptライブラリです。高速で応答性の高いWebデザインが可能になります。一方、PHPは、バックエンド開発に非常に適したサーバー側(cè)のスクリプト言語です。データベース、ユーザー認(rèn)証、サーバー側(cè)のロジックを処理できます。一緒に使用すると、ReactJはフロントエンドを処理し、動(dòng)的でインタラクティブなユーザーインターフェイスを作成し、PHPはバックエンドを管理します。

ReactJSゲームのゲームロジックにPHPを使用できますか？

はい、ReactJSゲームのゲームロジックにPHPを使用できます。 ReactJSはユーザーインターフェイスを処理しますが、PHPはサーバー側(cè)のゲームロジックを管理できます。これには、データの処理、ユーザーセッションの管理、ゲームルールの制御が含まれます。この懸念の分離は、より整然とした効率的な開発プロセスを可能にします。

ゲーム開発にReactJを使用することの利點(diǎn)は何ですか？

Reactjsは、ゲーム開発に多くの利點(diǎn)を提供します。その仮想Domは、効率的な更新とレンダリングを可能にし、ゲームをよりスムーズに実行します。また、再利用可能なコンポーネントをサポートしており、開発時(shí)間を大幅に高速化できます。さらに、ReactJSには、問題に対する解決策を見つけたり、新しいテクノロジーを?qū)Wんだりすることを容易にするための膨大なコミュニティと豊富なリソースがあります。

ゲーム開発にPHPを使用することの利點(diǎn)は何ですか？

PHPには、ゲーム開発に多くの利點(diǎn)があります。これはサーバー側(cè)の言語です。つまり、データ管理、ユーザー認(rèn)証、サーバー側(cè)のゲームロジックを処理できます。また、PHPは學(xué)習(xí)しやすく、単純な構(gòu)文を持ち、巨大な開発者コミュニティを備えています。また、非常にスケーラブルであり、多數(shù)のユーザーを処理する必要があるゲームに適しています。

ReactJとPHPでゲームの開発を開始する方法は？

ReactJとPHPでゲームの開発を開始するには、最初に両方の言語の基本を?qū)Wぶ必要があります。多くのオンラインリソースとチュートリアルが利用可能です。これらの言語に精通したら、簡単なゲームを構(gòu)築することから始めることができます。これは、基本的なテキストゲームまたはシンプルなパズルゲームです。より多くの経験を積むにつれて、より複雑なゲームの構(gòu)築を開始できます。

ReactJとPHPを使用してゲーム開発を支援するリソースまたはライブラリは何ですか？

はい、ReactJとPHPを使用してゲーム開発に役立ついくつかのリソースとライブラリがあります。 ReactJSの場合、ReactゲームキットやReactゲームエンジンなどのライブラリは非常に便利です。 PHPの場合、PHP-SDLやWyvernなどのライブラリが便利であることがあります。さらに、オンラインで多くのチュートリアル、ガイド、フォーラムがあり、詳細(xì)を?qū)Wび、ヘルプを得ることができます。

ReactJとPHPを使用してマルチプレイヤーゲームを構(gòu)築できますか？

はい、ReactJとPHPを使用してマルチプレイヤーゲームを構(gòu)築できます。 ReactJSはユーザーインターフェイスを処理できますが、PHPは、プレーヤーセッションの管理や複數(shù)のクライアントでゲーム狀態(tài)を同期するなど、サーバー側(cè)のロジックを管理できます。

ReactJとPHPを使用してどのタイプのゲームを構(gòu)築できますか？

ReactJSとPHPを使用すると、さまざまなゲームを構(gòu)築できます。これには、シンプルなテキストゲーム、パズルゲーム、プラットフォームゲーム、ロールプレイングゲーム、さらにはマルチプレイヤーオンラインゲームが含まれます?？赡苄预戏浅￥舜螭?、限界は実際にはあなたの想像力とスキルレベルです。

ReactJとPHPを使用して開発されたゲームでデータを処理する方法は？

ReactJとPHPを使用して開発されたゲームでは、サーバー側(cè)のPHPを使用してデータを処理できます。これには、プレーヤーのデータ、ゲームのステータス、スコアなどが含まれます。このデータはデータベースに保存でき、PHPを使用してこのデータベースと対話して、必要に応じてデータを取得および更新できます。

ReactJを使用して開発されたゲームでユーザー入力を処理する方法は？

ReactJSを使用して開発されたゲームでは、ユーザー入力をReactのイベント処理システムを使用して処理できます。これには、マウスクリック、キーボードキー、タッチイベントが含まれます。 Reactのイベント処理システムは強(qiáng)力で柔軟であるため、ゲームがユーザー入力にどのように応答するかを簡単に制御できます。

以上がReactとPHPによるゲーム開発：それらはどの程度互換性がありますか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。