Skip to main content

Multiplayer

Games are more fun when you can play with friends! In this section, we are going to add multiplayer support to your game. First we are going to display player names so people know who they are playing with.

Displaying player names​

People want to know who they are playing with. Let's display the player names below their ships.

Select your ship.easel file. Insert the following highlighted code into your Ship function:

pub fn ship.Ship([owner]) {
    // ...

    ImageSprite(@spaceshipBody.svg, color=#dd00ff, shading=0.25, shadow=0.5)
    ImageSprite(@spaceshipWindow.svg, color=#ffffff, shading=0.25)

    TextSprite(
        owner.PlayerName,
        noRotation=true, screenOffset=@(0, 1.5), layer=-15,
        color=#ffffff, opacity=0.25, strobe=false,
        heightPx=22, anchorTop=true, luminous=1)
        
    // ...
}
info

TextSprite displays some text attached to a body in the game world. In this case, we set noRotation=true because otherwise the text would rotate with the ship. It would be hard to read the player's name if it was upside down!

Click Preview to enter your game. You should see a label underneath your ship with your name on it.

Aiming line​

When multiple players are in the game, sometimes players can get confused about which character is theirs. One simple trick to help with this is to draw a PointerAimingLine from their character to their cursor. This points not just where they are aiming, but also back at their character so the player can always find themselves.

In ship.easel, insert the highlighted code into your Ship function just after the TextSprite you just added:

pub fn ship.Ship([owner]) {
    // ...

    TextSprite(
        owner.PlayerName,
        noRotation=true, screenOffset=@(0, 1.5), layer=-15,
        color=#ffffff, opacity=0.25, strobe=false,
        heightPx=22, anchorTop=true, luminous=1)
        
    PointerAimingLine(body=ship, color=#000000, opacity=0.1, radius=0.5, layer=-20)
        
    // ...
}

Click Preview to enter your game. You should see a very subtle black line pointing from your ship to your cursor. We are keeping it subtle so that it doesn't get in the way of the game, but if you like you could change its color or opacity to make it stand out more.

Team colors​

When multiple players are in the game, we want them to be different colors, so they are easy to tell apart. Easel has a built-in feature to do this. First we will need to create a configuration file, players.toml, to tell Easel what colors it can choose from for each player.

Create a new file called players.toml file as follows. You can do this by clicking the New File button in the bottom left. Make sure your file is called players.toml and not players.easel nor players.toml.easel. Copy-and-paste the following code into your new players.toml file:

[players]
selfColor = "#dd00ff"
colors = [
    "#f58c81",
    "#b69cf6",
    "#54c794",
    "#e09f47",
    "#e08747",
    "#e58cc5",
    "#a9b852",
    "#6eb2fd",
]

Now we need to tell Easel to tint the ship and plasma bolts with the player's color by setting the ownerColor parameter to true.

Select your ship.easel file. In your Ship function, replace the ImageSprite(@spaceshipBody.svg, ...) call with the following line:

pub fn ship.Ship([owner]) {
    // ...
    ImageSprite(@spaceshipBody.svg, ownerColor=true, shading=0.25, shadow=0.5)
    // ...
}

Select your plasmaBolt.easel file. In your PlasmaBolt function, replace the color declaration at the top as follows:

pub fn projectile.PlasmaBolt(ship, headingOffset=0, [owner]) {
    use body=projectile
    use speed=50, radius=0.25
    use color=#ffffff, ownerColor=true
    use luminous=1, layer=-5
    
    // ...
}
info

Easel chooses a color for each player from the given list of colors in easel.toml. It attempts to assign the same color to the same player each time they play. This allows players to recognize each other by color and fosters a sense of community. The selfColor configuration is always used to color the player's own ship, helping them recognize themselves.

If you click Preview and play the game now, it should look the same as it did before, since you are the only player in the game.

Enabling multiplayer​

In Easel, making your game multiplayer is as easy as adding a maxHumanPlayers parameter to your Main function. This immediately makes the game a multiplayer game.

Select your main.easel file. Insert a maxHumanPlayers=5 parameter into your Main function's parameter list. Your Main function should now look like this:

pub game fn World.Main(maxHumanPlayers=5) {
    // ...
}

Click Preview, then once you have entered preview mode, click the Multiplayer button in the top right. This will create a temporary multiplayer session at a unique URL that you can share your friends. If you don't have a friend available right now, you can open the URL in a new tab and join the game from both tabs. You should see two ships, one for each player.

warning

Make sure you don't press spacebar before both players have joined, since that starts the game and locks other players from joining your game. If this happens, simply exit the game by clicking the Back button and start a new game.

You have now created a multiplayer game!

How it works​

In Easel, making a multiplayer game is almost as easy as making a singleplayer game because you can just code as if all players are in one shared game universe. In reality, each player exists in their own parallel universe and Easel is continuously synchronizing them all using an advanced technique called rollback netcode. Thankfully, you don't need to worry about any of that because Easel does all of this for you!