10 - FPS Camera on Dude

A few information on “camera ellipsoid”

See doc + forum (with better explanations)

The camera is located on top of an ellipsoid

You can move the camera down using camera.ellipsoidOffset.y �See playground Example...

You can define the size of the ellipsoid (x radius, y radius, z radius)

Add a FPS camera to the Dude

• See tp4_exemple1
• Create a freeCamera, with a small size, located on top of the bounding box of the dude
• Use ellipsoidOffset.y to adjust its vertical position

Add a FPS camera to the Dude

• moveFPS() : the free camera moves with the Dude,
• Camera moves with ZQSD, tell the Dude and bounder to follow the camera position,
• Front vector = direction of the camera (mouse)
• Move both cameras in sync (follow and free cam)

Demo time : see how we modified the code...

Follow camera Free Camera (FPS)

Your work : fix some small things...

• Try to switch from follow camera to free camera. What can be improved ?
• Try move backward, what is happening? Fix this!
• How could we have handled the free cam without using gravity and collisions?
• Look all around, we can see through the Dude’s mesh. Fix that using camera and meshes layer masks !
• Make the heroDude mesh (and all its children) invisible to the freeCameraDude, just by changing the layerMask property of heroDude meshes.

​

10 - Crosshair in FPS mode

Trick : put a tiny box in front of the camera

• The box has the freeCameraDude as parent (it will move and rotate when the parent cam moves and rotates)
• Use transparent PNG texture
• Make the box so tiny that it will become invisible, you can make it even smaller using the minZ property of all BabylonJS cameras; and put it very close “to the eye”. Or better, use the layerMask property of the box!

​

Demo time !

• See tp4_exemple2, press “u” to switch to FPS view

​

​

11 - FPS gun

A few things to add...

• Add a gunshot sound

​

​

​

​

• Fire the gun when we press the left mouse button (we already have a scene.onPointerDown listener in our code….)

The fireGun method in the Dude class

• The crosshair is always in the middle of the screen with the FPS view
• Use scene.multiPick(x, y) to pick the meshes “behind” a pixel position on the canvas
• Check that we did not hit ourselves !

Demo Time !

See tp4_exemple3 method fireGun in Dude.js

12 - Deploy on Heroku

1 - You need a github repo for your game

1. If you have a repo for your game
1. That’s ok for the moment.
2. If you don’t have a repo for your game
• Create your repo (choose to generate a .gitignore file for NodeJS)
• Clone this empty repo somewhere
• Copy your game project files to it
• Commit and push your changes

2 - We assume that you have a GitHub repo with your game files

3 - Make your project a NodeJS project

• Heroku will do a “npm install”, “npm build”, “npm start” right after deployment of your project
• So… you need to have your project as a nodeJS project
• You must have NodeJS installed on your machine
• Type “npm init” in your game project root folder. Press ENTER to all questions
• This will create a package.json file in your folder
• Add express to your node project
• Type “npm install -save express”
• Edit the package.json file and add a “start” script :

​

3 - Minimal index.js node server for your game

• Copy and paste the code on the right into index.js at the root dir of your project
• Run your server with “npm run start”
• Test by opening http://localhost:3000, the game should run
• Push your changes to your github repo :
• git add .
• git commit -m “ready for heroku”
• git push

let express = require('express');

let app = express();

​

app.use("/", express.static(__dirname));

​

app.get("/", function(req, res) {

res.sendFile("index.html");

});

​

// necessary for heroku, as heroku will position the PORT environment variable

let port = process.env.PORT || 3000;

​

app.listen(port, () => {

console.log("Server is running on port " + port);

});

4 - ready to go, last check list

1. remove node_modules folder from your project
2. execute npm install
3. execute nom run start, open http://localhost:3000, the game should run
4. Push all your changes to your repo, it should look like that :

5 - add an app to Heroku

• Create an account on Heroku, add an app, indicate your github repo. See the next screenshots

13 - Fluid animation of skeletons/meshes

A student studied this topic and shares his tricks

Go read https://docs.google.com/document/d/1np4DHV1fz2T7mpHPAMOGI-IecWCVPX2p-iX1DQqp7yA/edit?usp=sharing