2D Game Engines: Kaplay & Phaser

What Does a Game Engine Do?

A game engine is a library of pre-built tools for common game development tasks. Instead of writing the game loop, sprite management, physics, collision, audio, and input handling from scratch every time, you use the engine's systems.

• Scene Management — organize game states (menu, level 1, game over) as separate scenes with clean transitions
• Sprite System — load PNG images, cut sprite sheets, animate frames automatically
• Physics Engine — realistic gravity, velocity, bounce, and AABB/circle collision baked in
• Input System — clean API for keyboard, mouse, touch, and gamepad — no raw event listeners
• Audio Manager — play, loop, stop, and volume-control sound effects and music
• Asset Loader — preload images and sounds before the game starts so nothing is missing mid-game
• Camera System — follow the player, shake on impact, zoom in and out

Kaplay vs Phaser 3

These are the two most popular JavaScript 2D game engines for classroom use. Both are free, open-source, and run in any browser without installation.

The Scene Lifecycle

Both engines organize game logic into scenes — discrete states of the game (main menu, gameplay, game over). Phaser uses a strict three-phase lifecycle:

Kaplay is looser — you define a scene as a function and use add() calls to create objects. The engine runs its own loop internally.

Code Comparison — Moving a Player

The same feature — a player square that moves with arrow keys — in both engines:

// Kaplay — minimal setup, very readable
kaplay();

scene("game", () => {
  // create a player with components
  const player = add([
    rect(32, 32),           // draw a 32×32 rectangle
    pos(200, 200),          // starting position
    color(BLUE),             // color it blue
    area(),                  // enable collision detection
    body(),                  // enable gravity/physics
    "player",               // tag for collision queries
  ]);

  // movement — checked every frame automatically
  onKeyDown("left",  () => player.move(-200, 0));
  onKeyDown("right", () => player.move( 200, 0));
  onKeyPress("up",    () => player.jump());
});

go("game");

// Phaser 3 — explicit scene class, more structured
class GameScene extends Phaser.Scene {
  preload() {
    // load assets here — images, tilemaps, audio
  }

  create() {
    // create player as a rectangle physics body
    this.player = this.add.rectangle(200, 200, 32, 32, 0x3b82f6);
    this.physics.add.existing(this.player);
    this.player.body.setGravityY(400);

    // set up cursor keys
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    const body = this.player.body;
    body.setVelocityX(0);

    if (this.cursors.left.isDown)  body.setVelocityX(-200);
    if (this.cursors.right.isDown) body.setVelocityX( 200);
    if (this.cursors.up.isDown && body.blocked.down)
      body.setVelocityY(-500);
  }
}

new Phaser.Game({ scene: GameScene, physics: { default: 'arcade' } });

Core Concepts in Any 2D Engine

Sprites & Sprite Sheets

A sprite is a 2D image used for a game character or object. A sprite sheet packs many animation frames into a single image file. The engine extracts each frame by its pixel coordinates.

Tilemaps

A tilemap is a grid of small tile images used to build levels. You design levels in a free tool called Tiled and export JSON data that Phaser (or Kaplay) can load and render efficiently — thousands of tiles drawn in milliseconds.

Physics Groups & Overlap

Engines let you create groups of objects (e.g., all enemies) and then run collision checks against the whole group in one line — much more efficient than looping yourself.

Tweens & Easing

A tween animates a value over time — move an object from X to Y, fade it in, scale it up. Combined with easing functions (ease-in, bounce), this makes games feel polished with very little code.

Which Engine Should You Use?