Editor documentation

Now that your game has a fancy name, let’s give it a shot! Go ahead and click the Play button in the middle of the toolbar.

This will take you to the test session with a shareable link that you may copy & paste to another browser tab or share with a friend in order to play together. But since the game script is mostly empty, you’ll see exactly that — an emptiness. Even then, notice the player ranking update as players join or leave.

Now, let’s focus on the script. You’ll find it in the middle part of the screen and after creating an empty new game it contains just a few lines that define a basic @heyplay/iokit:Player.onJoin callback. On the very top it also imports Heyplay IOKit library that provides all the building blocks for creating simple IO games.

Now replace the onJoin block with the following:

Player.onJoin = (player: Player) => {
  Blob.create({
    position: new Vector({ x: (parseInt(player.id) - 1) * 20, y: 0 }),
    size: 3
  })
}

Play the game to see a white blob and, as other players join, more blobs will appear next to it.

Let’s see what this code actually does:

1. We define the @heyplay/iokit:Player.onJoin function. It’s a special name that Heyplay engine will call every time a new player joins, passing the Player object.

2. Inside it, we call the @heyplay/iokit:Blob.create function to create a new blob with specified position and size. Notice the use of player.id to horizontally offset every next blob.

You can see both how the game script calls into Heyplay engine and how the engine calls it back to get things moving. You may explore all functions and callbacks in the Heyplay IOKit documentation.