ReactとPHPによるゲーム開発：それらはどの程度互換性がありますか？

コアポイント

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

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

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

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

---

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

バックエンド設定

---

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

：

から

$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アプリケーションを実行する通常のプロセスは、次のようなコマンドを使用することです。

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"
},

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

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

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それは単純なルートですが、これにより

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

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この結果、新しいサーバーを起動して、次のコマンドを入力することで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
},

フロントエンド設定

composer dev

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

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

：

から

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

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

：

"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ファイルを処理する方法をミックスする必要があるため、通常は

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

注：MIXの将来のバージョンには、ReactJSアセットの構築を組み込んだサポートがあります。その時点で、mix.webpackConfigコードを削除できます。

もう一度、私は多くのタイピング作業を保存するためにいくつかのショートカットスクリプトを作成しました。 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変数コマンドを使用していますが、それ以外の操作が異なります。 JSファイルとCSSファイルのデバッグバージョンをビルドします。 devスイッチはWebpackモニターを起動します（バンドルを部分的に再構築できるように）。 -wスイッチは、合理化された生産バージョンのバンドルを有効にします。 -p

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

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

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

aerysは、

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

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

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

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

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

関数を使用して再度見つけることができるかどうかを確認したいだけです。うまくいきました！ mix

注：特に同じファイルをロードしている場合は、毎回関数を使用することは高価です。代わりに、サーバーブートフェーズ中にすべてのテンプレートをロードし、必要に応じて操作内部から参照できます。開始する構成ファイルは、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サーバーに接続し、新しいメッセージのイベントリスナーを追加します。いくつかのデバッグコードを追加しました - それが正しく接続し、新しいメッセージを送信することを確認します。 Component

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

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

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

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

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

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

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

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

ゲーム開発にReactJを使用することの利点は何ですか？

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

ゲーム開発にPHPを使用することの利点は何ですか？

PHPには、ゲーム開発に多くの利点があります。これはサーバー側の言語です。つまり、データ管理、ユーザー認証、サーバー側のゲームロジックを処理できます。また、PHPは学習しやすく、単純な構文を持ち、巨大な開発者コミュニティを備えています。また、非常にスケーラブルであり、多数のユーザーを処理する必要があるゲームに適しています。

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

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

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

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

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

はい、ReactJとPHPを使用してマルチプレイヤーゲームを構築できます。 ReactJSはユーザーインターフェイスを処理できますが、PHPは、プレーヤーセッションの管理や複数のクライアントでゲーム状態を同期するなど、サーバー側のロジックを管理できます。

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

ReactJSとPHPを使用すると、さまざまなゲームを構築できます。これには、シンプルなテキストゲーム、パズルゲーム、プラットフォームゲーム、ロールプレイングゲーム、さらにはマルチプレイヤーオンラインゲームが含まれます。可能性は非常に大きく、限界は実際にはあなたの想像力とスキルレベルです。

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

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

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

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

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