Game Development with React and PHP: How Compatible Are They? — SitePoint

  • pre:
    use Aerys\Router;
    use App\Action\HomeAction;

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

    And, from routes/api.

  • pre:
    use Aerys\Router;
    use (Router $router) = {
    $router-route(
    “GET”, “/api”, new HomeAction
    );
    };

    Though simple routes, these helped me to test the code in config.pre.

  • From App\Action;

    use Aerys\Request;
    use Aerys\Response;

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

    One final touch was to add shortcut scripts, to launch dev and prod versions of the Aerys server.

  • From composer.json:
    “scripts”: {
    “dev”: “vendor/bin/aerys -d -c loader.php”,
    “prod”: “vendor/bin/aerys -c loader.php”
    },
    “config”: {
    “process-timeout”: 0
    },

    With all of this done, I could spin up a new server, and visit http://127.0.0.1:8080 just by typing:
    composer dev

    Setting Up the Front End
    “Ok, now that I’ve got the PHP side of things relatively stable; how am I going to build the ReactJS files?

  • js”);

    $response-end(”
    div class=’app’/div
    script src='{$path}’/script
    “);
    }

    I realized I could keep creating functions that returned promises, and use them in this way to keep my code asynchronous.

Chris bootstraps a basic Stardew-Valley-like game in this game development with PHP post, using an async server, preprocessors, and ReactJS!

@SitePointPHP: Game Development with @reactjs and #PHP: How Compatible Are They? By @assertchris

“I’d like to make a multiplayer, economy-based game. Something like Stardew Valley, but with none of the befriending aspects and a player-based economy.”

I started thinking about this the moment I decided to try and build a game using PHP and React. The trouble is, I knew nothing about the dynamics of multiplayer games, or how to think about and implement player-based economies.

I wasn’t even sure I knew enough about React to justify using it. I mean, the initial interface — where I focus heavily on the server and economic aspects of the game — is perfectly suited for React. But what about when I start to make the farming /interaction aspects? I love the idea of building an isometric interface around the economic system.

I once watched a talk by dead_lugosi, where she described building a medieval game in PHP. Margaret inspired me, and that talk was one of the things that led to me writing a book about JS game development. I became determined to write about my experience. Perhaps others could learn from my mistakes in this case, too.

and in a recent version of Google Chrome.

The first thing I searched for was guidance on building multiplayer economies. I found an excellent Stack Overflow thread in which folks explained various things to think about. I got about halfway through it before realizing I may have been starting from the wrong place.

“First things first: I need a PHP server. I’m going to have a bunch of React clients, so I want something capable of high-concurrency (perhaps even WebSockets). And it needs to be persistent: things must happen even when players aren’t around.”

I went to work setting up an async PHP server — to handle high concurrency and support WebSockets. I added my recent work with PHP preprocessors to make things cleaner, and made the first couple of endpoints.

I decided to use Aerys for the HTTP and WebSocket portions of the application. This code looked very different from the Aerys docs, but that’s because I had a good idea about what I needed.

The usual process for running an Aerys app was to use a command like this:

That’s a lot of code to keep repeating, and it didn’t handle the fact that I wanted to use PHP preprocessing. I created a loader file.

branch.

, to which they could add their own routes. Finally, I created two (similar) actions.

One final touch was to add shortcut scripts, to launch dev and prod versions of the Aerys server.

just by typing:

“Ok, now that I’ve got the PHP side of things relatively stable; how am I going to build the ReactJS files? Perhaps I can use Laravel Mix…?”

I wasn’t keen on creating a whole new build chain, and Mix had been rebuilt to work well on non-Laravel projects too. Although it was relatively easy to configure and extend, it favored VueJS by default.

files. Finally, I added the Bootstrap files, for a bit of default styling.

. I planned to have single JS and CSS entry-points into the application’s various bits and bobs.

code can be removed.

switch enabled a lean production version of the bundles.

function. Turns out it worked!

gives us), so we could resolve all the templates before the server starts up.

object, it would connect to the WebSocket server, and add an event listener for new messages. I added a bit of debugging code — to make sure it was connecting properly, and sending new messages back.

We’ll get to the nitty-gritty of PHP and WebSockets later, don’t worry.

In this part, we looked at how to set up a simple async PHP web server, how to use Laravel Mix in a non-Laravel project, and even how to connect the back end and front end together with WebSockets.

Phew! That’s a lot of ground covered, and we haven’t written a single line of game code. Join me in part two, when we start to build game logic and a React interface.

This article was peer reviewed by Niklas Keller. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Game Development with React and PHP: How Compatible Are They? — SitePoint