React Raycaster (react-raycaster)

A fully customizable raycaster game engine as a React component.

Check out a cool example here.

Installation

npm install react-raycaster

or

yarn add react-raycaster

How to use

import Raycaster from "react-raycaster";

// ...

const map = [
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];

const tiles = {
  1: {
    type: "wall",
    src: "https://raw.githubusercontent.com/kingdcreations/react-raycaster/main/example/src/assets/tex/oak_planks.png",
    collision: true,
  },
  2: {
    type: "sprite",
    src: "https://raw.githubusercontent.com/kingdcreations/react-raycaster/main/example/src/assets/tex/barrel.png",
    collision: true,
  },
  3: {
    type: "door",
    src: "https://raw.githubusercontent.com/kingdcreations/react-raycaster/main/example/src/assets/tex/wood.png",
    collision: true,
  },
}

<Raycaster
  map={map}
  tiles={tiles}
  player={{
    x: 5,
    y: 17,
    rotation: -90
  }}
/>

Using the game context

import Raycaster from "react-raycaster";
import { Joystick } from 'react-joystick-component';

// ...

<Raycaster
  map={map}
  tiles={tiles}
  player={player}
>
  {g =>
    <>
      <Joystick
        move={(e) => e.x && e.y && g.joystickMove(e.x, e.y)}
        stop={() => g.joystickMove(0, 0)} />

      <Joystick
        move={(e) => {e.x && e.y && g.joystickCamera(e.x)}}
        stop={() => g.joystickCamera(0)} />
    </>
  }
</Raycaster>

Props

| Prop | Type | Default | Description | |---|---|---|---| | map| number[][] | required | 2D map array containing tiles | | tiles| Tiles | required | Map tiles definition (See below) | | player| Player | required | Player initial values | | mouse| boolean | false | Allows mouse camera rotation | | inputs | Inputs | (See below) | Sets the rotation speed | | width | number | 500 | Game x resolution in pixels | | height | number | 300 | Game y resulition in pixels | | shading | boolean | true | Allows depth shading | | bobbing | boolean | true | Enables run animation | | showFPS | boolean | false | Displays frames per second | | skybox | string | none | Source from the skybox to display | | floor | string | none | Source from the floor to display | | ceiling | string | none | Source from the ceiling to display | | speed | number | 20 | Sets movement speed | | rotSpeed | number | 3 | Sets the rotation speed |

Game context

| Method | Description | |---|---| | joystickMove(x: number, y: number) | Changes player x and y position on the map | | joystickCamera(x: number) | Rotates camera / player view |

Types

Tiles

| Name | Type | Default | Description | |---|---|---|---| | [number]| Tile | required | The tile identified by a number |

Tile

| Name | Type | Default | Description | |---|---|---|---| | type| "wall" \| "sprite" \| "door" | required | Type of the tile | | src| string | required | Source image of the tile | | collision| boolean | false | Player collision against the tile |

Player

| Name | Type | Default | Description | |---|---|---|---| | x| number | required | Player x value on map | | y| number | required | Player y value on map | | rotation| number | 0 | Player rotation in degree |

Inputs

| Name | Type | Default | Description | |---|---|---|---| | north| string | "ArrowUp" | Key code for north mouvement | | east| string | "ArrowRight" | Key code for east mouvement | | south| string | "ArrowDown" | Key code for south mouvement | | west| string | "ArrowLeft" | Key code for west mouvement | | cameraL| string | undefined | Key code for left camera rotation | | cameraR| string | undefined | Key code for right camera rotation | | action| string | "Space" | Key code for action triggering |

TODO

• Add sounds
• Add more tile types
• Add moving sprites
• Add different walls height

About

I discovered raycasting as a project from 42 in C, this project is inspired by the world-famous Wolfenstein3D game, which was the first FPS ever.

Here is some useful links:

• http://wolf3d.atw.hu/ (Original Wolfenstein 3D online)
• https://lodev.org/cgtutor/raycasting.html (The main tutorial and code inspiration)
• https://thais-marcon.com/raycasting/ (An example of this component in use online)
• https://github.com/kingdcreations/cub3d (My 42 project in C)

License

MIT