🎥 Video: The Display Class in Limn Engine
A full walkthrough of the Display class — creating the game window, setting the background, and controlling the canvas.
🎯 Watch the Video
👉 Learn about the Display class in Limn Engine — YouTube
This is the next video in the Limn Engine tutorial series. It focuses on the Display class — the foundation of every Limn Engine game. It walks through creating the game window, setting the background color, and controlling the canvas.
Official documentation:
📖 Introduction
Every Limn Engine game starts with one line:
const display = new Display();
That single line creates the canvas, sets up the game loop, and prepares the engine to draw. Everything else — every component, every particle, every score, every pixel — is drawn through the Display.
The Display class is easy to use but easy to misuse. There are a few things you need to get right — the order of perform() and start(), the variable name display, and the difference between the canvas and the world. Getting them wrong doesn't crash the engine, but it does make your game behave in ways that are hard to debug.
This video walks through the Display class from start to finish.
Here's what the video covers:
- Creating a Display and starting the canvas
- The
perform()method — why it comes first, and what breaks if you forget - Setting the background color
- Sizing the canvas
- The camera and how it relates to the Display
- Common mistakes and how to avoid them
🎬 What the Video Covers
Creating a Display. The video starts with the one-line setup — new Display() — and explains what happens under the hood when you create it. The engine creates a canvas element, sets up a 2D drawing context, and prepares the game loop.
The perform() method. Most of the video focuses on this. display.perform() is what switches the engine from the default setInterval loop to requestAnimationFrame. Without it, the game runs at about 50fps with inconsistent pacing. With it, the game runs at a smooth 60fps (or whatever the monitor's refresh rate is).
The order matters: perform() must come before start(). If you call start() first, the patch doesn't take effect, and the game runs on the slow loop. This is one of the most common mistakes beginners make.
Setting the background color. The video shows display.backgroundColor(), which sets the canvas background via CSS. It also shows the gradient options — lgradient() for linear gradients and rgradient() for radial ones — for more polished backgrounds.
Sizing the canvas. display.start(width, height) sets the canvas dimensions. The video covers how to choose a size, how the size relates to mobile screens, and how to scale the canvas with CSS without changing its internal resolution.
The camera. The Display has a camera attached to it. The video explains how the camera moves independently of the canvas, how world coordinates differ from screen coordinates, and how to set the camera's world size so it doesn't scroll past the edges of the level.
Common mistakes. The video finishes with the most common Display-related bugs: forgetting perform(), using a different variable name than display, and calling start() more than once.
🚀 Try It Yourself
The engine:
The online editor (no download required):
👉 limn-engine-doc.vercel.app/editor
The arcade (play games made by others):
👉 limn-engine-doc.vercel.app/arcade
📺 Full Video Series
This video is part of the ongoing Limn Engine tutorial series. Here's the current lineup:
| # | Video | What It Covers |
|---|---|---|
| 1 | Series Start | Introduction to the series |
| 2 | — | Setup and first Display |
| 3 | — | Components and movement |
| 4 | Introduction to Limn Engine | What Limn is, and how to get started |
| 5 | The Display Class | Creating the game window, background colors, and canvas control |
📝 Quick Reference: The Display Class
Here's the minimal Display setup from the video, in case you want to follow along without typing every line:
<!DOCTYPE html>
<html>
<head>
<title>Display Demo</title>
<script src="epic.js"></script>
</head>
<body>
<script>
// Create the engine
const display = new Display();
// MUST come before start()
display.perform();
// Create the canvas
display.start(800, 600);
// Set the background
display.backgroundColor("#0a0a0a");
// Game loop
function update(dt) {
// Game logic goes here
}
</script>
</body>
</html>
And here's the gradient version, for a more polished background:
display.lgradient("bottom", "#0f3460", "#16213e");
// or
display.rgradient("#1a1a2e", "#0a0a0f");
📊 What You've Learned
| Concept | Why It Matters |
|---|---|
new Display() |
Creates the canvas, the game loop, and the camera |
display.perform() |
Switches to requestAnimationFrame for smooth 60fps |
| Order matters |
perform() must come before start()
|
display.start(w, h) |
Sets the canvas size and begins the game loop |
display.backgroundColor() |
Sets the canvas background via CSS |
display.lgradient() / rgradient() |
Gradient backgrounds for a more polished look |
display.camera |
Controls what part of the world is visible |
⚠️ Common Mistakes to Avoid
Forgetting perform(). Without it, your game runs at about 50fps on an unreliable setInterval loop. Movement feels inconsistent, and dt doesn't behave the way you expect.
Calling start() before perform(). The patch doesn't take effect if start() has already run. Always call perform() first.
Naming the Display something else. The engine references display internally. Calling your instance game or app will throw errors in places you don't expect.
Calling start() more than once. The engine creates a canvas on every start() call. Multiple calls stack multiple canvases on the page.
🐛 Found a Bug?
If you find something in the video that doesn't work, report it on GitHub:
👉 github.com/terracodes004/limn-engine-doc/issues
Please include your browser, your device, and the timestamp in the video where the issue appears.
🔗 Resources
| Resource | Link |
|---|---|
| YouTube Video | The Display Class |
| Previous Video | Introduction to Limn Engine |
| Limn Engine Docs | limn-engine-doc.vercel.app |
| Limn Studio (Editor) | limn-engine-doc.vercel.app/editor |
| Limn Arcade | limn-engine-doc.vercel.app/arcade |
| GitHub Repository | github.com/terracodes004/limn-engine-doc |
| Report Bugs | github.com/terracodes004/limn-engine-doc/issues |
| Discord | discord.gg/kVpSmYWXr |
| Kehinde on DEV.to | dev.to/kehinde_owolabi_e2e54567a |
🎯 The One-Line Summary
"A full walkthrough of the Display class — creating the game window, setting the background, sizing the canvas, and controlling the camera in Limn Engine." 🎮🚀
Draw your game into existence — one Display at a time. 🎮🚀
Top comments (0)