Online Multiplayer for a Turn-Based Game (No Programming Knowledge Required!)

If you've ever been inspired to create a multiplayer game, but had no idea where to start, this instructable is for you! After hours of searching online and experimenting, this is the simplest method I've discovered for creating browser based turn based online multiplayer games. You can create, test, and publish your finished games all completely free. If you have a computer with an internet connection, you're ready to get started.

To demonstrate the process, we will be considering the example of the simple card game of War and designing a 2 player lobby. After completing this instructable, you will be able to create your own turn based games using these steps. The game will be built in Stencyl, a block based game engine. We will use Google Firebase to exchange game data over the internet. The finished project can be published on any site that hosts HTML games.

Install Stencyl

Stencyl is a block code game development engine. If you've ever used Scratch, using Stencyl will come naturally to you. You can download Stencyl from http://www.stencyl.com/download/. For this project we only need the free plan, so just download and install the latest version for your operating system (1).

Download Firebase Extension

You can download the Stencyl Firebase extension from https://gurigraphics.itch.io/stencyl-firebase-extension Click Download Now (2). You can support the developer of the extension by paying an amount of your choice, but it's available for free by clicking No thanks, just take me to the download.

Save the .zip file on your computer, but do not extract it.

Create Game

Open Stencyl. You'll be asked to sign in, but if you don't want to create an account you can close this window. Click the center of the screen to create your first game (1). Create a new blank game (2) and give it a name (3).

Add Firebase Extension

Click on Settings in the toolbar at the top (4). Click Extensions (5), and then Install Extension (6). Select the firebase.zip file and click Choose an Extension (ZIP) (7). Enable the extension (8) and click OK to exit the settings menu (9).

Create Firebase Project

We'll be using Google Firebase to allow the game to exchange information with other players online. Go to https://firebase.google.com/ and click Get Started (1). You will be prompted to sign in to Google (2), so if you don't have a Google account, you will have to make one to use this service.

Once logged in, click Create a Project (3). Name your project and continue (4). You can optionally enable Google Analytics and connect or create a google analytics account (5), but this isn't required for the game. Click Create Project (6) and your Firebase project will be created.

Configure Database Settings

Now we're going to create a database and allow our game to use it. Select Realtime Database from the sidebar (7). Click Create Database (8). Select your location and click Next (9). We want to start the database in test mode so we can use it right away (10).

After the database has been enabled, we want to make sure the game has access to read and write data. Click Authentication in the sidebar (11), then click Get Started (12). The last option in the list of sign-in providers is Anonymous. We will be using the game to communicate directly with the database, so enable Anonymous users and Save this setting (13).

Create the First Function

In Stencyl, click the button in the center of the screen to create a new scene (1). This will be the only scene we need to create our game. Give it a name, and leave the rest of the options set to their default values for now, then click Create (2).

Inside our scene, we're going to add our first function which connects to our database. Go to the Events tab (3) and click Add Event, then from the drop down menu select Basics, then When Creating (4). An empty when created block will appear in the workspace. Click on the Extensions button in the block palette (5). These blocks are used to connect to and exchange data with our database (6). Drag the apiKey and Create game attribute block into the when created block (7). The input fields for these blocks are unique identifiers for the database we just created.

Connect Database to Game

From the Firebase console, click the settings icon at the top and select Project settings (8). Copy the Web API Key and paste this value into the apiKey field (9). Go to the Realtime Database and copy the name assigned to your database that appears in the data panel (10). Paste this value into the projectID field.

Test Database Communication

Attributes in Stencyl are variables used by the game. We want to create a game attribute that the game can use to send data to the database. To do this, we give it a name that tells the game where the data should be stored. Type "war_game_project/test_attribute" in the Create game attribute field.

To make sure our database is working properly, we'll use an Update Game attribute block to update the game attribute we just created with the value "Hello world" (11). Click Test Scene in the upper right corner (12). A blank browser window will appear. We haven't added any visuals yet, so our scene is blank.

In the Realtime Database, there will be a new data location containing the string you just sent (13).

Now we're ready to make the multiplayer variables for the game.

Create Attributes for Database Variables

The first thing to do in any multiplayer game is connect the players in a session. Create two game attributes, "war_game_project/player1_online" and "war_game_project/player2_online" (1). We will use these variables to allow players to know when another player is online.

Display Text

We also need a way to tell the player whether they are player 1 or player 2, so we will create a message and display it to the screen. From Attributes in the palette, click on Create an Attribute (2). Create a text attribute called display_message (3).

Now we'll create a new event to draw text to the screen. Under Add Event, Basic, click When Drawing. In the Drawing section of the palette, add a draw text block. To pass the value of the string we want to display, click Getters under the Attributes section of the palette and drag the attribute we just created into the block (4).

Create a Custom Function

Now we will create the function that assigns each player to a role. Click Add Event, and under the Advanced option of the drop down menu click Custom Block. Click on the Custom Block to set it up. The Name is used by Stencyl in the code and cannot contain spaces, while the Block Spec is what appears in the block editor. This block won't have any fields, so Block Fields can be left blank. This custom function will be run when the player first joins the game, so we'll call it join game.

Now that you've had a chance to get comfortable with the Stencyl block editor, we'll use blocks to create the join game function. This function gets the values of the game attributes from the database (6) and checks if their value has been set to "online" by another player. If both players are online, it tells the player trying to join that the game is full. If only one player is online, it sets a number attribute called player_ID to player 2, updates the corresponding variable to the value "online" in the database, and updates the display string to "You are player 2". If neither of the player variables have been set to "online" yet, the player joining is assigned to player 1.

Try to navigate the block palette and create the function yourself! If you get stuck, you can refer to Stencyl documentation.

Add Custom Block to When Created Block

The custom block we just created can be found in the Custom section of the palette. Add the join game block to the when created block so that it is called when the game starts (1).

Test Game

Click Test Scene. The window should display the message "You are player 1". You can simulate another player joining by duplicating the tab. You'll see that the next player that joins is assigned to be player 2, and "This game is full." is displayed if you open a third tab (2).

Create Game

You now have a way to connect two players online. You can create more game attributes to exchange variables in your game, and add as many players as you want. To test your game from the perspective of each player, just duplicate the tab in your browser.

Publishing Your Game

When you're all finished with your game, click Publish, then under Web, select HTML5. You can then publish the game on itch.io and share it with your friends!