Archives de
Catégorie : WebGL

Créer une grille hexagonale en 3D avec Babylon.js

Créer une grille hexagonale en 3D avec Babylon.js

Pour faire suite aux deux précédents cours sur le monde merveilleux de JavaScript, WebGL et Babylon.js, je vous propose aujourd’hui de créer quelque chose de différent du FPS vue dans le dernier article, mais de particulièrement utile dans un jeu de gestion/stratégie : Une grille à base d’hexagones ! Vous connaissez sans doute le jeu Risk ? ou même Civilization ? Le Gameplay de ces jeux repose en partie sur ce type de grille.

Le jeu Civilization V utilise des grilles d'hexagones.
Le jeu Civilization V utilise des grilles d’hexagones.

Lire la suite Lire la suite

Un micro FPS en JavaScript avec Babylonjs

Un micro FPS en JavaScript avec Babylonjs

Dans le dernier article nous avons vue les bases pour réaliser une scène en 3D avec WebGL et Babylon.js. Maintenant nous allons tenter d’être légèrement plus ambitieux en créant quelque chose qui pourrait s’apparenter à un mini FPS. Ne vous affolez pas, ça sera très moche, mais nous aurons une arme qui pourra tirer des munitions. Chaque munition sera capable de détruire un ennemie et ça sera tout pour cette partie. C’est déjà pas mal et vous savez quoi ? Nous n’avons que deux blocs de code à voir par rapport au dernier tutoriel. Pour faire les choses bien nous allons dans un premier temps modifier la scène de démo en utilisant un sol plus grand et en ajoutant plus de caisses. Ensuite nous créerons l’arme du joueur et enfin nous coderons le comportement des munitions au clic de souris. Vous êtes prêt ? Bon et bien c’est partie !

Une arme, des munitions : Un FPS ?
Une arme, des munitions : Un FPS ?

Lire la suite Lire la suite

Premier pas en 3D avec WebGL et Babylon.js

Premier pas en 3D avec WebGL et Babylon.js

Faire de la 3D directement dans son navigateur sans aucun plugin est possible grâce à WebGL. Je vous propose de faire un peu de JavaScript et par la même occasion de créer une scène en 3D avec le moteur Babylonjs. L’avantage de Babylonjs est de proposer par défaut un support de tous les navigateurs récents, y compris Internet Explorer 11, il prend aussi en charge les écrans tactiles. Nous allons créer ensemble une première scène 3D très simple où on pourra se déplacer avec les touches du clavier et la souris. Les collisions seront aussi de la partie (non ne partez pas 8D on utilise Babylon.js).

Ce que nous aurons fait à la fin de ce tutoriel
Ce que nous aurons fait à la fin de ce tutoriel

Lire la suite Lire la suite