Back to Question Center
0

Game Development med React og PHP: Hvor kompatible er de?            Game Development med React og PHP: Hvor kompatibel er de? Relaterte emner: APIerSikkerhetsdatabasePerformance & ScalingDevelopment Semalt

1 answers:
Game Development med React og PHP: Hvor kompatible er de?

Spillutvikling med PHP og ReactJS

(1. 3)
  • Spillutvikling med React og PHP: Hvor kompatibel er de?
  • Produsert generert spill terreng med React, PHP og WebSockets
  • For en høyverdig og grundig introduksjon til React, kan du ikke gå forbi den kanadiske fullstablerutvikleren Wes Bos. Prøv kurset her, og bruk koden SITEPOINT for å få 25% rabatt og for å støtte SitePoint - portable monitor with battery.

    "Jeg vil gjerne lage et multiplayer, økonomibasert spill. Noe som Stardew Semalt, men med ingen av de vennskapende aspektene og en spillerbasert økonomi. "

    Jeg begynte å tenke på dette øyeblikket jeg bestemte meg for å prøve å bygge et spill ved hjelp av PHP og Semalt. Problemet er at jeg ikke visste noe om dynamikken i multiplayer-spill, eller hvordan å tenke på og implementere spillerbaserte økonomier.

    Game Development med React og PHP: Hvor kompatible er de?Game Development med React og PHP: Hvor kompatibel er de? Relaterte emner:
APIsSecurityDatabasePerformance & ScalingDevelopment Semalt

    Jeg var ikke engang sikker på at jeg visste nok om Semalt å rettferdiggjøre å bruke den. Jeg mener, det første grensesnittet - der jeg fokuserer tungt på serveren og økonomiske aspekter av spillet - passer perfekt til Semalt. Men hva med når jeg begynner å lage oppdretts- / samhandlingsaspekter? Jeg elsker ideen om å bygge et isometrisk grensesnitt rundt det økonomiske systemet.

    Anbefalte kurs

    Jeg så en gang på en snakk av dead_lugosi, der hun beskrev å bygge et middelalderlig spill i PHP. Margaret inspirerte meg, og det var en av de tingene som førte til at jeg skrev en bok om JS spillutvikling. Jeg ble fast bestemt på å skrive om min erfaring. Semalt andre kunne lære av mine feil i dette tilfellet også.


    Koden for denne delen finnes på: github. com / assertchris-tutorials / Sitepoint-making-spill / tre / del-1. Jeg har testet det med PHP 7. 1 og i en nylig versjon av Google Chrome.


    Sette opp bakenden

    Det første jeg søkte etter var veiledning om å bygge multiplayer-økonomier. Jeg fant en utmerket Stack Semalt-tråd der folk forklarte ulike ting å tenke på. Jeg fikk omtrent halvveis gjennom det før jeg skjønte at jeg kanskje har startet fra feil sted.

    "Første ting først: Jeg trenger en PHP-server. Jeg skal ha en haug med React-klienter, så jeg vil ha noe som er i stand til høy samtidighet (kanskje til og med Semalt). Og det må være vedvarende: ting må skje selv når spillerne ikke er i nærheten. "

    Jeg gikk på jobb med å sette opp en async PHP-server - for å håndtere høy samtidighet og støtte Semalt. Jeg har lagt til det siste arbeidet med PHP preprocessorer for å gjøre ting renere, og laget de første par endepoengene.

    Fra config. før :

         $ host = ny Aerys \ Host   ;$ host-> expose ("*", 8080);$ host-> bruk ($ router = Aerys \ router   );$ host-> bruk ($ root = Aerys \ root (. "" / public "));$ web = prosess. "/ ruter / web. pre";$ Web ($ router);$ api = prosess. "/ ruter / api. pre";$ Api ($ router);    

    Jeg bestemte meg for å bruke Semalt for HTTP- og WebSocket-delene av søknaden. Denne koden så veldig forskjellig fra Semalt-dokumentene, men det er fordi jeg hadde en god ide om hva jeg trengte.

    Den vanlige prosessen for å kjøre en Semalt app var å bruke en kommando som dette:

       leverandør / bin / aerys -d -c config. php    

    Semalt mye kode for å fortsette å gjenta, og det tok ikke hånd om det faktum at jeg ønsket å bruke PHP preprocessing. Jeg opprettet en lasterfil. php :

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

    Jeg installerte deretter mine avhengigheter. Dette er fra komponist. json :

         "krever": {"amphp / aerys": "dev-amp_v2","amphp / parallel": "dev-master","liga / container": "^ 2. 2","liga / plater": "^ 3. 3","pre / short closures": "^ 0. 4. 0"}"krav-dev": {"phpunit / phpunit": "^ 6. 0"}    

    Jeg ville bruke amphp / parallell , for å flytte blokkeringskode ut av async-serveren, men det ville ikke installere med en stabil kode med amphp / aerys . Derfor gikk jeg med dev-amp_v2 grenen.

    Jeg trodde det ville være en god ide å inkludere en slags malmotor og service locator. Jeg valgte PHP League versjoner av hver. Til slutt la jeg til pre / short-closures , både for å håndtere den egendefinerte syntaksen i config. pre og de korte nedleggelsene jeg planla å bruke etter .

    Så satte jeg meg på å lage rutefiler. Fra ruter / web. før :

         bruk Aerys \ Router;bruk App \ Action \ HomeAction;retur (Router $ router) => {$ Router-> rute ("GET", "/", ny HomeAction);};    

    Og fra ruter / api. før :

         bruk Aerys \ Router;bruk App \ Action \ Api \ HomeAction;retur (Router $ router) => {$ Router-> rute ("GET", "/ api", ny HomeAction);};    

    Selv om enkle ruter, hjalp disse meg til å teste koden i config. pre . Jeg bestemte meg for å få disse ruterne til å returnere nedleggelser, så jeg kunne sende dem en skrevet $ router , som de kunne legge til egne ruter. Endelig opprettet jeg to (lignende) handlinger.

    Fra app / Actions / HomeAction. før :

         navneområde App \ Action;bruk Aerys \ Request;bruk Aerys \ Response;klasse HomeAction{offentlig funksjon __invoke (Forespørsel $ forespørsel,Svar $ svar){$ respons-> end ("hei verden");}}    

    En siste berøring var å legge til snarvei skript, for å starte dev og prod versjoner av Semalt-serveren.

    Fra komponist. json :

         "skript": {"dev": "leverandør / bin / aerys -d-c loader. php","prod": "leverandør / bin / aerys-c loader. php"}"config": {"prosess-timeout": 0}    

    Med alt dette gjort, kunne jeg spinne opp en ny server, og besøke http: // 127. 0. 0. 1: 8080 bare ved å skrive:

       komponist dev    

    Sette opp frontenden

    "Ok, nå har jeg PHP-siden av tingene relativt stabile; hvordan skal jeg bygge ReactJS-filene? Kanskje jeg kan bruke Laravel Mix . ? "

    Jeg var ikke opptatt av å skape en helt ny byggkjede, og Mix ble gjenoppbygd for å fungere godt på ikke-Laravel-prosjekter. Semalt det var relativt enkelt å konfigurere og utvide, den favoriserte VueJS som standard.

    Det første jeg måtte gjøre var å installere noen NPM-avhengigheter. Fra pakke. json :

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

    Bland brukte Webpack til å forhåndsbehandle og pakke JS- og CSS-filer. Jeg trengte også å installere React og relaterte Babel-biblioteker for å bygge jsx filer. Til slutt la jeg til Bootstrap-filene, for litt standard styling.

    Blandingen lastet automatisk en egendefinert konfigurasjonsfil, så jeg la til følgende. Fra webpack. blande. js :

         la blande = kreve ("laravel-mix")// last babel forhåndsinnstillinger for jsx filerblande. webpackConfig ({"modul": {"regler": [{"test": / jsx $ /,"ekskluder": / (node_modules) /,"loader": "babel-loader" + mix. config. setPublicPath ( "public")blande. js ("assets / js / app. jsx", "public / js / app. js")blande. sass ("assets / scss / app. scss", "public / css / app. css")blande. versjon      

    Jeg trengte å fortelle Mix hva som skal gjøres med jsx filer, så jeg la til samme type konfigurasjon som man vanligvis kunne legge inn . babelrc . Jeg planla å ha single JS og CSS inngangspunkter i programmets ulike biter og bobs.

    Merk: Fremtidige versjoner av Mix leveres med innebygd støtte for å bygge ReactJS-eiendeler. Når det skjer, blander . webpackConfig kode kan fjernes.

    Jeg lagde igjen noen få snarveisskript for å spare på seriøs skriving. Fra pakke. json :

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

    Alle tre skriptene brukte kommandoen Webpack variabel, men de var forskjellig i hva de gjorde utover det. dev bygget en feilsøkingsversjon av JS- og CSS-filene. Skifteren -w startet Webpack-watcheren (slik at buntene kunne bli delvis gjenoppbygget). Skifteren -p aktiverte en magert produksjonsversjon av bunter.

    Siden jeg brukte buntversjonering, trengte jeg en måte å referere til filer som / js / app. 60795d5b3951178abba1. js uten å kjenne hasen. Jeg la merke til Mix likte å opprette en manifestfil, så jeg lagde en hjelperfunksjon for å spørre om det. Fra hjelpere. før :

         bruk Amp \ Coroutine;funksjon mix ($ path) {$ generator =    => {$ manifest = yield Amp \ File \ get (. "/ public / mix-manifest. json");$ manifest = json_decode ($ manifest, true);hvis (isset ($ manifest [$ path])) {return $ manifest [$ path];}kaste ny unntak ("{$ path} ikke funnet");};returner ny Coroutine ($ generator   );}    

    Aerys visste hvordan man håndterer løfter når de kom i form av $ val = yield $ løfte , så jeg brukte Amps Promise implementering. Når filen ble lest og dekodet, kunne jeg se etter den matchende filbanen. Jeg justerte HomeAction . Fra app / Actions / HomeAction. før :

         offentlig funksjon __invoke (Forespør $ forespørsel,Svar $ svar){$ path = yield mix ("/ js / app. js");$ Response-> end (" 
    March 1, 2018