Recipes / PixiJS

PixiJS Integration

Submit scores and render live leaderboards inside your PixiJS canvas game using the browser's native fetch API.

curlPhaserPixiJSGodotUnityUnreal

Prerequisites

  • PixiJS v7 or v8 project
  • A LightLeaderboard account, game, and API key
  • A modern browser — fetch is natively available; no extra packages needed
CORS: The API allows browser requests from any origin. No server proxy required.

Submit a Score on Game Over

Call onGameOver when the player's run ends. The API responds with their new rank so you can surface it instantly.

gameOver.js JS
// Trigger this when the player's run ends
async function onGameOver(finalScore) {
  const res = await fetch(
    "https://yourapp.com/api/v1/games/my_game/scores",
    {
      method: "POST",
      headers: {
        "Authorization": "Bearer YOUR_API_KEY",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        score: finalScore,
        playerRefId: player.id,
        playerName: player.username,
        submissionId: Date.now().toString(),
      }),
    }
  );
  const data = await res.json();
  showRankPopup(data.rank); // show the player their new rank
}

Render the Leaderboard

Fetch entries and add them to your PixiJS stage using PIXI.Text.

leaderboard.js JS
// Fetch top 10 and draw with PixiJS text
async function renderLeaderboard(app) {
  const res = await fetch(
    "https://yourapp.com/api/v1/games/my_game/leaderboard?limit=10",
    { headers: { "Authorization": "Bearer YOUR_API_KEY" } }
  );
  const { entries } = await res.json();

  entries.forEach((entry, i) => {
    const text = new PIXI.Text(
      `#${entry.rank}  ${entry.playerName}  ${entry.score}`,
      { fill: "#ffffff", fontSize: 18 }
    );
    text.position.set(40, 80 + i * 36);
    app.stage.addChild(text);
  });
}

Rank Reveal Popup

A simple PixiJS container that shows the player's rank with a styled overlay.

rankPopup.js JS
// Animated rank reveal popup
function showRankPopup(rank) {
  const popup = new PIXI.Container();

  const bg = new PIXI.Graphics()
    .roundRect(0, 0, 280, 100, 16)
    .fill({ color: 0x1a1040, alpha: 0.95 });

  const label = new PIXI.Text(
    `You ranked #${rank}!`,
    { fill: "#a89cff", fontSize: 28, fontWeight: "bold" }
  );
  label.position.set(140, 50);
  label.anchor.set(0.5);

  popup.addChild(bg, label);
  popup.position.set(
    (app.screen.width  - 280) / 2,
    (app.screen.height - 100) / 2
  );
  app.stage.addChild(popup);
}

Tips

  • Use a stable playerRefId — something from your auth system, not a session ID. This is how the API identifies returning players.
  • Use Date.now().toString() as a quick submissionId. For production, prefer crypto.randomUUID().
  • If you're building a React/Vue wrapper around PixiJS, call onGameOver from your game's event emitter to keep concerns separate.
  • Use ?period=weekly on the leaderboard URL for weekly resets.
← Phaser 3 Godot 4 →