Pixi.js Tutorial #4: Make It Feel Like a Game! Building UI Elements

You've got sprites. You've got animations.
But you know what really makes it feel like a game?

UI.

Let’s add some text, buttons, and even a loading screen. It’s time to make your project look official 👨‍💻✨

---

📝 Step 1. Display Text with PIXI.Text

Let’s start with something simple — a score!

const scoreText = new PIXI.Text('SCORE: 0', {
  fontFamily: 'Arial',
  fontSize: 24,
  fill: 0xffffff,
  stroke: 0x000000,
  strokeThickness: 3
});

scoreText.x = 20;
scoreText.y = 20;
app.stage.addChild(scoreText);

You can update it with:

scoreText.text = 'SCORE: ' + currentScore;

🎯 Tip: Use stroke and bold fonts to make text visible over busy backgrounds.

---

🔘 Step 2. Add a Button (HTML-style!)

Pixi.js doesn’t do native buttons, but HTML does.
So let’s mix HTML + Pixi:

<button id="start-btn">Start Game</button>

#start-btn {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 18px;
  padding: 12px 20px;
  border-radius: 8px;
  background-color: #fff;
  border: none;
  cursor: pointer;
  z-index: 10;
}

document.getElementById('start-btn').addEventListener('click', () => {
  startGame();
});

Pixi = game rendering,
HTML = UI controls.
Best of both worlds 🌍

---

⏳ Step 3. Add a Loading Screen

Here’s a simple version like in Red Light, Green Light or Tung Tung Run:

function showLoadingScreen() {
  const loadingScreen = document.createElement('div');
  loadingScreen.id = 'game-loading-screen';
  Object.assign(loadingScreen.style, {
    position: 'absolute',
    top: '0',
    left: '0',
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0,0,0,0.7)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 999
  });

  const text = document.createElement('div');
  text.textContent = 'Loading game resources...';
  text.style.color = 'white';
  text.style.fontSize = '20px';

  loadingScreen.appendChild(text);
  document.body.appendChild(loadingScreen);
}

function hideLoadingScreen() {
  const screen = document.getElementById('game-loading-screen');
  if (screen) screen.remove();
}

Call showLoadingScreen() before loading assets, and hideLoadingScreen() after.
Users will love you for it ❤️

---

✨ Bonus Tip: Styling Text

new PIXI.Text('Hello', {
  fontFamily: 'Comic Sans MS',
  fontSize: 36,
  fill: ['#ffffff', '#ffcc00'], // gradient
  dropShadow: true,
  dropShadowColor: '#000000',
  dropShadowBlur: 4
});

Make it flashy. Or weird. You do you 💅

---

✅ What You’ve Learned So Far

• How to show scores and messages with PIXI.Text
• How to add HTML buttons that control your Pixi game
• How to create a basic loading screen
• How to style your UI like a pro (or like a chaos goblin)