Back to Question Center
0

Spelutveckling med React och PHP: Hur kompatibel är de?            Spelutveckling med React och PHP: Hur kompatibelt är de? Relaterade ämnen: APIsSecurityDatabasePerformance & ScalingDevelopment Semalt

1 answers:
Spelutveckling med React och PHP: Hur kompatibla är de?

Spelutveckling med PHP och ReactJS

  • Spelutveckling med React och PHP: Hur kompatibla är de?
  • Procedurellt genererad spelterräng med React, PHP och WebSockets

För en högkvalitativ och djupgående introduktion till React kan du inte gå över den kanadensiska fullstacksutvecklaren Wes Bos. Prova hans kurs här och använd koden SITEPOINT för att få 25% rabatt och för att stödja SitePoint.

"Jag skulle vilja göra ett multiplayer-ekonomibaserat spel. Något som Stardew Semalt, men med ingen av de vänskapande aspekterna och en spelarbaserad ekonomi. "

Jag började tänka på det här det ögonblicket jag bestämde mig för att försöka bygga ett spel med PHP och Semalt - doorstop wicked witch. Problemet är att jag inte visste något om dynamiken i multiplayer-spel, eller hur man tänker på och implementerar spelarbaserade ekonomier.

Spelutveckling med React och PHP: Hur kompatibel är de?Spelutveckling med React och PHP: Hur kompatibelt är de? Relaterade ämnen:
APIsSecurityDatabasePerformance & ScalingDevelopment Semalt

Jag var inte ens säker på att jag visste tillräckligt om Semalt för att motivera att använda den. Jag menar att det ursprungliga gränssnittet - där jag fokuserar mycket på servern och ekonomiska aspekter av spelet - passar perfekt för Semalt. Men vad sägs om när jag börjar göra jordbruks / interaktionsaspekterna? Jag älskar idén att bygga ett isometriskt gränssnitt runt det ekonomiska systemet.

Rekommenderade kurser

Jag såg en gång ett samtal av dead_lugosi, där hon beskrev att man byggde ett medeltida spel i PHP. Margaret inspirerade mig, och det var ett av de saker som ledde till att jag skrev en bok om JS spelutveckling. Jag blev bestämd att skriva om min erfarenhet. Semalt andra kunde också lära av mina misstag i det här fallet.


Koden för den här delen finns på: github. com / assertchris-tutorials / Sitepoint-making-games / träd / del-1. Jag har testat det med PHP 7. 1 och i en ny version av Google Chrome.


Ställa in baksidan

Det första jag letade efter var vägledning om att bygga multiplayer-ekonomier. Jag hittade en utmärkt Stack Semalt tråd där folk förklarade olika saker att tänka på. Jag fick ungefär halvvägs genom det innan jag inser att jag kanske har börjat från fel ställe.

"Första saker först: Jag behöver en PHP-server. Jag kommer att ha en massa React-klienter, så jag vill ha något som kan jämföras med varandra (kanske till och med Semalt). Och det måste vara beständigt: saker måste hända även när spelare inte är i närheten. "

Jag gick till jobbet för att skapa en async-PHP-server - för att hantera hög samtidighet och stöd Semalt. Jag lade till mitt senaste arbete med PHP preprocessorer för att göra saker renare och gjorde de första par slutpunkterna.

Från config. före :

     $ värd = ny Aerys \ Host   ;$ värd-> exponera ("*", 8080);$ värd-> använd ($ router = Aerys \ router   );$ värd-> använd ($ root = Aerys \ root (. "/ public"));$ web = process. "/ rutter / web. pre";$ Banan ($ routern);$ api = process. "/ rutter / api före";$ Api ($ routern);    

Jag bestämde mig för att använda Semalt för HTTP och WebSocket delar av ansökan. Koden såg väldigt annorlunda ut än Semalt docs, men det berodde på att jag hade en bra uppfattning om vad jag behövde.

Den vanliga processen att köra en Semalt app var att använda ett kommando så här:

   leverantör / bin / aerys -d -c config. php    

Semalt mycket kod för att fortsätta att repetera, och det hanterade inte det faktum att jag ville använda PHP preprocessing. Jag skapade en laddningsfil. php :

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

Sedan installerade jag mina beroenden. Det här är från kompositör. json :

     "kräver": {"amphp / aerys": "dev-amp_v2","amphp / parallel": "dev-master","liga / behållare": "^ 2. 2","liga / plattor": "^ 3. 3","före / kortslutningar": "^ 0. 4. 0"},"kräver-dev": {"phpunit / phpunit": "^ 6. 0"},    

Jag ville använda amphp / parallel för att flytta blockeringskoden från async-servern, men den skulle inte installeras med en stabil märkning av amphp / aerys . Därför gick jag med dev-amp_v2 filialen.

Jag trodde det skulle vara en bra idé att inkludera någon form av mallmotor och tjänstesökare. Jag valde PHP League versioner av varje. Slutligen lade jag till före / kortslutningar , både för att hantera den anpassade syntaxen i config. pre och de korta stängningarna jag planerade att använda efter .

Sedan bestämde jag mig för att skapa ruttfiler. Från rutter / webb. före :

     använd Aerys \ Router;använd App \ Action \ HomeAction;returnera (Router $ router) => {$ Router-> väg ("GET", "/", nya HomeAction);};    

Och från rutter / api. före :

     använd Aerys \ Router;använd App \ Action \ Api \ HomeAction;returnera (Router $ router) => {$ Router-> väg ("GET", "/ api", ny HomeAction);};    

Men enkla rutter hjälpte dessa mig att testa koden i config. pre . Jag bestämde mig för att göra dessa ruttfiler tillbaka stängningar, så jag kunde skicka dem en typad $ router , som de kunde lägga till egna rutter. Slutligen skapade jag två (liknande) åtgärder.

Från app / Actions / HomeAction. före :

     namnutrymme App \ Action;använd Aerys \ Request;använd Aerys \ Response;klass HomeAction{offentlig funktion __invoke (Begär $ förfrågan,Svar $ svar){$ response-> end ("hej värld");}}    

En sista touch var att lägga till genvägskript, för att starta dev och prod versioner av Semalt-servern.

från kompositör. json :

     "skript": {"dev": "leverantör / bin / aerys -d -c loader. php","prod": "leverantör / bin / aerys -c loader. php"},"config": {"process-timeout": 0},    

Med allt detta kunde jag snurra upp en ny server och besöka http: // 127. 0. 0. 1: 8080 bara genom att skriva:

   kompositör dev    

Ställa in främre änden

"Ok, nu när jag har PHP-sidan av sakerna relativt stabila; hur ska jag bygga ReactJS-filerna? Kanske kan jag använda Laravel Mix . ? "

Jag var inte angelägen om att skapa en helt ny byggkedja, och Mix hade blivit ombyggd för att fungera bra på icke-Laravel-projekt. Semalt det var relativt enkelt att konfigurera och utöka, det favoriserade VueJS som standard.

Det första jag behövde var att installera några NPM-beroenden. Från paketet. json :

     "devDependencies": {"babel-förinställd-reagera": "^ 6. 23 0","bootstrap-sass": "^ 3, 3. 7","jquery": "^ 3. 1. 1","laravel-mix": "^ 0, 7, 5","reagera": "^ 15, 4, 2","reagera dom": "^ 15, 4. 2","webpack": "^ 2. 2. 1"},    

Blanda använda Webpack för att förbehandla och bunta JS- och CSS-filer. Jag behövde också installera React- och relaterade Babel-bibliotek för att bygga jsx filer. Slutligen lade jag till Bootstrap-filer, för lite standard styling.

Mix laddade automatiskt en anpassad konfigurationsfil, så jag lade till följande. Från webpack. blanda. js :

     låt blanda = kräva ("laravel-mix")// ladda babel-förinställningar för jsx-filerblanda. webpackConfig ({"modul": {"regler": [{"test": / jsx $ /,"utesluta": / (node_modules) /,"loader": "babel-loader" + mix. config. setPublicPath ( "public")blanda. js ("tillgångar / js / app. jsx", "public / js / app. js")blanda. sass ("tillgångar / scss / app. scss", "public / css / app. css")blanda. version      

Jag behövde berätta Mix vad man ska göra med jsx filer, så jag lade till samma konfiguration som man normalt skulle kunna lägga in . babelrc . Jag planerade att ha enskilda JS- och CSS-ingångspunkter i programmets olika bitar och bobs.

Obs! Framtidiga versioner av Mix kommer att skickas med inbyggt stöd för att bygga ReactJS-tillgångar. När det händer, mixar . webpackConfig -koden kan tas bort.

Jag skapade återigen några genvägskript för att spara på allvarlig skrivning. Från paketet. json :

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

Alla tre skript använde kommandot Webpack variabel, men de skilde sig åt vad de gjorde utöver det. dev byggt en debug-version av JS- och CSS-filerna. Växeln -w startade Webpack-klockan (så att knippen kan delvis byggas om). Växeln -p aktiverade en magert produktionsversion av buntarna.

Eftersom jag använde buntversionering behövde jag ett sätt att referera till filer som / js / app. 60795d5b3951178abba1. js utan att veta hasen. Jag märkte Mix tyckte om att skapa en manifestfil, så jag gjorde en hjälpfunktion för att fråga den. Från hjälpare. före :

     använd Amp \ Coroutine;funktion mix ($ path) {$ generator =    => {$ manifest = utbyte Amp \ File \ get (. "/ public / mix-manifest. json");$ manifest = json_decode ($ manifest, true);om (isset ($ manifest [$ path])) {returnera $ manifest [$ path];}kasta ny undantag ("{$ path} not found");};returnera nya Coroutine ($ generator   );}    

Aerys visste hur man hanterade löften när de kom i form av $ val = yield $ löfte , så jag använde Amps Promise implementation. När filen lästes och avkodades kunde jag leta efter den matchande filbanan. Jag justerade HomeAction . Från app / Actions / HomeAction. före :

     allmän funktion __invoke (Begär $ förfrågan,Svar $ svar){$ path = yield mix ("/ js / app. js");$ Responsen> slut (" 
March 1, 2018