Multiplayer

How can I make a multiplayer game in Easel?

In this example, we will create a simple "cursor party" multiplayer game where the people can dance around the screen together by shaking their mouse cursors. There will be some fireworks to celebrate the fact that now anyone can make a multiplayer game with Easel!

Step 1: Set max players

To make your game multiplayer, simply set the maxHumanPlayers parameter in your World.Main function to a number greater than 1.

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

Now your game is multiplayer and can support up to 10 players at once! From this point forward, you can pretend as if all your players are in one shared world, like a singleplayer game, and Easel will take care of the rest.

Step 2: Define what happens for each player

Your game is going to have multiple players. Use the SpawnEachPlayer function to define what happens for each player in the game. Normally, you'll want to spawn a Hero unit for each player in the game that the player can control.

SpawnEachPlayer owner {
    Subspawn unit {
        Hero
    }
}

We use Subspawn to spawn the Hero unit for each player so that if the player leaves the game, their Hero will be automatically removed from the game as well.

Full Code Listing

We've made a little party game where each player is dancing around the screen. Try the game out, invite your friends, or maybe just open it in multiple tabs to see what happens.

pub prop World.Pulse = 0

const FireworkColors = [ #f00, #0f0, #f80, #00f, #b0f ]

pub game fn World.Main(maxHumanPlayers=10) {
    TopContent {
        InsetPanel {
            P { "Welcome to the cursor party!" }
        }
    }

    BottomRightContent {
        HStack(padding=1) {
            RaisedButton(ShareIntent, backgroundColor=Color:Primary) { "Invite others to party!" }
        }
    }

    Camera(@(0, 0), radius=8)
    with Pulse {
        SolidBackground(color=Pulse.Abs.Mix(#000000, #000008))
    }

    on Tick {
        Pulse = Sin(2 * Pi * Tick / 1s)
    }

    on Tick(1s * Random) {
        let pos = @(12*SignedRandom, 8*SignedRandom)
        let color = PickRandom(FireworkColors)
        repeat 10 {
            Spark(
                body=pos,
                radius=0.02, color=,
                luminous=1, bloom=1, glare=1, fade=1,
                speed=4,
                acceleration=@(0, 3),
                dissipate=5s,
            )
        }
    }

    SpawnEachPlayer owner {
        Subspawn unit {
            Hero
        }
    }
}

pub fn unit.Hero([owner]) {
    use body=this
    Body(pos=Pointer)

    with Pulse {
        PolygonSprite(
            shape=Isosceles(base=1, length=1, angle=-0.25rev, anchor=0),
            scale=(1 + 0.1*Pulse.Abs),
            ownerColor=true, bloom=3, luminous=1,
            angleOffset=(0.05rev * Pulse),
        )
    }

    TextSprite(PlayerName, radius=0.5, ownerColor=true, screenOffset=@(0, 0.75), strobe=false, vAlign=VAlign:Top)

    with BeforePhysics {
        Move(0.1 * (Pointer - Pos))
    }
}

Open in Editor