Back to Question Center
0

Tworzenie gier za pomocą React i PHP: jak są kompatybilne?            Rozwijanie gry za pomocą React i PHP: jak są kompatybilne? Tematy pokrewne: APIsSecurityDatabasePerformance & ScalingDevelopment Semalt

1 answers:
Tworzenie gier za pomocą React i PHP: jak są kompatybilne?

Tworzenie gier za pomocą PHP i ReactJS

  • Tworzenie gier za pomocą React i PHP: jak są kompatybilne?
  • Generowany proceduralnie teren gry z React, PHP i WebSockets

Aby uzyskać wysokiej jakości, dogłębne wprowadzenie do React, nie można przejść obok kanadyjskiego producenta pełnych kominków Wesa Bosa. Wypróbuj jego kurs tutaj i użyj kodu SITEPOINT , aby uzyskać 25% zniżki i pomóc w obsłudze SitePoint.

"Chciałbym stworzyć wieloosobową, opartą na ekonomii grę. Coś w rodzaju "Stardew Semalt", ale bez żadnych zaprzyjaźnionych aspektów i gospodarki opartej na graczach. "

Zacząłem o tym myśleć, gdy zdecydowałem się spróbować zbudować grę przy użyciu PHP i Semalt - IT outsourcing company san jose. Problem w tym, że nie wiedziałem nic o dynamice gier wieloosobowych ani o tym, jak myśleć i wdrażać gospodarki oparte na graczach.

Tworzenie gier za pomocą React i PHP: jak są kompatybilne?Rozwijanie gry za pomocą React i PHP: jak są kompatybilne? Tematy pokrewne:
APIsSecurityDatabasePerformance & ScalingDevelopment Semalt

Nie byłem nawet pewien, czy wiedziałem wystarczająco dużo o Semalcie, aby usprawiedliwić korzystanie z niego. Mam na myśli, że początkowy interfejs, w którym koncentruję się głównie na serwerze i ekonomicznych aspektach gry, idealnie pasuje do Semalta. Ale co z tym, kiedy zaczynam robić aspekty związane z rolnictwem / interakcją? Podoba mi się pomysł zbudowania izometrycznego interfejsu wokół systemu gospodarczego.

Polecane kursy

Kiedyś oglądałem rozmowę z dead_lugosi, gdzie opisała budowę średniowiecznej gry w PHP. Margaret zainspirowała mnie i ta rozmowa była jedną z rzeczy, które doprowadziły mnie do napisania książki o rozwoju gier JS. Stałem się zdecydowany pisać o moich doświadczeniach. Inni Semal mogą również nauczyć się z moich błędów w tym przypadku.


Kod tej części można znaleźć pod adresem: github. com / assertchris-tutorials / sitepoint-making-games / tree / part-1. Przetestowałem to z PHP 7. 1 oraz w najnowszej wersji Google Chrome.


Ustawianie Back End

Pierwszą rzeczą, której szukałem, były wskazówki dotyczące budowy gospodarek dla wielu graczy. Znalazłem świetny wątek Stack Semalt, w którym ludzie wyjaśniają różne rzeczy do przemyślenia. Dotarłem do niego w połowie, zanim zdałem sobie sprawę, że mogę zacząć od niewłaściwego miejsca.

"Po pierwsze: potrzebuję serwera PHP. Zamierzam mieć grupę klientów React, więc chcę czegoś, co może być wysoce współbieżne (może nawet Semalt). I musi być trwałe: wszystko musi się zdarzyć, nawet gdy gracze nie są w pobliżu. "

Poszedłem do pracy, konfigurując asynchroniczny serwer PHP - aby obsługiwać wysoką współbieżność i wspierać Semalt. Dodałem moją ostatnią pracę z preprocesorami PHP, aby wszystko było czystsze i wykonałem kilka pierwszych punktów końcowych.

Z config. pre :

     $ 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 = proces. "/ routes / api. pre";$ api ($ router);    

Zdecydowałem się użyć Semaltu dla części HTTP i WebSocket aplikacji. Ten kod wyglądał zupełnie inaczej od dokumentów Semalta, ale to dlatego, że miałem dobry pomysł na to, czego potrzebowałem.

Zwykłym procesem uruchamiania aplikacji Semalt było użycie polecenia podobnego do tego:

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

Semalt dużo kodu do powtórzenia i nie poradził sobie z tym, że chciałem użyć preprocessingu PHP. Stworzyłem plik ładujący. php :

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

Następnie zainstalowałem swoje zależności. To jest z kompozytora. json :

     "wymagać": {"amphp / aerys": "dev-amp_v2","amphp / parallel": "dev-master","liga / kontener": "^ 2. 2","ligi / tablice": "^ 3 .3","pre / short-closures": "^ 0. 4. 0"},"require-dev": {"phpunit / phpunit": "^ 6. 0"},    

Chciałem użyć amphp / parallel , aby przenieść kod blokujący z asynchronicznego serwera, ale nie instalowałbym go ze stabilnym tagiem amphp / aerys . Właśnie dlatego wybrałem oddział dev-amp_v2 .

Pomyślałem, że dobrym pomysłem byłoby umieszczenie jakiegoś silnika szablonów i lokalizatora usług. Zdecydowałem się na wersje każdego z nich w PHP League. W końcu dodałem pre / short-closures , aby obsłużyć niestandardową składnię w config. pre i krótkie zamknięcia, które planowałem użyć po .

Potem przystąpiłem do tworzenia plików tras. Z tras / sieci. pre :

     użyj Aerys \ Router;użyj App \ Action \ HomeAction;return (router $ router) => {$ router-> route ("GET", "/", nowa HomeAction);};    

Oraz z tras / api. pre :

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

Te proste trasy pomogły mi przetestować kod w konfiguracji. pre . Postanowiłem, że pliki tych tras spowodują zamknięcie, więc mógłbym przekazać im wpisany $ router , do którego mogliby dodać własne trasy. W końcu stworzyłem dwa (podobne) działania.

Od app / Actions / HomeAction. pre :

     przestrzeń nazw App \ Action;użyj Aerys \ Request;użyj Aerys \ Response;klasa HomeAction{funkcja publiczna __invoke (Żądanie $ żądania,Odpowiedź $ odpowiedzi){$ response-> end ("hello world");}}    

Ostatnim akcentem było dodanie skróconych skryptów, aby uruchomić wersje serwerowe Semlet i dev.

Od kompozytora. json :

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

Po wykonaniu wszystkich tych czynności mógłbym uruchomić nowy serwer i odwiedzić stronę WWW http: // 127. 0. 0. 1: 8080 wystarczy wpisać:

   programista kompozytor    

Konfigurowanie interfejsu użytkownika

"Ok, teraz, gdy strona PHP jest względnie stabilna; jak mam zbudować pliki ReactJS? Może mogę użyć Laravel Mix . ? "

Nie chciałem tworzyć zupełnie nowego łańcucha budowania, a Mix został przebudowany, aby dobrze działał również w projektach innych niż Laravel. Semalt był stosunkowo łatwy w konfiguracji i rozszerzaniu, preferował VueJS domyślnie.

Pierwszą rzeczą, którą musiałem zrobić, było zainstalowanie kilku zależności od NPM. Z pakietu. json :

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

Miksuj używany Webpack, aby wstępnie przetworzyć i połączyć pliki JS i CSS. Potrzebowałem również zainstalować React i powiązane biblioteki Babel, aby zbudować pliki jsx . Na koniec dodałem pliki Bootstrap, aby uzyskać nieco domyślnej stylizacji.

Mix automatycznie załadował niestandardowy plik konfiguracyjny, więc dodałem następujące elementy. Z pakietu sieciowego. mieszać. js :

     niech mix = require ("laravel-mix")// wczytaj ustawienia babel dla plików jsxmieszać. webpackConfig ({"moduł": {"zasady": [{"test": / jsx $ /,"wyklucz": / (node_modules) /,"loader": "babel-loader" + mix. config. setPublicPath ("public")mieszać. js ("assets / js / app. jsx", "public / js / app. js")mieszać. sass ("assets / scss / app. scss", "public / css / app. css")mieszać. wersja      

Musiałem powiedzieć Mixowi, co zrobić z plikami jsx , więc dodałem ten sam rodzaj konfiguracji, który normalnie można umieścić . babelrc . Zamierzałem wprowadzić pojedyncze punkty wejściowe JS i CSS do różnych bitów i aplikacji aplikacji.

Uwaga: Przyszłe wersje Mix będą dostarczane z wbudowaną obsługą budowania zasobów ReactJS. Kiedy tak się stanie, miks . Kod webpackConfig można usunąć.

Po raz kolejny stworzyłem kilka skryptów skrótów, aby zaoszczędzić na poważnym pisaniu. Z pakietu. json :

     "skrypty": {"dev": "$ npm_package_config_webpack","watch": "$ 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"},    

Wszystkie trzy skrypty używały polecenia zmiennej Webpack, ale różniły się tym, co robili poza tym. dev zbudował wersję debugującą plików JS i CSS. Przełącznik -w uruchomił moduł Webpack watcher (dzięki czemu pakiety mogły zostać częściowo przebudowane). Przełącznik -p włączył pakietową wersję pakietów.

Ponieważ używałem wersjonowania pakietów, potrzebowałem sposobu na odniesienie plików takich jak / js / app. 60795d5b3951178abba1. js , nie znając skrótu. Zauważyłem, że Mix lubił tworzyć plik manifestu, więc utworzyłem funkcję pomocniczą, aby zapytać o nią. Od pomocników. pre :

     użycie Amp \ Coroutine;funkcja mix ($ ścieżka) {$ generator =    => {$ manifest = yield Amp \ File \ get (. "/ public / mix-manifest. json");$ manifest = json_decode ($ manifest, true);if (isset ($ manifest [$ path])) {return $ manifest [$ path];}throw new Exception (nie znaleziono "{$ path}");};zwróć nową Coroutine ($ generator   );}    

Aerys wiedział, jak radzić sobie z obietnicami, gdy przyszło w postaci $ val = yield $ promise , więc użyłem realizacji obietnicy Amp. Kiedy plik był czytany i dekodowany, mogłem poszukać pasującej ścieżki do pliku. Poprawiłem HomeAction . Od app / Actions / HomeAction. pre :

     funkcja publiczna __invoke (Żądanie $ żądania,Odpowiedź $ odpowiedzi){$ path = yield mix ("/ js / app. js");$ response-> end (" 
>
March 1, 2018