Si vous avez des questions par rapport au cours ou des bugs durant le tutoriel, n'hésitez pas à le poster ici, j'y répondrais le plus rapidement selon ma disponibilité! Mais si vous connaissez la solution au problème de quelqu'un d'autre, n'hésitez pas à l'aider!
Pour tout problème concernant par contre les rendus d'activités et les corrections, il va falloir envoyer un petit mail à : hello@openclassrooms.com. Il seront vous aider de façon plus pertinente que nous!
A très vite!
Victor
- Edité par VictorMallet1 17 octobre 2016 à 9:02:58
si ça peut aider, je suis tombé sur un site qui permet de bidouiller les exemples qu'on peut trouver dans la documentation babylon.js. Y'a plein d'exemples différents, j'y ai trouvé de quoi m'inspirer pour la réalisation des exercices
Et pour la petite astuce, afin de dimensionner ma scène et mes différents objets, j'ai déssiné un graphique 2D avec l'aide du logiciel GéoGebra. En respectant les échelles et en m'aidant de la grille, il m'a permis de trouver facilement les coordonnées de mes différents objets.
- Edité par beatwinthewave 19 octobre 2016 à 3:08:58
«Toute forme de connaissance devient finalement connaissance de soi.» Bruce Lee
Quand j'installe ce dossier a la racine que je vais sur mon localhost\... je clique sur le dossier public il m'affiche le jeu mais avec une arene gris et je peux rien faire, voici mes source: http://www.mediafire.com/file/c3xi3kixvxdmkwb/JustSquares.zip
Je suis dans la première partie, deuxième chapitre, juste après avoir remplis le fichier Game.js.
Je viens d'ajouter
// Page entièrement chargé, on lance le jeu
document.addEventListener("DOMContentLoaded", function () {
new Game('renderCanvas');
}, false);
ici même:
Game = function(canvasId) {
// Page entièrement chargé, on lance le jeu
document.addEventListener("DOMContentLoaded", function () {
new Game('renderCanvas');
}, false);
// Canvas et engine défini ici
var canvas = document.getElementById(canvasId);
var engine = new BABYLON.Engine(canvas, true);
var _this = this;
// On initie la scène avec une fonction associé à l'objet Game
this.scene = this._initScene(engine);
// Permet au jeu de tourner
engine.runRenderLoop(function () {
_this.scene.render();
});
// Ajuste la vue 3D si la fenetre est agrandi ou diminué
window.addEventListener("resize", function () {
if (engine) {
engine.resize();
}
},false);
};
Game.prototype = {
// Prototype d'initialisation de la scène
_initScene : function(engine) {
var scene = new BABYLON.Scene(engine);
scene.clearColor=new BABYLON.Color3(0,0,0);
return scene;
}
};
Il est dit dans le cours qu'en ouvrant la page j'aurais : "Le fond de la page est devenu tout noir et la console JavaScript me dit "Uncaught Error: No camera defined""
Google Chrome est en 'Version 54.0.2840.99 m (64-bit)' et est supposé supporter WebGL mais sur cette page "http://www.babylonjs-playground.com/" j'ai une "
Compilation error
Your browser does not support WebGL"
Sur Microsoft Edge, je n'ai ni de page noir ni aucune erreur sur la console.
Une dernière chose: Sur Game.js, ligne 7,
var canvas = document.getElementById(canvasId);
Je ne vois aucun élément dans l'index.html avec un id="canvasId"
Est-ce que t'as crée la camera dans un de tes script ?
C'est dans le player.js je crois.
J'a en effet remplis Player.js ainsi que Arena.js, je ne vois toujours pas le fond en gris.
l'erreur sur la camera était supposée se passer avant même que je remplis le Player.js, de toute façon elle allait disparaître dès que j'aurais remplis ce dernier donc.
De plus, il n'y a que Firefox et Edge qui supportent le WebGL donc je suis sûr de la compatibilité des navigateurs.
Je vous rappelle encore une fois que d'après moi, dans le fichier Game.js qui fait appel à tous les autres .js, il y a toujours une ligne de code qui me tourmente :
var canvas = document.getElementById(canvasId);
Je vous prie de vérifier avec moi. Aucun élément avec un tel id (canvasId) n'est présent jusqu'ici dans index.html. J'ai essayé toutes les permutations possibles avec l'id "canvasId" et l'id "renderCanvas" et je ne suis arrivé à rien. C'est pour cela que je suis bloqué !
- Edité par Amine Hosni 14 novembre 2016 à 13:29:29
C'est la base pour afficher des graphismes sur ta page.
En fait dans Game.js, il crée une fonction qui prend en argument l'id du canvas donc l'argument peut être n'importe quoi, canvasId par exemple. Mais quand il appelle la fonction, il met bien en paramètre : 'renderCanvas'.
C'est la base pour afficher des graphismes sur ta page.
En fait dans Game.js, il crée une fonction qui prend en argument l'id du canvas donc l'argument peut être n'importe quoi, canvasId par exemple. Mais quand il appelle la fonction, il met bien en paramètre : 'renderCanvas'.
Mets dans body la balise :
<canvasid="renderCanvas"></canvas>
- Edité par Getzel il y a environ 1 heure
Voici l'index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>JUST SQUARES</title>
<meta name="description" content="Just Squares is an Webgl FPS multiplayer game realised with Babylon and Node JS." />
<!-- SCRIPTS DE BASE -->
<script src="http://www.babylonjs.com/babylon.js"></script>
<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
<!-- FEUILLES CSS -->
<link rel="stylesheet" type="text/css" href="css/mainStyle.css" />
</head>
<body>
<canvas id="renderCanvas"></canvas>
</body>
<!-- SCRIPTS BABYLON -->
<script src="js/Game.js"></script>
<script src="js/Player.js"></script>
<script src="js/Arena.js"></script>
</html>
depuis le début, rien ne fonctionne : Je parlais de "canvasId" qui n'existait pas et non pas de la balise <canvas> ...
Ton html a l'air bien donc le problème doit venir du "game.js".
Voici le mien pour l'exercice 1 qui corrobore ce que je t'ai dit plus haut :
// Page entièrement chargé, on lance le jeu
document.addEventListener("DOMContentLoaded", function () {
new Game('renderCanvas');
}, false);
Game = function(canvasId) {
// Canvas et engine défini ici
var canvas = document.getElementById(canvasId);
var engine = new BABYLON.Engine(canvas, true);
var _this = this;
// On initie la scène avec une fonction associé à l'objet Game
this.scene = this._initScene(engine);
var _player = new Player(_this, canvas);
var _arena = new Arena(_this);
// Permet au jeu de tourner
engine.runRenderLoop(function () {
_this.scene.render();
});
// Ajuste la vue 3D si la fenetre est agrandi ou diminué
window.addEventListener("resize", function () {
if (engine) {
engine.resize();
}
},false);
};
Game.prototype = {
// Prototype d'initialisation de la scène
_initScene : function(engine) {
var scene = new BABYLON.Scene(engine);
scene.clearColor=new BABYLON.Color3(0.3,0.1,0.6);
return scene;
}
};
Je tiens à remercier l'auteur Victor Mallet pour ce cours que j'ai beaucoup attendu.
je débute avec le cours et je rencontre les deux problèmes suivants:
1-Pourquoi installer un serveur pour pouvoir faire du webgl ? En fait j'ai copié le dossier JustSquares (avec tout son contenu) sur mon bureau et j'ai obtenu la même scène en lançant index.html
2-J'ai déjà terminé le cours "Apprenez à coder avec JavaScript" y compris le chapitre "Trop classe,La POO ..." et pourtant je n'arrive pas à comprendre cette façon de créer les objets :
Arena = function(...) {...};
Game = function(...) {...};
Player = function(...) {...};
Je dois avouer que je n'ai pas de connaîssances préalables en WebGL ni en BabylonJS mais ça n'est pas indiqué parmi les prérequis.
Merci d'avance.
- Edité par sadimov 30 novembre 2016 à 19:25:56
Ce qui est simple est faux. Ce qui est compliqué est inutilisable. Paul Valéry.
Bonjour, il y a une phrase qui me pose problème dans le cours (Partie 2, chapitre 1): "Attention de ne pas oublier d'instancier plus haut _this.angularSensibility dans Player ! Si vous ne le faites pas, vous allez avoir une erreur. "
C'est une variable utiliser dans la fonction: window.addEventListener("mousemove", function(evt) {
Dites moi c'est bien beau tout ca mais avez vous des exemples de jeux en productions utilisant babylonjs ? En effet, j'avoue que cela m'interesse assez mais je me demande si le projet est assez mure car je ne vois aucun jeu en ligne l'utilisant. Je vois seulement des modelisations 3D certes jolies mais bon ...
Le seul soucis que j'ai avec ca, c'est comme tu le dis: est ce qu'il est possible de creer quelque chose de consequent? Il y a beaucoup de demos mais j'aimerai voir "un vrai" jeu (je veux surtout tester si mon navigateur va cracher ou lors de l'utilisation).
J'ai rencontré des petit soucis mais rien de vraiment méchant.
Je suis au au chapitre "Créez un système de point de vie et de spawn"
Je suis complètement perdu dans le code lorsqu'il faut couper du code et le coller sur game etc..
J'aimerais savoir si vous avez le code propre pour que je puisse regardé mes erreurs.
Ou juste m’éclaircir sur me problème
Mon code Game.js:
Game = function(canvasId) {
// Canvas et engine défini ici
var canvas = document.getElementById(canvasId);
var engine = new BABYLON.Engine(canvas, true);
this.engine = engine;
// Les roquettes générées dans Player.js
this._rockets = [];
// Les explosions qui découlent des roquettes
this._explosionRadius = [];
var _this = this;
_this.actualTime = Date.now();
// On initie la scène avec une fonction associée à l'objet Game
this.scene = this._initScene(engine);
var _player = new Player(_this, canvas);
var _arena = new Arena(_this);
// Permet au jeu de tourner
engine.runRenderLoop(function () {
// Récuperet le ratio par les fps
_this.fps = Math.round(1000/engine.getDeltaTime());
// Checker le mouvement du joueur en lui envoyant le ratio de déplacement
_player._checkMove((_this.fps)/60);
// On apelle nos deux fonctions de calcul pour les roquettes
_this.renderRockets();
_this.renderExplosionRadius();
// On rend la scène
_this.scene.render();
// Si launchBullets est à true, on tire
if(_player.camera.weapons.launchBullets === true){
_player.camera.weapons.launchFire();
}
});
// Ajuste la vue 3D si la fenetre est agrandie ou diminuée
window.addEventListener("resize", function () {
if (engine) {
engine.resize();
}
},false);
};
Game.prototype = {
// Prototype d'initialisation de la scène
_initScene : function(engine) {
var scene = new BABYLON.Scene(engine);
scene.clearColor=new BABYLON.Color3(0.9,0.9,0.9);
scene.gravity = new BABYLON.Vector3(0, -9.81, 0);
scene.collisionsEnabled = true;
return scene;
},
renderRockets : function() {
for (var i = 0; i < this._rockets.length; i++) {
// On crée un rayon qui part de la base de la roquette vers l'avant
var rayRocket = new BABYLON.Ray(this._rockets[i].position,this._rockets[i].direction);
// On regarde quel est le premier objet qu'on touche
var meshFound = this._rockets[i].getScene().pickWithRay(rayRocket);
// Si la distance au premier objet touché est inférieure à 10, on détruit la roquette
if(!meshFound || meshFound.distance < 10){
// On vérifie qu'on a bien touché quelque chose
if(meshFound.pickedMesh && !meshFound.pickedMesh.isMain)){
// On crée une sphere qui représentera la zone d'impact
var explosionRadius = BABYLON.Mesh.CreateSphere("sphere", 5.0, 20, this.scene);
// On positionne la sphère là où il y a eu impact
explosionRadius.position = meshFound.pickedPoint;
// On fait en sorte que les explosions ne soient pas considérées pour le Ray de la roquette
explosionRadius.isPickable = false;
// On crée un petit material orange
explosionRadius.material = new BABYLON.StandardMaterial("textureExplosion", this.scene);
explosionRadius.material.diffuseColor = new BABYLON.Color3(1,0.6,0);
explosionRadius.material.specularColor = new BABYLON.Color3(0,0,0);
explosionRadius.material.alpha = 0.6;
// Chaque frame, on baisse l'opacité et on efface l'objet quand l'alpha est arrivé à 0
explosionRadius.registerAfterRender(function(){
explosionRadius.material.alpha -= 0.02;
if(explosionRadius.material.alpha<=0){
explosionRadius.dispose();
}
});
}
this._rockets[i].dispose();
this._rockets.splice(i,1);
}else{
let relativeSpeed = 1 / ((this.fps)/60);
this._rockets[i].translate(new BABYLON.Vector3(0,0,1),relativeSpeed,0);
}
renderExplosionRadius : function(){
if(this._explosionRadius.length > 0){
for (var i = 0; i < this._explosionRadius.length; i++) {
this._explosionRadius[i].material.alpha -= 0.02;
if(this._explosionRadius[i].material.alpha<=0){
this._explosionRadius[i].dispose();
this._explosionRadius.splice(i, 1);
}
}
}
}
},
// Page entièrement chargé, on lance le jeu
document.addEventListener("DOMContentLoaded", function () {
new Game('renderCanvas');
}, false);
}
// ------------------------- TRANSFO DE DEGRES/RADIANS
function degToRad(deg)
{
return (Math.PI*deg)/180
}
// ----------------------------------------------------
// -------------------------- TRANSFO DE DEGRES/RADIANS
function radToDeg(rad)
{
// return (Math.PI*deg)/180
return (rad*180)/Math.PI
}
// ----------------------------------------------------
Mon code Weapons.js:
Weapons = function(Player) {
// On permet d'accéder à Player n'importe où dans Weapons
this.Player = Player;
// Positions selon l'arme non utilisée
this.bottomPosition = new BABYLON.Vector3(0.5,-2.5,1);
// Changement de Y quand l'arme est séléctionnée
this.topPositionY = -0.5;
// Créons notre arme
this.rocketLauncher = this.newWeapon(Player);
// Cadence de tir
this.fireRate = 800;
// Delta de calcul pour savoir quand le tir est a nouveau disponible
this._deltaFireRate = this.fireRate;
// Variable qui va changer selon le temps
this.canFire = true;
// Variable qui changera à l'appel du tir depuis le Player
this.launchBullets = false;
// _this va nous permettre d'acceder à l'objet depuis des fonctions que nous utiliserons plus tard
var _this = this;
// Engine va nous être utile pour la cadence de tir
var engine = Player.game.scene.getEngine();
Player.game.scene.registerBeforeRender(function() {
if (!_this.canFire) {
_this._deltaFireRate -= engine.getDeltaTime();
if (_this._deltaFireRate <= 0 && _this.Player.isAlive) {
_this.canFire = true;
_this._deltaFireRate = _this.fireRate;
}
}
});
};
Weapons.prototype = {
fire : function(pickInfo) {
this.launchBullets = true;
},
stopFire : function(pickInfo) {
this.launchBullets = false;
},
launchFire : function() {
if (this.canFire) {
var renderWidth = this.Player.game.engine.getRenderWidth(true);
var renderHeight = this.Player.game.engine.getRenderHeight(true);
var direction = this.Player.game.scene.pick(renderWidth/2,renderHeight/2);
direction = direction.pickedPoint.subtractInPlace(this.Player.camera.position);
direction = direction.normalize();
this.createRocket(this.Player.camera,direction)
this.canFire = false;
} else {
// Nothing to do : cannot fire
}
},
createRocket : function(playerPosition, direction) {
var positionValue = this.rocketLauncher.absolutePosition.clone();
var rotationValue = playerPosition.rotation;
var newRocket = BABYLON.Mesh.CreateBox("rocket", 1, this.Player.game.scene);
newRocket.direction = new BABYLON.Vector3(
Math.sin(rotationValue.y) * Math.cos(rotationValue.x),
Math.sin(-rotationValue.x),
Math.cos(rotationValue.y) * Math.cos(rotationValue.x)
)
newRocket.position = new BABYLON.Vector3(
positionValue.x + (newRocket.direction.x * 1) ,
positionValue.y + (newRocket.direction.y * 1) ,
positionValue.z + (newRocket.direction.z * 1));
newRocket.rotation = new BABYLON.Vector3(rotationValue.x,rotationValue.y,rotationValue.z);
newRocket.scaling = new BABYLON.Vector3(0.5,0.5,1);
newRocket.isPickable = false;
newRocket.material = new BABYLON.StandardMaterial("textureWeapon", this.Player.game.scene);
newRocket.material.diffuseColor = new BABYLON.Color3(1, 0, 0);
// On donne accès à Player dans registerBeforeRender
var Player = this.Player;
this.Player.game._rockets.push(newRocket);
newRocket.registerAfterRender(function(){
// On bouge la roquette vers l'avant
newRocket.translate(new BABYLON.Vector3(0,0,1),1,0);
})
},
newWeapon : function(Player) {
var newWeapon;
newWeapon = BABYLON.Mesh.CreateBox('rocketLauncher', 0.5, Player.game.scene);
// Nous faisons en sorte d'avoir une arme d'apparence plus longue que large
newWeapon.scaling = new BABYLON.Vector3(1,0.7,2);
// On l'associe à la caméra pour qu'il bouge de la même facon
newWeapon.parent = Player.camera;
// On positionne le mesh APRES l'avoir attaché à la caméra
newWeapon.position = this.bottomPosition.clone();
newWeapon.position.y = this.topPositionY;
// Ajoutons un material Rouge pour le rendre plus visible
var materialWeapon = new BABYLON.StandardMaterial('rocketLauncherMat', Player.game.scene);
materialWeapon.diffuseColor=new BABYLON.Color3(1,0,0);
newWeapon.material = materialWeapon;
return newWeapon
},
};
Désolé pour le code pas très propre
J'ai essayé pas mal de choses sans vraiment savoir se que je faisais et sans trouver la solution.
L'erreur de la console js du navigateur : "Game.js:69 Uncaught SyntaxError: Unexpected identifier"
Donc pour moi je me suis trompé dans le coupé/coller
Merci de vos réponses a l'avance :)
- Edité par GwendalCochet1 27 janvier 2017 à 15:25:38
J'en suis au chapitre déplacez votre caméra sur la scène que je viens de finir, et je constate que si les déplacements fonctionnent comme attendu sur firefox les mouvement (liés au keyup) ne marchent pas sur chrome (enfin chromium version récente sur une machine qui tourne sous ubuntu 16-4). Aucune erreur js n'est retournée.
Quelques recherches google ne se sont pas révélés très probantes (quasiment tout les retour traitent d'un problème de keyup de jquery sur chrome ce qui n'est pas forcément le sujet même si cela peut être lié). Bref est-ce que ça tourne sur chrome/chromium chez vous ?
Et merci pour le cours et vos retour c'est intéressant de découvrir ce qui peut être fait en webgl.
Edit : En prenant la version sur le repo github, le problème rencontré sur chrome a été resolu.
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
«Toute forme de connaissance devient finalement connaissance de soi.» Bruce Lee
«Toute forme de connaissance devient finalement connaissance de soi.» Bruce Lee