Tag: multiplayer

Getting started with building a multiplayer Poker game, I’m first setting up the development environment.

After setting up webpack, ESLint, Babel, and Typescript (getting them to all work together and the way I want was a challenge), I’ve started on building a the game’s main display using Phaser Editor.

Building The Game Layout

I decided to go with allowing up to six players, and the layout will look like this:

Phaser Editor supports Typescript, which is awesome. However, the code the Phaser Editor compiler generates doesn’t make ESLint happy.

As you can see here, we have some lines of code that ESLint is nit-picking us about:

There are sections in the code where you can put whatever you want, and it won’t be overwritten by the Phaser Editor compiler. In this case, I’d surround the generated code to temporarily disable ESLint.
/* eslint-disable */
and
/* eslint-enable */

NOTE: Since you cannot directly control the generated code, disabling ESLint is fine in these situations.

Since I’m using modules, at the bottom of Scene files generated by Phaser Editor, you can export the Scene class, by doing so at the bottom of the file. Code placed here will not be affected by Phaser Editor (the editor will mark the file with comments, telling you where you can write your own code). At the bottom, you can write something like this:

/* END OF COMPILED CODE */

// You can write more code here
export default [NameOfYourSceneClass];

Setting Up A Factory For The Card Images

Still building the layout, I want the card images to be set up as their own factory in Phaser. When I recently converted the Flash game Blasteroids to HTML5, I used JavaScript. However, for this project, I’m using TypeScript and the code is being linted by ESLint.

First let’s create a class that will display the card image. I won’t go into full details for this class, but the setup could look like this:

export default class CardImage extends Phaser.GameObjects.Image {
  constructor(scene: Phaser.Scene, x: number, y: number, texture: string,
    frame?: string | number) {
    super(scene, x, y, texture, frame);
    ...
  }
}

NOTE: You can then create properties to store the suit and value of the card, as well as whether or not the card is face up or face down. Note that if you change the face up/down property, you’d need to update the card’s image as well.

Next, let’s create a factory file. The name of my factory would be cardImage, and the looks something like this:

import CardImage from './CardImage';

Phaser.GameObjects.GameObjectFactory.register('cardImage',
  function foo(this: Phaser.GameObjects.GameObjectFactory,
    x: number, y: number, texture: string, frame?: string | integer): CardImage {
    const scene = this.scene;

    const sprite = new CardImage(scene, x, y, texture, frame);

    scene.sys.displayList.add(sprite);
    // scene.sys.updateList.add(sprite);

    return sprite;
  });

NOTE: The CardImage class extends Phaser.GameObjects.Image. If your class extends Phaser.GameObjects.Sprite, you’d also need to uncomment line 11 as well.

When setting card images in the scene to use cardImage as the factory, then saving the scene file, and viewing the source code, you’ll see there are some issues:

NOTE: I’ve spent a day or so trying to figure out how to resolve this issue. The scene class was originally a TypeScript, and I was originally using the TypeScript version of scenes in Phaser Editor. Unfortunately, I’ve had trouble getting namespaces and modules to work together. My research eventually led me to trying Declaration Merging, and looking at declaration files (.d.ts). And while setting up factories with TypeScript came closest (actually, this resource did work) to helping me solve my issue, I was still unable to resolve error ts(2339) by VS Code in the above image.

Long story short: I’m using JavaScript for scenes that use factories to avoid these issues.

After changing Phaser Editor to use JavaScript instead of TypeScript for this scene, VS Code no longer reports issues, and the code still compiles and runs with no issues! 😎

Now, I can continue to build the game’s main display, and code the functionality for dealing and flipping cards, presenting chips, and building the buttons, call, check, etc. There are still the game logic for the rules of Poker itself, as well as the multiplayer aspect of the game, which will be the game’s main draw (and an excellent experience for me in developing a turn-based, real-time multiplayer game).

That’s it for now!

If you’d like to get on my e-mail list and receive updates are the progress continues, sign up using the form below.

Talk to you later,

– C. out.

What’s up, guys. 🤜🏾

Now that the Flash game Blasteroids has been converted to HTML5, the next game I’m working on is a multiplayer Poker game.

Now, this won’t be a conversion, but a game originally built using Phaser 3, JavaScript, and Phaser Editor.

Building this game will be a bit of a challenge for me for these two reasons:

One, this will be my first attempt at developing a complete multiplayer, turn-based game.

An MP game is much more challenging to build than a single-player one, believe you-me. I once tried making a real-time MP in the past using PlayerIO, but… let’s just say that didn’t pan out so well.

And two, I’m learning a bit about the JavaScript ecosystem. I took previous course on Zenva called MMORPG Academy. The course showed you how to make a simple multiplayer MMO game using Phaser, Express and SocketIO. It also introduced me to the following tools, which I will also be using for this game.

Technology Used

Node.js

Node.js is a server-side platform built on Google Chrome’s V8 JavaScript Engine. It can be used for developing server-side and networking applications. I’ll use it as part of the back-end for this game.

npm

npm is a very large software repository. It’s a package manager for JavaScript, and you can use it to download and install many third-party packages into your projects. It comes with Node.js, and it can be used to install most of the tools listed below.

Express

This is a web framework that allows your web application to handle requests that are sent to a specific URL. Both Node.js and Express will be used together to create the web server.

Socket.IO

This is what will allow communication between the the player client app and the server web app.

webpack

Among many other things, webpack can bundle all your modular JavaScript code and packages together into a single file that can be understood by your web browser.

Babel

It’s much more convenient to write JS code in the latest/modern version. However, older versions of web browsers can’t understand these versions. This is where Babel comes in. It can transpile your modern code to earlier versions that can be understood those older browsers, increasing the available of your web apps to more people.

ESLint

This tool examines your code for syntactical errors, or other issues where the code may not adhere to a certain standard or set of styling rules. Essentially, “linting”, helps you write cleaner code.

Some other tools not discussed in the Zenva course that I will be using in Poker are:

TypeScript

I much prefer Typescript over JavaScript. Typescript allows you extra features, and for me, that means static typing and support for interfaces. Of course, I’m sure I’ll learn more as I dive deeper into Typescript.

Note: My plan is to write the code using TypeScript (which both Phaser and Phaser Editor also support), use Babel (with Typescript support) to transpile the code, and bundle it all together in a single JavaScript file using webpack. This is for the client-side portion of the game. The back-end server-side code will not be run in a web-browser, so it will not use this process.

Poker Game Multiplayer Development Plan

First thing’s first: the game’s design, and layout will need to be created. While I’m not a game designer (my service currently only includes programming), this version of Texas Holdem Poker I’ll be making will have a relatively simple enough mechanic. Nothing fancy here. And the game is mainly to add to my portfolio.

I’ll need to find some assets (graphics and sounds). I’ll use the same assets I used from my Thunderjack! game.

Because this is a multi-player game using a client-server model, where the server has the authority and maintains the game’s state.

The client apps (what the players will use) act as visual agents, showing the state of the game server. They also accept input (keyboard, mouse, touch, etc.) from each player, send them to the server, then the server with validate that input. The validation is to make sure the state stays clean, and to prevent cheating.

Because this will be a turn-based game and not a real-time game, it doesn’t need to rely heavily on advanced concepts like client-side prediction or entity interpolation and prediction.

Next, there are the rules of Poker. Because the server maintains the stage, all the game logic will be written on the server. And of course, I’ll need to get the rules down as well. 🙃

And finally, I want the game to be able to use bots that can fill in if no other real players are available. So building an AI will be a challenge all its own, though I’m sure I can research this for help.

Where and How will I Host the Game Server?

The final component to this game is determining where and how I’ll host the game server, so you can play this game online with other real people. The client-side app will be hosted here on my site here, but it’s the game server that needs to be hosted elsewhere.

The multi-player game that the Zenva course helps you to create uses Heroku to host the game project, so I’ll use that again. The course covers just enough for you to set up a simple game, as any more, I believe, would go beyond the scope of the project, but there’s enough there to get started.

As I work on the game, I’ll post noteworthy updates in future articles. And you can play the work-in-progress versions of the game as I make playable updates, before the game is released to the public!

Sign up using this form to get on my mailing list:

Whew! That’s it for now, and this will be quite a challenge. I’m sure this will take me a while to complete. And I hope you stick with me on this journey! I got this! 💪🏾

– C. out.