
## Summary
For this game, I made all of the animations myself in blender. In the past, I've had difficulty getting the animations to work correctly in Unity while using my own character rig with mixamo animations. So, I decided to learn how to animate them myself. The meshes are exported as glTF/.glb.

If you'd like to see the animations themselves, you can drag the .glb files into the [Sandbox](https://sandbox.babylonjs.com/).

## Character (Rigged)
### Setting up Animations
When you import a mesh with animations, they will be a part of the result`.animationGroups`. We just need to return this along with the mesh import in [loadCharacter](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/app.ts#L897).

In the constructor of our Player class, we'll be storing each animationGroup that was imported.

```javascript
this._idle = assets.animationGroups[1];
this._jump = assets.animationGroups[2];
this._land = assets.animationGroups[3];
this._run = assets.animationGroups[4];
this._dash = assets.animationGroups[0];
```
This way we can access them through the class variables. AnimationGroups are usually sorted alphabetically, but if you're not sure of the order you can check in the inspector.

Once we've done this, we can set up the animations in [_setUpAnimations](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L236) which is also called in the Player constructor.
```javascript
this.scene.stopAllAnimations();
this._run.loopAnimation = true;
this._idle.loopAnimation = true;
//initialize current and previous
this._currentAnim = this._idle;
this._prevAnim = this._land;
```
1. We want to stop any and all animations.
2. Set which animations are looping.
3. Initialize our current and previous animations.

### Animating the Player
In order to actually animate the player, I created an [_animatePlayer](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L247) function that checks for different states of the player.
```javascript
if (!this._dashPressed && !this._isFalling && !this._jumped 
    && (this._input.inputMap["ArrowUp"]
    || this._input.inputMap["ArrowDown"] 
    || this._input.inputMap["ArrowLeft"]
    || this._input.inputMap["ArrowRight"])) {

    this._currentAnim = this._run;
} else if (this._jumped && !this._isFalling && !this._dashPressed) {
    this._currentAnim = this._jump;
} else if (!this._isFalling && this._grounded) {
    this._currentAnim = this._idle;
} else if (this._isFalling) {
    this._currentAnim = this._land;
}
```
It sets the current animation to the corresponding animationGroup for the state.
The different states our character can be in are:
1.  **Running**
    - As long as movement inputs are detected, and we're not doing an action, then we play the running animation.
2. **Jumping**
    - The jumping animation is triggered by a combination of flags:
```javascript
if (this._input.jumpKeyDown && this._jumpCount > 0) {
    this._gravity.y = Player.JUMP_FORCE;
    this._jumpCount--;

    //jumping and falling animation flags
    this._jumped = true;
    this._isFalling = false;
}
```
Because the jumping and landing animations are separate, so we need to know when exactly the jump phase is and when the landing phase starts.

In the `if(this._isGrounded)` check, we want to reset our animation flags since we're no longer falling and have no longer jumped.
```javascript
//jump & falling animation flags
this._jumped = false;
this._isFalling = false;
```
3. **Idle** 
    - If we're not in any other state and we're grounded, then we're idle.
4. **Falling**
```javascript
//cue falling animation once gravity starts pushing down
if (this._gravity.y < 0 && this._jumped) {
    this._isFalling = true;
}
```
We do this by checking:
    1. That we're currently falling, so our movement is downwards (the sign of gravity here actually correlates to the direction we're moving).
    2. That we've jumped, so we're in the air.
*_jumped* is checked specifically because this falling animation was intended for the landing of the jump, but if you have a falling animation that can be used for any type of falling, then you could probably remove this check.
5. **Dashing**
    - You'll notice that the dash animation is not here. This is because it's a lot easier to include it where the [dash action](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L170) takes place.
```javascript
if (this._input.dashing && !this._dashPressed && this._canDash && !this._grounded) {
    this._canDash = false;
    this._dashPressed = true;

    this._currentAnim = this._dash;
}
```
As soon as we detect that the dash has happened, we set the current animation.

At the end of **_animatePlayer**, we need to check to make sure that we're only calling the current animation once. We do this by making sure that the current and previous animations are not the same, so that the animation actually play out its duration. (This is fine because we've already set which ones are looping, so when they play once, they'll keep looping).
```javascript
if(this._currentAnim != null && this._prevAnim !== this._currentAnim){
    this._prevAnim.stop();
    this._currentAnim.play(this._currentAnim.loopAnimation);
    this._prevAnim = this._currentAnim;
}
```
### Playing Animations
Now that we have the animations hooked up, we need to call **_setUpAnimations** in the *Constructor* and **_animatePlayer** in *_beforeRenderUpdate*

## Mesh
The other meshes in my game that used animations were the lanterns.

The setup for these was a little different because I had to somehow clone the animations as well. I used [Demystifying Animation Groups](https://www.youtube.com/watch?v=BSqxoQ-at24&t=802s) to learn how to extract and clone the animationGroups.

### Importing
The animation groups get imported along with the mesh. Returning to [_loadAsset](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/environment.ts#L100) in the Environment class, we need to extract the animation from the lantern.
```javascript
const importedAnims = res.animationGroups;
let animation = [];
animation.push(importedAnims[0].targetedAnimations[0].animation);
importedAnims[0].dispose();
//create new animation group
let animGroup = new AnimationGroup("lanternAnimGroup");
animGroup.addTargetedAnimation(animation[0], res.meshes[1]);
return {
        //..other meshes,
        animationGroups: animGroup
        }
```
What we do is, from the imported animationGroup, we extract the animation. Then we create a new animation that sets the mesh to its targeted animation. In the video, this was useful because the cannon mesh had two animations each belonging to a different mesh. Even though we have only 1 animation and 1 mesh, it's good to have this structure in case we wanted to add another animation later on.

### Cloning & Setting Up
Similar to how we [cloned our lantern meshes](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/environment.ts#L66), we need to clone the animationGroups so that they are paired with their corresponding mesh.
```javascript
//Animation cloning
let animGroupClone = new AnimationGroup("lanternAnimGroup " + i);
animGroupClone.addTargetedAnimation(assets.animationGroups.targetedAnimations[0].animation, lanternInstance);
let newLantern = new Lantern(this._lightmtl, lanternInstance, this._scene, assets.env.getChildTransformNodes(false).find(m => m.name === "lantern " + i).getAbsolutePosition(), animGroupClone);
```
We create a new animation group for each lantern, and use the animationGroup that we got from the import, then attach it to that specific lantern instance. This animGroupClone is what we pass to the Lantern Constructor.
```javascript
assets.animationGroups.dispose();
```
After we're done setting up all the lanterns, we can dispose of the original animationGroup, like how we did for the original lantern mesh.
### Playing
Playing the animation is really simple since it's non-looping. Whenever the lantern is lit, we want to play the animation in [setEmissiveTexture](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/lantern.ts#L47) since this is where we're doing all the "lighting" effects.

## Resources
**Files Used:**  
- [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/app.ts)
- [environment.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/environment.ts)
- [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/characterController.ts)
- [lantern.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/lantern.ts)



## Summary
The first step I took towards making the game was to figure out how movement would work. My past experience with 3D games pushed me towards thinking that movement would be the most difficult part of the development process, so I wanted to make sure to focus on that early on. Since I was just getting started, I knew I needed to get some prototyping in for it, so I started off by making a playground to test out simple walking, jumping, and dashing: [early prototype](https://playground.babylonjs.com/#UP84Y8#10)

A few things you can see from this is:
1. The player is able to walk through the platform
2. The player falls off of the platform before the mesh is "completely" off of the platform
3. And most importantly, when you jump, the player lands partially inside of the ground

This prototype underwent a lot of transformations to get to the point that it's at for the final game! For the final version, I've implemented a capsule collider + simulated rigidbody by using Babylon's collision physics and raycasting for ground detection.

For part 1 we'll be going over how to detect inputs and how to get simple walking/running movement. Links to the complete files are below, but I'll be referencing certain parts that are important.

In order to achieve certain character movements, I referenced a few different Unity tutorials as well as game dev blog posts that will be linked below.

## Input Controller
For this part of the tutorial, we'll be going over the basics for movement with keyboard controls. You'll want to create a file called **inputController.ts**. Here we'll be creating a [PlayerInput](https://github.com/BabylonJS/SummerFestival/blob/master/src/inputController.ts#L4) class that will handle all of the inputs for our game.
```javascript
constructor(scene: Scene) {
    scene.actionManager = new ActionManager(scene);

    this.inputMap = {};
    scene.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnKeyDownTrigger, (evt) => {
        this.inputMap[evt.sourceEvent.key] = evt.sourceEvent.type == "keydown";
    }));
    scene.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnKeyUpTrigger, (evt) => {
        this.inputMap[evt.sourceEvent.key] = evt.sourceEvent.type == "keydown";
    }));

    scene.onBeforeRenderObservable.add(() => {
        this._updateFromKeyboard();
    });
}
```
Within our constructor we're creating an action manager to register keydown and keyup events and using the inputMap to store whether the key was down. We're then telling the scene to call the [_updateFromKeyboard](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/src/inputController.ts#L58) function before the scene renders.

```javascript
private _updateFromKeyboard(): void {
    if (this.inputMap["ArrowUp"]) {
        this.vertical = Scalar.Lerp(this.vertical, 1, 0.2);
        this.verticalAxis = 1;

    } else if (this.inputMap["ArrowDown"]) {
        this.vertical = Scalar.Lerp(this.vertical, -1, 0.2);
        this.verticalAxis = -1;
    } else {
        this.vertical = 0;
        this.verticalAxis = 0;
    }

    if (this.inputMap["ArrowLeft"]) {
        this.horizontal = Scalar.Lerp(this.horizontal, -1, 0.2);
        this.horizontalAxis = -1;

    } else if (this.inputMap["ArrowRight"]) {
        this.horizontal = Scalar.Lerp(this.horizontal, 1, 0.2);
        this.horizontalAxis = 1;
    }
    else {
        this.horizontal = 0;
        this.horizontalAxis = 0;
    }
}
```
Inside of **_updateFromKeyBoard**, we're checking for whether our arrow keys have been pressed by looking at the value that's in our inputMap. The up and down arrows are checking the vertical inputs which correspond to forward and backwards movement. The left and right arrows are checking for horizontal movement. As we press the key, we want to lerp the value so that it has a smoother transition. We are doing a couple different things here:
1. As you hold the key, it gradually increases the value to 1 or -1.
2. We're keeping track of which axis/direction we were moving in
3. If we don't detect any inputs in an axis, we set both the direction and value to 0

Now, in order to use this *PlayerInput*, we'll need to create one in **_goToGame**:
```javascript
//--INPUT--
this._input = new PlayerInput(scene); //detect keyboard/mobile inputs
```
This means we will also need to update the line where we create our Player to take in the input **_initializeGameAsync**:
```javascript
//Create the player
this._player = new Player(this.assets, scene, shadowGenerator, this._input);
```

## Basic Movement Setup
Now that we can detect our inputs, we need to implement what to do when those inputs are detected. We'll be focusing on the [updateFromControls](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L158) function inside of **characterController.ts**.

### Input
```javascript
this._moveDirection = Vector3.Zero(); // vector that holds movement information
this._h = this._input.horizontal; //x-axis
this._v = this._input.vertical; //z-axis
```
First, we set up a Vector3 to use as our movement vector. This will be reset every frame. Then we grab our inputs from the PlayerInput class.
```javascript
//--MOVEMENTS BASED ON CAMERA (as it rotates)--
let fwd = this._camRoot.forward;
let right = this._camRoot.right;
let correctedVertical = fwd.scaleInPlace(this._v);
let correctedHorizontal = right.scaleInPlace(this._h);

//movement based off of camera's view
let move = correctedHorizontal.addInPlace(correctedVertical);
```
Now, since we want the player to move in relation to the camera, we need to grab the forward and right vectors of the camera. We then scale them by our inputs. We now have a new movement vector called move that's the combined vertical and horizontal movement. The reason why I've implemented this is because the camera view will be rotating at certain areas of the map and if the player was moving to the right as the camera rotated, we want them to be able to continue moving right even as the orientation changes.
```javascript
//clear y so that the character doesnt fly up, normalize for next step
this._moveDirection = new Vector3((move).normalize().x, 0, (move).normalize().z);
```
Here, we are normalizing the vector and setting the y value to 0 since we only care about x-axis and z-axis movement.
```javascript
//clamp the input value so that diagonal movement isn't twice as fast
let inputMag = Math.abs(this._h) + Math.abs(this._v);
if (inputMag < 0) {
    this._inputAmt = 0;
} else if (inputMag > 1) {
    this._inputAmt = 1;
} else {
    this._inputAmt = inputMag;
}
```
Then, we want to find the magnitude of what our combined horizontal and vertical movements give us and clamp it to be a maximum of 1 since we don't want to move faster if we're moving diagonally.
```javascript
//final movement that takes into consideration the inputs
this._moveDirection = this._moveDirection.scaleInPlace(this._inputAmt * Player.PLAYER_SPEED);
```
We then scale our final *_moveDirection* by that amount multiplied by the speed we want the player to move at.

### Updating the Game
In order to actually see our player move, we'll need to do a few things:
1. Before each render, we need to make sure that we're updating our character. To do this, we first need to activate our player in **activatePlayerCamera**:
```javascript
public activatePlayerCamera(): UniversalCamera {
    this.scene.registerBeforeRender(() => {

        this._beforeRenderUpdate();
        this._updateCamera();

    })
    return this.camera;
}
```
What this does is, before each render, calls our character update function (_beforeRenderUpdate) and calls our camera update function (_updateCamera).
2. **_beforeRenderUpdate** for now will just involve updating the movement
```javascript
private _beforeRenderUpdate(): void {
    this._updateFromControls();
    //move our mesh
    this.mesh.moveWithCollisions(this._moveDirection);
}
```
Here we are also calling `mesh.moveWithCollisions` that uses the _moveDirection Vector3 that we created. We will update this in part 2 to account for gravity.
3. Call **activatePlayerCamera** in **_initializeGameAsync** after we call our Player Constructor.
```javascript
//...player constructor
const camera = this._player.activatePlayerCamera();
```

## Rotation
Now, how do we get our player to rotate towards the direction it's moving? This is where we're checking our input axes (**_updateFromControls**).
```javascript
//check if there is movement to determine if rotation is needed
let input = new Vector3(this._input.horizontalAxis, 0, this._input.verticalAxis); //along which axis is the direction
if (input.length() == 0) {//if there's no input detected, prevent rotation and keep player in same rotation
    return;
}
```
We first grab the input axes and check whether there were any inputs. This will determine whether or not we continue to calculate the rotation of the character. The reason why we want to return if there are no inputs is because the player will re-adjust their rotation to face forwards again if we don't explicitly tell it not to.
```javascript
//rotation based on input & the camera angle
let angle = Math.atan2(this._input.horizontalAxis, this._input.verticalAxis);
angle += this._camRoot.rotation.y;
let targ = Quaternion.FromEulerAngles(0, angle, 0);
this.mesh.rotationQuaternion = Quaternion.Slerp(this.mesh.rotationQuaternion, targ, 10 * this._deltaTime);
```
Here we are calculating the angle to move the player to based off of the camera's current angle. Then we are slerping to that new target angle by a value of 10 x *this._deltaTime* so that we have a smooth transition as we rotate.
- [this._deltaTime](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L159) is the amount of time in between frames (ms), so we divide by 1000 to get seconds.

At this point, if we run the project, we should be able to move around & see our player rotate directions!

### Raycasts

#### Raycast

Raycasting is going to be our main method of detecting the ground beneath the character. First, we need a function [_floorRaycast](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L278):
```javascript
let raycastFloorPos = new Vector3(this.mesh.position.x + offsetx, this.mesh.position.y + 0.5, this.mesh.position.z + offsetz);
let ray = new Ray(raycastFloorPos, Vector3.Up().scale(-1), raycastlen);
```
We want to send a single raycast downwards from the center of the character plus some offset if passed in, 0.5 above the bottom of the character (since the origin is at the bottom of my character mesh).
```javascript
let predicate = function (mesh) {
    return mesh.isPickable && mesh.isEnabled();
}
let pick = this.scene.pickWithRay(ray, predicate);
```
Then, we want to define what can be picked by our raycast. This was important to have since I created custom collision meshes for the parts of the environment that had more complex geometry. These meshes are invisible, but should still be pickable. We start checking whether our raycast has hit anything by using pickWithRay.
```javascript
if (pick.hit) {
    return pick.pickedPoint;
} else {
    return Vector3.Zero();
}
```
If our ray has hit anything, return the pickedPoint, a Vector3. Else, we return the zero vector.

#### Grounded

The [_isGrounded](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L298) function checks whether or not the player is on a ground by sending a raycast.
```javascript
if (this._floorRaycast(0, 0, 0.6).equals(Vector3.Zero())) {
    return false;
} else {
    return true;
}
```
The raycast that we send is at the center of our character and extends 0.1 past the bottom. We want it to extend a little further so that it detects the ground before the player has a chance to intersect it.

#### Gravity

Now that we're able to detect the ground, we need to apply gravity to the player to keep them grounded! The [_updateGroundDetection](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L355) will handle everything that has to do with gravity.
```javascript
if (!this._isGrounded()) {
    this._gravity = this._gravity.addInPlace(Vector3.Up().scale(this._deltaTime * Player.GRAVITY));
    this._grounded = false;
}
```
If we're not grounded, we want to add to our gravity and set our *_grounded* flag to false. Player.GRAVITY is a negative value, which is what makes our overall gravity point downwards.
```javascript
//limit the speed of gravity to the negative of the jump power
if (this._gravity.y < -Player.JUMP_FORCE) {
    this._gravity.y = -Player.JUMP_FORCE;
}
this.mesh.moveWithCollisions(this._moveDirection.addInPlace(this._gravity));
```
We want to make sure that we cap the value of gravity so that while we're in the air, the character doesn't infinitely increase its downward acceleration. Then we apply gravity to our player by adding it to the current *_moveDirection* and moving the player by that vector.

```javascript
if (this._isGrounded()) {
    this._gravity.y = 0;
    this._grounded = true;
    this._lastGroundPos.copyFrom(this.mesh.position);
}
```
If the player is grounded, we want to set the gravity to 0 to keep our player grounded and set our *_grounded* flag to true. In addition, we'll update our *_lastGroundPos* to our current position to keep track of our last safe grounded position (we'll be using this later on).

Lastly, since we're now accounting for gravity and calling `mesh.moveWithCollisions` here, we can remove our call in **_beforeRenderUpdate** and replace it with a call to **_updateGroundDetection**:
```javascript
private _beforeRenderUpdate(): void {
    this._updateFromControls();
    this._updateGroundDetection();
}
```

Now if you run the game, our player falls to the ground, and can move around!

## Resources

### Files Used:
- [inputController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/inputController.ts)
- [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/characterController.ts)
- [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/app.ts)

### Follow Along:
- [inputController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/characterMove1/inputController.ts)
- [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/characterMove1/characterController.ts)
- [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/characterMove1/app.ts)

### External
[Unity 3D 8 Directional Character System](https://www.youtube.com/watch?v=cVy-NTjqZR8)
[AstroKat: Moving Kat](https://www.patreon.com/posts/21343562)
[How to Make a Dash Move in Unity](https://www.youtube.com/watch?v=w4YV8s9Wi3w)



Now that we have our character moving around, let's give them the ability to navigate platforms!

## Input Controller

First we'll start by adding in inputs for our jumping and dashing to [inputController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/inputController.ts)!
Inside of [updateFromKeyboard](/guidedLearning/createAGame/characterMovePt1#input-controller) we just need to add:

```javascript
//dash
if (this.inputMap["Shift"]) {
  this.dashing = true;
} else {
  this.dashing = false;
}

//Jump Checks (SPACE)
if (this.inputMap[" "]) {
  this.jumpKeyDown = true;
} else {
  this.jumpKeyDown = false;
}
```

_this.dashing_ and _this.jumpKeyDown_ will be used to control the actions based off of conditions being met in characterController.ts.

## Jumping

Here we'll be focusing on [\_updateFromGroundDetection](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L355). We'll be adding and updating what we wrote in [part 1's gravity](/guidedLearning/createAGame/characterMovePt1#raycasts).

### Input

```javascript
//Jump detection
if (this._input.jumpKeyDown && this._jumpCount > 0) {
  this._gravity.y = Player.JUMP_FORCE;
  this._jumpCount--;
}
```

Here we're checking whether our jumpKeyDown is true and the jumpCount is > 0. If these are true, then we add to our gravity a jump force (which is defined as a negative number) to propel a force upwards so that the character jumps.

### Grounded Check

```javascript
if (this._isGrounded()) {
  this._gravity.y = 0;
  this._grounded = true;
  this._lastGroundPos.copyFrom(this.mesh.position);

  this._jumpCount = 1; //allow for jumping
}
```

We want to reset the jumpCount back to 1. This is where you could potentially allow for double jumps, but I chose to stick to a single jump mechanic.

## Slopes

I specifically added the implementation for detecting slopes because I wanted there to be stairs in the game. This served to be a challenge because meshes use their actual geometry, so in order to accomplish a smooth walking movement along stairs, I needed to create invisible colliders. These were just box meshes that were rotated to have the flat side along where the stairs would be (essentially a slope).

![collision](/img/how_to/create-a-game/slopecollision.png) ![stairs](/img/how_to/create-a-game/stairs.png)

Then I had to differentiate between stairs and non-stairs. The way I did this was by comparing the angles between the normal of the mesh and the up vector (this took some testing to find a good range).

The [\_checkSlope](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L309) function can be broken down as follows:

1. The predicate is a function that defines what types of meshes are eligible for being picked by a raycast. We define the mesh that we're looking for as being pickable and enabled since we want to include meshes that are not visible.

    ```javascript
    let predicate = function (mesh) {
      return mesh.isPickable && mesh.isEnabled();
    };
    ```

2. We send 4 raycasts down from the character, making a kind of circle of raycasts.
   ![illustration](/img/how_to/create-a-game/sloperaycast.png)

3. For each raycast, we're checking if there's a hit and whether the normal of the hit is not equal to the up vector.

    ```javascript
    if (pick.hit && !pick.getNormal().equals(Vector3.Up())) {
      //check whether it's stairs or not
    }
    ```

4. I implemented this calculation for stairs in two ways:
    - Originally, I calculated the angle between the normal of the picked mesh and the up vector and if the angle was within a range, it was considered a slope.

      ```javascript
      let dot = Vector3.Dot(pick.getNormal(), Vector3.Up());
      let angle = Math.acos(dot / (pick.getNormal().length() * Vector3.Up().length()));
      return angle > 0.70 && angle < 1.6;
      ```

    - However, because there were some other meshes whose normals matched that range, it messed with the character animations in some areas as it detected them as slopes. So, I instead just checked to see if the pickedMesh's name had "stair" in it.

      ```javascript
       if (pick.pickedMesh.name.includes("stair")) { return true; }
      ```

      This range may be hardcoded and based specifically on the meshes used, so there's definitely a better way to do this. One potential way is to use tags to signify the specific meshes that are stairs and check for whether the raycasts are hitting those.

Now, we want to update our "if not grounded" check to take into account slopes:

```javascript
if (!this._isGrounded()) {
  //if the body isn't grounded, check if it's on a slope and was either falling or walking onto it
  if (this._checkSlope() && this._gravity.y <= 0) {
    //if you are considered on a slope, you're able to jump and gravity won't affect you
    this._gravity.y = 0;
    this._jumpCount = 1;
    this._grounded = true;
  } else {
    //keep applying gravity
    this._gravity = this._gravity.addInPlace(Vector3.Up().scale(this._deltaTime * Player.GRAVITY));
    this._grounded = false;
  }
}
```

We are checking for slopes here because as the character walks along the slope, they're actually considered not grounded based off of the single center raycast that we're doing in the \_isGrounded function. Thus, the player has gravity continuously acting on them, pushing them down the slope.

This is why we check for whether we're on a slope, and then remove gravity, and fake being grounded. We also only check if our gravity tells us that we're walking up the stairs and not down, so essentially as our character "walks" down the stairs, gravity is acting on them (kind of like in real life!)

## Dashing

Dashing was another mechanic that I thought would be useful for a platformer. Since this game is based on time, I wanted to add a limitation on the dash mechanic so that it wouldn't become the main mode of transportation. Thus, the dash move became an air-dash that's limited to being used once until you touch a ground again.

For the dashing implementation, we return to [\_updateFromControls](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L170).

### Input

```javascript
if (this._input.dashing && !this._dashPressed && this._canDash && !this._grounded) {
  this._canDash = false; //we've started a dash, do not allow another
  this._dashPressed = true; //start the dash sequence
}
```

This seems like a lot of conditions, and that's because we're limiting the dash to a single instance if we're in the air.

### Duration

```javascript
let dashFactor = 1;
//if you're dashing, scale movement
if (this._dashPressed) {
  if (this.dashTime > Player.DASH_TIME) {
    this.dashTime = 0;
    this._dashPressed = false;
  } else {
    dashFactor = Player.DASH_FACTOR;
  }
  this.dashTime++;
}
```

If we've begun our dash sequence, we want to increment our timer every frame. If we are in the dashing sequence, we set our dashFactor. If we've completed our dash, we reset our timer and set _\_dashPressed_ to false to exit the sequence.

### Reset

Returning to [the grounded check](#grounded-check), this is where we want to reset our dashing ability.

```javascript
//dashing reset
this._canDash = true; //the ability to dash
//reset sequence(needed if we collide with the ground BEFORE actually completing the dash duration)
this.dashTime = 0;
this._dashPressed = false;
```

### Modifying Movement

We want to update **\_updateFromControls** to now take into account our dashing.

```javascript
//clear y so that the character doesnt fly up, normalize for next step, taking into account whether we've DASHED or not
this._moveDirection = new Vector3(move.normalize().x * dashFactor, 0, move.normalize().z * dashFactor);
```

Previously we were just normalizing our move vector. Now we also want to multiply by the dashFactor to give it that extra bit of movement in the direction we're currently moving.

Now, if we run the game, we should be able to move, jump, and dash! You will notice that we still have that issue of falling into the ground. I am not sure why this is happening, but it doesn't happen once you import the final mesh. However, early on in the development I had fixed this issue before re-writing the gravity & jumping code. You can take a look at what I did [here](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/oldUpdateGround.txt). Essentially, we have to re-adjust to account for how much we would fall through. In addition, having more raycasts that are longer will help in detecting the ground earlier.

## Resources

**Files Used:**

- [inputController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/inputController.ts)
- [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/characterController.ts)

**Follow Along:**

- [inputController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/characterMove2/inputController.ts)
- [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/characterMove2/characterController.ts)

### External

[AstroKat: Moving Kat 2 (Jumps and Slopes)](https://www.patreon.com/posts/35207209)



## Thank You!

This game isn't perfect, but I hope it gives you insight into how to develop games with babylon.js & inspires you to make something amazing!

Please let us know how this series was for you. Feedback is always welcome and I hope to keep improving to provide even better content.

You can [check out the game](https://BabylonJS.github.io/SummerFestival)
The full github repo [here](https://github.com/BabylonJS/SummerFestival)



## Envrionment

Within the environment, I have several meshes that serve the purpose of being collision boxes and trigger areas. These are just normal meshes in blender that I intend on making invisible within the scene after I've imported it. Babylon has no idea of knowing whether you intend to use a mesh as a collision box, so we need to set that up ourselves by setting flags.

Recall that we loaded the assets in the [load](/guidedLearning/createAGame/importMeshes#load) function. We then looped through the resulting meshes and allowed them to receive shadows and check collisions. Well, in this same forEach loop, this is where we want to specify our meshes that will be acting as collision boxes, the meshes that use those collision boxes, and the meshes that are trigger volumes.

```javascript
if (m.name == "ground") {
    //dont check for collisions, dont allow for raycasting to detect it(cant land on it)
    m.checkCollisions = false;
    m.isPickable = false;
}
//areas that will use box collisions
if (m.name.includes("stairs") || m.name == "cityentranceground" || m.name == "fishingground.001" || m.name.includes("lilyflwr")) {
    m.checkCollisions = false;
    m.isPickable = false;
}
//collision meshes
if (m.name.includes("collision")) {
    m.isVisible = false;
    m.isPickable = true;
}
//trigger meshes
if (m.name.includes("Trigger")) {
    m.isVisible = false;
    m.isPickable = false;
    m.checkCollisions = false;
}
```

We can break this up into 3 sections:

1. Our first condition is for the ground. This is actually a special case that works with our player and will be discussed in the [section](#player-and-collisions) below.
2. There are a couple meshes with either complex geometry or multiple separate parts that needed to be simplified to provide better movement, but still act as the visual mesh that we see. We disable collisions and picking for those so that we can't collide with them as we move or detect them when we raycast. Now, since we've done this, we need to do the opposite for their corresponding collision meshes. All of the collision meshes had "collision" as a part of the name in blender, so I could just refer to all of them as long as it included that. In addition, since we don't want to see these, we need to set them to not visible.
3. There are meshes in the game that automatically control the rotation of the camera, and like the collision meshes, these aren't visible, nor are they pickable; however, because they're meant to just be volumes that are intersected with, we need to remove collision checks on them.

![before Setting Up](/img/how_to/create-a-game/beforeCollisionMeshes.png) ![after Setting Up](/img/how_to/create-a-game/afterCollisionMeshes.png)

## Player and Collisions

When we create our [Player class](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L105), we want to set up the interactions the player will have with the environment.

We've already set up our actionManager, so now we will register new `ActionManager.OnIntersectionEnterTrigger` actions.

```javascript
//Platform destination
this.mesh.actionManager.registerAction(
    new ExecuteCodeAction(
        {
            trigger: ActionManager.OnIntersectionEnterTrigger,
            parameter: this.scene.getMeshByName("destination"),
        },
        () => {
            if (this.lanternsLit == 22) {
                this.win = true;
                //tilt camera to look at where the fireworks will be displayed
                this._yTilt.rotation = new Vector3(5.689773361501514, 0.23736477827122882, 0);
                this._yTilt.position = new Vector3(0, 6, 0);
                this.camera.position.y = 17;
            }
        },
    ),
);

//World ground detection
//if player falls through "world", reset the position to the last safe grounded position
this.mesh.actionManager.registerAction(
    new ExecuteCodeAction(
        {
            trigger: ActionManager.OnIntersectionEnterTrigger,
            parameter: this.scene.getMeshByName("ground"),
        },
        () => {
            this.mesh.position.copyFrom(this._lastGroundPos); // need to use copy or else they will be both pointing at the same thing & update together
        },
    ),
);
```

What we're doing here is setting up to check whenever the player intersects or collides with this specified mesh, and if it does, it triggers an action.

1. Destination Platform detection
    - There's a platform where the player needs to reach, this will trigger the "win" state. For my game, that was displaying fireworks in the scene, so it will adjust the camera view to point towards where the fireworks would go off. _this.win_ is actually just a flag here because my game doesn't have a true separate win state, it just triggers an overlay to display the credits after fireworks have started.
2. "World" ground detection
    - If we collide with the world ground, we want to reset our mesh's position to what we've stored in _this.\_lastGroundPos_ (Recall that we actually update this every time we're grounded). This is actually a feature I added to account for world bounds that will basically reset the player's position to the last safe grounded position. That way, the player can never end up falling off or leaving the world and ending up in a "freefall" state.

## Player and Trigger Volumes

The trigger volumes in the scene are actually specifically for controlling the camera movement in areas of the game. So, respectively, these are located in the [\_updateCamera](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L442) function.

![rotation](/img/how_to/create-a-game/cornerrotation.gif)

There are two types:

1. Left/Right rotation

```javascript
//trigger areas for rotating camera view
if (this.mesh.intersectsMesh(this.scene.getMeshByName("cornerTrigger"))) {
    if (this._input.horizontalAxis > 0) {
        //rotates to the right
        this._camRoot.rotation = Vector3.Lerp(this._camRoot.rotation, new Vector3(this._camRoot.rotation.x, Math.PI / 2, this._camRoot.rotation.z), 0.4);
    } else if (this._input.horizontalAxis < 0) {
        //rotates to the left
        this._camRoot.rotation = Vector3.Lerp(this._camRoot.rotation, new Vector3(this._camRoot.rotation.x, Math.PI, this._camRoot.rotation.z), 0.4);
    }
}
```

There's a single cornerTrigger mesh that's located at the corner of a building. This is how we get that corner rotation to work well. If we're moving right through this area, we rotate the camera counter clockwise, and if we're moving left, we rotate the camera clockwise.

2. Up/Down rotation

```javascript
//rotates the camera to point down at the player when they enter the area, and returns it back to normal when they exit
if (this.mesh.intersectsMesh(this.scene.getMeshByName("festivalTrigger"))) {
    if (this._input.verticalAxis > 0) {
        this._yTilt.rotation = Vector3.Lerp(this._yTilt.rotation, Player.DOWN_TILT, 0.4);
    } else if (this._input.verticalAxis < 0) {
        this._yTilt.rotation = Vector3.Lerp(this._yTilt.rotation, Player.ORIGINAL_TILT, 0.4);
    }
}
//once you've reached the destination area, return back to the original orientation, if they leave rotate it to the previous orientation
if (this.mesh.intersectsMesh(this.scene.getMeshByName("destinationTrigger"))) {
    if (this._input.verticalAxis > 0) {
        this._yTilt.rotation = Vector3.Lerp(this._yTilt.rotation, Player.ORIGINAL_TILT, 0.4);
    } else if (this._input.verticalAxis < 0) {
        this._yTilt.rotation = Vector3.Lerp(this._yTilt.rotation, Player.DOWN_TILT, 0.4);
    }
}
```

The two areas where we're rotating the camera up/down is when the character enters and exits the festival stall area. The festival area exits into the destination area. So if they enter the festival, tilt the camera downwards more, and if they leave through that same entrance, rotate it back to the original tilt. Likewise, if they exit to the destination area, return it back to the original camera tilt. (_Player.DOWN_TILT_ and _Player.ORIGINAL_TILT_ are constants defined at the top of the [Player](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L29) class.)

## Resources

**Files Used:**

-   [environment.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/environment.ts)
-   [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/characterController.ts)

**Follow Along:**

-   [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/collisionsTriggers/characterController.ts)
-   [environment.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/collisionsTriggers/environment.ts)



## Summary

We have an awesome game now, but how do we get it on mobile?!

Making our game cross platform is made really simple with babylon!

## Inputs

The first thing that we need to do is start detecting our touch inputs.

1. In index.html, add this to the body

```javascript
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
```

Now, whenever we're using pointerEvents, it will account for touch inputs as well!

## Controls

## GUI

Now that we're no longer using key presses for our character, we need another way to get them moving around. This is where it gets a little tricky. The joystick class works really well if the main mechanic of the game is to only use the joystick. The joystick class creates an overlay canvas that ends up blocking any other inputs that may be on the screen. Since we need buttons to also jump and dash, I had to find a different way to get player movement. The end layout looked like this:

![mobile controls](/img/how_to/create-a-game/mobilecontrols.png)

Since these controls are only visible in the game state, I added them to the [Hud](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/ui.ts#L207). Since we only want to see these buttons if we're on mobile, we need to have a check to tell us whether the device is a mobile device.

```javascript
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    //make mobile controls
}
```

The [layout for controls](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/ui.ts#L214) took some experimentation, but I ended up creating grids to hold the buttons depending on which side of the screen they were on.

1. Create Rectangles to hold our buttons
2. Create Grids to manage button placement

```javascript
const actionGrid = new Grid();
actionGrid.addColumnDefinition(0.5); //create a column that's 50% the width of the grid
actionGrid.addColumnDefinition(0.5);
actionGrid.addRowDefinition(0.5);
actionGrid.addRowDefinition(0.5);
actionContainer.addControl(actionGrid);
```

When you make a grid, you add columns separately and pass in a size to give them. 3. Add the buttons to a grid position

```javascript
actionGrid.addControl(dashBtn, 0, 1);
actionGrid.addControl(jumpBtn, 1, 0);
```

If you look at this code above, you can actually see the grid placement of the buttons based off of the location of 0s and 1s (of course this only works for this case since there's just two buttons). But this is how you get the effect of them being stacked and opposite sides of each other!

![grid](/img/how_to/create-a-game/gridbuttons.png)

## Movement

Now that we've made the new gui elements for our character movement, we just need to hook this up to our current input system.

In **inputController.ts**, there's a function [\_setUpMobile](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/inputController.ts#L116) that creates pointer observables for each of the new character movement buttons. These will set flags for whether the button was pressed (similar to how we're storing keyboard inputs in our inputMap).

Then all we need to do is add the mobile equivalent of our keypresses to the existing structure in \_updateFromKeyboard. For example, dashing would be:

```javascript
//dash
if (this.inputMap["Shift"] || this._mobileDash) {
    this.dashing = true;
} else {
    this.dashing = false;
}
```

We have our character moving! But wait, the running animations don't work? If we return to the [\_animatePlayer](/guidedLearning/createAGame/animations#animate-player) function from the Animation tutorial, you'll see that we were looking at our inputMap for movement detection. We just need to add our mobile inputs to this as well.

![mobile gameplay](/img/how_to/create-a-game/mobilegameplay.gif)

Now we have a cross-platform game! Wasn't that easy?

## Extra Features

Because the game is on a web browser, we need to make sure that the player knows that the intended orientation is landscape mode. Not all browsers or devices allow for fullscreen mode, so I decided to create a notification that told the player to rotate the device for to get the best experience.

This followed a similar structure to how we set up the mobile controls for the game state by first checking whether we were on a mobile device in [\_goToStart](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/app.ts#L224). It was just a simple image, text, and button.

![image of notification](/img/how_to/create-a-game/rotatedevice.png)

## Resources

**Files Used:**

-   [index.html](https://github.com/BabylonJS/SummerFestival/blob/master/public/index.html)
-   [ui.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/ui.ts)
-   [inputController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/inputController.ts)
-   [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/app.ts)



## Summary
This is just a little bonus content if you're curious as to how I went about designing the game assets and what resources I used!

## References
Before I began any of the art asset creation, I used Pinterest to collect all of the resources I'd need. I had a bunch of different boards and made sure to save anything I thought could give me inspiration.

I made some really rough sketches of how I wanted the character and environment to look. The environment was the most vague as I wasn't sure in the beginning how I wanted the feel of the game to be. I went back in with more detail for the character reference to help with modeling.

![characterDesigns](/img/how_to/create-a-game/characterDesigns.jpeg)
![characterRef](/img/how_to/create-a-game/characterref.jpeg)

This is also where I started thinking about what color palette I wanted to use. Similar to the pixel-art games I usually make, I wanted to use a limited color palette to keep it consistent and bring everything together. Colors aren't usually my strength, so I just try to keep a set of colors I think work well together and go from there. This is where looking for color palettes on pinterest is really helpful.

## 3D Modeling with Blender
## Character
This area was the most new to me, so I spent a lot of time learning through studying youtube tutorial and speed modeling videos. The most challening part of this would have been the character modeling + rigging process. I modeled and rigged it several times until I was satisfied with the final outcome.

The first time was to get a player model done for animation and movement testing. The main problem I had was with clipping.
- When animated, the mesh had a lot of clipping since I made the body and clothes separately. The weight painting was a difficult process to try and minimize clipping as much as possible.
- This model also uses emissive materials rather than PBR (which means it would be self-lit), so in the final version I changed these to PBR since we needed the scene to be dark and lit by the lanterns and player's light only.

![firstModel](/img/how_to/create-a-game/firstModel.png)

The second one, I had troubles with the animations after rigging, so I decided to restart the whole process since my model must have been messed up somewhere. I referenced a ton of different rigging videos. Here are some of the videos were particularly helpful:
- [Royal Skies LLC Blender 2.8 Speed Tutorials](https://www.youtube.com/watch?v=f6vgICNCVxQ&list=PLZpDYt0cyiuu-sxJKbuYh8OjtgmXNacCV)

The third one is the one that's in the game right now! In order to fix the clipping problem I had with the other models, I joined all of the separate meshes. This made coloring the model really difficult, and I had to go back and clean up the areas where they were joined to make sure there weren't too many extra vertices. The weight painting process took a while, but at this point I was starting to get familiar with the process.

![finalModel](/img/how_to/create-a-game/finalPlayerModel.png)

These are some of the tutorials I watched for the animation process:
- [3D Animation Hub's Jump Animation](https://www.youtube.com/watch?v=VvTEovuTCgA)
- [Jayanam's Basic Running Cycle Tutorial](https://www.youtube.com/watch?v=0PkBq9NW7K8)

## Environment

Here are some of the youtubers I watched for inspiration on 3D Modeling environments!
- [Grant Abbitt](https://www.youtube.com/user/mediagabbitt)
- [Polygon Runway](https://www.youtube.com/channel/UCGSJevmBuDyxjLLOBNaYMGA)
- [MortMort's Gradient Texturing](https://www.youtube.com/watch?v=uOyiZaioX1U&list=PLR3Ra9cf8aV23C2oBB3aFLla6ABAPYiDk&index=5)

## 2D Art
I initially started out planning on using pixel art for all of the 2D assets, but I recently got this app called Procreate, so I wanted to try and see what I could do with it.

For the pixelart ui elements in the game, I used Aseprite with my wacom intuos drawing tablet, and for all of the other 2D art I used Procreate on my ipad air.

Both of these programs are amazing and have a bunch of different features that are really helpful. Both of these support animation, but aseprite can export your animation as a spritesheet, which was really helpful when bringing into babylon. Procreate can't create spritesheets so I had to bring them into piskelapp as a gif and then export as a spritesheet.

Procreate is really awesome to use, but I found that I had a lot of limitations when making the animations since I was limited to 25 layers which means I can only have a maximum of 25 frames if all of the lineart + coloring for each frame was done on one layer. Ultimately, I could only get to a max of about 12 frames for 1 animation. I use a lot of layers to keep things separate in case I need to change or move them later, especially since I had a few different elements that were going to be animated.

Both of these are paid programs, however there are free alteratives for each that I have used before:
- Pixel art
    - [Piskelapp](https://www.piskelapp.com/)
- Digital art
    - [Autodesk Sketchbook](https://www.sketchbook.com/)
    - [Krita](https://krita.org/en/)

## Resources
This is the pixel font I used for the dialogue. I always use this one for 2D games!  
Pixel font: [m5x7](https://managore.itch.io/m5x7) by Daniel Linssen

## Sounds
I wasn't able to get into sound development, but I have a list of different resources that include some free sound resources as well as some sites that let you experiment with music!
 - [Opengameart](https://opengameart.org/)
 - [Freesound](https://freesound.org/)
 - [Earslap](https://earslap.com/)
 - [BFXR](https://www.bfxr.net/)

If you're curious as to what songs and sound effects I used in the game:
 - Start/credits song: [copycat by syncopika](https://opengameart.org/content/copycat)
 - Game: [Christmas Synths](https://opengameart.org/content/happy-synths-loop-with-slight-christmas-feeling)
 - Pause: [Snowland Town by Matthew Pablo](https://opengameart.org/content/snowland-town)
 - Lose: [Eye of the Storm](https://opengameart.org/content/eye-of-the-storm)
 - SFX:
    - [Jump2 by LloydEvans09](https://freesound.org/people/LloydEvans09/sounds/187024/)
    - [Run/Walk](https://maysama.itch.io/free-footsteps-sound-effects)
    - [Fireworks](https://opengameart.org/content/25-cc0-bang-firework-sfx)
    - [Dash](https://freesound.org/people/potentjello/sounds/194081/)
    - [200 SFX](https://kronbits.itch.io/freesfx)
    - [Sound Pack](https://opengameart.org/content/level-up-power-up-coin-get-13-sounds)
    - [Selection](https://opengameart.org/content/8bit-menu-select)




## Summary

This section goes over some additional features & visual effects that you can use to enhance your game!

## IBL (Image-Based Lighting)

Image based lighting is really great if you want to give some ambient light to your scene without using an actual light source. Since my implementation of the lanterns took up all of the actual light sources I could use, I needed to figure out a way to add some ambient light into my scene to make the background of the player a little bit brighter.

[Image-based lighting](/features/featuresDeepDive/materials/using/HDREnvironment) uses an HRDI image to provide light to a scene, particularly useful for PBR materials. [Image-Based Lighting: The Easy Way](https://www.youtube.com/watch?v=W1wNF7z8vKQ) was super helpful in explaining how IBL works and how to actually create the **.env** that is needed.

This is what the game scene looks like before using IBL:

![without IBL](/img/how_to/create-a-game/withoutIBL.png)

This is what it looks like after we add IBL:

![with IBL](/img/how_to/create-a-game/withIBL.png)

```javascript
const envHdri = CubeTexture.CreateFromPrefilteredData("textures/envtext.env", scene);
envHdri.name = "env";
envHdri.gammaSpace = false;
scene.environmentTexture = envHdri;
scene.environmentIntensity = 0.04;
```

It's especially helpful when you need the player to be able to see areas they can get to in the distance as well as providing light once the player's sparkler runs out.

## Glow Layer

Another thing I've added for an extra boost of visual effect is a glow layer. The [glow layer](/features/featuresDeepDive/mesh/glowLayer) is super easy to set up and can add a lot to a dark scene. I used it primarily with the lanterns since I wanted their light to be emphasized.

![without GL](/img/how_to/create-a-game/withoutGL.png) ![withGL](/img/how_to/create-a-game/withGL.png)

It really only takes 2 lines!

```javascript
const gl = new GlowLayer("glow", scene);
gl.intensity = 0.4;
```

## Transition Effect

When switching scenes, I wanted there to be a smooth transition, and ended up finding a playground that used a post process to fade the screen to black: [here](https://www.babylonjs-playground.com/#2FGYE8#0)

We modified the effect to use `RegisterShader` instead of `ShadersStore` so that it made a bit more sense at first glance: [here](https://www.babylonjs-playground.com/#2FGYE8#4)

How I set this up in my project was by:

1. Setting up the post process in the goTo functions.

```javascript
Effect.RegisterShader("fade", "precision highp float;" + "varying vec2 vUV;" + "uniform sampler2D textureSampler; " + "uniform float fadeLevel; " + "void main(void){" + "vec4 baseColor = texture2D(textureSampler, vUV) * fadeLevel;" + "baseColor.a = 1.0;" + "gl_FragColor = baseColor;" + "}");
let fadeLevel = 1.0;
const postProcess = new PostProcess("Fade", "fade", ["fadeLevel"], null, 1.0, camera);
postProcess.onApply = (effect) => {
  effect.setFloat("fadeLevel", fadeLevel);
};
```

2. Adding a variable to keep track of when we want the transition to happen.

```javascript
this._transition = false;
```

3. Having the goTo for the scene change to be called once the transition has finished rather than on button click.

```javascript
scene.registerBeforeRender(() => {
  if (this._transition) {
    fadeLevel -= 0.05;
    if (fadeLevel <= 0) {
      this._goToCutScene();
      this._transition = false;
    }
  }
});
```

In our button's `onPointerDownObservable` **this.\_transition** would be set to **true**.

The differences you see with this and the playground have to do with the fact that we want to go from no post process to full black screen, so our fadeLevel actually decreases to make the screen dark. In addition, I set the length of the fade by just using a set value to decrease by whereas the playground cycles between fading in/out.

## Custom Fonts

Adding custom fonts is really simple. I brought in some google fonts that I thought matched well with the game's style by just modifying the index.html file. In the head of your index.html, just add the link you get from google fonts!

```javascript
<head>
    <meta charset="UTF-8">
    <title>Hanabi</title>

    <link href="https://fonts.googleapis.com/css2?family=Ceviche+One&family=Viga&display=swap" rel="stylesheet">
</head>
```

## Resources

**Files Used:**

- [index.html](https://github.com/BabylonJS/SummerFestival/blob/master/public/index.html)
- [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/app.ts)

### External

[HDRI image used](https://hdrihaven.com/hdri/?h=kiara_1_dawn)



## Summary

By the end of this section, the topics we've gone over should have well equipped you with knowledge on how to implement core mechanics for a game! The next few sections will go over adding more to the game in terms of features you can use to enhance the visuals of the game (including animation & sounds).

The Babylon GUI has a ton to offer, and the babylonjs [gui](/features/featuresDeepDive/gui/gui) documentation is extremely thorough in explaining how to use the different controls and components. For this tutorial, I'll just be going over features that were specific to my game or involved a little bit of logic to accompany it.

## Game UI

The most important use of the GUI for my game had to be the [Hud class](https://github.com/BabylonJS/SummerFestival/blob/master/src/ui.ts). This was actually the first thing that I focused on when I started working with the GUI library. What I learned from working with this alone, I applied to all of my other states!

![gameui](/img/how_to/create-a-game/guitimerspark.gif)

### HUD

The ui.ts file contains everything necessary for the game state's UI. Just like how we set up an AdvancedDynamicTexture in goToGame for our [state machine setup](/guidedLearning/createAGame/stateMachine#gotogame), we want to start with this as the foundation of our Hud class.

In goToGame:

1. Create a Hud

```javascript
const ui = new Hud(scene);
this._ui = ui;
```

This will replace the default UI setup we had.

2. Add the ui to our PlayerInput class

```javascript
this._input = new PlayerInput(scene, this._ui);
```

This is important for when we add controls for mobile.

The first thing I set out to do was to set up:

1. The game timer
2. The sparkler timer

Each of these timers would need to have some sort of display form. I decided to go with text for the game timer and sprite animation for the sparkler timer (however, I did of course start off with text in order to test out the timing).

### Game Timer

The game timer is just a simple TextBlock called [_clockTime_](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/ui.ts#L89) that's updated in [updateHud](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/ui.ts#L310):

```javascript
if (!this._stopTimer && this._startTime != null) {
    let curTime = Math.floor((new Date().getTime() - this._startTime) / 1000) + this._prevTime;
    this.time = curTime;
    this._clockTime.text = this._formatTime(curTime);
}
```

What this does is:

1. Calculates the amount of time in milliseconds that has passed since the start time, then divides by 1000 to convert it into seconds. Then adds whatever _\_prevTime_ is.
    - _\_prevTime_ is initialized to 0 and only ever updates if the game is paused and when the game resumes
    - _\_startTime_ is updated to the current time so that the next time **updateHud** is called, we account for the time we spent paused (the difference in time will be the same as it left off).
2. Stores the total time elapsed in seconds
3. Formats the time to match our game's world time

#### Format Time

The [formatting](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/ui.ts#L332) of the time is: **4 minutes of real time = 1 hour game time**

```javascript
let minsPassed = Math.floor(time / 60);
let secPassed = time % 240; // goes back to 0 after 4mins/240sec
// 4sec = 1min game time
if (secPassed % 4 == 0) {
    this._mString = Math.floor(minsPassed / 4) + 11;
    this._sString = (secPassed / 4 < 10 ? "0" : "") + secPassed / 4;
}
let day = this._mString == 11 ? " PM" : " AM";
return this._mString + ":" + this._sString + day;
```

The game's time starts at 11:00PM and goes until 12:00AM. We want to convert our time into minutes and seconds so that we can calculate the hours & minutes of the game.
 - _\_mString_ will really only update if 4 minutes have passed, otherwise it will always be 11 - _\_sString_ updates every 4 seconds.

#### Start/Stop

Now that we know how to update the timer, how do we start and stop it?

```javascript
//---- Game Timer ----
public startTimer(): void {
    this._startTime = new Date().getTime(); //get the time when we started
    this._stopTimer = false;
}
public stopTimer(): void {
    this._stopTimer = true; //controls the update of our timer
}
```

#### Using the Game Timer

1. Start the game timer AFTER the [scene is ready](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/src/app.ts#L634) in app.ts.

    ```javascript
    this._ui.startTimer();
    ```

2. In \_initializeGameAsync:

    ```javascript
    scene.onBeforeRenderObservable.add(() => {
        // when the game isn't paused, update the timer
        if (!this._ui.gamePaused) {
            this._ui.updateHud();
        }
    });
    ```

    We start setting up the game loop.

3. In main's **State.Game**:

    ```javascript
    // once the timer reaches 240 seconds, take us to the lose state
    if (this._ui.time >= 240 && !this._player.win) {
        this._goToLose();
        this._ui.stopTimer();
    }
    ```

We can go ahead and remove the [temporary button](/guidedLearning/createAGame/stateMachine#gotogame) we had that went to the lose state since now we have an actual condition that takes us there.

Now we have a complete game timer! Once the game starts, the timer will begin and update until 4 minutes have passed, then it will take the player to the lose state.

### Sparkler Timer

#### Start Sparkler Timer

[startSparklerTimer](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/ui.ts#L347) takes a different approach to timing since it's hooked up to an animation. The way I went about doing this was by setting intervals for both the time-related animation & the visual effect animation once the sparkler starts.

```javascript
this.stopSpark = false;
this._sparklerLife.cellId = 0;
this._spark.cellId = 0;
if (this._handle) {
    clearInterval(this._handle);
}
if (this._sparkhandle) {
    clearInterval(this._sparkhandle);
}
```

Everytime we start the sparkler, we want to make sure everything is reset, including the previous intervals if any.

```javascript
this._scene.getLightByName("sparklight").intensity = 35;
```

Have the actual sparkler object's light visible again by increasing its intensity.

```javascript
this._handle = setInterval(() => {
    if (!this.gamePaused) {
        if (this._sparklerLife.cellId < 10) {
            this._sparklerLife.cellId++;
        }
        if (this._sparklerLife.cellId == 10) {
            this.stopSpark = true;
            clearInterval(this._handle);
        }
    }
}, 2000);
```

This interval controls the actual sparkler's lifetime. The sparkler has 10 energy bars, and every 2 seconds we update the animation. Once we reach the last frame, we stop the spark & clear the interval.

![sparklerBar](/img/how_to/create-a-game/sparklerLife.gif)

```javascript
this._sparkhandle = setInterval(() => {
    if (!this.gamePaused) {
        if (this._sparklerLife.cellId < 10 && this._spark.cellId < 5) {
            this._spark.cellId++;
        } else if (this._sparklerLife.cellId < 10 && this._spark.cellId >= 5) {
            this._spark.cellId = 0;
        } else {
            this._spark.cellId = 0;
            clearInterval(this._sparkhandle);
        }
    }
}, 185);
```

This interval controls the little spark animation for the sparkler part of the bar. It will just keep looping for as long as the sparkler still has energy.

![spark](/img/how_to/create-a-game/spark.gif)

Both of these are affected by whether the game is paused.

#### Stop Sparkler Timer

When we [stop the sparkler](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/ui.ts#L403), we decrease the intensity of the light to 0 so that it's not visible.

```javascript
this.stopSpark = true;
this._scene.getLightByName("sparklight").intensity = 0;
```

#### Using the Sparkler Timer

1. Just like how we did with the game timer, we need to start the timer AFTER the [scene is ready](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/src/app.ts#L635) in app.ts.

```javascript
this._ui.startSparklerTimer();
```

**Note: the sparkler timers in the file links actually pass in a particle system, but since we haven't gone over how to make those yet, you can just ignore that part**

Now that the start & stop functions are set up, how do we know when to use them?

In the [game loop](#using-the-game-timer), we want to be checking:

```javascript
//reset the sparkler timer
if (this._player.sparkReset) {
    this._ui.startSparklerTimer();
    this._player.sparkReset = false;
}
//stop the sparkler timer after 20 seconds
else if (this._ui.stopSpark && this._player.sparkLit) {
    this._ui.stopSparklerTimer();
    this._player.sparkLit = false;
}
```

Recall that we set **sparkReset** and **sparkLit** to true on [collision with a lantern](/guidedLearning/createAGame/lanterns#collisions).

## Cutscene Animation

The cutscene is the last GUI implementation that I focused on since it was more of a polish element to give the game a backstory and the player instructions on what to do. Ideally, the animation portion would be a single animation file, but because of procreate limitations, I had to break it up into different portions and sequence them together.

Things I noticed during this process:

1. I had to make sure that all of these image files were loaded before starting the animation or else you'd only see the files that managed to load fast enough.
2. The files take a while to load since they're pretty large even after exporting for the web so a loading screen and condition before displaying the scene was necessary.

### Animation

In order to achieve the cutscene that I ended up with: animation + dialogue, I had to:

1. Keep track of when all the animation files were loaded.
   I created a variable **anims_loaded** to keep track of how many animations have loaded. Then, for each image animation I added an `onImageLoadedObservable`, for example:

```javascript
beginning_anim.onImageLoadedObservable.add(() => {
    anims_loaded++;
});
```

2. Start the interval timers for the animation once [everything was loaded](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/src/app.ts#L450).
   I used a switch statement to help with transitioning to the next animation since I thought it would be the best way to manage all of the different parts. It is a bit hardcoded since there isn't a consistent number of frames for the animations. Additionally, I had to separate it into two different intervals to get the timing to be better because at some parts I wanted the animations to last a bit longer which is why you'll see an **animTimer** and **anim2Timer**.

### Dialogue

The dialogue text doesn't automatically progress, but instead waits for an input from the player. When the player presses the [next](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/src/app.ts#L533) button, we use **transition** to keep track of what dialogue we're on, then progress the dialogue to the next frame.

```javascript
next.onPointerUpObservable.add(() => {
    if (transition == 8) {
        //once we reach the last dialogue frame, goToGame
        this._cutScene.detachControl();
        this._engine.displayLoadingUI(); //if the game hasn't loaded yet, we'll see a loading screen
        transition = 0; //since we only want to go through this block once
        canplay = true; //signals that we can progress to the game since we've completed the dialogue sequence
    } else if (transition < 8) {
        // 8 frames of dialogue
        transition++;
        dialogue.cellId++;
    }
});
```

In addition, the dialogue has a background animation that just keeps looping:

```javascript
let dialogueTimer = setInterval(() => {
    if (finished_anim && dialogueBg.cellId < 3) {
        dialogueBg.cellId++;
    } else {
        dialogueBg.cellId = 0;
    }
}, 250);
```

## Menu Popup

### Pause Menu

I used a [popup menu](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/ui.ts#L413) for my pause state that included a page for controls. In order to keep all of the elements together in case of screen resizing, I placed everything in a `Rectangle` control.

```javascript
pauseBtn.onPointerDownObservable.add(() => {
    this._pauseMenu.isVisible = true;
    playerUI.addControl(this._pauseMenu);
    this.pauseBtn.isHitTestVisible = false;

    //when game is paused, make sure that the next start time is the time it was when paused
    this.gamePaused = true;
    this._prevTime = this.time;
});
```

There are a few things to consider when implementing this:

1. When you pause the game the menu needs to become visible
2. You need to add control to the menu.
3. You need to set the pause button to not detect any pointer events. This is specifically because I had a resume button rather than using the pause button to toggle the menu on/off.

Similarly, you need to make sure that you do the opposite when you press the resume button.

```javascript
resumeBtn.onPointerDownObservable.add(() => {
    this._pauseMenu.isVisible = false;
    this._playerUI.removeControl(pauseMenu);
    this.pauseBtn.isHitTestVisible = true;

    //game unpaused, our time is now reset
    this.gamePaused = false;
    this._startTime = new Date().getTime();
});
```

### Controls Menu

The controls menu uses the same structure as the pause menu. It's a `Rectangle` control with an image. In order to toggle between the two, all you need to do is swap the visibility of the menus like so:

```javascript
//open controls screen
this._controls.isVisible = true;
this._pauseMenu.isVisible = false;
```

## Pausing the Game

Another important topic I think that's worth mentioning is the process of pausing the game. Because the pause "state" is not it's own scene, I had to approach this by having a variable, _gamePaused_, keep track of whether we were paused or not. This flag is used throughout the game and even used for more than just showing the pause menu.

When the game is paused we:

1. Don't update the game timer and animations associated with the sparkler. (app.ts)
2. Don't allow for player movement. (inputController.ts)

When I got to actually implementing this, it so happened that the different files needed to know about _\_ui.gamePaused_. However, it was useful to have this since I could also use this to stop movements when in the "win" state. The win state would then essentially lock the player in a position where they'd be able to see the fireworks.

Now, we have a timed 3D platformer that takes you to the lose state when 4 minutes have passed and has an animated cutscene in the beginning!

## Resources

**Files Used:**

-   [ui.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/ui.ts)
-   [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/app.ts)
-   [inputController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/inputController.ts)

**Follow Along:**

-   [ui.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/gui/ui.ts)
-   [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/gui/app.ts)
-   [all necessary images](https://github.com/BabylonJS/SummerFestival/tree/master/public/sprites)



## Introduction

The game will be developed using Typescript and requires some setting up using NPM. The setup of the project will probably be the hardest part! For a simpler introduction to the features of Babylon.js and a basic HTML and JavaScript template read the [Getting Started](/features/introductionToFeatures) section first. 

The setup process for this game example is based off of the [NPM-support](/setup/frameworkPackages/npmSupport) documentation for getting started with Babylon.js and the [babylonjs webpack](https://github.com/RaananW/babylonjs-webpack-es6) sample project, but with a few additions and modifications. 

## First Steps

### Creating A Project

First you'll need to set up where you want the project to be located.

1. Using the text editor of your choice, open up your project folder. I will be using Visual Studio Code for this series.
2. Create a folder where you'll be storing your project files
3. Set up the file folder structure to be something like this:
    - dist
    - public
    - src
4. Main files
    - Go into your src folder and create an app.ts file
    - Go into your public folder and create an index.html file with the following contents:

```javascript
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title of Your Project</title>
    </head>
    <body>
    </body>
</html>
```

Notice that we currently don't have anything within the body of our html file. We'll be generating a canvas within our app.ts file later on.

### Installing Babylon.js

1. Generate the package.json

```javascript
npm init
```

You can fill these out now or just keep pressing _Enter_ and fill these out in your package.json later. 2. Open up the terminal (in VSCode you can do this by going to the top bar > Terminal > New Terminal).

3. Install Babylon.js

```javascript
npm install --save-dev @babylonjs/core
npm install --save-dev @babylonjs/inspector
```

This will install all of the dependencies for babylon that you'll need.

4. Typescript Support

```javascript
tsc --init
```

This will create a default tsconfig.json. You can replace the contents with:

```javascript
{
  "compilerOptions": {
    "target": "es6",
    "module": "ESNext",
    "moduleResolution": "node",
    "noResolve": false,
    "noImplicitAny": false,
    "sourceMap": true,
    "preserveConstEnums":true,
    "lib": [
        "dom",
        "es6"
    ],
    "rootDir": "src"
  }
}
```

### Setting Up Webpack

** Installing Dependencies **  
Now that we have our package.json generated, we need to install the dev dependencies for using webpack.

```javascript
npm install --save-dev typescript webpack ts-loader webpack-cli
```

**NOTE** if this line doesn't work the first time, try one more time  
** Configure Webpack **  
Now we will need to configure webpack to know what to do. Create a webpack.config.js file within your root directory. This is an example of what my configuration looks like:

```javascript
const path = require("path");
const fs = require("fs");
const appDirectory = fs.realpathSync(process.cwd());

module.exports = {
    entry: path.resolve(appDirectory, "src/app.ts"), //path to the main .ts file
    output: {
        filename: "js/bundleName.js", //name for the javascript file that is created/compiled in memory
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
        ],
    },
    mode: "development",
};
```

** Plugins **  
Additionally, we will install some plugins that will help with updating when running locally, and cleaning our bundle.

**NOTE** Make sure that the file *webpack.config.js* is closed before installing the plugins.

```javascript
npm install --save-dev html-webpack-plugin
npm install --save-dev webpack-dev-server
```

After we have these installed, we'll need to add them to our webpack.config.js. Our updated webpack.config.js should look something like this now:

```javascript
const path = require("path");
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const appDirectory = fs.realpathSync(process.cwd());

module.exports = {
    entry: path.resolve(appDirectory, "src/app.ts"), //path to the main .ts file
    output: {
        filename: "js/bundleName.js", //name for the js file that is created/compiled in memory
        clean: true,
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    devServer: {
        host: "0.0.0.0",
        port: 8080, //port that we're using for local host (localhost:8080)
        static: path.resolve(appDirectory, "public"), //tells webpack to serve from the public folder
        hot: true,
        devMiddleware: {
            publicPath: "/",
        }
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: path.resolve(appDirectory, "public/index.html"),
        })
    ],
    mode: "development",
};
```

Now when we build and run our project, if we make any updates, the browser will refresh so that we can see our changes. In addition, the HTML Webpack plugin is taking the javascript bundle file that is compiled and injects it into our index.html file. This .js bundle will show up inside of the dist folder.

### Creating A Scene

We'll be setting up the app.ts file to be the main entry point for our project.

**Set up and create the App class**

The App class will serve as our entire game application. This is a very simple example of how to set up a scene and should be separated out into different functions and make use of class variables for your project as you progress.

```javascript
class App {
    constructor() {
        // create the canvas html element and attach it to the webpage
        var canvas = document.createElement("canvas");
        canvas.style.width = "100%";
        canvas.style.height = "100%";
        canvas.id = "gameCanvas";
        document.body.appendChild(canvas);

        // initialize babylon scene and engine
        var engine = new Engine(canvas, true);
        var scene = new Scene(engine);

        var camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), scene);
        camera.attachControl(canvas, true);
        var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene);
        var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);

        // hide/show the Inspector
        window.addEventListener("keydown", (ev) => {
            // Shift+Ctrl+Alt+I
            if (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.key === 'i') {
                if (scene.debugLayer.isVisible()) {
                    scene.debugLayer.hide();
                } else {
                    scene.debugLayer.show();
                }
            }
        });

        // run the main render loop
        engine.runRenderLoop(() => {
            scene.render();
        });
    }
}
new App();
```

At this point, you should be seeing a lot of errors. This is because we haven't imported the babylonjs dependencies. Add to the top of your file:

```javascript
import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";
import "@babylonjs/loaders/glTF";
import { Engine, Scene, ArcRotateCamera, Vector3, HemisphericLight, Mesh, MeshBuilder } from "@babylonjs/core";
```

### Bundling the Project and Running Locally

Now that we have our project set up, how do we run it locally? We need to set up tasks in our package.json. In your package.json replace your "scripts" with this:

```javascript
    "scripts": {
        "build": "webpack",
        "start": "webpack-dev-server --port 8080"
    },
```

Now all we need to do is:

```javascript
npm run build
npm run start
```

Then when you visit localhost:8080 in our browser, you should see a sphere!

### (Optional) Github for Version Control

If you're working with a large project, you'll most likely want to keep it in a safe place in case your computer breaks, you lose your files, etc. Github is also very useful for keeping track of changes that you make and can make things a lot easier in case you need to bring back a previous version of your project. You can follow this to learn how to [add a project](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/adding-an-existing-project-to-github-using-github-desktop) using Github Desktop.

## Resources

[First Steps](/features/introductionToFeatures/chap1/first_app)  
[How To Get Babylon.js](/setup/frameworkPackages/frameworkVers)  
[NPM Support](/setup/frameworkPackages/npmSupport)  
[Sample Project](https://github.com/RaananW/babylonjs-webpack-es6)

### External

[HTML Webpack Plugin](https://www.npmjs.com/package/html-webpack-plugin)  
[Clean Webpack Plugin](https://www.npmjs.com/package/clean-webpack-plugin)  
[Webpack Dev Server](https://www.npmjs.com/package/webpack-dev-server)



Importing meshes is actually a really simple process. It's just what you do with those meshes afterwards that can get tricky!

The meshes for the environment and player will be linked below. We'll make a new folder called models inside of the public folder.

## Environment Mesh

Previously, we created an [Environment class](/guidedLearning/createAGame/simpleGameState#environment). In order to import our meshes, we'll neeed to add a [\_loadAsset](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/environment.ts#L100) function.

### \_loadAsset

```javascript
const result = await SceneLoader.ImportMeshAsync(null, "./models/", "envSetting.glb", this._scene);

let env = result.meshes[0];
let allMeshes = env.getChildMeshes();
```

We want to first import the mesh for the environment, then grab the root and extract all of the meshes from that root.

```javascript
return {
    env: env, //reference to our entire imported glb (meshes and transform nodes)
    allMeshes: allMeshes, // all of the meshes that are in the environment
};
```

Then, we return these objects to complete our environment set up.

### load

Now we need to update the **load** function to call **\_loadAsset**. We use await to tell it that we'll be doing something with the returned value. Once our meshes have been imported, we want to set all of the necessary flags:

```javascript
const assets = await this._loadAsset();
//Loop through all environment meshes that were imported
assets.allMeshes.forEach((m) => {
    m.receiveShadows = true;
    m.checkCollisions = true;
});
```

We loop through all of the meshes and do have to manually set the flag to check for collisions as well as whether they can receive shadows. The only mesh in this game that actually casts a shadow is the player (for performance reasons). At this point this is all we really need to do with our assets.

If we go back to [\_setUpGame](/guidedLearning/createAGame/simpleGameState#environment), this is where we loaded our environment assets.

```javascript
//--LOAD ASSETS--
await this._environment.load(); //environment assets
//...loading character asset
```

Notice how we are using _await_ here. This is because we want to wait for the environment to be fully loaded and set up before we try to import our character mesh.

## Character Mesh

Loading the character assets should also begin inside of \_setUpGame. We want to make sure that we start loading our meshes before we actually go to the game state.

Recall, we loaded our character assets in [\_setUpGame](/guidedLearning/createAGame/simpleGameState#character-controller).

```javascript
//...loaded envrionment assets
await this._loadCharacterAssets(scene);
```

Again, here we are awaiting in order to ensure that the asset is fully imported and set up. This is **SUPER** important because our player constructor actually depends on some of the environment assets being loaded.

Previously in [\_loadCharacterAssets](/guidedLearning/createAGame/simpleGameState#loading-assets), we set up the character mesh system.
The function's purpose is to call loadCharacter(), store our assets, and then return the results to signify that it's complete.

In order to load our assets, we just need to modify the body portion of our character assets. Instead of having primitives for our body, we'll be using the imported mesh.

```javascript
return SceneLoader.ImportMeshAsync(null, "./models/", "player.glb", scene).then((result) =>{
    const root = result.meshes[0];
    //body is our actual player mesh
    const body = root;
    body.parent = outer;
    body.isPickable = false; //so our raycasts dont hit ourself
    body.getChildMeshes().forEach(m => {
        m.isPickable = false;
    })

    return {
        mesh: outer as Mesh,
    }
});
```

Here is where we actually bring in the character mesh, and the result of this import is what gets returned (the box collider parented to the character mesh). The reason why we loop through the meshes here is because if a glTF has multiple materials used, it will treat them as separate meshes.

Now that we've got our character mesh imported, we can place our player's light at the right spot!

```javascript
this.scene.getLightByName("sparklight").parent = this.scene.getTransformNodeByName("Empty");
```

In the Player Constructor, we just need to set its parent to the TransformNode that was placed in the character's blender file.

Lastly, since we've brought in our new environment and character mesh, we need to re-position the player. I've created a special TransformNode for this inside of the player mesh itself. So, where we were setting the character position previously, we just need to change it to use this TransformNode:

```javascript
scene.getMeshByName("outer").position = scene.getTransformNodeByName("startPosition").getAbsolutePosition(); //move the player to the start position
```

**Now**, you'll notice that when we run the game, we get an error! This is because we aren't waiting for the meshes to finish loading before going to the game (if we immediately click next). So, this is where we start modifying **goToCutScene** to actually start awaiting **\_setUpGame()**:

```javascript
await this._setUpGame().then((res) => {
    finishedLoading = true;
    this._goToGame();
});
```

Instead of calling \_goToGame when we click the next button, we can call it once the assets are done loading! This will now automatically take us to the game state.

When you run the game now, you'll see the environment and character meshes in their raw form: all meshes imported are visible, and the character by default plays its animationGroups.

## Resources

**Files Used:**

-   [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/app.ts)
-   [environment.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/environment.ts)
-   [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/characterController.ts)

**Follow Along:**

-   [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/importMeshes/app.ts)
-   [environment.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/importMeshes/environment.ts)
-   [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/importMeshes/characterController.ts)
-   [environment model](https://github.com/BabylonJS/SummerFestival/blob/master/public/models/envSetting.glb)
-   [player model](https://github.com/BabylonJS/SummerFestival/blob/master/public/models/player.glb)



## Summary

The lanterns in my game have a few different components. In this section, I'll be going over the mesh itself, texture swapping, collisions, and lights.

## Lantern Mesh

The lanterns are duplicates of a single mesh. If a mesh is interactable, it's best to clone it as often as possible if you're going to be using multiple instances. I followed the [Demystifying Animation Groups](https://www.youtube.com/watch?v=BSqxoQ-at24) to learn how to clone the meshes.

In [\_loadAsset](https://github.com/BabylonJS/SummerFestival/blob/master/src/environment.ts#L100), after we've imported our environment, we'll want to also import our single lantern mesh.

```javascript
//loads lantern mesh
const res = await SceneLoader.ImportMeshAsync("", "./models/", "lantern.glb", this._scene);
```

Then, we extract the mesh from the root, and remove the root. [The coordinate system guide for 3DMax](/features/featuresDeepDive/Exporters/3DSMax_to_glTF#left-to-right-handed-coordinate-system) explains why we have this root node when we import the glTF. Since we want to clone just the mesh, we'll need to remove the root.

```javascript
//extract the actual lantern mesh from the root of the mesh that's imported, dispose of the root
let lantern = res.meshes[0].getChildren()[0];
lantern.parent = null;
res.meshes[0].dispose();
```

Then we add this to the object we're returning to the load function.

```javascript
return {
    //..envrionment meshes
    lantern: lantern as Mesh,
}
```

### Creating Lanterns

Once we've gotten the result of our import (_assets_), the [load](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/environment.ts#L30) function is in charge of setting up all of the lanterns in the scene.

```javascript
assets.lantern.isVisible = false; //original mesh is not visible
//transform node to hold all lanterns
const lanternHolder = new TransformNode("lanternHolder", this._scene);
```

From our assets, we want to make our lantern invisible. This original mesh's only purpose is to be cloned to create our other meshes. Then we want to create a transform node to hold all of our lanterns. I did this just to have them organized together. It makes navigating through the inspector a lot easier when trying to debug.

Then we loop through however many lanterns we want to create, for the game I made 22 lanterns. For each pass through the for loop, we want to:

1. Create a clone of our mesh, set it to visible, and then add it to our transform node.

```javascript
//Mesh Cloning
let lanternInstance = assets.lantern.clone("lantern" + i); //bring in imported lantern mesh & make clones
lanternInstance.isVisible = true;
lanternInstance.setParent(lanternHolder);
```

2. Create our lantern and add it to our array of lantern objects.

```javascript
//Create the new lantern object
let newLantern = new Lantern(
  this._lightmtl,
  lanternInstance,
  this._scene,
  assets.env
    .getChildTransformNodes(false)
    .find((m) => m.name === "lantern " + i)
    .getAbsolutePosition(),
  animGroupClone,
);
this._lanternObjs.push(newLantern);
```

**\_lanternObjects** should be instantiated as an empty array in the environment constructor.

Once we've gone through and created all of our lanterns, we can dispose of the original lantern mesh

```javascript
assets.lantern.dispose();
```

## Lantern Class

So, what exactly does creating a new lantern do? I've created a Lantern class in **lantern.ts**. This will store the information for each lantern instance.

In order to create a lantern, we need:

1. The material we're going to swap to when lit
2. A mesh
3. The scene it belongs to
4. A position

In the [constructor](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/tutorial/oldLantern.ts#L18) of our lantern, we want to set all of these up.

```javascript
constructor(lightmtl: PBRMetallicRoughnessMaterial, mesh: Mesh, scene: Scene, position: Vector3, animationGroups?: AnimationGroup) {
    this._scene = scene;
    this._lightmtl = lightmtl;

    //create the lantern's sphere of illumination
    const lightSphere = MeshBuilder.CreateSphere("illum", {segments: 4, diameter:20}, this._scene);
    lightSphere.scaling.y = 2;
    lightSphere.setAbsolutePosition(position);
    lightSphere.parent = this.mesh;
    lightSphere.isVisible = false;
    lightSphere.isPickable = false;
    this._lightSphere = lightSphere;

    //load the lantern mesh
    this._loadLantern(mesh, position);
}
```

- **lightSphere** is an invisible mesh that will be used later to calculate what meshes are affected by the lantern's light.
- [\_loadLantern](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/tutorial/oldLantern.ts#L41) takes care of setting the mesh and position of our lantern. We need to set the absolute position instead of local position because this is an imported glTF.

```javascript
this.mesh = mesh;
this.mesh.scaling = new Vector3(0.8, 0.8, 0.8);
this.mesh.setAbsolutePosition(position);
this.mesh.isPickable = false;
```

I didn't want the player to be able to jump on the lantern, so I set isPickable to false (default is true). And since I didnt want the player to collide(physically) with the lantern, I kept checkCollisions to false (which is the default value). This way, the player can easily navigate through lanterns while still having a way to check that we've intersected with them.

### Collisions

The final setup part of our lanterns is calling [checkLanterns](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/environment.ts#L133) in [\_initializeGameAsync](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/app.ts#L929).

The first thing we'll need to do is set up an actionManager inside of the Player Constructor

```javascript
//--COLLISIONS--
this.mesh.actionManager = new ActionManager(this.scene);
```

This function has 2 main purposes:

1. Light the first lantern. It's pre-lit to allow the player to not get stuck if they haven't found the next lantern in time. They can return to this lantern to re-light their sparkler.

```javascript
if (!this._lanternObjs[0].isLit) {
  this._lanternObjs[0].setEmissiveTexture();
}
```

2. Set up the intersection triggers for each lantern with the player. Using `ActionManger.OnIntersectionEnterTrigger`, we're watching for 1 of 2 things when the player intersects with a lantern:
   1. The lantern is unlit and he player sparkler is lit:
   ```javascript
   //if the lantern is not lit, light it up & reset sparkler timer
   if (!lantern.isLit && player.sparkLit) {
     player.lanternsLit += 1; //increment the lantern count
     lantern.setEmissiveTexture(); //"light up" the lantern
     //reset the sparkler
     player.sparkReset = true;
     player.sparkLit = true;
   }
   ```
   2. The lantern is already lit:
   ```javascript
   //if the lantern is lit already, reset the sparkler
   else if (lantern.isLit) {
       player.sparkReset = true;
       player.sparkLit = true;
   }
   ```

### Setting Emissive Texture

The [\_setEmissiveTexture](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/tutorial/oldLantern.ts#L48) function handles everything that's involved in "lighting" the lantern.

1. We need to know that the lantern is now lit.

```javascript
this.isLit = true;
```

2. Swap the texture to make the lantern visually look like it's been lit.

```javascript
this.mesh.material = this._lightmtl;
```

#### Texture Swapping

This is a super simple process that involves making a material that has a texture of what the lantern looks like when "lit".  
![unlit lantern](/img/how_to/create-a-game/unlit.png) ![lit lantern](/img/how_to/create-a-game/lit.png)

I generated this texture in blender, just giving the mesh an emissive coloring and then baking that into a .png.

```javascript
//create emissive material for when lantern is lit
const lightmtl = new PBRMetallicRoughnessMaterial("lantern mesh light", this._scene);
lightmtl.emissiveTexture = new Texture("/textures/litLantern.png", this._scene, true, false);
lightmtl.emissiveColor = new Color3(0.8784313725490196, 0.7568627450980392, 0.6235294117647059);
this._lightmtl = lightmtl;
```

This texture is then used to make a new material that we'll be swapping once \_setEmissiveTexture is called. This material is created in the Environment constructor, then passed into the [lantern constructor](#creating-lanterns).

Here is we create a new folder for textures in the public folder.

3. Dynamically create a point light where the lantern is in order to light up the surroundings.

```javascript
const light = new PointLight("lantern light", this.mesh.getAbsolutePosition(), this._scene);
light.intensity = 30;
light.radius = 2;
light.diffuse = new Color3(0.45, 0.56, 0.8);
this._findNearestMeshes(light);
```

#### Multiple Lights

The most important part of this is the fact that there is a default cap on the number of lights a material can have. This is for performance reasons. If you have a ton of lights, it'll slow everything down. However, it's possible to get good performance if we use small lights and limit the amount of meshes the light affects. This is what [\_findNearestMeshes](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/tutorial/oldLantern.ts#L67) does.

```javascript
this._scene
  .getMeshByName("__root__")
  .getChildMeshes()
  .forEach((m) => {
    if (this._lightSphere.intersectsMesh(m)) {
      light.includedOnlyMeshes.push(m);
    }
  });
//get rid of the sphere
this._lightSphere.dispose();
```

This goes through the entire scene, looks for what the lightSphere intersects with and pushes those meshes to the list of what our light affects. I was able to achieve this by referring to what was done in this

PG: <Playground id="#WJWSNL" title="Lanterns Playground" description="Playground Creation and Positioning of Multiple Lights."/>

**Note: the implementation for the lights here is what I had before making adjustments during the performance phase. If you'd like to see the final version, take a look at the [performance](/guidedLearning/createAGame/performance#lights) section.**

Now, when you run the game and collide with the lanterns, you should see their materials change (except the first one since that one is pre-lit)!

## Resources

**Files Used:**

- [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/app.ts)
- [environment.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/environment.ts)
- [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/characterController.ts)
- [lantern.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/oldLantern.ts)

**Follow Along:**

- [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/lanterns/app.ts)
- [environment.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/lanterns/environment.ts)
- [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/lanterns/characterController.ts)
- [lantern.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/lanterns/lantern.ts)
- [lantern mesh](https://github.com/BabylonJS/SummerFestival/blob/master/public/models/lantern.glb)
- [lit lantern texture](https://github.com/BabylonJS/SummerFestival/blob/master/public/textures/litLantern.png)



## Summary
Although I would have liked to mess around with audio for the game, I don't really have any experience with making music, so instead I just found some that I thought fit the style of the game.

## Loading Sounds
Sounds are really easy to get started with, and I mostly referenced [Playing Sounds and Music](/features/featuresDeepDive/audio/playingSoundsMusic).

The thing about sounds is that they have to be attached to a single scene, so I loaded sounds based off of where they'd need to be used:
- **app.ts**
    1. In goToStart, I loaded in the 2 sounds for the scene (music and selection sfx)
    2. I created a _loadSounds function for the game scene that just loaded the game and ending music. Then made sure to load this along with the other assets in _setUpGame.
- **ui.ts**
For the GUI related sounds, I created a _loadSounds function and called that in the constructor.
- **characterController.ts**
All of the character related SFX was loaded when we called _loadSounds in the Player constructor.

## Playing Sounds
Playing music is really simple, but when it comes to SFX that are short, played during scene switching and paused states, it can get kind of tricky.

I spent a bit of time debugging sound issues and here are some of the tips that I have:
1. Don't use .ogg sound files. Safari does not support .ogg!
2. Sounds played when transitioning between scenes will need time to play. Since sounds are attached to a scene, if you instantly switch scenes, there's a chance that the sound won't play at all. I was able to work around this since I included a fade transition post-process. It gave just enough time for the sfx to play before switching scenes.
3. Be careful when using both looping & non-looping sounds. It's amazing being able to play many sounds at once, but that also comes with the need for strict sound management since we don't have different channels for SFX / music to just stop all in 1 channel but not the other.

## Sound Usage
Aside from just playing background music and simple sfx, I had two pretty involved sections of sound.
1. Warning SFX for the sparkler
    - I gave the sparkler a looping warning sound that started when the energy was at the 2nd to last bar. Since this was tied to the animation, I had to make sure that if the animation didn't actually complete (the player was able to reset the sparkler before it reached empty), that the sound would still stop. I did this by making sure that I stopped the sound every time *startSparklerTimer* was called.
        ```javascript
        if (!this.gamePaused) {
            if (this._sparklerLife.cellId < 10) {
                this._sparklerLife.cellId++;
            }
            if (this._sparklerLife.cellId == 9) {
                this._sparkWarningSfx.play();
            }
            if (this._sparklerLife.cellId == 10) {
                this.stopSpark = true;
                clearInterval(this._handle);
                //sfx
                this._sparkWarningSfx.stop();
            }
        }
        ```
    - Additionally, If the game were to pause while the sound was playing, we'd need to pause this as well, which is why the intervals for the sparkler animations check for *gamePaused*.
        ```javascript
        else { // if the game is paused, also pause the warning SFX
            this._sparkWarningSfx.pause();
        }
        ```
2. The character SFX
    The character had a couple different sounds, but the most difficult one to manage was the looping run sfx. I had to create an observable to know when the character was running which would determine when to play/stop the sound.
    ```javascript
    this.onRun.add((play) => {
        if (play && !this._walkingSfx.isPlaying) {
            this._walkingSfx.play();
        } else if (!play && this._walkingSfx.isPlaying) {
            this._walkingSfx.stop();
            this._walkingSfx.isPlaying = false; // make sure that walkingsfx.stop is called only once
        }
    })
    ```
    There is an extra measure of security in making sure that .stop() would not be called more than once because Safari gave a lot of audio issues when trying to do things with sounds.
    In [_animatePlayer](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L247) we notify the onRun observable by passing in a boolean of whether to play or not.

## Resources
**Files Used:**
- [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/app.ts)
- [ui.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/ui.ts)
- [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/characterController.ts)



## Summary

Particle systems are an awesome way to add more depth to actions & movements in a game. For any particle system you're thinking about creating, test it in a playground first. The playground has a particle editor that makes everything a lot easier! I tested out all of my particle systems in the playground before bringing them into the game and figuring positioning and making minor adjustments. It's also really useful if you're going to end up duplicating the same particle system several times as all you need to do is perfect 1.

## Fireworks

The most important particle system of my game was the fireworks as it was the only one that was essential to the game. This was supposed to give an awesome ending!
I used a playground as reference on how to make the fireworks. You can't actually use the exact code that's here in a local project because it uses some properties of the particle system that are only available in the playground. So, I had to make some adjustments to the code to get it to work.

Here's the original playground
PG: <Playground id="#ZXI9H#4" title="Fireworks Base Playground" description="Playground Basis for Rocket Firework"/>
Here's the modified playground
PG: <Playground id="#IR1S8R#10" title="Fireworks Modified Playground" description="Playground Modified Rocket."/>

![fireworks](/img/how_to/create-a-game/fireworks.gif)

## Setting Up the Particle Systems

Similar to this playground, I made a [Firework class](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/environment.ts#L170). There are two parts to a firework:

1. **The Rocket**
   The rocket is a particle system created in the constructor of the Firework. We start off by creating an emitter for the rocket. This is the mesh that's going to have the particle system attached to it so that the particle system moves along with its position.

    ```javascript
    const sphere = MeshBuilder.CreateSphere("rocket", { segments: 4, diameter: 1 }, scene);
    sphere.isVisible = false;
    //the origin spawn point for all fireworks is determined by a TransformNode called "fireworks", this was placed in blender
    let randPos = Math.random() * 10;
    sphere.position = new Vector3(scene.getTransformNodeByName("fireworks").getAbsolutePosition().x + randPos * -1, scene.getTransformNodeByName("fireworks").getAbsolutePosition().y, scene.getTransformNodeByName("fireworks").getAbsolutePosition().z);
    this._emitter = sphere;
    //set how high the rocket will travel before exploding and how long it'll take before shooting the rocket
    this._height = sphere.position.y + Math.random() * (15 + 4) + 4;
    this._delay = (Math.random() * i + 1) * 60; //frame based
    ```

    We need to determine a few things for our Firework:

    1. Position - The position of the rocket is random only across the x-axis. This ensures that all of the fireworks fire the same distance away, but along a line.

    2. Height - The height is random between 4 and 15 just to give some variety to the fireworks.

    3. Start Time - I wanted the fireworks to stagger so that they all didn't go off at once. This extended the duration of the entire fireworks show as well without having to create a ton. **\_delay** is a number between 1 and the index of the firework. Multiply this by 60 and we have how many frames it will wait before shooting the rocket.

        ```javascript
        //Rocket particle system
        let rocket = new ParticleSystem("rocket", 350, scene);
        rocket.particleTexture = new Texture("./textures/flare.png", scene);
        rocket.emitter = sphere;
        rocket.emitRate = 20;
        rocket.minEmitBox = new Vector3(0, 0, 0);
        rocket.maxEmitBox = new Vector3(0, 0, 0);
        rocket.color1 = new Color4(0.49, 0.57, 0.76);
        rocket.color2 = new Color4(0.29, 0.29, 0.66);
        rocket.colorDead = new Color4(0, 0, 0.2, 0.5);
        rocket.minSize = 1;
        rocket.maxSize = 1;
        rocket.addSizeGradient(0, 1);
        rocket.addSizeGradient(1, 0.01);
        this._rocket = rocket;
        ```

    The particle system itself just uses a simple texture and decreases in size over its lifetime.

2. **The Explosion**
    The explosion has its own function [\_explosions](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/environment.ts#L218) that creates another particle system. It's a bit more involved, but I'll do my best to try and explain what is going on:

    ```javascript
    const explosion = MeshBuilder.CreateSphere("explosion", { segments: 4, diameter: 1 }, this._scene);
    explosion.isVisible = false;
    explosion.position = position;
    let emitter = explosion;
    //grabbing vertex data
    emitter.useVertexColors = true;
    let vertPos = emitter.getVerticesData(VertexBuffer.PositionKind);
    let vertNorms = emitter.getVerticesData(VertexBuffer.NormalKind);
    let vertColors = [];
    ```

    First, we create a mesh that's going to be the shape of our explosion, a sphere. We're going to be using the vertices of this mesh to create particle systems. In order to do that, we need the vertex data of this mesh.

    ```javascript
    for (let i = 0; i < vertPos.length; i += 3) {
      let vertPosition = new Vector3(vertPos[i], vertPos[i + 1], vertPos[i + 2]);
      let vertNormal = new Vector3(vertNorms[i], vertNorms[i + 1], vertNorms[i + 2]);
      let r = Math.random();
      let g = Math.random();
      let b = Math.random();
      let alpha = 1.0;
      let color = new Color4(r, g, b, alpha);
      vertColors.push(r);
      vertColors.push(g);
      vertColors.push(b);
      vertColors.push(alpha);
      //..emitter for the particle system
      //..actual particle system for each exploding piece
    }
    emitter.setVerticesData(VertexBuffer.ColorKind, vertColors);
    ```

    For every third vertex position, we store a new position and normal as vector3s. We then generate a random color for this vertex. After we've set up our new particle system based off of vertex data, we need to actually update the emitter to use the colors we generated.

    ```javascript
    //emitter for the particle system
    let gizmo = MeshBuilder.CreateBox("gizmo", { size: 0.001 }, this._scene);
    gizmo.position = vertPosition;
    gizmo.parent = emitter;
    let direction = vertNormal.normalize().scale(1); // move in the direction of the normal
    ```

    Still in this _for_ loop, we create an emitter mesh, similar to how we did for the rocket except this time, the emitter is positioned at the _vertPosition_ that we created. It's also been given a direction to move based off of the _vertNormal_. This will cause it to move straight out (like an explosion).

    ```javascript
    //actual particle system for each exploding piece
    const particleSys = new ParticleSystem("particles", 500, this._scene);
    particleSys.particleTexture = new Texture("textures/flare.png", this._scene);
    particleSys.emitter = gizmo;
    particleSys.minEmitBox = new Vector3(1, 0, 0);
    particleSys.maxEmitBox = new Vector3(1, 0, 0);
    particleSys.minSize = 0.1;
    particleSys.maxSize = 0.1;
    particleSys.color1 = color;
    particleSys.color2 = color;
    particleSys.colorDead = new Color4(0, 0, 0, 0.0);
    particleSys.minLifeTime = 1;
    particleSys.maxLifeTime = 2;
    particleSys.emitRate = 500;
    particleSys.gravity = new Vector3(0, -9.8, 0);
    particleSys.direction1 = direction;
    particleSys.direction2 = direction;
    particleSys.minEmitPower = 10;
    particleSys.maxEmitPower = 13;
    particleSys.updateSpeed = 0.01;
    particleSys.targetStopDuration = 0.2;
    particleSys.disposeOnStop = true;
    particleSys.start(); //automatically start once created
    ```

The last step is to make the actual particle system.

## Firing the Particle Systems

Now we have a particle system set up for a firework, but we want to have multiple. In addition, we need to figure out when to trigger the fireworks to start. The explosions start automatically once they're created, but what about the rocket?

### Create Instances

Before we can use the particle systems, we need to create instances of the Firework class. In the [Environment constructor](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/environment.ts#L83), I just looped through how many fireworks I wanted and then added them to an array of fireworks.

```javascript
//--FIREWORKS--
for (let i = 0; i < 20; i++) {
  this._fireworkObjs.push(new Firework(this._scene, i));
}
```

Then, add an observable that checks to see if the fireworks have started.

```javascript
this._scene.onBeforeRenderObservable.add(() => {
  this._fireworkObjs.forEach((f) => {
    if (this._startFireworks) {
      f._startFirework();
    }
  });
});
```

### Starting Fireworks

Once we are in the "win state", we trigger the fireworks to start by setting _\_startFireworks_ to true. Now, [\_startFirework](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/environment.ts#L282) should be called for each firework in the environment:

```javascript
if (this._started) {
  //if it's started, rocket flies up to height & then explodes
  if (this._emitter.position.y >= this._height && !this._exploded) {
    //transition to the explosion particle system
    this._exploded = !this._exploded; // don't allow for it to explode again
    this._explosions(this._emitter.position);
    this._emitter.dispose();
    this._rocket.stop();
  } else {
    //move the rocket up
    this._emitter.position.y += 0.2;
  }
} else {
  //use its delay to know when to shoot the firework
  if (this._delay <= 0) {
    this._started = true;
    //start particle system
    this._rocket.start();
  } else {
    this._delay--;
  }
}
```

Once the delay has reached 0, the rocket will shoot. After the rocket reaches the maximum height, it will explode and the emitter will be disposed of.

## Player Sparkler

Creating the player sparkler's particle system made it feel more like a sparkler and brought emphasis to it. Before, you could really only see that there was light by the player but it didn't really stand out as a sparkler.

I made a function [\_createSparkles](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/characterController.ts#L498) that made the particle system. This is called in the Player constructor (characterController.ts).

In order to toggle this on/off when the sparkler goes out, I just passed the object into _startSparklerTimer_ and _stopSparklerTimer_ then called sparkler.start() and sparkler.stop() respectively.

![sparklerTimeout](/img/how_to/create-a-game/sparklergoingout.gif)

You can look at how I made the particle system in this playground
PG: <Playground id="#6EGCCM" title="Flower Sparkler Playground" description="Playground demonstration of flower sparkler."/>

## Lantern Stars

I wanted to give some sort of extra feedback to the player when they lit a lantern so that it felt like an accomplishment. I decided to add this really simple star particle system.

![lightlantern](/img/how_to/create-a-game/lightinglantern.gif)

I created a [\_loadStars](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/lantern.ts#L75) function that made the particle system and called it in the Lantern constructor. Then, when _setEmissiveTexture_ is called, I started the particle system.

You can look at how I made the particle system in this playground
PG: <Playground id="#YLGJ52" title="Starburst Playground" description="Playground demonstration of starburst."/>

It took a bit of messing around with to get the exact effect, so this is where the editor can come in super handy as you can just make quick edits to your particle systems. Just remember that if you want there to be a set duration, assign that last as the particle system won't loop in the editor if you have this set.

## Resources

[Particle Textures](https://mebiusbox.github.io/contents/EffectTextureMaker/)
**Files Used:**

- [environment.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/environment.ts)
- [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/characterController.ts)
- [lantern.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/lantern.ts)



## Summary

The purpose of this performance section is to specifically attack the number of draw calls being made. At the current state of the game, it is a little over 1000. After the changes listed below are made, it drops to about 460.

Initially, there were actually some other changes that were made that DRASTICALLY improved performance. The most impactful must have been the removal of all meshes casting shadows. It did a ton of draw calls because of how many different meshes were actually in the scene. When first inspecting the draw calls, there were about 8000 being made. This wasn't noticeable on PC local server, but it severely impacted mobile and web performance. BEWARE!!

You can check draw calls by using: [spector.js](https://spector.babylonjs.com/).

## Merging Meshes

### Character

Again, the more meshes you have, the more draw calls you'll have. My character mesh, although a "single mesh" in blender, was split into separate meshes when imported into babylon because I used separate materials for different colors. What I did to reduce this was to use a color palette texture material + UV mapping. This is actually the process I had used for the environment.

![character palette](/img/how_to/create-a-game/characteruv.png)

### Environment

The environment consisted of a lot of separate & duplicated meshes since it was the entire game world. I just went back into the blender file and tried to join as many of the meshes as possible into groups that made sense.

## Glow Layer

The glow layer really only needed to be used with the lanterns to give that extra glowy feel, so limiting what meshes are affected by the glow layer will reduce the amount of draw calls being made since it's only rendering the included meshes. I just added this to when I was [setting up my glow layer](/guidedLearning/createAGame/extraFeatures#glow-layer).

```javascript
this._environment._lanternObjs.forEach((lantern) => {
    gl.addIncludedOnlyMesh(lantern.mesh);
});
```

## Fade Transition Post Process

The fade transition is a post-process effect that's needed when we transition between scenes. Therefore, we really don't need it on at any other time. To apply this only when we transition, I just moved the creation of the post process and applications of the effect into the pointer observables. For example, in [goToStart]():

```javascript
Effect.RegisterShader("fade", "precision highp float;" + "varying vec2 vUV;" + "uniform sampler2D textureSampler; " + "uniform float fadeLevel; " + "void main(void){" + "vec4 baseColor = texture2D(textureSampler, vUV) * fadeLevel;" + "baseColor.a = 1.0;" + "gl_FragColor = baseColor;" + "}");

let fadeLevel = 1.0;
this._transition = false;
startBtn.onPointerDownObservable.add(() => {
    //fade screen
    const postProcess = new PostProcess("Fade", "fade", ["fadeLevel"], null, 1.0, camera);
    postProcess.onApply = (effect) => {
        effect.setFloat("fadeLevel", fadeLevel);
    };
    this._transition = true;
    //...other stuff done when startBtn is pressed
});
```

## Lights

Before, when you would collide with the first lantern, and the first lantern after the sparkler went out, there would be a slight lag in the game. This was due to the shaders updating since we were dynamically creating lights.

The solution to this was to pre-create all lights with intensity 0 -- a constant cost. This led to a restructuring for the [Lantern class](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/lantern.ts#L17).

1. In the constructor, we want to remove the lightSphere mesh and instead create a pointLight with intensity 0.

```javascript
const light = new PointLight("lantern light", this.mesh.getAbsolutePosition(), this._scene);
light.intensity = 0;
light.radius = 2;
light.diffuse = new Color3(0.45, 0.56, 0.8);
this._light = light;
```

2. Rather than using the lightSphere to find nearby meshes, I decided to just assign the meshes to lights manually in blender. What I did was name empties with the name of the lantern plus "lights". Every mesh lit by a lantern would be a child of this empty. (Empties in blender translate to TransformNodes in babylon)
   ![lanterns in blender](/img/how_to/create-a-game/lanternlights.png)

3. \_findNearestMeshes would now push the meshes belonging to the lantern's corresponding light.

```javascript
if (this.mesh.name.includes("14") || this.mesh.name.includes("15")) {
    light.includedOnlyMeshes.push(this._scene.getMeshByName("festivalPlatform1"));
} else if (this.mesh.name.includes("16") || this.mesh.name.includes("17")) {
    light.includedOnlyMeshes.push(this._scene.getMeshByName("festivalPlatform2"));
} else if (this.mesh.name.includes("18") || this.mesh.name.includes("19")) {
    light.includedOnlyMeshes.push(this._scene.getMeshByName("festivalPlatform3"));
} else if (this.mesh.name.includes("20") || this.mesh.name.includes("21")) {
    light.includedOnlyMeshes.push(this._scene.getMeshByName("festivalPlatform4"));
}
this._scene
    .getTransformNodeByName(this.mesh.name + "lights")
    .getChildMeshes()
    .forEach((m) => {
        light.includedOnlyMeshes.push(m);
    });
```

This became a little tricky in the festival area because there were 2 lanterns on a platform, so for these I had to manually check for the grouped lanterns on the platform. This is why the first part of the function has checks for lanterns 14-21.

## Further Reading

**Previous:** [Cross Platform - Mobile](/guidedLearning/createAGame/crossPlatform)
**Next:** [Outro](/guidedLearning/createAGame/closing)
**(BONUS):** [Design Process & 3D Modeling](/guidedLearning/createAGame/designArt)

## Resources

**Files Used:**

-   [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/app.ts)
-   [lantern.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/lantern.ts)



## Summary

For this game, I wanted to create a third person camera that would follow the character, but still allow them to move freely and jump within camera view. In the beginning I struggled to find a good camera movement and cycled between different camera types and parenting hierarchies. Eventually, I decided to use the Universal Camera as it allowed for the most freedom in manipulating the camera view while still being able to lock onto the character mesh. I also came across the blog posts on [suzy cube's](http://louardongames.blogspot.com/2016/10/lessons-from-suzy-cube-camera-system.html) camera system. I decided to give it a try since the system allowed for different manipulations of the camera while still following the character.

## Camera Hierarchy

Previously, in [Simple Game State](/guidedLearning/createAGame/simpleGameState#character-controller) we made a \_setupPlayerCamera. Here is where we'll be creating our camera hierarchy.

```javascript
private _setupPlayerCamera(): UniversalCamera {
    //root camera parent that handles positioning of the camera to follow the player
    this._camRoot = new TransformNode("root");
    this._camRoot.position = new Vector3(0, 0, 0); //initialized at (0,0,0)
    //to face the player from behind (180 degrees)
    this._camRoot.rotation = new Vector3(0, Math.PI, 0);

    //rotations along the x-axis (up/down tilting)
    let yTilt = new TransformNode("ytilt");
    //adjustments to camera view to point down at our player
    yTilt.rotation = Player.ORIGINAL_TILT;
    this._yTilt = yTilt;
    yTilt.parent = this._camRoot;

    //our actual camera that's pointing at our root's position
    this.camera = new UniversalCamera("cam", new Vector3(0, 0, -30), this.scene);
    this.camera.lockedTarget = this._camRoot.position;
    this.camera.fov = 0.47350045992678597;
    this.camera.parent = yTilt;

    this.scene.activeCamera = this.camera;
    return this.camera;
}
```

Here's a breakdown of the hierarchy for the camera system:

-   \_camRoot: TransformNode
    -   \_yTilt: TransformNode
        -   camera: UniversalCamera

**\_camRoot** is our root parent that handles the overall positioning of our camera. It's in charge of updating its position to follow the player's position and is located at the center of the player.

**\_yTilt** is the rotation along the x-axis of our camera. If we need to tilt our camera up or down, this will handle those rotations.

**camera** is the actual camera object that controls what we see on the screen

The suzy cube blog posts go into more detail, but this is the extent of what I needed for my game.

## Update Camera

Since we're moving the camera's position to follow the player, we'll need to update the camera.

I've added 2 (half the height) to the mesh's y position since the origin of my mesh is actually at the bottom. You won't need to do this if your mesh's origin is centered already.

```javascript
private _updateCamera(): void {
    let centerPlayer = this.mesh.position.y + 2;
    this._camRoot.position = Vector3.Lerp(this._camRoot.position, new Vector3(this.mesh.position.x, centerPlayer, this.mesh.position.z), 0.4);
}
```

In order to update our camera's position we want to lerp from its current position to the new position. Lerping allows for a smooth transition between positions rather than an instant repositioning of the camera.

## Resources

**Files Used:** [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/characterController.ts)

### External

[Suzy Cube's Camera System](http://louardongames.blogspot.com/2016/10/lessons-from-suzy-cube-camera-system.html)



## Summary

Now that we have our state machine set up, it's time to build a simple scene with a player and ground out of primitives! At this point, we only have an app.ts to deal with setting up scenes, so we're going to need to make some new files and classes:

1. environment.ts
2. characterController.ts

I chose to work with only these files as I wanted to separate my code to focus on single aspects of the game. Feel free to make as many files as you need.

## Environment

[environment.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/environment.ts) will contain all information necessary for the game scene's world.

```javascript
export class Environment {
    private _scene: Scene;

    constructor(scene: Scene) {
        this._scene = scene;
    }

    public async load() {
        var ground = MeshBuilder.CreateBox("ground", { size: 24 }, this._scene);
        ground.scaling = new Vector3(1,.02,1);
    }
}
```

This is a stripped down version of the Environment class. Right now we're just focusing on creating a simple ground mesh. This starting structure is important as it makes importing our final assets much easier.

We'll want to create our environment in [\_setUpGame](/guidedLearning/createAGame/stateMachine#setupgame), so now it should look something like:

```javascript
//--CREATE SCENE--
let scene = new Scene(this._engine);
this._gamescene = scene;

//--CREATE ENVIRONMENT--
const environment = new Environment(scene);
this._environment = environment; //class variable for App
await this._environment.load(); //environment
```

Before we go to the game state, we're creating our environment and loading the assets needed.

\*\*Remember to include import statement for our Environment class. Imports from our files will look like this:

```javascript
import { Environment } from "./environment";
```

## Character Controller

[characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/characterController.ts) is going to contain all of the logic relating to our player and the player's movements.

```javascript
export class Player extends TransformNode {
    public camera;
    public scene: Scene;
    private _input;

    //Player
    public mesh: Mesh; //outer collisionbox of player

    constructor(assets, scene: Scene, shadowGenerator: ShadowGenerator, input?) {
        super("player", scene);
        this.scene = scene;
        this._setupPlayerCamera();

        this.mesh = assets.mesh;
        this.mesh.parent = this;

        shadowGenerator.addShadowCaster(assets.mesh); //the player mesh will cast shadows

        this._input = input; //inputs we will get from inputController.ts
    }
}
```

Now, we're going to replace the camera we had in [state machine](/guidedLearning/createAGame/stateMachine#scene-setup) with the camera made in the **\_setupPlayerCamera** function.

```javascript
private _setupPlayerCamera() {
    var camera4 = new ArcRotateCamera("arc", -Math.PI/2, Math.PI/2, 40, new Vector3(0,3,0), this.scene);
}
```

This is also just a simple stationary camera for now, but the setup is necessary for when we work on the camera system.

Notice how in our constructor, we are passing in assets. These assets should be imported AFTER the environment is loaded in **\_setUpGame** (in case you have any dependencies between your player and meshes in the environment).

```javascript
//..loaded environment
await this._loadCharacterAssets(scene); //character
```

### Loading Assets

In app.ts, we create [\_loadCharacterAssets](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/app.ts#L868). Inside of this function, we have the **loadCharacter** function, this is where we're setting up the character mesh system.

```javascript
//collision mesh
const outer = MeshBuilder.CreateBox("outer", { width: 2, depth: 1, height: 3 }, scene);
outer.isVisible = false;
outer.isPickable = false;
outer.checkCollisions = true;

//move origin of box collider to the bottom of the mesh (to match imported player mesh)
outer.bakeTransformIntoVertices(Matrix.Translation(0, 1.5, 0));
```

Here we're creating the collider for the collision mesh of the character. Then, we're moving that origin point to the bottom of the mesh.

```javascript
//for collisions
outer.ellipsoid = new Vector3(1, 1.5, 1);
outer.ellipsoidOffset = new Vector3(0, 1.5, 0);

outer.rotationQuaternion = new Quaternion(0, 1, 0, 0); // rotate the player mesh 180 since we want to see the back of the player
```

Then, we set up the capsule collider that will be used for collisions.

```javascript
var box = MeshBuilder.CreateBox("Small1", { width: 0.5, depth: 0.5, height: 0.25, faceColors: [new Color4(0, 0, 0, 1), new Color4(0, 0, 0, 1), new Color4(0, 0, 0, 1), new Color4(0, 0, 0, 1), new Color4(0, 0, 0, 1), new Color4(0, 0, 0, 1)] }, scene);
box.position.y = 1.5;
box.position.z = 1;

var body = Mesh.CreateCylinder("body", 3, 2, 2, 0, 0, scene);
var bodymtl = new StandardMaterial("red", scene);
bodymtl.diffuseColor = new Color3(0.8, 0.5, 0.5);
body.material = bodymtl;
body.isPickable = false;
body.bakeTransformIntoVertices(Matrix.Translation(0, 1.5, 0)); // simulates the imported mesh's origin

//parent the meshes
box.parent = body;
body.parent = outer;
```

How I started off my character mesh was by creating a red cylinder for the body and a small black box to signify the front of the mesh.

```javascript
return {
    mesh: outer as Mesh
}
```

Then at the end, we return our character mesh.

At the end of \_loadCharacterAssets,

```javascript
return loadCharacter().then((assets) => {
  this.assets = assets;
});
```

We can now pass these assets to the Player constructor.

You'll want this kind of structuring if you plan on importing a character mesh later on because it will ensure that all of the assets are loaded before moving on.

## Initialize Game Async

The final steps of our player set up is to actually call the constructor in app.ts. **\_initializeGameAsync** will do all of the finishing touches to prepare the game scene once everything is imported & meshes are created. At this point this function should only need to look like this:

```javascript
private async _initializeGameAsync(scene): Promise<void> {
    //temporary light to light the entire scene
    var light0 = new HemisphericLight("HemiLight", new Vector3(0, 1, 0), scene);

    const light = new PointLight("sparklight", new Vector3(0, 0, 0), scene);
    light.diffuse = new Color3(0.08627450980392157, 0.10980392156862745, 0.15294117647058825);
    light.intensity = 35;
    light.radius = 1;

    const shadowGenerator = new ShadowGenerator(1024, light);
    shadowGenerator.darkness = 0.4;

    //Create the player
    this._player = new Player(this.assets, scene, shadowGenerator); //dont have inputs yet so we dont need to pass it in
}
```

We'll need at least one light to see our meshes, and that light for my game was the player's light. The shadow generator uses a single light source, but you can have multiple shadow generators. And then, we finally create our player.

You'll notice that I've also created a temporary Hemispheric light. This is just so that we can see everything in the scene while we set things up (this isn't in the actual game).

We want to call this in **goToGame** where we were previously setting up our light and sphere. Then, we want to set the position of the character.

```javascript
//primitive character and setting
await this._initializeGameAsync(scene);

//--WHEN SCENE FINISHED LOADING--
await scene.whenReadyAsync();
scene.getMeshByName("outer").position = new Vector3(0, 3, 0);
```

Now when you go to the game state, you'll have a player mesh and a ground!
![player mesh and ground](/img/how_to/create-a-game/simplegamestate.png)

## Resources

**Files Used:**

- [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/app.ts)
- [environment.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/environment.ts)
- [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/characterController.ts)

**Follow Along:**

- [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/simpleGameState/app.ts)
- [environment.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/simpleGameState/environment.ts)
- [characterController.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/simpleGameState/characterController.ts)



It's definitely possible to use a single scene for the entire application, but for my game, I wanted to separate the states into individual scenes. So, I created a state machine to handle rendering the different scenes of the entire game.

## App.ts

Recall from the [Create a Scene](/guidedLearning/createAGame/gettingSetUp#creating-a-scene) section of the getting set up tutorial that we made an app.ts file. This is going to be our main file that handles our scene creations and rendering. Starting with the constructor, we're going to break up our scene creation and rendering loop call into separate functions.

## States

How I went about this was by outlining all of the different scenes I would need for the game:

-   START
-   CUTSCENE
-   GAME
-   LOSE

The reason why there's no win and pause state is because those are actually still using the game scene and so it still needs to be able to render the game scene. I've made those two "states" as GUI overlays.
Now that we know what states we want we can go ahead and create an enum for them. All the enum does is assign names to the states and encodes them as numbers. We also want to create a class variable **\_state** to store the current state that we're in. Now, our app.ts should look something like this:

```javascript
//...imports here

//enum for states
enum State { START = 0, GAME = 1, LOSE = 2, CUTSCENE = 3 }

class App {
    // General Entire Application
    private _scene: Scene;
    private _canvas: HTMLCanvasElement;
    private _engine: Engine;

    //Scene - related
    private _state: number = 0;

    constructor() {
        this._canvas = this._createCanvas();

        // initialize babylon scene and engine
        this._engine = new Engine(this._canvas, true);
        this._scene = new Scene(this._engine);

        var camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), this._scene);
        camera.attachControl(this._canvas, true);
        var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), this._scene);
        var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, this._scene);

        // hide/show the Inspector
        window.addEventListener("keydown", (ev) => {
            // Shift+Ctrl+Alt+I
            if (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.keyCode === 73) {
                if (this._scene.debugLayer.isVisible()) {
                    this._scene.debugLayer.hide();
                } else {
                    this._scene.debugLayer.show();
                }
            }
        });

        // run the main render loop
        this._engine.runRenderLoop(() => {
            this._scene.render();
        });
    }
}
new App();

```

I've also gone ahead and created a separate function for creating our canvas called [\_createCanvas](https://github.com/BabylonJS/SummerFestival/blob/a0abccc2efbb7399820efe2e25f53bb5b4a02500/src/app.ts#L103). Additionally, here is where we'll be starting to include the use of class variables (denoted by the _this_ keyword).

## GoTo Functions

### Scene Setup

The goTo functions will be in charge of setting up the scene and consist of things that happen only once.

Let's start with [\_goToStart](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/src/app.ts#L129) for a simple example of how to set up a scene.

```javascript
this._engine.displayLoadingUI();
```

Have the loading UI show while our start scene is loading.

```javascript
this._scene.detachControl();
let scene = new Scene(this._engine);
scene.clearColor = new Color4(0, 0, 0, 1);
let camera = new FreeCamera("camera1", new Vector3(0, 0, 0), scene);
camera.setTarget(Vector3.Zero());
```

Create the scene and camera. Any camera should be fine since it'll be fixed at the center of the scene, so I just went with the FreeCamera.

```javascript
//...do gui related stuff

//--SCENE FINISHED LOADING--
await scene.whenReadyAsync();
this._engine.hideLoadingUI();
//lastly set the current state to the start state and set the scene to the start scene
this._scene.dispose();
this._scene = scene;
this._state = State.START;
```

When the scene is ready, we hide the loading UI, dispose of the current stored scene and then switch scenes and change the state to render the new scene.

**VSCode users: At any point if you see an error for babylon specific components (like Color4 and FreeCamera...) hover over it and you should see a Quick Fix option, this will add it to your imports for you. If you don't see this, you can just manually add it to your imports at the top of the file**

### GUI setup

For now, we'll make a simple fullscreenUI with a button to transition between scenes. GUI elements will need to be imported `from "@babylonjs/gui"`.

```javascript
//... scene setup

//create a fullscreen ui for all of our GUI elements
const guiMenu = AdvancedDynamicTexture.CreateFullscreenUI("UI");
guiMenu.idealHeight = 720; //fit our fullscreen ui to this height

//create a simple button
const startBtn = Button.CreateSimpleButton("start", "PLAY");
startBtn.width = 0.2;
startBtn.height = "40px";
startBtn.color = "white";
startBtn.top = "-14px";
startBtn.thickness = 0;
startBtn.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
guiMenu.addControl(startBtn);

//this handles interactions with the start button attached to the scene
startBtn.onPointerDownObservable.add(() => {
    this._goToCutScene();
    scene.detachControl(); //observables disabled
});
```

Here what we're doing is creating an AdvancedDynamicTexture fullscreenUI. This is what's going to hold all of our gui elements. We then create a simple button and add an observable to detect when we click on it. This will trigger our scene to call goToCutScene. We want to make sure that we detach the controls since it's possible that as we hold down the mouse, goToCutScene gets called multiple times.

## Other States

The lose state will follow a similar format, but for organizational and performance purposes, the cutscene and game states have slightly different structures.

### goToLose

```javascript
private async _goToLose(): Promise<void> {
    this._engine.displayLoadingUI();

    //--SCENE SETUP--
    this._scene.detachControl();
    let scene = new Scene(this._engine);
    scene.clearColor = new Color4(0, 0, 0, 1);
    let camera = new FreeCamera("camera1", new Vector3(0, 0, 0), scene);
    camera.setTarget(Vector3.Zero());

    //--GUI--
    const guiMenu = AdvancedDynamicTexture.CreateFullscreenUI("UI");
    const mainBtn = Button.CreateSimpleButton("mainmenu", "MAIN MENU");
    mainBtn.width = 0.2;
    mainBtn.height = "40px";
    mainBtn.color = "white";
    guiMenu.addControl(mainBtn);
    //this handles interactions with the start button attached to the scene
    mainBtn.onPointerUpObservable.add(() => {
        this._goToStart();
    });

    //--SCENE FINISHED LOADING--
    await scene.whenReadyAsync();
    this._engine.hideLoadingUI(); //when the scene is ready, hide loading
    //lastly set the current state to the lose state and set the scene to the lose scene
    this._scene.dispose();
    this._scene = scene;
    this._state = State.LOSE;
}
```

### goToCutScene

The cutscene is set up normally along with the gui; however, what we do while in this state is what allows our game to be loaded properly. If you take a look at the [\_goToCutScene](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/src/app.ts#L292) function, the scene setup is the same, but [scene finished loading](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/src/app.ts#L557) is slightly different. Notice how we don't have the hideLoadingUI. For now, we need to put this in, but in the final version I actually removed it since I hide it once my animations have finished loading and then trigger it to show once we've completed the dialogue, but the game is still loading.

The most important aspect is what we do after that:

```javascript
var finishedLoading = false;
await this._setUpGame().then((res) => {
    finishedLoading = true;
});
```

Essentially what this is doing is telling the code to wait until **\_setUpGame** has completed its tasks and then set _finishedLoading_ to true. At this point, it may seem unnecessary to have since we haven't brought in our animation nor are we loading any heavy assets, but it's very important once we've gotten to that stage in the development process.

This was an important discovery that ultimately led me to change the structure of importing and loading assets for my game to this. If we don't wait for our assets to finish importing, what the async functions will do is tell our code to continue as we load in the background. This can ultimately break our transitions between scenes as we'd be moving on before things were fully loaded. I discovered this happening when playtesting the web-hosted version of my game:

1. Safari had several issues relating to sounds and scene transitions
2. Assets were taking a long time to load and thus showed undefined meshes errors

For testing purposes, we'll add in a _next_ button that takes use straight to the game state:

```javascript
//--PROGRESS DIALOGUE--
const next = Button.CreateSimpleButton("next", "NEXT");
next.color = "white";
next.thickness = 0;
next.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
next.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
next.width = "64px";
next.height = "64px";
next.top = "-3%";
next.left = "-12%";
cutScene.addControl(next);

next.onPointerUpObservable.add(() => {
    this._goToGame();
});
```

### \_setUpGame

The only thing here we need to worry about here for now is:

```javascript
private async _setUpGame() {
    let scene = new Scene(this._engine);
    this._gamescene = scene;

    //...load assets
}
```

[\_setUpGame](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/src/app.ts#L571) is where we are pre-creating the game scene and where we start to load all of our assets.

### goToGame

If you look at the [\_goToGame](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/src/app.ts#L603) function, we've actually encapsulated the camera setup and gui setup into their own functions. For now you can use the default UI and camera like so:

```javascript
private async _goToGame(){
    //--SETUP SCENE--
    this._scene.detachControl();
    let scene = this._gamescene;
    scene.clearColor = new Color4(0.01568627450980392, 0.01568627450980392, 0.20392156862745098); // a color that fit the overall color scheme better
    let camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), scene);
    camera.setTarget(Vector3.Zero());

    //--GUI--
    const playerUI = AdvancedDynamicTexture.CreateFullscreenUI("UI");
    //dont detect any inputs from this ui while the game is loading
    scene.detachControl();

    //create a simple button
    const loseBtn = Button.CreateSimpleButton("lose", "LOSE");
    loseBtn.width = 0.2
    loseBtn.height = "40px";
    loseBtn.color = "white";
    loseBtn.top = "-14px";
    loseBtn.thickness = 0;
    loseBtn.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
    playerUI.addControl(loseBtn);

    //this handles interactions with the start button attached to the scene
    loseBtn.onPointerDownObservable.add(() => {
        this._goToLose();
        scene.detachControl(); //observables disabled
    });

    //temporary scene objects
    var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene);
    var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);

    //get rid of start scene, switch to gamescene and change states
    this._scene.dispose();
    this._state = State.GAME;
    this._scene = scene;
    this._engine.hideLoadingUI();
    //the game is ready, attach control back
    this._scene.attachControl();
}
```

What we're doing here is setting up the scene normally and adding a simple button to test going to the lose state.

We've also moved our light and sphere objects to this function, using this specific `scene`.

## Switching States

Now that we have our scenes set up, how do we actually render and switch between them?! Within the constructor of App.ts, we want to call [main](https://github.com/BabylonJS/SummerFestival/blob/fc5435921f3aecdcc84d9d3f44d812ad5a4368a7/src/app.ts#L65).

### Main

The main function is where we'll be setting up our state machine. This will replace our current `this._engine.runRenderLoop` that we set up when we first [created the scene](/guidedLearning/createAGame/gettingSetUp#creating-a-scene)

```javascript
private async _main(): Promise<void> {
    await this._goToStart();

    // Register a render loop to repeatedly render the scene
    this._engine.runRenderLoop(() => {
        switch (this._state) {
            case State.START:
                this._scene.render();
                break;
            case State.CUTSCENE:
                this._scene.render();
                break;
            case State.GAME:
                this._scene.render();
                break;
            case State.LOSE:
                this._scene.render();
                break;
            default: break;
        }
    });

    //resize if the screen is resized/rotated
    window.addEventListener('resize', () => {
        this._engine.resize();
    });
}
```

We first call _await \_goToStart_ to ensure that our scene is ready to be rendered.

What this switch statement does is it tells our render loop to act differently based on the state that we're in. It might seem a little unnecessary to always be calling _this.\_scene_ in each state, but this actually holds reference to our current scene. Recall that we dispose of what _this.\_scene_ was, do other detachments to that scene, create a new scene, and then re-assign _this.\_scene_ to the new scene. You could definitely use variables that reference your different scenes, but I thought this would be better since we're disposing of the scenes when not in use, and this ensures that we're rendering the right scene in the right state.

Now, when we run our game and progress through the states, we should see our sphere! The app.ts file should look something like [this](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/stateMachine/sampleApp.ts) now. This is a simple, working state machine! You can modify it for whatever states you'll need.

If you're having trouble getting through the states, open the browser's inspector to see what error is being shown in the console (you might need to comment out the styling of the canvas to be able to open the inspector).

## Resources

**Files Used:**

-   [app.ts](https://github.com/BabylonJS/SummerFestival/blob/master/src/app.ts)

**Follow Along:**

-   [sampleApp.ts](https://github.com/BabylonJS/SummerFestival/blob/master/tutorial/stateMachine/sampleApp.ts)



## How To Create A Game

## Introduction

Hello everyone, this is capucat, I'm an intern on the team! My project for this summer was to develop a game using Babylon.js (4.1) and share my learnings through this tutorial.

The game I created is Hanabi, or Summer's Festival. It's a short 3D platformer based on the summer festivals and papern lantern lighting. The story is about this cat whose family works on crafting all lanterns and fireworks for the village. Every year there's a special summer festival where they have a firework show to start it off. The goal is to navigate through the village, lighting all of the lanterns before delivering the fireworks to the top mountain shrine. You have only 1 hour (4 minutes real-time) and 1 sparkler (20 second lifetime).

![illustration](/img/how_to/create-a-game/startscreen.png)

I was a complete beginner when it came to working with Babylon.js, so this was a great learning experience. I'm really excited to be sharing this process with everyone because the community makes a lot of amazing things. I hope that this series inspires people to start using Babylon.js for their own game development or just start exploring the things you can do with Babylon.js!

![gameplay](/img/how_to/create-a-game/gameplay.gif)

## Summary
Starting with setting up a project locally, this series will walk you through how I went about creating this game, linking all relevant files. This series isn't meant to be a guide to a perfect game, but rather a reflection of a learning process. Game development is meant to be an iterative process, so this series isn't a step by step of how I developed the game; however, I've done my best to break it down into sections that explain concepts and the overall methods of what I found worked best.

It's important to note that this game only scratches the surface of what Babylon.js has to offer, so feel free to modify and experiment with different features!



Related links: 
[WordPress plugin source](https://github.com/syntheticmagus/wp-vaporwear-experience), 
[WordPress site source](https://github.com/syntheticmagus/vaporwear-original-asset-host/tree/main/wp_sites_sources/vaporwear_configurator), 
[demo](https://syntheticmagus.github.io/vaporwear-original-asset-host/vaporwear_wp_with_configurator.mp4)

Note about the demo: For most Dev Stories, we try to make the actual usable
product from the Dev Story available for readers to explore directly. 
However, the website in this Dev Story was built using WordPress, which 
is complicated (and sometimes costly) to host, so unfortunately we weren't 
able to keep it live indefinitely. Instead, the `demo` link 
above will direct you to videos showing the site in action, while the 
`source` link goes to a zipped file containing the raw files of the 
WordPress site.

## Introduction: Barnabas

Barnabas was a sentimental fellow, and he wasn't ashamed of it: he *did* 
feel a little sorry for the old WordPress-based Vaporwear site now that the 
new React.js site's 3D experience was *so* much more sophisticated.
More practically, however, he also knew that the process of switching sites 
would take a little time, so even after the "completion" of the new site
the old one would still be live for at least another month or two. With
that in mind, Barnabas approached Allan with an idea: what if they could 
take the same 3D experience which had been developed for the new React.js 
site and incorporate it into their old WordPress site as well? "Go for it,"
Allan told him, so Barnabas set off to figure out how to integrate the new
custom 3D experience into the old WordPress site.

## Using an NPM Package in WordPress

Diane had built the new Vaporwear 3D experience into an NPM package, 
which made it very easy to add into most modern Web workflows. 
Using an NPM package in WordPress, however, is a bit tricky: WordPress
was not designed to work with modern Web workflows and, being PHP-based,
isn't naturally well-suited to being used with JavaScript development
practices. After poking around for a good way to get NPM-based 
functionality into a WordPress site, Barnabas found a 
[WordPress NPM Bridge Template](https://github.com/syntheticmagus/wp-npm-bridge-template)
which offered an easy way to take NPM-powered JavaScript code and
bundle it into a custom 
[WordPress plugin](https://en.wikipedia.org/wiki/WordPress#Plugins).

1.  First, Barnabas created a new repository from the 
    [WordPress NPM Bridge Template](https://github.com/syntheticmagus/wp-npm-bridge-template)
    using the same approach 
    [described in a Dev Story for starting Babylon's Template Repository Workflow](/fruitFalling#a-more-step-by-step-journey-through-the-process).
    
    ![WordPress NPM Bridge Template](/img/devStories/vaporwearConfigurator/chapter_wordpress/01_use_this_template.png)
1.  Barnabas's plan was to create a plugin that would let him use a
    custom
    [shortcode](https://wordpress.com/support/shortcodes/)
    to insert the new Vaporwear 3D experience. His new repo made from
    the template showed an example of how to do that; to get started, he
    had to modify the 
    [plugin PHP file](https://github.com/syntheticmagus/wp-npm-bridge-template/blob/9f8810bb8f6357d9af1c3d5bc6ae326bd26b7419/wp/wp-npm-bridge-template/wp-npm-bridge-template.php) 
    to remove the defaults.
    
    ![Hello World WordPress Plugin](/img/devStories/vaporwearConfigurator/chapter_wordpress/02_hello_world_php.png)
1.  Since he'd changed the names of basically everything, he needed to 
    modify the package.json file, too.
    
    ![Modified package.json](/img/devStories/vaporwearConfigurator/chapter_wordpress/03_package_json.png)
1.  This simple version wasn't really doing anything meaningful, but he
    did want to check that it was working. Thus, he built what he had
    so far...
    ```
    npm run build
    ```
    ...added it to the old Vaporwear WordPress site...
    
    ![Add plugin](/img/devStories/vaporwearConfigurator/chapter_wordpress/04_add_plugins.png)

    ...and tried using the new `vaporwear-experience` shortcode.
    
    ![Shortcode](/img/devStories/vaporwearConfigurator/chapter_wordpress/05_shortcode.png)

And it worked!

![Hello, world!](/img/devStories/vaporwearConfigurator/chapter_wordpress/06_hello_world.png)

Now for the real thing.

## Creating the VaporwearExperience WordPress Plugin

1.  In the root directory of the plugin repository, Barnabas added Diane's
    3D Vaporwear experience NPM package.
    
    ![npm install](/img/devStories/vaporwearConfigurator/chapter_wordpress/07_npm_install.png)
1.  Next, he replaced his "Hello, world!" code in his PHP file with a
    call to a custom function.
    
    ![Modified plugin PHP file](/img/devStories/vaporwearConfigurator/chapter_wordpress/08_vaporwear_php.png)
1.  Finally, he defined the custom function he'd called from the PHP
    file in index.js. He based his implementation on Edie's integration
    of the same NPM package into the new Vaporwear site, though of course
    he didn't use React.js to make the UI. He also didn't want to use the 
    "matchmoving" states in the experience as the WordPress site's design 
    didn't really have a place for them, so he just skipped right to the 
    configuration state.
    
    ![Custom function definition](/img/devStories/vaporwearConfigurator/chapter_wordpress/09_index_js_16_40.png)
1.  For simplicity, he reused the asset host he'd made from his original
    [Babylon Viewer integration](/vaporwearViewer) to host the rest of
    the assets.
    
    ![Asset host URL](/img/devStories/vaporwearConfigurator/chapter_wordpress/10_index_js_14.png)
1.  Then he built the plugin...
    ```
    npm run build
    ```
1.  ...uninstalled the old version and replaced it with the new...
    
    ![Uninstall old plugin](/img/devStories/vaporwearConfigurator/chapter_wordpress/11_uninstall.png)
    ![Install new plugin](/img/devStories/vaporwearConfigurator/chapter_wordpress/12_adding_the_plugin.png)
1.  ...and *voila*.
    
    ![Configurator in WordPress](/img/devStories/vaporwearConfigurator/chapter_wordpress/13_configurator_in_wordpress.png)

And that, at last, concludes the story of the new and improved Vaporwear
e-commerce experience built from the ground up with 3D in mind. Not only
had Allan and Barnabas been able to create a brand new site with a 3D 
viewer/configurator as a flagship feature, but they'd even been able to 
take that same configurator and use it in another site as well. Barnabas
was happy -- the new site was being adopted, and even the old site had
been significantly improved -- and he sent a short
[screen capture](https://syntheticmagus.github.io/vaporwear-original-asset-host/vaporwear_wp_with_configurator.mp4)
of the new WordPress functionality over to Allan. Allan didn't see it 
immediately, though; he was on the 
[forum](https://forum.babylonjs.com/c/demos/)
again, checking out community demos and wondering if there was even more
that 3D could do for his e-commerce business.

-syntheticmagus


Introduction To Creating Games

How To Create A Game

Introduction

Summary

Further reading

Coming next

Getting Set Up

Dive into some deeper game creation methods and techniques.

Setting Up A State Machine

Dive into some deeper game creation methods and techniques.

Simple Game State

Dive into some deeper game creation methods and techniques.

The Player Camera

Dive into some deeper game creation methods and techniques.

Character Movement Part 1

Dive into some deeper game creation methods and techniques.

Character Movement Part 2

Dive into some deeper game creation methods and techniques.

Importing Meshes

Dive into some deeper game creation methods and techniques.

Lanterns

Dive into some deeper game creation methods and techniques.

Collisions & Triggers

Dive into some deeper game creation methods and techniques.

Game GUI

Dive into some deeper game creation methods and techniques.

Animations

Dive into some deeper game creation methods and techniques.

Particle Systems

Dive into some deeper game creation methods and techniques.

Music & Sound FX

Dive into some deeper game creation methods and techniques.

Extra Features

Dive into some deeper game creation methods and techniques.

Going Cross-Platform

Dive into some deeper game creation methods and techniques.

Performance

Dive into some deeper game creation methods and techniques.

In Closing

Dive into some deeper game creation methods and techniques.

Design Process

Dive into some deeper game creation methods and techniques.