Skip to content

Latest commit

 

History

History
182 lines (143 loc) · 5.48 KB

README.md

File metadata and controls

182 lines (143 loc) · 5.48 KB
Raw

banner

React Raycaster (react-raycaster)

NPM Version

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:

License

MIT