React-raycaster NPM

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

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