Skip to documentation
CranberryClock.Ideas / Systems / Design

INDEPENDENT TOOL / v0.1.0

SignalTutorial

Work through the Signal example and adapt the pattern to your own project.

Tutorial: a boss cleave

javascript
import * as THREE from 'three';
import { Telegraph } from '@cranberry-forge/signal';

const warning = new Telegraph({
  shape: 'cone', radius: 10, innerRadius: 0.5,
  angle: 75, color: '#a8a1ff', segments: 48
});
scene.add(warning);
warning.position.set(boss.position.x, 0, boss.position.z);
warning.rotation.y = boss.rotation.y;
warning.project((x,z) => terrain.getHeight(x,z));

const playerWorldPosition = new THREE.Vector3();
warning.addEventListener('complete', () => {
  player.getWorldPosition(playerWorldPosition);
  if (warning.containsPoint(playerWorldPosition)) {
    // Your game decides damage, vertical tolerance, teams and invulnerability.
    applyDamage(player, 10);
  }
  warning.visible = false;
});

warning.arm(elapsedSeconds, 3);
// Each frame, with a monotonically increasing clock in seconds:
warning.update(elapsedSeconds);
// On level cleanup: warning.dispose();

Run the repository server and open /examples/signal.html for a minimal standalone example: one warning, a heightfield and a moving target. The complete interactive workbench is /signal.html. Neither example requires another Cranberry Forge package.

View versioned source on GitHub ↗