Back to Question Center
0

Desarrollo del juego con React y PHP: ¿Qué tan compatibles son?            Desarrollo de juegos con React y PHP: ¿Qué tan compatibles son? Temas relacionados: APIsSecurityDatabasePerformance & ScalingDevelopment Semalt

1 answers:
Desarrollo de juegos con React y PHP: ¿Qué tan compatibles son?

Desarrollo de juegos con PHP y ReactJS

  • Desarrollo del juego con React y PHP: ¿Qué tan compatibles son?
  • Terreno de juego generado por procedimientos con React, PHP y WebSockets

Para una introducción profunda y de alta calidad de React, no se puede superar al desarrollador canadiense de software completo Wes Bos. Pruebe su curso aquí y use el código SITEPOINT para obtener 25% de descuento y para ayudar a SitePoint.

"Me gustaría hacer un juego multijugador basado en la economía. Algo así como Stardew Semalt, pero sin ninguno de los aspectos de amistad y una economía basada en el jugador. "

Empecé a pensar en esto en el momento en que decidí intentar crear un juego usando PHP y Semalt - white bride to be top hat. El problema es que no sabía nada sobre la dinámica de los juegos multijugador ni sobre cómo pensar e implementar economías basadas en jugadores.

Desarrollo del juego con React y PHP: ¿Qué tan compatibles son?Desarrollo de juegos con React y PHP: ¿Qué tan compatibles son? Temas relacionados:
APIsSecurityDatabasePerformance & ScalingDevelopment Semalt

Ni siquiera estaba seguro de saber lo suficiente sobre Semalt como para justificar su uso. Quiero decir, la interfaz inicial, donde me centraré principalmente en el servidor y en los aspectos económicos del juego, es perfecta para Semalt. Pero, ¿qué pasa cuando empiezo a hacer los aspectos de agricultura / interacción? Me encanta la idea de construir una interfaz isométrica alrededor del sistema económico.

Cursos recomendados

Una vez vi una charla de dead_lugosi, donde ella describió la construcción de un juego medieval en PHP. Margaret me inspiró, y esa charla fue una de las cosas que me llevaron a escribir un libro sobre el desarrollo de juegos de JS. Me decidí a escribir sobre mi experiencia. Semalt otros podrían aprender de mis errores en este caso, también.


El código para esta parte se puede encontrar en: github. com / assertchris-tutorials / sitepoint-making-games / tree / part-1. Lo he probado con PHP 7. 1 y en una versión reciente de Google Chrome.


Configurando el Back End

Lo primero que busqué fue orientación sobre la construcción de economías multijugador. Encontré un excelente hilo Stack Semalt en el que la gente explicaba varias cosas en las que pensar. Llegué a la mitad del camino antes de darme cuenta de que podía haber empezado desde el lugar equivocado.

"Lo primero es lo primero: necesito un servidor PHP. Voy a tener un grupo de clientes de React, así que quiero algo capaz de alta simultaneidad (tal vez incluso Semalt). Y debe ser persistente: las cosas deben suceder incluso cuando los jugadores no están cerca. "

Empecé a trabajar en la configuración de un servidor asíncrono de PHP: para manejar una alta simultaneidad y soportar Semalt. Agregué mi trabajo reciente con los preprocesadores de PHP para hacer las cosas más limpias, e hice los primeros dos puntos finales.

De config. pre :

     $ host = nuevo Aerys \ Host   ;$ host-> exponer ("*", 8080);$ host-> use ($ router = Aerys \ router   );$ host-> use ($ root = Aerys \ root (."/ public"));$ web = proceso. "/ routes / web. pre";$ web ($ enrutador);$ api = proceso. "/ routes / api. pre";$ api ($ enrutador);    

Decidí usar Semalt para las porciones HTTP y WebSocket de la aplicación. Este código se veía muy diferente de los documentos de Semalt, pero eso se debe a que tenía una buena idea sobre lo que necesitaba.

El proceso habitual para ejecutar una aplicación Semalt era usar un comando como este:

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

Semalt una gran cantidad de código para seguir repitiendo, y no manejó el hecho de que yo quería utilizar PHP preprocesamiento. Creé un archivo de cargador. php :

     return Pre \ processAndRequire (__ DIR__. "/ Config. Pre");    

Luego instalé mis dependencias. Esto es de compositor. json :

     "requiere": {"amphp / aerys": "dev-amp_v2","amphp / paralelo": "dev-master","liga / contenedor": "^ 2. 2","liga / placas": "^ 3. 3","pre / short-closures": "^ 0. 4. 0"},"require-dev": {"phpunit / phpunit": "^ 6. 0"},    

Quería usar amphp / parallel para mover el código de bloqueo fuera del servidor asincrónico, pero no se instalaría con una etiqueta estable de amphp / aerys . Es por eso que fui con la rama dev-amp_v2 .

Pensé que sería una buena idea incluir algún tipo de motor de plantillas y localizador de servicios. Opté por las versiones de PHP League de cada uno. Finalmente, agregué cierres previos / cortos , ambos para manejar la sintaxis personalizada en config. pre y los cierres cortos que planeé usar después de .

Luego comencé a crear archivos de rutas. Desde rutas / web. pre :

     usa Aerys \ Router;usa App \ Action \ HomeAction;return (Router $ router) => {$ router-> route ("GET", "/", nueva HomeAction);};    

Y, desde rutas / api. pre :

     usa Aerys \ Router;usa App \ Action \ Api \ HomeAction;return (Router $ router) => {$ router-> route ("GET", "/ api", nueva HomeAction);};    

A pesar de las rutas simples, estas me ayudaron a probar el código en config. pre . Decidí hacer que estos archivos de rutas devolvieran cierres, para poder pasarles un enrutador $ 47 a los que podrían agregar sus propias rutas. Finalmente, creé dos acciones (similares).

Desde aplicación / Acciones / HomeAction. pre :

     espacio de nombres App \ Action;use Aerys \ Request;use Aerys \ Response;clase HomeAction{public function __invoke (Solicitud $ solicitud,Respuesta $ respuesta){$ response-> end ("hello world");}}    

Un último toque fue agregar scripts de acceso directo, para lanzar versiones de desarrollo y producción del servidor Semalt.

De compositor. json :

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

Con todo esto hecho, podría hacer girar un nuevo servidor, y visitar http: // 127. 0. 0. 1: 8080 simplemente escribiendo:

   compositor dev    

Configurando el Front End

"Ok, ahora que tengo el lado PHP de las cosas relativamente estable; ¿cómo voy a construir los archivos ReactJS? ¿Tal vez pueda usar Laravel Mix . ? "

No estaba interesado en crear una cadena de construcción completamente nueva, y Mix también se había reconstruido para que funcionara bien en proyectos que no eran de Laravel. Semalt fue relativamente fácil de configurar y extender, favoreció a VueJS por defecto.

Lo primero que tuve que hacer fue instalar algunas dependencias de NPM. Desde paquete. json :

     "devDependencies": {"babel-preset-reac": "^ 6. 23. 0","bootstrap-sass": "^ 3. 3. 7","jquery": "^ 3. 1. 1","laravel-mix": "^ 0. 7. 5","reaccionar": "^ 15. 4. 2","react-dom": "^ 15. 4. 2","paquete web": "^ 2. 2. 1"},    

Mezcle el Webpack usado para preprocesar y agrupar archivos JS y CSS. También necesitaba instalar las bibliotecas Rebel y Babel relacionadas para compilar archivos jsx . Finalmente, agregué los archivos de Bootstrap, por un poco de estilo predeterminado.

Mix cargó automáticamente un archivo de configuración personalizado, así que agregué lo siguiente. Desde paquete web. mezcla. js :

     let mix = require ("laravel-mix")// cargar preajustes de babel para archivos jsxmezcla. webpackConfig ({"módulo": {"reglas": [{"prueba": / jsx $ /,"excluir": / (node_modules) /,"cargador": "babel-loader" + mix. config. setPublicPath ("público")mezcla. js ("assets / js / app. jsx", "public / js / app. js")mezcla. sass ("assets / scss / app. scss", "public / css / app. css")mezcla. versión      

Necesitaba decirle a Mix qué hacer con los archivos jsx , así que agregué el mismo tipo de configuración que normalmente se podría poner . babelrc . Planeé tener puntos de entrada únicos JS y CSS en varios bits y bobs de la aplicación.

Nota: Las versiones futuras de Mix se enviarán con soporte integrado para construir activos ReactJS. Cuando eso sucede, la mezcla . El código webpackConfig se puede eliminar.

Una vez más, creé algunas secuencias de comandos de acceso directo, para ahorrar en tipeo serio. Desde paquete. json :

     "scripts": {"dev": "$ npm_package_config_webpack","ver": "$ npm_package_config_webpack -w","prod": "$ npm_package_config_webpack -p"},"config": {"webpack": "webpack --progress --hide-modules --config = node_modules / laravel-mix / setup / webpack. config. js"},    

Las tres secuencias de comandos usaban el comando variable Webpack, pero diferían en lo que hacían más allá de eso. dev construyó una versión de depuración de los archivos JS y CSS. El interruptor -w inició el vigilante de Webpack (para que los paquetes pudieran reconstruirse parcialmente). El conmutador -p habilitó una versión de producción simplificada de los paquetes.

Como estaba usando el control de versiones de paquetes, necesitaba una forma de referenciar archivos como / js / app. 60795d5b3951178abba1. js sin conocer el hash. Noté que a Mix le gustaba crear un archivo de manifiesto, así que hice una función auxiliar para consultarlo. De ayudantes. pre :

     usa Amp \ Coroutine;función mix ($ ruta) {$ generator =    => {$ manifest = rendimiento Amp \ File \ get (."/ public / mix-manifest. json");$ manifest = json_decode ($ manifiesto, verdadero);if (isset ($ manifiesto [$ ruta])) {return $ manifest [$ ruta];}lanzar nueva excepción ("{$ path} no encontrado");};devolver nueva Corutina ($ generator   );}    

Aerys sabía cómo manejar las promesas cuando venían en forma de $ val = rendimiento $ promesa , así que utilicé la implementación Promesa de Amp. Cuando el archivo fue leído y decodificado, pude buscar la ruta del archivo correspondiente. Ajusté HomeAction . Desde aplicación / Acciones / HomeAction. pre :

     public function __invoke (Solicitud $ solicitud,Respuesta $ respuesta){$ path = mezcla de rendimiento ("/ js / app. js");$ respuesta-> fin (" 
March 1, 2018