Building an ESP

Health elements in the ESP builder, boxes on the overlay and a menu toggle, step by step.

We’ll build an enemy ESP in five small steps: health text and a health bar in the ESP builder, then boxes and head dots drawn on the overlay, colored by visibility and controlled from a menu.

Start from a project made with spd new (see Getting started) and keep spd watch running. The script reloads on every save, so each step shows up in game right away.

---

Step 1: Health text

esp elements live in the user’s ESP builder. The user places and toggles them; your code only supplies the value. Replace src/index.ts with:

import esp from "@native/esp";

const enemies = esp.class("enemy");

enemies.text({
    name: "health",
    area: "top",
    preview: "100 hp",
    evaluate: (pawn) => (pawn.m_iHealth > 0 ? `${pawn.m_iHealth} hp` : null),
});

evaluate runs every tick for every enemy pawn. Returning null hides the element on that pawn. Open the ESP builder: “health” is there, showing the preview text.

---

Step 2: Health bar

A bar takes a fraction, or an object when you want to set the colors. Add:

enemies.bar({
    name: "health-bar",
    label: "Health bar",
    area: "left",
    preview: 1,
    evaluate: (pawn) => {
        const hp = pawn.m_iHealth;
        if (hp <= 0) return null;
        return { value: hp, max: 100, color: "#ff4040", colorAlt: "#40ff40", colorMode: "value" };
    },
});

colorMode: "value" blends from color when empty to colorAlt when full. Keys you leave out keep whatever the user set in the builder.

When several elements need the same data, compute it once per pawn with context: esp.class("enemy", { context: (pawn) => ({ hp: pawn.m_iHealth }) }), then read ctx.hp in each evaluate(pawn, ctx).

---

Step 3: Boxes on the overlay

Builder elements are laid out for you. For free-form drawing, use render. Reading entities goes in tick, drawing in render: draw calls throw anywhere else.

Add the imports at the top and the listeners at the bottom:

import render from "@native/render";
import entities from "@native/entities";

let targets: IPlayerPawn[] = [];

on("tick", () => {
    targets = [];
    const me = entities.getLocalPlayer();
    if (!me) return;

    for (const pawn of entities.getPlayers({ skipLocal: true })) {
        if (pawn.m_iHealth > 0 && pawn.isEnemy(me)) targets.push(pawn);
    }
});

on("render", () => {
    for (const pawn of targets) {
        const box = render.boundsOf(pawn);
        if (box) render.rect(box.min, box.max, "#ff4040", { thickness: 1.5 });
    }
});

render.boundsOf returns the pawn’s box on screen, or null when part of it is behind the camera.

---

Step 4: Head dot and visibility

Store whether each enemy is visible, and pick the color from it. Replace both listeners:

let targets: { pawn: IPlayerPawn; visible: boolean }[] = []; 

on("tick", () => {
    targets = [];
    const me = entities.getLocalPlayer();
    if (!me) return;

    for (const pawn of entities.getPlayers({ skipLocal: true })) {
        if (pawn.m_iHealth <= 0 || !pawn.isEnemy(me)) continue; 
        targets.push({ pawn, visible: me.isVisible(pawn) === true }); 
    }
});

on("render", () => {
    for (const { pawn, visible } of targets) { 
        const box = render.boundsOf(pawn);
        if (!box) continue; 

        const color = visible ? "#40ff40" : "#ff4040"; 
        render.rect(box.min, box.max, color, { thickness: 1.5 }); 

        const eye = pawn.getEyePosition(); 
        const head = eye && render.worldToScreen(eye); 
        if (head) render.circleFilled(head, 3, color); 
    }
});

isVisible returns null without a map, hence the === true. render.worldToScreen returns null for points behind the camera.

---

Step 5: Menu toggle

Give the script a page in the menu with a switch and two colors. Values persist in the user’s configs. Declare controls once, at the top level:

import ui from "@native/ui";

const settings = ui.page("ESP", { icon: "eye" }).group("Boxes");
const boxes = settings.switch("Enabled", { default: true });
const visibleColor = settings.color("Visible", { default: "#40ff40" });
const hiddenColor = settings.color("Hidden", { default: "#ff4040" });

on("keydown", (e) => {
    if (e.code === "F6" && !e.repeat) boxes.value = !boxes.value;
});

Then read them in the listeners:

// tick
if (!me || !boxes.value) return; 

// render
const color = (visible ? visibleColor.value : hiddenColor.value) ?? "#ffffff"; 

Pressing F6 flips the switch in the menu too.

---

Full script

src/index.ts

import esp from "@native/esp";
import ui from "@native/ui";
import render from "@native/render";
import entities from "@native/entities";

const settings = ui.page("ESP", { icon: "eye" }).group("Boxes");
const boxes = settings.switch("Enabled", { default: true });
const visibleColor = settings.color("Visible", { default: "#40ff40" });
const hiddenColor = settings.color("Hidden", { default: "#ff4040" });

const enemies = esp.class("enemy");

enemies.text({
    name: "health",
    area: "top",
    preview: "100 hp",
    evaluate: (pawn) => (pawn.m_iHealth > 0 ? `${pawn.m_iHealth} hp` : null),
});

enemies.bar({
    name: "health-bar",
    label: "Health bar",
    area: "left",
    preview: 1,
    evaluate: (pawn) => {
        const hp = pawn.m_iHealth;
        if (hp <= 0) return null;
        return { value: hp, max: 100, color: "#ff4040", colorAlt: "#40ff40", colorMode: "value" };
    },
});

let targets: { pawn: IPlayerPawn; visible: boolean }[] = [];

on("tick", () => {
    targets = [];
    const me = entities.getLocalPlayer();
    if (!me || !boxes.value) return;

    for (const pawn of entities.getPlayers({ skipLocal: true })) {
        if (pawn.m_iHealth <= 0 || !pawn.isEnemy(me)) continue;
        targets.push({ pawn, visible: me.isVisible(pawn) === true });
    }
});

on("render", () => {
    for (const { pawn, visible } of targets) {
        const box = render.boundsOf(pawn);
        if (!box) continue;

        const color = (visible ? visibleColor.value : hiddenColor.value) ?? "#ffffff";
        render.rect(box.min, box.max, color, { thickness: 1.5 });

        const eye = pawn.getEyePosition();
        const head = eye && render.worldToScreen(eye);
        if (head) render.circleFilled(head, 3, color);
    }
});

on("keydown", (e) => {
    if (e.code === "F6" && !e.repeat) boxes.value = !boxes.value;
});

---

Next steps

esp

Icons, style keys, context, element handles.

render

Every draw call, text, textures.

ui

Sliders, combos, hotkeys, reactive labels.

entities

Bones, hitboxes, schema fields.