PixiJS multiplayer

An online .io game with PixiJS

.io games need many players in one room and cheap position updates. Both are what the API is designed around: positions travel over the direct channel at zero server cost, and pellets or coins are claimed atomically with setnx so two players can never eat the same one. Our slither-style demo uses this pattern.

A complete PixiJS integration

import { Application, Sprite } from 'pixi.js';
import { Multiplayer } from 'https://multiplayerapi.com/sdk/mp.esm.min.js';

const app = new Application();
await app.init({ resizeTo: window, background: '#0c0d10' });
document.body.appendChild(app.canvas);

const mp = new Multiplayer({ key: 'mp_pk_...' });
await mp.login();
const room = await mp.quickmatch({ mode: 'io', max_players: 64 });

const others = new Map();
room.on('peer', (p, from) => {
  let s = others.get(from);
  if (!s) { s = Sprite.from('blob.png'); s.anchor.set(0.5); app.stage.addChild(s); others.set(from, s); }
  s.tx = p.x; s.ty = p.y;
});
room.on('members', (m) => {
  const alive = new Set(m.map((x) => x.account_id));
  for (const [id, s] of others) if (!alive.has(id)) { s.destroy(); others.delete(id); }
});

app.ticker.add(() => {
  for (const s of others.values()) { s.x += (s.tx - s.x) * 0.2; s.y += (s.ty - s.y) * 0.2; }
});
setInterval(() => room.send({ x: me.x, y: me.y }), 60);

// Pellets: first claim wins, no arbiter needed
async function eat(id) {
  room.setnx(`pellets.${id}`, mp.account.id);
  room.inc(`players.${mp.account.id}.score`, 1);
}
room.on('rejected', (r) => { /* someone else got it first: respawn locally */ });

What goes where

• Declare "players.$self.score": {"write":"self","type":"int","monotonic":"up","delta_max":1} so a client cannot jump its score.
• Submit the final score with mp.submitScore('arena', score) for daily, weekly and all-time leaderboards.

Keep reading