How to Try Phaser Cone Lights - First Indie Flashlight Vision Spike 2026

If you are searching phaser cone lights, you do not need another “Phaser 4.2 has Mesh2D and stencils” roundup. You need a Monday path: pin Phaser ≥ 4.2.0, enable the lights system on a WebGL scene, put normal-mapped (or Light2D pipeline) sprites in a dark room, call addConeLight, aim the cone at the mouse or along the player facing, then write keep / hold / rewrite before anyone ships mask-camera flashlight theater as if it were the same feature.

On June 19, 2026, Phaser shipped v4.2.0 “Giedi” with community-contributed cone lights — directional dynamic lights for flashlights, lantern beams, vision cones, headlights, and searchlights (Phaser v4.2.0 news, GitHub release). The July 9, 2026 Spine / Mesh2D news still calls cone lights out in the 4.2 wave (Spine renderer post). Official API sketch: lights.addConeLight, setCone, setConeRotation, setConeAngles, disableCone.

This evening is not Phaser Spine Mesh2D (slot objects). It is not Game Agent Box3D (prompt physics on AE). It is not Game Agent MCP. It is not Godot AreaLight3D or Defold 1.13.1 lights. It is the dedicated phaser cone lights flashlight / vision-cone spike on a throwaway WebGL lab.

Time: about 60–90 minutes on a lab Phaser 4 WebGL project. Longer if you must author normal maps from scratch tonight.

Why this matters now

Three clocks make phaser cone lights worth an evening this month:

1. Cone lights are first-class in 4.2. Official news positions them as standard dynamic lights restricted to a directional cone — no second Camera, no map double-render, no GeometryMask flashlight hack (v4.2.0 release).
2. July coverage still spikes the feature. The Spine / Mesh2D write-up keeps cone lights in the public 4.2 story (July 9 news). Discord will ask “did you try addConeLight?” whether your jam is horror, stealth, or driving.
3. Mask theater is now the wrong default. Teams that still darken a layer and punch a circle with a mask pay batch and readability costs that cone lights were meant to avoid. Measure once on Light2D before you defend the old trick.

If you still need browser fundamentals, skim TypeScript browser games and the free Phaser resource list on a different night — tonight stays on lighting.

Glossary - plain words

What Phaser 4.2 cone lights actually claim (true summary)

From Phaser v4.2.0 “Giedi” and the v4.2.0 GitHub release:

• Cone lights are standard Phaser dynamic lights restricted to a directional cone.
• Useful for flashlights, lantern beams, vision cones, headlights, searchlights, and other focal sources.
• They run through the existing WebGL lighting shader.
• They do not require a mask, a second Camera, or rendering the map twice.
• Any game object that already works with Phaser lighting can be lit by a cone light.
• Quick create: this.lights.addConeLight(x, y, radius, color, intensity, rotation, innerAngle, outerAngle).
• Angles are full cone widths, not half-angles.
• Inside inner → full light; between inner and outer → smooth fade; beyond outer → no contribution from this light.
• Omit outer angle for a hard edge.
• Follow a player by updating position and setConeRotation each frame.
• Reshape with setConeAngles; return to radius-only with disableCone.
• Use cone lights when the light should affect lit game objects and normal maps.
• Use Point Light game objects when you only need a fast radial glow that does not light anything else.

Honest limits: lighting is a WebGL story. Canvas-first SKUs do not get this spike as a ship feature. Cone lights will not fix muddy albedo, missing normal maps, or a scene that never called lights.enable(). This spike does not replace art direction reviews or Steam trailer lighting passes.

Keep / hold / rewrite - Monday decisions

Write the decision on the receipt before anyone merges package bumps or deletes the old mask flashlight.

Prerequisites

• Node.js + npm (or yarn)
• A lab Phaser 4.2+ WebGL project (throwaway branch or folder)
• At least one sprite that can take the Light2D pipeline (normal map optional but strongly preferred)
• Willingness to darken ambient so the cone is visible
• About 60–90 minutes blocked calendar
• Optional: Spector.js / browser performance panel for a light GPU peek

Beginner path - first evening (no jargon first)

1) Create or open a lab project

Do not bump production package.json on day one. Scaffold Vite + Phaser, clone a sample, or copy a throwaway folder. Goal: a scene that boots WebGL without errors.

npm install phaser@^4.2.0

Confirm node_modules/phaser/package.json is ≥ 4.2.0. Prefer a current 4.2.x patch if your lockfile allows it.

2) Enable lights and darken the room

create() {
  this.lights.enable();
  this.lights.setAmbientColor(0x202028);

  const floor = this.add.image(400, 300, "floor");
  floor.setPipeline("Light2D");

  const wall = this.add.image(400, 200, "wall");
  wall.setPipeline("Light2D");
}

If ambient is still bright white, you will swear cone lights are broken. Dim first.

3) Add one cone light

this.flashlight = this.lights.addConeLight(
  400,                       // x
  300,                       // y
  320,                       // radius
  0xffcc88,                  // color
  2,                         // intensity
  Phaser.Math.DegToRad(0),   // rotation
  Phaser.Math.DegToRad(30),  // inner angle (full width)
  Phaser.Math.DegToRad(60)   // outer angle (full width)
);

You should see a warm directional pool on Light2D sprites — not a circular Point Light glow Game Object, and not a masked hole.

4) Aim with the mouse (or player facing)

update(_time, _delta) {
  const pointer = this.input.activePointer;
  const light = this.flashlight;
  light.x = this.player.x;
  light.y = this.player.y;

  const angle = Phaser.Math.Angle.Between(
    this.player.x,
    this.player.y,
    pointer.worldX,
    pointer.worldY
  );
  light.setConeRotation(angle);
}

5) Compare hard edge vs soft fade

Omit the outer angle (or set outer equal to inner after create with setConeAngles) for a hard cut. Widen outer for a soft penumbra. Screenshot both into the receipt notes.

6) Write keep / hold and stop

Do not refactor every ambient light tonight. One cone + follow + receipt is the spike.

Working-dev path - gates C1–C6

Use these gates as the evening checklist. Mark each GREEN / YELLOW / RED on the receipt.

C1 - Pin matrix

node -e "console.log(require('phaser/package.json').version)"

C2 - Lights system on

Failure mode: enabling lights but leaving sprites on the default pipeline — room stays flat.

C3 - Cone create API

C4 - Follow / aim

C5 - Cone vs Point Light honesty

Write one honesty sentence on the receipt: which tool you chose and why.

C6 - Keep/hold + capture

Receipt template - phaser_cone_lights_receipt_v1.json

{
  "schema": "phaser_cone_lights_receipt_v1",
  "project": "lab-flashlight-spike",
  "phaser_version": "4.2.x",
  "renderer": "WEBGL",
  "gates": {
    "C1_pin": "GREEN",
    "C2_lights_enable": "GREEN",
    "C3_add_cone": "GREEN",
    "C4_follow_aim": "GREEN",
    "C5_vs_point_light": "GREEN",
    "C6_capture_decision": "GREEN"
  },
  "api_used": ["lights.enable", "addConeLight", "setConeRotation"],
  "inner_angle_rad": 0.52,
  "outer_angle_rad": 1.05,
  "normal_maps": true,
  "mask_flashlight_removed": true,
  "decision": "keep",
  "decision_notes": "Soft flashlight readable on Light2D walls; Point Light GO reserved for muzzle flash glow only.",
  "owners": {
    "engineering": "NAME",
    "art_or_producer": "NAME"
  },
  "capture_path": "artifacts/cone_lights_10s.webm",
  "fps_note": "optional mid-tier 1% lows with 1 cone + ambient",
  "promoted_to_ship": false
}

Store beside other evidence habits from BUILD_RECEIPT. Do not invent studio names in the JSON — use your real owners.

Common mistakes (and fast fixes)

Worked example - stealth vision cone numbers (lab template)

Use as a fill-in table, not universal truth.

Pass rule: if the cone is only readable when intensity is cranked until albedo blows out, fix materials / ambient before you blame addConeLight.

Optional - reshape and disable helpers

// Soften after create
this.flashlight.setConeAngles(
  Phaser.Math.DegToRad(28),
  Phaser.Math.DegToRad(64)
);

// Temporary radial (non-cone) for a cutscene glow
this.flashlight.disableCone();

// Re-enter cone mode on an existing light
this.flashlight.setCone(
  Phaser.Math.DegToRad(0),
  Phaser.Math.DegToRad(30),
  Phaser.Math.DegToRad(60)
);

Confirm live method names against your installed Phaser typings if a patch renames helpers — the v4.2.0 news is the narrative source of truth for this spike.

Art pipeline notes (creators)

1. Blockout dark first with ambient only so layout reads before the beam.
2. Author normal maps for hero walls and props — cones sell better on lit normals than on flat color.
3. Keep albedo honest — warm flashlights amplify muddy textures.
4. Separate UI glow (Point Light GO or additive sprites) from world lighting (cone / dynamic lights).
5. Share a Discord brief with a side-by-side: mask flashlight vs cone — producers need the look, not only the API name.
6. Trailer maps may use brighter cones; tag them non_ship_lighting in receipt notes if intensities differ from gameplay.

Performance and WebGL honesty

Dynamic lights are not free. For a first spike:

• Prefer one cone on the player or one guard.
• Measure mid-tier laptops and Steam Deck-class targets before multiplying beams.
• Spector / Performance panel: note that you are not double-drawing the map for a mask camera.
• If FPS fails with one cone, do not “fix” by adding more — hold and profile textures / overdraw.

Company diligence language (when relevant): a producer zip can include the receipt JSON, pin excerpt, 10s capture, and links to Phaser v4.2.0. That is enough to show the team evaluated flashlight tech without claiming Canvas parity.

Format ladder - same cluster, different jobs

Cross-engine lighting cousins stay on their keywords: Godot AreaLight3D, Defold lights.

How this differs from other Phaser 4.2 spikes

Same keep/hold culture; different ship risk.

Stretch goals (only after C1–C6 green)

• Second cone on a rotating turret with independent setConeRotation.
• Hard-edge searchlight vs soft lantern A/B for art direction.
• Toggle disableCone during a cutscene bloom.
• One guard FOV cone driven by AI facing (still one receipt).

Stop at one stretch if the clock hits 90 minutes — file the receipt first.

Secondary 4.2 features (park for later)

Do not expand tonight’s receipt to cover:

• Mesh2D / Spine slot objects — Spine Mesh2D evening
• Stencil / StencilReference mask alternatives
• AlphaStrategy dither / threshold
• Game Agent prompts — separate AE stack
• Phaser 3.90 tilemap OOM — chunk streaming playbook

Tonight is phaser cone lights only.

Discord / stand-up brief (copy/paste)

Phaser cone lights spike (4.2+)
- Pin: Phaser ____
- Renderer: WEBGL
- C1–C6: ____ / ____ / ____ / ____ / ____ / ____
- Soft or hard cone: ____
- vs Point Light GO: ____
- Decision: keep | hold | rewrite
- Capture: ____
- Owners: eng ____ / art-producer ____

Paste into the stand-up channel your team already uses — do not invent a GamineAI community URL.

Key takeaways

1. phaser cone lights shipped in Phaser 4.2.0 as directional dynamic lights for flashlights and vision cones.
2. Prefer WebGL + lights.enable() + Light2D sprites before blaming the API.
3. Use addConeLight (or setCone) — angles are full cone widths.
4. Soft fade = outer > inner; hard edge = omit outer.
5. Follow the player with position + setConeRotation each frame.
6. Cone / dynamic lights light objects and normal maps; Point Light Game Objects are a different glow tool.
7. You do not need a mask, second Camera, or double map render for this spike.
8. Gates C1–C6 make the evening auditable for eng and producers.
9. Cap to one hero cone until the receipt is green.
10. File phaser_cone_lights_receipt_v1.json with dual owners.
11. Do not confuse this with Spine Mesh2D, Game Agent Box3D, or MCP evenings.
12. Cite Phaser v4.2.0 when pins or API notes drift.

FAQ

What are Phaser cone lights?

Directional Phaser dynamic lights restricted to a cone — for flashlights, vision beams, headlights, and similar focal sources in Phaser 4.2+ (official news).

How do I create a cone light?

Call this.lights.addConeLight(x, y, radius, color, intensity, rotation, innerAngle, outerAngle) after lights.enable(), or restrict an existing light with setCone.

Are cone angles half-angles or full widths?

Full cone widths, per Phaser’s 4.2 documentation. Fragments inside the inner width get full light; between inner and outer they fade.

Do I need a mask for a flashlight?

No for this feature. Cone lights run through the WebGL lighting shader without a mask or second Camera (v4.2.0 news).

Cone light vs Point Light - which should I use?

Use cone / dynamic lights when walls and normal maps must receive the beam. Use Point Light Game Objects when you only need a fast radial glow that does not light other objects.

Why is my cone invisible?

Usual causes: lights not enabled, sprites not on Light2D, ambient too bright, Canvas renderer, or intensity too low. Walk C2 before rewriting art.

Can I follow the player with the cone?

Yes. Update the light’s x/y and call setConeRotation each frame toward aim or facing.

Does this work on Canvas?

Treat cone lighting as a WebGL keep/hold. Canvas-first SKUs should hold or rewrite UX rather than claiming parity.

Is this the same as Phaser Spine Mesh2D?

No. Mesh2D / slot objects are a different 4.2 spike — see Spine Mesh2D.

How long should the spike take?

About 60–90 minutes for pin → enable → one cone → follow → receipt. Normal-map authoring adds time.

Should we migrate production the same night?

No. Keep the lab green, schedule skin/lighting regression, then bump ship pins with owners named on the receipt.

Related reading

• How to Try Bevy Contact Shadows - First Indie Soft Contact Spike 2026
• How to Try Phaser Spine Mesh2D - First Indie Slot Object Spike 2026
• How to Try Phaser Game Agent Box3D - First Indie Physics Prompt Spike 2026
• How to Use Phaser Game Agent MCP with Cursor - First Browser Game Evening 2026
• How to Try Godot AreaLight3D - First Indie Soft Light Spike 2026
• How to Use Defold 1.13.1 Lights - First Indie Lit Scene Evening 2026
• Game Development with TypeScript - Building Browser Games
• Your First BUILD_RECEIPT.json and Upload Log
• 25 Free Phaser.js Web Game Development Resources - 2026
• Web Game with AI course

Official and useful sources

• Phaser v4.2.0 Giedi - Mesh2D, Stencil, Cone Lights
• Phaser v4.2.0 GitHub release
• Phaser 4.2 Spine / Mesh2D / Stencil news (cone lights called out)
• Phaser documentation
• npm phaser

Conclusion

Phaser cone lights turn flashlight and vision-cone fantasies into first-class WebGL lighting — addConeLight, soft or hard edges, and setConeRotation follow — without mask-camera theater. Pin 4.2+ on a lab WebGL project, enable Light2D, prove one readable beam, fill C1–C6, then let humans own the ship merge. Bookmark this keep/hold beside the Phaser v4.2.0 notes and keep the receipt where producers can find it.