
## Thank You!

This game isn't perfect, but I hope it gives you insight into how to develop games with Babylon.js and 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 is [here](https://github.com/BabylonJS/SummerFestival).



## Summary
This is just a little bonus content if you're curious about 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.webp)
![characterRef](/img/how_to/create-a-game/characterref.webp)

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 that 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 newest to me, so I spent a lot of time learning by studying YouTube tutorials and speed-modeling videos. The most challenging part was the character modeling and 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.webp)

With the second one, I had trouble 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 that 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.webp)

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 pixel art UI elements in the game, I used Aseprite with my Wacom Intuos drawing tablet, and for all 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 them support animation, but Aseprite can export your animation as a spritesheet, which was really helpful when bringing it into Babylon. Procreate can't create spritesheets, so I had to bring them into PiskelApp as a GIF and then export them 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 alternatives 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

The purpose of this performance section is to specifically reduce the number of draw calls being made. In 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 DRASTICALLY improved performance. The most impactful was the removal of all meshes casting shadows. This added 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 a local PC 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 use a color palette texture material plus UV mapping. This is actually the process I had used for the environment.

![character palette](/img/how_to/create-a-game/characteruv.webp)

### Environment

The environment consisted of a lot of separate and 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 which meshes are affected by the glow layer will reduce the number of draw calls since it renders only the included meshes. I just added this 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 at any other time. To apply this only when we transition, I just moved the creation of the post process and application 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, or with 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.webp)

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 those 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)


In Closing

Thank You!

Further reading

Design Process

Dive into some deeper game creation methods and techniques.