Lorsque nous jouons à nos jeux préférés, nous pensons rarement à ce qui se cache derrière le mouvement fluide du personnage, les sauts réalistes ou les collisions avec des obstacles. Mais derrière tout cela se cache le monde fascinant de la physique des jeux, un modèle simplifié du monde réel que les programmeurs créent à l'aide de mathématiques et de code.
Les bases du mouvement : la vitesse et la position
Tout mouvement dans le jeu est basé sur deux concepts simples : la position de l'objet et sa vitesse. Imaginez que votre personnage a des coordonnées X et Y sur l'écran. À chaque image du jeu (généralement 60 fois par seconde), nous mettons à jour ces coordonnées en leur ajoutant la valeur de la vitesse.
// Le mouvement le plus simple
player.x += player.velocityX;
player.y += player.velocityY;Mais dans les vrais jeux, c'est un peu plus compliqué. Nous devons tenir compte du temps entre les images (deltaTime) pour que le mouvement soit fluide quelles que soient les performances de l'ordinateur :
player.x += player.velocityX * deltaTime;
player.y += player.velocityY * deltaTime;Maintenant, si le jeu fonctionne à 30 ou 120 FPS, le personnage se déplacera à la même vitesse en temps réel.
La gravité : ce qui fait tout tomber
La gravité dans les jeux est une accélération constante dirigée vers le bas. Dans chaque image, nous ajoutons une petite valeur à la vitesse verticale de l'objet, créant un effet de chute :
const GRAVITY = 0.5;
// Dans chaque cadre
player.velocityY += GRAVITY;
player.y += player.velocityY;
// Vérifiez si le personnage est tombé au sol
if (player.y >= ground.y) {
player.y = ground.y;
player.velocityY = 0;
player.isOnGround = true;
}Il est intéressant de noter que dans la plupart des jeux, la gravité est beaucoup plus forte que la gravité physique réelle. Cela rend le gameplay plus dynamique et réactif. Mario, par exemple, tombe quatre fois plus vite qu'il ne le ferait dans la réalité !
Sauts : impulsion et contrôle dans l'air
Un saut est simplement un changement instantané de la vitesse verticale dans la direction négative (vers le haut). Lorsque le joueur appuie sur le bouton de saut, nous définissons velocityY sur une valeur négative, et la gravité ralentit progressivement la montée, retourne le personnage et le fait retomber.
function jump() {
if (player.isOnGround) {
player.velocityY = -12; // Force de saut
player.isOnGround = false;
}
}Mais un simple saut peut sembler « boisé ». Dans les bons jeux de plateforme, des techniques supplémentaires sont utilisées : saut à hauteur variable (plus vous maintenez le bouton enfoncé, plus vous sautez haut), « coyote-time » (vous pouvez sauter une fraction de seconde après avoir quitté la plateforme) et contrôle aérien (une petite possibilité de contrôler le personnage pendant le vol).
// Saut en hauteur variable
function updateJump() {
if (!jumpButtonHeld && player.velocityY < 0) {
player.velocityY *= 0.5; // Arrêtons rapidement la montée
}
}Les collisions : comment les objets apprennent-ils qu'ils sont entrés en collision ?
Les collisions sont une vérification pour voir si deux objets se croisent dans l'espace. La façon la plus simple est d'utiliser des cadres de délimitation (bounding boxes). Deux rectangles se croisent si leurs côtés se chevauchent :
function checkCollision(rect1, rect2) {
return rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.y + rect1.height > rect2.y;
}Mais détecter une collision n'est que la moitié de la bataille. Il faut encore y réagir correctement. C'est ce qu'on appelle la résolution de collision (collision resolution). Le moyen le plus simple est de déplacer l'objet vers l'arrière afin qu'il ne croise pas l'obstacle :
if (checkCollision(player, wall)) {
// Déterminer de quel côté la collision s'est produite
const overlapX = Math.min(
player.x + player.width - wall.x,
wall.x + wall.width - player.x
);
const overlapY = Math.min(
player.y + player.height - wall.y,
wall.y + wall.height - player.y
);
// Repoussons le long de l'axe avec moins de chevauchement
if (overlapX < overlapY) {
player.x += player.velocityX > 0 ? -overlapX : overlapX;
player.velocityX = 0;
} else {
player.y += player.velocityY > 0 ? -overlapY : overlapY;
player.velocityY = 0;
}
}Concepts avancés
Lorsque vous maîtriserez la physique de base, un monde de possibilités s'ouvrira à vous. Vous pouvez ajouter un frottement qui ralentit les objets avec le temps. Vous pouvez réaliser des collisions élastiques, où les objets rebondissent les uns sur les autres en fonction de leur masse et de leur vitesse. Vous pouvez créer un système de particules pour des effets tels que la fumée, les étincelles ou les éclaboussures d'eau.
De nombreux moteurs modernes fournissent des systèmes physiques prêts à l'emploi : Unity utilise PhysX, Godot a un moteur physique intégré, et pour le développement Web, il y a Matter.js et Cannon.js. Mais comprendre les principes de base vous aidera à utiliser efficacement ces outils et à résoudre des problèmes inhabituels.
Conseils pratiques
Commencez simplement : créez un carré qui tombe et peut sauter. Ensuite, ajoutez des plates-formes et des collisions. Expérimentez avec les constantes : modifiez la force de gravité, la hauteur du saut, la vitesse de déplacement. Vous serez surpris de voir à quel point de petits changements affectent la sensation du jeu.
La physique du jeu n'a pas besoin d'être réaliste, elle doit être amusante et prévisible. Angry Birds, par exemple, ignore complètement la résistance de l'air, car c'est plus amusant à jouer. Votre tâche en tant que développeur est de trouver un équilibre entre la crédibilité et le gameplay.
Vous souhaitez vous plonger plus profondément dans le développement de jeux et apprendre à créer vos propres projets à partir de zéro ?
Dans Codique Nous avons préparé des cours pratiques de programmation, où vous passerez des bases à la création de jeux à part entière. Apprenez JavaScript, Python, Lua et bien plus encore dans un format pratique avec des explications étape par étape.
Et nous avons aussi un super chaîne Telegram avec une communauté de développeurs sympathique ! Nous y discutons de technologies intéressantes, partageons nos expériences, nous entraidons dans nos tâches et discutons simplement de sujets liés à la programmation.
Rejoignez-nous et grandissez avec des personnes partageant les mêmes idées ! 🚀