Fraxel Node Reference: All JSX Elements Explained

import { useNode } from 'fraxel/hooks'
import { PrimaryNode, Vector2 } from 'fraxel'

function Player() {
  const body = useNode(PrimaryNode.Transform)

  return (
    <transform ref={body} position={new Vector2(100, 200)}>
      <sprite textureId={PLAYER_TEXTURE} />
      <collider shape={shapes.circle(16)} group={['player']} collidesWith={['enemy']} />
    </transform>
  )
}

<group>
  <sprite textureId={playerTexture} />
  <sprite textureId={shadowTexture} />
</group>

import { loadTexture } from 'fraxel/assets'
import { useNode } from 'fraxel/hooks'
import { PrimaryNode } from 'fraxel'

const PLAYER = await loadTexture('/assets/player.png')

function Player() {
  const sprite = useNode(PrimaryNode.Sprite)
  const [health] = useSignal(100)

  return (
    <sprite
      ref={sprite}
      textureId={PLAYER}
      sourceSize={[16, 16]}
      displaySize={[32, 32]}
      brightness={1.2}
      modulate={[1, 0.5, 0, 1]}
      grayscale={() => health() <= 0 ? 1 : 0}
    />
  )
}

import { useNode } from 'fraxel/hooks'
import { PrimaryNode } from 'fraxel'

function Button() {
  const sprite = useNode(PrimaryNode.Sprite)

  return (
    <sprite ref={sprite} textureId={BTN_TEXTURE}>
      <clickable
        size={[64, 32]}
        onClick={(pos) => console.log('clicked at', pos)}
        onMouseEnter={() => console.log('hover in')}
        onMouseExit={() => console.log('hover out')}
      />
    </sprite>
  )
}

import { useNode, useEvent } from 'fraxel/hooks'
import { PrimaryNode } from 'fraxel'

function Cooldown() {
  const timer = useNode(PrimaryNode.Timer)

  useEvent(timer, 'timeout', () => {
    console.log('Cooldown finished!')
  })

  useEvent(timer, 'timeChanged', (elapsed) => {
    console.log('Elapsed:', elapsed) // seconds
  })

  return <timer ref={timer} duration={3} autoPlay />
}

import { useNode, useEvent } from 'fraxel/hooks'
import { PrimaryNode, shapes } from 'fraxel'

function Enemy() {
  const collider = useNode(PrimaryNode.Collider)

  useEvent(collider, 'colliderEntered', (other) => {
    console.log('Hit by:', other)
  })

  return (
    <collider
      ref={collider}
      shape={shapes.circle(8)}
      group={['enemy']}
      collidesWith={['projectile']}
    />
  )
}

import { useNode, useEvent } from 'fraxel/hooks'
import { PrimaryNode, Vector2 } from 'fraxel'

function Detector() {
  const ray = useNode(PrimaryNode.RayCast)

  useEvent(ray, 'colliderEntered', (collider) => {
    console.log('Detected:', collider)
  })

  useEvent(ray, 'colliderExited', (collider) => {
    console.log('Lost:', collider)
  })

  return (
    <ray-cast
      ref={ray}
      direction={new Vector2(100, 0)}
      collidesWith={['enemy']}
    />
  )
}

import { useNode, useSignal, useComputed } from 'fraxel/hooks'
import { PrimaryNode } from 'fraxel'

function HealthBar() {
  const bar = useNode(PrimaryNode.Rectangle)
  const [health] = useSignal(100)
  const fill = useComputed(() => [1 - health() / 100, health() / 100, 0, 1] as Color)

  return (
    <rectangle
      ref={bar}
      position={[10, 10]}
      size={[128, 16]}
      fillColor={fill}
      strokeColor={[0, 0, 0, 1]}
      strokeWidth={2}
    />
  )
}

import { useNode } from 'fraxel/hooks'
import { PrimaryNode } from 'fraxel'

function Character() {
  const anim = useNode(PrimaryNode.AnimationPlayer)
  const [state] = useSignal<'idle' | 'walk'>('idle')

  return (
    <transform>
      <sprite textureId={SHEET} />
      <animation-player
        ref={anim}
        animations={() => ({
          idle: idleFrames,
          walk: walkFrames,
        })}
        currentAnim={() => state()}
      />
    </transform>
  )
}

import { useNode, useSignal } from 'fraxel/hooks'
import { PrimaryNode } from 'fraxel'

function ScoreLabel() {
  const label = useNode(PrimaryNode.Text)
  const [score] = useSignal(0)

  return (
    <text
      ref={label}
      position={[10, 20]}
      text={() => `Score: ${score()}`}
      style={{
        fontSize: 16,
        foregroundColor: '#ffffff',
        fontFamily: 'monospace',
      }}
    />
  )
}

import { useNode, useEvent } from 'fraxel/hooks'
import { PrimaryNode } from 'fraxel'
import { loadSound } from 'fraxel/assets'

const SHOOT = await loadSound('/assets/shoot.mp3')

function Gun() {
  const audio = useNode(PrimaryNode.AudioPlayer)
  const clickable = useNode(PrimaryNode.Clickable)

  useEvent(clickable, 'clicked', () => {
    audio.node.play()
  })

  return (
    <sprite ref={clickable} textureId={GUN}>
      <clickable size={[32, 32]} />
      <audio-player ref={audio} soundId={SHOOT} volume={0.8} />
    </sprite>
  )
}

import { useNode, useMount } from 'fraxel/hooks'
import { PrimaryNode } from 'fraxel'

function GameScene() {
  const camera = useNode(PrimaryNode.Camera)
  const player = useNode(PrimaryNode.Sprite)

  useMount(() => {
    camera.node.follow(player.node)
  })

  return (
    <camera ref={camera} zoom={2}>
      <sprite ref={player} textureId={PLAYER} />
      <sprite textureId={BG} />
    </camera>
  )
}

import { shapes } from 'fraxel'

function FallingRock() {
  return (
    <transform position={[100, 0]}>
      <sprite textureId={ROCK} />
      <collider shape={shapes.circle(16)} group={['rock']} collidesWith={['ground']} />
      <rigid-body mass={2} bounce={0.6} />
    </transform>
  )
}