Multiplayer
It is time to see Easel's most powerful feature - automatic multiplayer.
First, let's get your game ready for more than one player. Then we will show you how can turn on multiplayer with a flick of a switch!
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, ownerColor=true, 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)
// ...
}
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.
Enabling multiplayer
To make your game multiplayer,
simply set the 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.
You have now achieved something which would normally take years of programming experience: you have created a multiplayer game!
How multiplayer works
In Easel, making a multiplayer game is as easy as making a singleplayer game. You can just act as if all your players are in one shared world, and Easel takes care of the rest. You don't need to worry about network connections or synchronizing game state between players.
Multiplayer is unusually easy with Easel because of one reason. Multiplayer is not just built in, it is baked in to the very fabric of Easel's programming language. Every single line of code you write in Easel is automatically imbued with multiplayer support, without you having to do any extra work. Easel takes care of all the hard parts for you.
Easel's multiplayer uses a clever technique called rollback netcode, which allows the game to run smoothly even when the players on other sides of the world! You can read more about how it works in the Multiplayer section of the documentation.