Check out my books, games and more:
Join our Discord:
Visit our merch store:
Learn how to build a multiplayer card game using Phaser 3, Express, and Socket.IO!
Access the code for this project on GitHub:
Download the assets for this project on GitHub:
View the live version of this project:
Check out the Phaser 3 Webpack Template:
Follow along with the original version of this video series:
Subscribe and like for more!
Follow me on Twitter:
Music shout-out: “8bit Blix” by Micah Young
@kirov_airship
08.09.2024I’m not sure why you don’t make another episode introducing how to create / join rooms. Also, the workflow in Heroku. You did an amazing tutorial at the beginning but you didn’t even show how two players from different computers join the room and play the card game. Great, now I am completely getting stuck and need to spend an enormous amount of time, even more than the time taken on watching all of your tutorials, trying to search for a solution.
@content_appreciator
06.04.2024Do you have any suggestions for supporting more than two players being able to connect? I guess you would need a primitive lobby for that?
Ferenc Rácz
05.11.2022Great! 🙂
eltoro0815
05.11.2022You can copy your assets with inbuild webpack functionality if you use import statements in your code and adjust one line in the configuration base.js.
Concrete changes are:
A) In the file client/src/game.js:
…
import cyanCardBack from "../assets/cyanCardBack.png";
import magentaCardBack from "../assets/MagentaCardBack.png";
import cyanBoolean from "../assets/Cyan_Boolean3x.png";
import magentaBoolean from "../assets/Magenta_Boolean3x.png";
import cyanPing from "../assets/Cyan_Ping3x.png";
import magentaPing from "../assets/Magenta_Ping3x.png";
…
this.load.image('cyanCardBack', cyanCardBack);
this.load.image('magentaCardBack', magentaCardBack);
this.load.image('cyanBoolean', cyanBoolean);
this.load.image('magentaBoolean', magentaBoolean);
this.load.image('cyanPing', cyanPing);
this.load.image('magentaPing', magentaPing);
B) In the file client/webpack/base.js
…
test: /.(gif|png|jpe?g|svg|xml)$/i,
loader: "file-loader",
options: {
name: '[path][name].[ext]',
},
…