Camera2D

follow a target with smoothing, zoom, and edge limits.

▶ Run in browser

Tags: 2d camera

Add a Camera2D and point its target at a node; the view then follows that node. smoothing adds lag so the camera eases after the player instead of snapping, zoom scales the view, and the limit_* properties stop the camera from showing past the edges of your world. Move the cube with WASD, the arrows, or by holding the left mouse button (tap and hold on touch screens) and watch the grid scroll underneath it while the cube stays near the centre.

What it demonstrates

• Camera2D + camera.target = node – the renderer tracks the target’s position.

• smoothing – ease toward the target instead of snapping (0 = instant).

• zoom – scale the whole view.

• limit_left/right/top/bottom – clamp the camera so it never shows past the world edges.

• World-space drawing (the grid, camera-affected) vs a screen-fixed HUD (a Text2D node).

Source

"""Camera2D: follow a target with smoothing, zoom, and edge limits.

Add a `Camera2D` and point its `target` at a node; the view then follows that node.
`smoothing` adds lag so the camera eases after the player instead of snapping, `zoom`
scales the view, and the `limit_*` properties stop the camera from showing past the
edges of your world. Move the cube with WASD, the arrows, or by holding the left mouse
button (tap and hold on touch screens) and watch the grid scroll underneath it while
the cube stays near the centre.

# /// simvx
# tags = ["2d", "camera"]
# web = { root = "CameraDemo", width = 800, height = 600, responsive = true }
# ///

## What it demonstrates

- `Camera2D` + `camera.target = node` -- the renderer tracks the target's position.
- `smoothing` -- ease toward the target instead of snapping (0 = instant).
- `zoom` -- scale the whole view.
- `limit_left/right/top/bottom` -- clamp the camera so it never shows past the world edges.
- World-space drawing (the grid, camera-affected) vs a screen-fixed HUD (a `Text2D` node).
"""

import math

from simvx.core import Camera2D, Input, Key, MouseButton, Node2D, Text2D, Vec2
from simvx.graphics import App

WIDTH, HEIGHT = 800, 600
WORLD = 700  # half-size of the playable world

# World-space landmarks (x, y, colour) so the scroll has something to read against.
LANDMARKS = [
    (-400, -300, (0.9, 0.4, 0.4, 1)),
    (400, 300, (0.4, 0.9, 0.5, 1)),
    (400, -300, (0.9, 0.8, 0.3, 1)),
    (-400, 300, (0.7, 0.5, 0.95, 1)),
]


class Player(Node2D):
    SPEED = 320.0

    camera: Camera2D | None = None  # set by CameraDemo; used to map the pointer into world space

    def on_update(self, dt: float):
        dx = Input.get_strength("move_right") - Input.get_strength("move_left")
        dy = Input.get_strength("move_down") - Input.get_strength("move_up")
        self.position += Vec2(dx, dy) * self.SPEED * dt
        # Mouse/touch: hold the left button (a touch on the web) to steer toward the
        # pointer; the camera converts the screen position into world coordinates.
        if self.camera is not None and Input.is_mouse_button_pressed(MouseButton.LEFT):
            target = self.camera.screen_to_world(Input.mouse_position, Vec2(self.app.width, self.app.height))
            offset = target - self.position
            dist = math.hypot(offset.x, offset.y)
            if dist > 4.0:  # dead zone so the cube settles under the pointer
                self.position += offset * (min(self.SPEED * dt, dist) / dist)
        self.position.x = max(-WORLD, min(WORLD, self.position.x))
        self.position.y = max(-WORLD, min(WORLD, self.position.y))

    def on_draw(self, renderer):
        renderer.draw_rect(
            (self.position.x - 20, self.position.y - 20),
            (40, 40),
            colour=(0.4, 0.8, 1.0, 1.0),
            filled=True,
        )


class CameraDemo(Node2D):
    dynamic = True  # world-space grid scrolls as the followed camera moves

    input_actions = {
        "move_left": [Key.A, Key.LEFT],
        "move_right": [Key.D, Key.RIGHT],
        "move_up": [Key.W, Key.UP],
        "move_down": [Key.S, Key.DOWN],
    }

    def on_ready(self):
        self.player = self.add_child(Player(position=Vec2(0, 0)))

        cam = self.add_child(Camera2D())
        cam.target = self.player  # follow the player
        cam.smoothing = 6.0  # ease after it (0 = snap)
        cam.zoom = 1.0
        # Stop the camera at the world edges (view half-size is screen/2 / zoom).
        # These are computed from the launch size, so a resized window shows a little
        # past the edge; recompute them from the live size if that matters to you.
        cam.limit_left = -WORLD + WIDTH / 2
        cam.limit_right = WORLD - WIDTH / 2
        cam.limit_top = -WORLD + HEIGHT / 2
        cam.limit_bottom = WORLD - HEIGHT / 2
        self.player.camera = cam  # lets the player map pointer clicks into world space

        # Screen-fixed HUD: a Text2D node renders as an overlay, ignoring the camera.
        self.add_child(
            Text2D(
                text="Camera2D: WASD/arrows or click/tap to move (camera follows)",
                position=Vec2(20, 20),
                font_scale=1.5,
                colour=(1, 1, 1, 1),
            )
        )

    def on_draw(self, renderer):
        # World-space grid + landmarks: these are drawn in world coordinates, so the
        # camera transform scrolls them as the player moves.
        for gx in range(-WORLD, WORLD + 1, 100):
            for gy in range(-WORLD, WORLD + 1, 100):
                renderer.draw_circle((gx, gy), 3, colour=(0.3, 0.3, 0.36, 1.0), filled=True)
        for lx, ly, col in LANDMARKS:
            renderer.draw_rect((lx - 30, ly - 30), (60, 60), colour=col, filled=True)


if __name__ == "__main__":
    App(title="Camera2D", width=WIDTH, height=HEIGHT).run(CameraDemo())