Jeu avec simulation de 3d utilisant la techique de raycasting.

• Raycasting
  • Principe
  • Recherche d'intersection
  • Taille des segments
  • Texture des Murs
• Sprites
  • Animations

Le raycasting est une technique visant à rendre un espace en 3 dimensions sur un plan en 2 dimensions en mesurant la distance entre l'observateur de la scène et les murs.

Pour ce faire, on tire des rayons (1 rayon par colonne de pixels), et on affiche à l'écran un segment dont la taille dépend de la distance jusqu'au mur.

Le joueur $P$ est placé aux coordonnées $(Px,Py)$ sur un plan représenté par un tableau à 2 dimensions. Chaque case est de dimension 64x64.

const mapLayout = [
	[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 1, 1, 1, 1, 1, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 1, 0, 1],
	[1, 0, 0, 0, 1, 0, 0, 1, 0, 1],
	[1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];
// 0 pour du vide, 1 pour un mur

La direction dans laquelle il regarde forme l'angle $\alpha$ avec l'axe horizontal $X$.

On tire un ensemble de rayons en cône depuis $𝑃$ dans son champ de vision.
L'objectif est de trouver le point d'intersection entre chaque droite d'origine $𝑃$ et le mur le plus proche. Cette intersection peut se faire à la limite de chaque case, horizontalement ou verticalement.

Pour une intersection horizontale, on cherche $Xa = 64 \div \tan(\alpha)$, la distance qui sépare chaque intersection horizontale l'une de l'autre.

Soit $A(Ax,Ay)$, la première intersection horizontale :

$Ax = Px (Ay-Py)\div\tan(\alpha)$ |

Les intersections suivantes sont définies par :

• $x_i = Ax+(Xa\times i)$
• $y_i = Ay+(64\times i)$

fig15

Même procédé pour la verticale : $Ya = 64 \times \tan(\alpha)$

Soit $B(Bx,By)$, la première intersection verticale:

$By = Py + (Bx-Px)\times\tan(\alpha)$ |

Les intersections suivantes sont définies par :

• $x_i = Bx+(64\times i)$
• $y_i = By+(Ya\times i)$

[fig16]

Reste à trouver un mur en parcourant un à un les points d'intersection pour enfin obtenir une distance et tracer le segment correspondant.

Pour calculer la taille du segment, on peut diviser la hauteur du mur (ici 64 pour coller aux dimensions des cases) par la distance.

Taille du segment = $64 \div distance$

Problème, si on utilise simplement la distance entre l'intersection $I$ et le joueur $P$, on obtient le résultat suivant :

Cette déformation est due au fait que les rayons sont tirés en arc de cercle.
Sur l'image ci-dessous, la distance $Pi$ est plus importante que la distance $Pj$. Pourtant, puisqu'ils sont sur le même plan, ces points devraient être considérés à la même distance.

On cherche alors à "corriger" la distance par rapport à un plan. Dans notre cas, la distance $Pi$ doit être égale à $Pj$, donc distance corrigée = $Pj$.

On défini $\theta$, l'angle formé par $\widehat{iPj}$ pour se placer dans le référentiel du champ de vision :
$\cos(\theta)=$ distance corrigée $\div$ distance
distance corrigée $=$ distance $\times \cos(\theta)$

Ainsi, Taille du segment = $64 ÷ ($ distance $\times \cos(\theta))$