Quick Start

Build a multiplayer game for the Rune platform and its millions of players. Rune handles netcode, servers, voice chat, matchmaking, spectating, and much more.

Get started by running:

npx rune@latest create

After this, you'll have a multiplayer Tic Tac Toe game running.

Alternatively, follow the guide to port your existing game to Rune.

Uploading & Playing In The App

Now that you have Tic Tac Toe running locally, it would be great to try playing it in the Rune app:

npm run upload

That's it. You'll now see your game inside Rune and can play it with your friends!

Game Logic

Rune games are split into two parts: logic & rendering. Let's look at the logic for the generated Tic Tac Toe game.

You can find the logic code in the logic.js file. The setup function is responsible for creating an initial game state that's synced across players. We create the 3x3 grid for Tic Tac Toe:

function setup() {
  const game = {
    cells: new Array(9).fill(null), // 3x3 cell grid
    // ... rest of the game state
  }
  return game
}

To modify the game state synced between players, we define actions that get called from the client code. Here's the action to mark a cell in Tic Tac Toe:

function claimCell(cellIndex, { game, playerId }) {
  game.cells[cellIndex] = playerId
  // ... rest of the logic, like checking for win condition
}

Finally, we provide setup function, actions, and other game info to Rune.initLogic():

Rune.initLogic({
  minPlayers: 2,
  maxPlayers: 2,
  setup,
  actions: {
    claimCell,
  },
})

Other initLogic() options are described in API game logic reference. You can also read a more in-depth explanation of how the logic code works in Syncing Game State.

Rendering & Inputs

You can find your game rendering code in client.js file. The client code is responsible for reacting to game state changes and updating the rendering accordingly:

function onChange({ game, players, yourPlayerId, action }) {
  const { cells, lastMovePlayerId } = game

  // ... update your game visuals according to latest received game state. Also play sound effects, update styles, etc.
}

Rune.initClient({ onChange })

The client code also calls actions based on user input:

const button = // ... get the cell
button.addEventListener("click", () => Rune.actions.claimCell(cellIndex))

You can find additional information about rendering here.

What Next?

You can also make much fancier games than Tic Tac Toe. Rune supports games with real-time multiplayer, complex physics, beautiful graphics and much more!

Here are some good places to start:

• Get some inspiration by looking at the example games
• Game dev is more fun as part of a community, join the Rune Discord server
• Learn how Rune works underneath by diving into game state syncing
• See the Creator Fund details and how to make money with Rune