https://github.com/kingdcreations/react-raycaster
A raycasting engine as a React component
https://github.com/kingdcreations/react-raycaster
game raycaster raycaster-engine raycasting react
Last synced: 4 months ago
JSON representation
A raycasting engine as a React component
- Host: GitHub
- URL: https://github.com/kingdcreations/react-raycaster
- Owner: kingdcreations
- Created: 2024-03-04T12:41:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-03T05:54:07.000Z (about 2 years ago)
- Last Synced: 2025-12-29T03:23:05.381Z (6 months ago)
- Topics: game, raycaster, raycaster-engine, raycasting, react
- Language: TypeScript
- Homepage: https://thais-marcon.com/raycasting/
- Size: 2.04 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://thais-marcon.com/raycasting)
# React Raycaster (react-raycaster)
[](https://www.npmjs.com/package/react-raycaster)
A fully customizable raycaster game engine as a React component.
Check out a cool example [here](https://thais-marcon.com/raycasting).
## Installation
```shell
npm install react-raycaster
```
or
```shell
yarn add react-raycaster
```
## How to use
```jsx
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,
},
}
```
### Using the game context
```jsx
import Raycaster from "react-raycaster";
import { Joystick } from 'react-joystick-component';
// ...
{g =>
<>
e.x && e.y && g.joystickMove(e.x, e.y)}
stop={() => g.joystickMove(0, 0)} />
{e.x && e.y && g.joystickCamera(e.x)}}
stop={() => g.joystickCamera(0)} />
>
}
```
## 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