Beginner
-
Crash Course in PixiJS
Beginner
If you’ve been through the JavaScript crash course, you’ve got the language basics down. Now we need a way to actually draw things on screen. That’s where PixiJS comes in. Let’s look at what it is, why it’s a great fit for tile-based games, and how to get something on screen with just a few lines of code.
Why PixiJS?
Browsers have a built-in way to draw 2D graphics called the Canvas API. You can draw rectangles, images, and paths with it. It works fine for simple stuff, but it runs on the CPU — your computer’s main processor — and for games with lots of tiles updating every frame, that becomes slow pretty quickly.
-
Why Tiles?
Games like Super Mario Bros, The Legend of Zelda, and Stardew Valley build their worlds from tiles — small, reusable images arranged on a grid. The technique has been around since the early arcade era, and it’s still standard practice because it solves a real problem efficiently.
So if you want to put a nice background into your game, but the picture would be too large and make the game very slow. What to do? Slice the picture into tiles!
-
Map Format
Maps in tile-based games are stored as 2D arrays — grids of numbers where each value identifies a tile type. The position of each number in the array corresponds directly to its position in the world.
2D arrays
A 2D array is an array whose elements are themselves arrays. Each inner array is a row, and the outer array holds all the rows. Starting simple:
A basic array might store your player’s inventory:
-
More Maps
2D arrays work well for most tile-based games, but the format has trade-offs. Different game structures call for different storage strategies — this section covers the main options and when each makes sense.
Frame-based mapping
Each number in the array directly represents a sprite frame or tile type. No separate type definitions required — the number is the tile identity.
// Each number = a different tile graphic const levelMap = [ [5, 5, 5, 5, 5], // Stone walls [5, 1, 2, 3, 5], // Floor, grass, water, sand [5, 5, 5, 5, 5] // Stone walls ]; // Define tile ranges for collision const TileRanges = { walkable: [1, 2, 3], // Frames 1-3 are walkable walls: [5], // Frame 5 blocks movement water: [2], // Frame 2 is water (maybe slows player?) damage: [10, 11, 12] // Frames 10-12 hurt the player };Good for: Retro platformers, puzzle games, simple RPGs
Trade-off: Fast to implement and reason about; harder to attach complex behaviour to individual tile types later. -
Rendering a Map
Rendering converts a 2D array into a visual grid. For each value in the map, draw a coloured rectangle at the corresponding pixel position.
Array: Visual result: [1, 1, 1, 1] → 🧱🧱🧱🧱 [1, 0, 0, 1] → 🧱 🌟🌟🧱 [1, 1, 1, 1] → 🧱🧱🧱🧱 Each 1 becomes a solid wall, each 0 becomes walkable space.Loading editor…Map data and tile definitions
The map and tile type definitions from the previous tutorial, ready to use:
-
The Hero
The hero is a data object that stores position, size, and a reference to its sprite. Separating data from visuals keeps the game logic independent of how things are drawn.
Loading editor…The hero object
The hero stores two coordinate systems alongside its sprite reference:
-
Crash Course in JavaScript
Beginner
So you might be here because you’re interested in code or fearful of it. Hopefully, this little read will empower you with some basics. And we’ll discover it’s really not too scary and kind of exciting what we can do with very little.
These are some foundational concepts. You don’t have to read or understand this to begin. But if you’re unfamiliar with code you might have a better time if you do. I know it’s boring and a little hard to relate to these ideas without all the context of what you’ll be doing later.