How to Implement Real-Time Top-Down Game Maps with Canvas and Ray Casting

What Is a Game Map?

In modern games, a map provides a bird‑eye view of the terrain—plains, mountains, forests, roads—and highlights key locations, helping players navigate large or complex 3D worlds without getting lost.

Why Maps Matter

Immersive Experience: Racing or runner games rely heavily on maps to guide players, creating a sense of presence and direction.

Navigation Aid: A map acts like a GPS for a 3D scene, showing the player’s current position, surrounding structures, and, in combat games, enemy or supply locations.

Top‑Down (Orthographic) Map Implementation

Requirements

Prepare a 1:1 top‑down image of the 3D scene (XZ plane).

Display only the region around the player as the visible area.

Goal

When the player moves, the map updates the player’s position and shows only the local area surrounding the player.

Technical Approach

Load the full map image onto a canvas element, treat it as the background of the visible region, and compute the player’s percentage position on the XZ plane to update the map.

Implementation Steps

Draw a visible‑area frame; load the whole map image into a canvas as the background.

Place the player’s position (in 2D top‑down coordinates) at the center of the visible area.

Obtain the scene’s AABB to get the width and height of the XZ plane.

Calculate the player’s percentage position on the XZ plane.

Map that percentage to the corresponding pixel location on the map image.

When the player walks, move the background map to keep the player icon stationary (non‑edge movement).

When the player reaches the edge of the visible area, keep the map static and move the player icon (edge movement).

Oblique (Non‑Orthographic) Map Implementation

Requirements

Capture a screenshot of the scene from any oblique top‑down angle.

Record the camera’s position, rotation, zoom, near plane distance, and field of view (FOV).

Goal

Accurately reflect the player’s current location on the map regardless of the camera’s tilt.

Technical Approach

Project a ray from the camera to the player, intersect it with the near‑plane (where the map image is placed), and convert the intersection point to 2D map coordinates.

Solution Steps

Define the map plane: normal = camera forward vector, distance = near‑plane distance (e.g., 0.3).

Define a ray from the camera position toward the player’s world position.

Compute the intersection point between the ray and the map plane (world‑space 3D coordinate).

Transform the intersection point from world space to camera space and discard the Z component.

Calculate the near‑plane’s width and height using aspect, fov, and near values.

Determine the percentage of the intersection point within the plane; this percentage maps to the pixel location on the map image.

Key code snippets:

const localN = new Vector(0,0,-1);
const worldN = localN.apply(ModelMatrix);
const plane = new Plane(worldN.normalize(), near);

const ray = new Ray(ICameraPos, dir.normalize());
ray.intersectPlane(plane, targetPoint);

targetPoint = targetPoint.subtract(ICameraPos);
targetPoint = targetPoint.apply(ModelMatrix.inverse());

const halfH = Math.tan(fov*0.5) * near;
const aspect = imgW / imgH;
const halfW = halfH * aspect;
const leftTop = new Vector2(-halfW, halfH);

const px = Math.abs(target2DP.x - leftTop.x) / (2 * halfW);
const py = Math.abs(target2DP.y - leftTop.y) / (2 * halfH);

The resulting px and py values are the normalized coordinates used to place the player icon on the map.

Result Demonstration

When the player moves right and reaches an intersection, the map updates the icon to the correct location, as shown in the video demonstration.

Conclusion

Game maps have become essential stages for player experience, especially with the rise of e‑sports. This guide provides the underlying principles and concrete implementation steps for both orthographic and oblique top‑down maps, helping developers create immersive navigation aids.

Reference: "A Brief Discussion on Mini‑Map and Large‑Map Design in Games" (https://zhuanlan.zhihu.com/p/504211689)