Pixi.js Tutorial #1: The Magical First Step into Browser 2D Game Dev

May 14, 2025

So, what is Pixi.js?

In short, it's a 2D graphics library that makes HTML5 Canvas feel like a game engine.
No need to touch complex WebGL — Pixi.js gives you cute little methods likecreateSprite, addChild, and ticker to build games in your browser.

📦 Before We Start

Let’s add Pixi.js to your HTML:

<!-- Load the latest Pixi.js via CDN -->
<script src="https://pixijs.download/release/pixi.min.js"></script>

🎮 Create a Canvas and Show It

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>My First Pixi Game</title>
</head>
<body style="margin: 0; overflow: hidden;">
  <script>
    const app = new PIXI.Application({
      width: 360,
      height: 540,
      backgroundColor: 0x1099bb
    });

    document.body.appendChild(app.view);
  </script>
</body>
</html>

🧙‍♂️ This code creates a blue canvas and adds it to your page.
The PIXI.Application handles everything — creating the canvas, rendering, and managing updates. It’s basically your game engine.

🖼️ Add a Sprite (like a Bunny!)

<script>
  const texture = PIXI.Texture.from('https://pixijs.io/examples/examples/assets/bunny.png');
  const bunny = new PIXI.Sprite(texture);

  bunny.anchor.set(0.5);
  bunny.x = app.screen.width / 2;
  bunny.y = app.screen.height / 2;

  app.stage.addChild(bunny);
</script>

🐰 Ta-da! You’ve got a bunny in the center of the screen.
The anchor sets the center point of the image. (0.5, 0.5) means the center of the sprite.

🏃 Make It Spin

<script>
  app.ticker.add(() => {
    bunny.rotation += 0.01;
  });
</script>

🔁 This makes your bunny rotate slowly.
The ticker is like the game’s heartbeat — it runs on every animation frame.

✅ What You’ve Learned So Far

How to add Pixi.js to a webpage
How to create a canvas
How to load and display an image
How to animate it!

You’ve just taken your first steps into browser-based game development.
Honestly, you're already doing what most indie devs started with 😎

Next up:
We’ll add a start button and learn how to make the player control things.

💡 Fun fact: These same basics are used in real games like Red Light, Green Light and Tung Tung Run on Round100!