WAVE GAME


# The Core Element of Every Game

The core element of every game is the player's character and how it feels to control. Having a clunky character can make a game feel more difficult than it needs to be, although this can also be a design choice. We'll start here and make a player that can move around using a basic Entity class and a World class to manage everything. Next, we'll add monsters to create a basic arcade game.

## 1. Creating the Classes

This is Part Two of the series. You can start from part one or grab the *code available on [github](https://github.com/willieLjohnson/vitetsbabylon-guide)**

We'll keep everything in modular code files located in `./src/world/`.
This will have the `Entity`, `World`, and `Player` classes to make clear up some code in Game.ts.

**Here's how the structure of your project will look like:**

```properties
tree
devlon
|...
├── src
│   ├── game.ts
│   ├── main.ts
│   ├── style.css
│   ├── typescript.svg
│   ├── vite-env.d.ts
│   └── world <---------- we'll create these.
│       ├── entity.ts  <--| basic entity class.
│       ├── player.ts  <--| player with w,a,s,d movement.
│       └── world.ts   <--| manages entities and player.
|...
```


> The following will all happen inside the `./src/world/` folder. Create it now if you don't have it already. Check out the [github repo](https://github.com/willieLjohnson/vitetsbabylon-guide/tree/main/two-worldandplayer/devlon) to see the project structure.

### Create the `class Entity` inside `/world/entity.ts`

The Entity class defines common properties and methods that we want to be shared between all our entities.

```tsx
// entity.ts

import { Mesh, MeshBuilder, Scene, Vector3 } from "babylonjs";

export default class Entity {
  mesh: Mesh;
  moveDirection: Vector3 = new Vector3();
  constructor(
    public id: string,
    public position: Vector3 = new Vector3(),
    public diameter: number = 2,
    public moveSpeed: number = 0.2,
    public scene?: Scene
  ) {
    this.mesh = MeshBuilder.CreateSphere(
      this.id,
      { diameter: diameter },
      scene
    );
  }

  move(direction: Vector3) {
    this.position.addInPlace(direction.scale(this.moveSpeed));
  }
  update() {
    this.mesh.moveWithCollisions(this.moveDirection.scale(this.moveSpeed));
  }
}
```

### Create the `class World` inside `/world/world.ts`

The World class manages a list of all the entities in the game including the player. 

```tsx
// world.ts

import { Scene } from "babylonjs";
import Entity from "./entity";
import Player from "./player";

export default class World {
  player: Player;
  constructor(scene: Scene, public entities: Entity[] = []) {
    this.player = new Player(scene);
  }

  addEntity(entity: Entity) {
    this.entities.push(entity);
  }

  removeEntity(entity: Entity) {
    const index = this.entities.indexOf(entity);
    if (index !== -1) {
      this.entities.splice(index, 1);
    }
  }
  update() {
    this.player.update();
    this.entities.forEach((e) => e.update());
  }
}
```

### Create the `class Player` inside `/world/player.ts`

The Player class inherits from the Entity class and handles specific player-related functionality, such as movement controlled by the keyboard. We'll add the keyboard controls later in the tutorial.

Since we defined everything in Entity it starts off pretty simple. We'll add the keyboard movement next chapter.

```tsx
// player.ts

import { Scene, Vector3 } from "babylonjs";
import Entity from "./entity";

export default class Player extends Entity {
  constructor(public scene: Scene) {
    super("player", new Vector3(), 0.2); 
    // Change the color to green.
    var playerMat = new StandardMaterial("player", scene);
    playerMat.diffuseColor = new Color3(0.5, 1, 0.5);
    this.mesh.material = material;
  }
}
```

### Adding everything to the game

The Game class will have a World instanced. This way we can update the state of each entity in the game world in the game loop.

**In `./src/game.ts`**

> 108 Lines of code! When you see this `// ..` it means some of the code is cut for clarity. You don't need to copy it. 
>
> It takes on [~10,000 lines of code](https://www.informationisbeautiful.net/visualizations/million-lines-of-code/) to make a simple iPhone game.

```tsx
// game.ts

import {
  Engine,
  Scene,
  Vector3,
  MeshBuilder,
  FreeCamera,
  HemisphericLight,
} from "babylonjs";

import World from "./world/world";  // <--- import world

export default class Game {
  engine: Engine;
  scene: Scene;
  world: World;

  constructor(readonly canvas: HTMLCanvasElement) {
    this.engine = new Engine(canvas);
    window.addEventListener("resize", () => {
      this.engine.resize();
    });
    this.scene = createScene(this.engine, this.canvas);
    this.world = new World(this.scene); // <--- init world.
  }

  // ... <--- collapsed debug() {...}

  run() {
    this.debug(true);
    this.engine.runRenderLoop(() => {
      this.scene.render();
      this.world.update(); // <--- add update method to loop.
    });
  }
}

// ...
```

Nice! We can now remove all the CreateSphere code inside the `createScene` function.

We can also change the color's of the game world to make the entities stand out more.

```tsx
// ... game.ts

var createScene = function (engine: Engine, canvas: HTMLCanvasElement) {
  var scene = new Scene(engine);
  scene.clearColor = new Color4(0.9, 1, 1, 1); // <--- Change color of sky.

  var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

  camera.setTarget(Vector3.Zero());
  camera.attachControl(canvas, true);

  var light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
  light.intensity = 0.7;

  // + add new ambient light to make colors pop.
  var ambient = new HemisphericLight("ambient", new Vector3(1, 1, 0), scene);
  ambient.groundColor = new Color3(0.9, 1, 1);
  ambient.intensity = 0.2;

  /// - Remove `CreateSphere` code 

  /// + Make the ground object much bigger.
  var ground = MeshBuilder.CreateGround(
    "ground",
    { width: 25, height: 25 },
    scene
  );
  ground.position.y = -1;

  return scene;
};
```

## 2. Player Movement

Player movement uses the keyboard key-down and key-up events to update the `movementDirection` property we defined in the Entity class. It's very basic and doesn't have any physics involved but it'll work for demonstrating `KeyboardEventTypes`


### `KeyboardEventTypes`

**Go back to `./src/world/player.ts` and add the following below the `constructor`**

```tsx
// ... player.ts
  
import { KeyboardEventTypes, Scene, Vector3 } from "babylonjs"; // <--+ Imports
import Entity from "./entity";

export default class Player extends Entity {
  constructor(public scene: Scene) {
    super("player", new Vector3(), 0.2);
    var material = new StandardMaterial("material", scene);
    material.diffuseColor = new Color3(0.5, 1, 0.5);
    this.mesh.material = material;
    // Register event handlers.
    scene.onKeyboardObservable.add((kbInfo) => {
      switch (kbInfo.type) {
        case KeyboardEventTypes.KEYDOWN:
          this.onKeyDown(kbInfo.event.keyCode);
          break;
        case KeyboardEventTypes.KEYUP:
          this.onKeyUp(kbInfo.event.keyCode);
          break;
      }
    });
  }
  
  // When a key is pressed and held.
  onKeyDown(keyCode: any) {
    // Set direction based on the key pressed.
    switch (keyCode) {
      case 87: // W key
        this.moveDirection.z = 1;
        break;
      case 65: // A key
        this.moveDirection.x = -1;
        break;
      case 83: // S key
        this.moveDirection.z = -1;
        break;
      case 68: // D key
        this.moveDirection.x = 1;
        break;
    }
  }

  // When a key is released.
  onKeyUp(keyCode: any) {
    // Reset the direction based on the key released
    switch (keyCode) {
      case 87: // W key
        this.moveDirection.z = 0;
        break;
      case 65: // A key
        this.moveDirection.x = 0;
        break;
      case 83: // S key
        this.moveDirection.z = 0;
        break;
      case 68: // D key
        this.moveDirection.x = 0;
        break;
    }
  }
}

// ...
```

> Can we move yet?


Yes! Run the code and try to move the player with `W, A, S, D`. 
You can move the camera with your keyboard's arrow keys, but we will disable
this is when we implement the camera following logic in the next chapter.

Check the [GitHub](https://github.com/willieLjohnson/vitetsbabylon-guide) repo to see if your progress matches so far.

## 3. Making the Camera Follow the Player 

The camera following logic simply updates the position to match the player's position. BabylonJS has a built-in `FollowCamera` class but we won't be using that that way we have more control over the behavior. We'll use the [UniversalCamera](https://doc.babylonjs.com/typedoc/classes/BABYLON.UniversalCamera) which is best for most games as it works with a keyboard, mouse, touchscreen, and gamepad.

### Refactor camera code and create a `UniversalCamera`

```tsx
// ... game.ts

export default class Game {
  engine: Engine;
  scene: Scene;
  world: World;
  camera: UniversalCamera; // <--+ Game now has camera instance.
  camRoot: TransformNode; //  <--+ Used to track camera position.

  constructor(readonly canvas: HTMLCanvasElement) {
    // ...
    this.camera = new UniversalCamera(
      "cam",
      new Vector3(0, 10, -10), <--- Top down view.
      this.scene
    );
    this.camRoot = new TransformNode("root");
    this.setupCamera(); //  <----------------| We will make these next.
    this.camera = this.registerCamera(); <---|
  }
}

// ... debug() {...}

// Remove `canvas: HTMLCanvasElement`     |
// it's not needed inside this function.  v
var createScene = function (engine: Engine) {
  var scene = new Scene(engine);

  //   ^           ^           ^
  //   |           |           | 
  /// Move all camera code to `constructor()`.

  var light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
  light.intensity = 0.7;

  // ...
```

This way we have access to the camera through the Game class. We'll use the update method next to match its position with the player.

### Follow the Player

Using the `camRoot` we'll move the camera to match the player's position before we render the scene. 
We create 4 methods in the Game class to help us do this: 

```tsx
// ... game.ts/Game

// Registers `beforeRenderUpdate` and `updateCamera` on the scene
// to run before the main game loop.
public registerCamera(): UniversalCamera {}

// Runs code that must happen before the main loop.
private beforeRenderUpdate(): void {}

// Creates the camera.
private setupCamera(): UniversalCamera {}

// Camera follow logic.
private updateCamera(): void {}

// ...
```

### Camera Update Loop.

Add these methods to your `class Game` right below the debug method. 

```tsx 
// ... game.ts/Game

// debug() {...}

public registerCamera(): UniversalCamera {
  this.scene.registerBeforeRender(() => {
    this.beforeRenderUpdate();
    this.updateCamera();
  });
  return this.camera;
}

private beforeRenderUpdate(): void {
  this.world.update();
}

private setupCamera(): UniversalCamera {
  // Root camera parent that follows the player.
  this.camRoot = new TransformNode("root");
  this.camRoot.position = new Vector3(0, 0, 0);
  this.camRoot.rotation = new Vector3(0, 0, 0);

  // Rotations along the x-axis (up/down tilting)
  let yTilt = new TransformNode("ytilt");
  yTilt.parent = this.camRoot;

  // The camera points to the root's position.
  this.camera.lockedTarget = this.camRoot.position;
  this.camera.fov = 1.1; // <--- zoom out a bit, default is 0.8 
  this.camera.parent = yTilt;

  this.scene.activeCamera = this.camera;
  return this.camera;
}

private updateCamera(): void {
  let player = this.world.player;
  // Smooth movement towards the player's position.
  this.camRoot.position = Vector3.Lerp(
    this.camRoot.position,
    player.mesh.position,
    0.4
  );
}

run() {
  this.debug(true);
  this.engine.runRenderLoop(() => {
    this.scene.render();
    // ^^^ Move `this.world.update` to `beforeRenderUpdate()`
  });
}

```

## 4. Run the Game

You should see a more zoomed-out version of what we started with. You can move around with the `W, A, S, D` keys:
![Player moving around](/assets/blog/gameworld/movement.gif)

> Cool! Let's fight some monsters --> [Part Three: Randomly Spawning Monsters](/posts/monsters)


How to Create Games using TypeScript, Vite, and BabylonJS - The Game World, Player Input, and UniversalCamera


# TypeScript, Vite, and BabylonJS

If you need a fast, reliable, and lightweight way to create 3D browser games you've landed on the right post. With [BabylonJS](https://www.babylonjs.com), a powerful 3D engine; [Vite](https://www.vitejs.dev), one of the latest fast and lightweight build tools; and [TypeScript](https://www.typescriptlang.org), arguably a better version of JavaScript, we can create decent-sized WebGL games with realistic graphics, physics, skeletal animation, and post-processing effects just to name a few of the features.

Let's get right into it!


## Creating a Vite Project

They've made it nice and simple to install Vite with a helpful CLI:


> **When running these commands,** replace `devlon` with the name of your game and pick the options `Vanilla` then `TypeScript` on the CLI menus that appear.

```properties
npm create vite@latest devlon
&& cd devlon
&& npm install
```

Your generated project folder should look like this:

```properties
tree
your-awesome-game-name/
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public 
│   └── vite.svg
├── src
│   ├── counter.ts
│   ├── main.ts
│   ├── style.css
│   ├── typescript.svg
│   └── vite-env.d.ts
└── tsconfig.json
```

You can test it out right now by running:

```properties
npm run dev
```
Did you get any errors?
Make sure you have the latest version of npm installed and before trying again. 

Next we can install BabylonJS and configure everything to work together.

## Installing BabylonJS

Run the following command to install babylonjs-core

```properties
npm install --save babylon
```

We only need BabyonJS core for now, but we install the loaders and GUI package in another tutorial in this series.

## Configure Vite and TypeScript 

We need to configure Vite to use BabylonJS's max script so that it's easier to code and debug.

Create a file called `vite.config.js` in your project root and add the following:
> This simply tells vite to use the `babylon.max`. This is the human-readable readable script version. `babylonjs` is the optimized-for-speed version for when we launch to production.

```javascript
import { defineConfig } from 'vite';

export default defineConfig(({ command, mode }) => {
    return {
        resolve: {
            alias: {
                'babylonjs': mode === 'development' ?
                  'babylonjs/babylon.max' : 'babylonjs'
            }
        }
    };
});
```

## TS Config

Lastly, update `tsconfig.json` in root to include the vite config file.

```json
{
	...
  "include": [
    "src",
    "vite.config.js"
  ]
}
```

### Package Config

In `package.json` change the value of `scripts: dev` to `vite --open` to automatically open the page when we run the game:

```json
{
	...
  "scripts": {
    "dev": "vite --open",
    ...
	}
}
```

Awesome! We have our project set up with Vite, BabylonJS, and TypeScript. We can create decent games with only these three libraries. We'll get to that later. For now, let's create a basic scene.

## Creating the Scene

In BabyonJS every game object lives in the Scene. Think of it like the "game world". We'll start by updating the index.html to make it ready for rendering.

### index.html

The main and potentially only HTML file you'll need. It'll start off pretty basic. Most of our code will be in modular TypeScript files in the `src/` folder. We add a `canvas` element that Babylon uses to render the scene, change the title of our page, and add a style element that makes the canvas fill the screen.

```html
<!DOCTYPE html>
<html>
    <head>
		    <meta charset="UTF-8" />
		    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
		    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		    <title>Devlon!</title>
		    <style>
            html,
            body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                text-align: center;
            }

            #game {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <canvas id="game"></canvas>
        <script type="module" src="/src/main.ts"></script>
    </body>

</html>
```

So far so good.

## Scripts

The following additions and changes will happen in the `src/` folder.

### src/main.ts

This is the first script that is run as we saw in `index.html`. Change it to look like this:

> We will create the `Game.ts` file next, so don't worry about any import errors.

```javascript
import { Game } from './Game';

window.addEventListener('DOMContentLoaded', () => {
    let canvas: any = document.getElementById('game') as HTMLCanvasElement;
    let game: Game = new Game(canvas);
    game.run();
});
```

### src/game.ts

Create `src/game.ts`. Replace the file `src/AppOne.js` if the vite-cli created it in the first step.

> Finally, some BabylonJS!

**Import the modules using ES6 modules.**

```javascript
// Imports es6 style
import {
  Engine,
  Scene,
  Vector3,
  MeshBuilder,
  FreeCamera,
  HemisphericLight,
} from "babylonjs";
```

**Create the `Game` class.**

```javascript
// The game class used in `main.ts`
export default class Game {
  engine: Engine;
  scene: Scene;

  constructor(readonly canvas: HTMLCanvasElement) {
    this.engine = new Engine(canvas);
    // allows the engine to resize the scene when the browser window changes.
    window.addEventListener("resize", () => {
      this.engine.resize();
    });
    this.scene = createScene(this.engine, this.canvas);
  }
}
```

**Add the follow methods to the bottom of `class Game`.**

```javascript
// Turns on the Game Engine "level editor" toolbars. Awesome feature! Now you have a Game Engine on par with the likes of Unity, Godot, and Unreal!
  debug(debugOn: boolean = true) {
    if (debugOn) {
      this.scene.debugLayer.show({ overlay: true });
    } else {
      this.scene.debugLayer.hide();
    }
  }

  run() {
    this.debug(true);
    this.engine.runRenderLoop(() => {
      this.scene.render();
    });
  }
}
```

**Add the `createScene` function to the bottom of the file**

```javascript
es6 imports <------| collapsed for clarity, don't change
class Game{...} <--| anything from prev code.

var createScene = function (engine: Engine, canvas: HTMLCanvasElement) {
  // The scene that holds our objects and camrea.
  var scene = new Scene(engine);

	// The camera we will control to look around.
  var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

  // Point the camera to origin of the scene.
  camera.setTarget(Vector3.Zero());

  // Attach that camera to the canvas.
  camera.attachControl(canvas, true);
  ...
```

**Create the light, sphere, and ground plane.**
```tsx
  ... 
  // A light that poitns towards 0,1,0 - straight up.
  var light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);

  // Default intensity is 1. This is dimmer.
  light.intensity = 0.7;

  // A sphere!
  var sphere = MeshBuilder.CreateSphere(
    "sphere",
    { diameter: 2, segments: 32 },
    scene
  );
  // Move the sphere upward 1.
  sphere.position.y = 1;

  // A ground!
  var ground = MeshBuilder.CreateGround(
    "ground",
    { width: 6, height: 6 },
    scene
  );
  ground.position.y = -1;

  return scene;
};

/// End of main.ts

```

Your project should now like this:

```properties
index.html
├── node_modules
├── package-lock.json
├── package.json <--- changed
├── public
│   └── vite.svg
├── src
│   ├── game.ts <--- new
│   ├── main.ts <--- changed
│   ├── style.css
│   ├── typescript.svg
│   └── vite-env.d.ts
└── tsconfig.json <--- changed
|__ vite.config.json <--- new
```

## Run the Game 

> Let's see what we've got. 

```properties
npm run dev
```

This should open your browser to <https://localhost:5173>. You can open it manually if it did not. 

## Done!

You should see this:

![basicscene.png: A picture of a ball and a sphere](https://www.willieliwa.com/assets/blog/setup/scene.png)
> A ball and a plane -.- ....

But a great start! You'll have to go to the next chapter for the flashy game features :D


How to Create Games using TypeScript, Vite, and BabylonJS Part One: A Basic Scene with Objects, a Light, and a Camera


# If You Had to Rely on One Thing

Life has a way of throwing unexpected curveballs and presenting us with unexpected challenges and opportunities. It teaches us how to live through the many tasks and obstacles we each need to deal with to progress. If you had to rely on one thing in life what would it be? Life, Yourself, God, Goals, Philosophy, or something else? Luckily we can choose more than one, but for now, let's imagine we can only have one

Most of our ancestors did not have the luxury to consider this question, as they focused more on surviving their harsh environments. Perhaps they relied on their tools, weapons, tribe/community, or tradition, passed down to them from their leaders. It can be a difficult question to answer, yet we all have to answer it for ourselves at some point. When we seek guidance, direction, and meaning in our lives it becomes a crucial aspect of our decision-making.

There are unlimited options to choose from, each with its pros and cons. Let's compare some:

## Life Itself

Relying on Life as a guiding force can be a challenging and unpredictable path. It's full of unexpected curveballs and obstacles, yet the opportunities are endless. One who is in sync with life tends to go with the flow, not allowing anything to derail them of course. They are like water, able to adapt to any situation. Like an improv actor able to riff off the actors and carry the plot along seamlessly without much context, so is the person who allows Life to guide them.

While it can be tempting to simply go with the flow and let life take us where it will,  we still need a certain degree of control over the direction we take and the choices we make. At the extremes, you might imagine someone living in harsh conditions. They tend to be limited by their environment and cannot do much to stand out or make any choices unrelated to survival. Rarely are there people who succeed from nothing, except for the unique few who keep pushing through each challenge and obstacle without giving in to difficulties they face. Most tend to just go with the flow or give up. Nothing wrong with this, it's kinda forced upon anything living under a harsh reality, but we are more than our circumstances and we have the power to change the world around us. We have the option to assert ourselves and choose our path even if everything is preventing us from doing so.

So what if we rely on ourselves instead, seeing that we are unique and powerfully human?

## Yourself

If you choose to rely on yourself, it means having the confidence to believe in your abilities and the courage to take risks while pursuing your goals. Also known for being self-reliant, you will be known as someone reliable who gets the job done since you don't rely on much else to solve your problems. You keep yourself accountable, responsible,  and focused. You are known to be confident, success always seems to come your way. Best described as a sovereign individual.

It is up to you to put in the work and make things happen. It is also up to you to take care of yourself, your business, your family, and all your responsibilities. You can blame no one else for the current circumstances. It is in your power to take action and pick the direction you see fit.

However, this does not mean you have to go through life alone. Seeking support and guidance from others can be invaluable, and turning to a higher power or philosophical framework can provide an overall sense of purpose and direction to your life. Just like with going with the flow of Life, it can be detrimental to rely solely on yourself. It is important to find a balance that works best for you. Some may view it as selfish to be exclusively about yourself without any regard for anyone or anything else. Although you will be strong and confident as an individual, it can be difficult to travel far and high alone. 

As fallible living beings, we are prone to making mistakes; at some point, we may look to something greater than ourselves.

## God or a higher power

Those who believe in a higher power or call for direction in life rely on it to provide hope, purpose, peace, and community. God and Religion tend to be all-encompassing. Finding meaning and something to rely on won't be difficult here. The most common of our regions have churches, leaders, books, communities, and many pillars of support and guidance. Although some detest religions, I challenge them to argue against the fact that they are full packages that tick all the boxes and offer solutions to most problems.

Continuing with the theme of balance, remember that relying on God, a higher power, religion does not mean giving away your responsibility or agency. It is still up to you to be God-fearing, dutiful, and holy within your religion. Even in Christianity, where those who believe in Christ are saved automatically, they still have to be good Christians which requires tough choices and sacrifices. Belief, action, responsibility, proactivity, and many other values of religions are self-driven.

Perhaps we decided to kill one bird with one stone by focusing on One True Goal to follow.

## One True Goal

Having something you are deeply passionate about and feel driven to pursue, then relying on it for guidance and purpose, can be a powerful and fulfilling way to live. It combines the benefits of self-agency (if you pick this goal yourself) and the higher purpose and meaning you may get from relying on God or a higher power.

A clear and compelling goal can provide focus, motivation, and a sense of purpose. You aren't easily distracted by the inevitable curveballs that most people get derailed by as you are focused on achieving one thing only. Everything leads to this One True Goal. You get to choose the scope and size of this goal. You get to choose your ultimate purpose. Life becomes like a game. Games tend to be framed around one goal or aim and scattered with some obstacles and quests along the way. In this manner, your life will become about this goal, and everything else will add or remove from it.

Like a compass pointing oriented around Earth's poles, your One True Goal will be the pole you orient your life around. However, it's important to rely on yourself and your abilities to take action and to make progress towards achieving the goal itself. Additionally, sometimes things don't go as planned, the goal wasn't worth it in the first place, or maybe the goal is unattainable. In these situations, you can supplement or replace your One True Goal.

A good supplement or replacement for a Goal is a System or Framework.

## Philosophy

Last but not least is philosophy, another guiding force that can provide a solid sense of direction, purpose, and meaning. Like religion, it can be the full package you need to live a successful and fulfilled life.

Philosophies offer a tank of a framework for understanding the world and our place in it while giving you the freedom to think and make your own decisions. It can show how to live by certain values or principles and can go as far as to tell you how to eat, sleep, drink, walk, talk, dance, see, taste, hear, live, and die. Philosophy can be as complex, deep, and encompassing as you want it to be. You can even create your own if you are wise enough. Or combine them.

All this said, there is more to life than a framework, dogma, or individual. Life itself is far too massive, complex, and unpredictable to rely on One thing to get you through. I believe the most successful people have multiple sources of support and motivation, making them unstoppable forces.

## All together, Other, or None at all.

As you already know, there are many things in life to rely on. It depends on your unique experience, values, beliefs, and goals, so no one is wrong about their choice unless it is wrong for them. Some choose to rely on nothing and may do just fine. "Why bother when life is so unpredictable or meaningless?" they might ask. Albert Camus may say life is too absurd to rely on anything.

Some other possible options might include career, creativity, personal growth, family, community, and a combination of them. 

Conclusively, the most important thing is to find what works best for YOU and to rely on what aligns with YOUR values and goals. I encourage you to find out what that is and to be flexible in exploring the alternatives. You are powerful and have so much agency and freedom that it is impossible to imagine what you can accomplish. You are just as unpredictable and awe-inspiring as life itself. Some people may rely on you for their meaning, purpose, and guidance (shoutout to all the Parents, Leaders, Mentors, Teachers, Doctors, Soldiers, and reliable folk). 

This article is here to celebrate this freedom of choice and self-agency.


If You Had to Choose One Thing to Rely on When Things Get Tough, What Would it Be?

Blender Lava and Water 100,000 Fluid Particles Simulation

Mutation


# What Determines the Tools

As a game developer, one of the most important decisions you'll make before even starting your game is choosing the right programming language and game engine to use. They determine the tools and features you have at your disposal, as well as the overall performance and capabilities of your game. However there are so many options out there and they all look pretty capable, especially now that everything has caught up to speed in 2023. So which one should you pick? In this article, we'll check out some of these options and see what best fits the development needs of your project.

## Which one to pick?

Here are the three options we will explore ranging from super basic to a fully featured Super Engine.

The most basic is just to create the game in a specific programming language by writing all the code. You can use libraries and frameworks but the general idea is that you're starting from scratch. Some popular languages for this are C++, C#, and Python. Using a programming language allows you to have a high level of control and customization over your game, as you are writing the code from scratch.

Second up is creating a game engine for creating the game. By building a software platform that provides the necessary tools and features for the game you can make it easy to create it exactly how you imagine it. This can be a complex and time-consuming process, as it involves designing and implementing the core systems that are necessary for creating any game, such as a rendering engine, a physics engine, and an input system. Creating a game engine requires a deep understanding of computer science concepts and programming languages.

Where using a programming language is the simplest, picking a game engine is the easiest. Simply select one of the battle-tested and pre-made game engines that are out there. Some of the popular ones are Godot, Unity, Unreal Engine, and GameMaker. When picking a game engine, consider the type of game you want to create, the platforms you want to target, and the level of complexity you're comfortable with. Using a game engine can be a faster and easier way to develop a game, as it provides you with all the tools and features plus extra. However, it is the least customizable option and may not offer as much control as creating your own game engine or using a programming language.

Let's begin by diving into the most basic way of creating a game: with just a programming language.

## Choosing a Programming Language.

There are 8945 (<https://hopl.info/>) programming languages to choose from, each with its own strengths and weaknesses. We'll be talking about C++, C#, Go, Rust, TypeScript, Lua, and Python; solid choices in the game development industry. Here are some things to consider when choosing the right programming language for your game:

### Consider your goals.

What kind of game are you looking to make? Different programming languages are better suited to different types of games. For example, if you want to create fast-paced, action-packed games, a language like C++ might be a good choice. C++ is known for its performance and low-level access to hardware, which can be useful for creating demanding games. On the other hand, if you want to create more casual, puzzle-based games, a language like Python might be a better fit. Python is known for its simplicity and ease of use, making it a good choice for beginners or for prototyping ideas quickly.

### Look for versatility.

It's important to choose a programming language that is versatile enough to handle a wide range of tasks. This will allow you to be more productive and efficient as you work on your game. For example, C# is a popular choice for game development due to its versatility. It can be used to create a wide range of games, from 2D mobile games to complex 3D PC games. Additionally, C# has a large and active community, which means you'll have access to a wealth of resources and support as you work on your game.
    
### Focus on speed. 

Game development often requires fast processing speeds, so it's important to choose a programming language that can keep up. C++ is generally considered one of the fastest languages, but there are other options like Rust and Go that can also be good choices. Rust is a relatively new programming language that has gained popularity in the game development community due to its speed and safety features. Go is another fast language that is known for its simplicity and concurrency support, which can be useful for creating multiplayer games.

## Making a game engine.

In a competitive market like the game industry, it can be mission-critical to stand out from the rest by offering something unique or better. The best way to do this is by creating your own game engine as it plays a major role in determining the look and feel of your game. You'll have full control over every aspect of your game, limited only by your programming language, device, and knowledge.

You'll need to have a strong understanding of computer science and programming. It's a complex and time-consuming process, so it's important to be prepared to face challenges. For context, it takes about 1000 lines of code to create a triangle with Vulkan, meanwhile, you can create a pong clone using TypeScript, HTML, and 200 lines of spaghetti code easily. That being said, creating your own game engine can be a rewarding experience and can give you a greater understanding of how games are made.

Here are some of the general benefits of creating your own game engine:

### Customization.

By creating your own game engine, you have complete control over the tools and features that are included. This can allow you to create a game engine tailored to your needs and goals.
    
### Learning opportunity.

Creating a game engine can be a challenging and educational experience that allows you to deepen your understanding of game development and computer science concepts.
    
### Competitive advantage.
    
However, there are also potential drawbacks to creating a game engine. It can be a complex and time-consuming process that requires a deep understanding of computer science and programming. Additionally, creating a game engine may not be necessary for all game development projects, and using a pre-made game engine may be a faster and more efficient choice.

## Choosing a game engine.

If you decide that creating your own game engine isn't the right path, there are many pre-made game engines available for free. Some popular options include Godot, Unity, Unreal Engine, and GameMaker. The important thing here is to consider the type of game you want to create, the platforms you want to target, and the level of complexity you're comfortable with. Unity, for example, is a popular choice for creating 2D and 3D games for a wide range of platforms, including mobile, desktop, and consoles. It offers a user-friendly interface and a wealth of resources and support for developers. Alternatively, Unreal Engine is a more powerful engine geared towards creating high-quality, visually stunning games. It is primarily used for creating 3D games, but you can also make 2D games. GameMaker is the simplest of the bunch of engines that focus on 2D games. It's particularly popular with beginners.

Here's a short list of potential benefits gained by using a game engine:

-   Ease of use: Game engines often have a user-friendly interface and a set of pre-built tools and features that make it easier for developers to create games. This can be particularly helpful for beginners or anyone looking to prototype ideas quickly.
    
-   Speed: Game engines can often provide a faster development process, as they provide a ready-made set of tools and features that can save time and effort compared to building everything from scratch using a programming language.
    
-   Cross-platform support: Many game engines support multiple platforms, allowing developers to easily create games once and have them play on different devices.
    
-   Community and resources: Game engines often have a large and active community of developers, which can provide valuable support, resources, and guidance as you work on your game.

That being said, there are also potential drawbacks to using a game engine. Some game engines may be less customizable and with less control over which programming language you can use. If you are creating highly specialized or demanding games that require low-level access to hardware, using a programming language or creating a game engine may be a better choice.

## Creating the Game

Once you've chosen a programming language or game engine, the next step is to create the game itself. It's time for all the research to pay off. Here are some tips to help get you started.

The post is getting too long to get into detail about this here. If you want more tips, check out ['Creating a Game using Vite, BabylonJS, and TypeScript Part One:  A Basic Scene with Objects, a Light, and a Camera'](https://www.willieliwa.com/posts/projectsetup) for how to get started.

## Being Versatile, Fast, and Ready to Learn

No matter which programming language or game engine you choose, it's important to be versatile, fast, and ready to learn. Game development is a constantly evolving field, and it's important to stay up-to-date with new technologies and techniques. By being versatile and open to learning new things, you'll be able to adapt to new challenges and opportunities as they arise. Additionally, it's important to choose a language or engine that allows you to be fast and efficient in your development process. By focusing on speed, you'll be able to get your game to market faster and keep up with the demands of the industry.

Ultimately, the right programming language or the game engine will depend on your specific needs and goals. By considering these factors and doing your research, you'll be able to select tools that allow you to be versatile, fast, and productive while creating great games. Don't be afraid to try different combinations to see which works best for you.

## Final Thoughts

It's also worth noting: while choosing the right programming language and game engine for your game are important, remember that they are just tools. Your skills and creativity as a developer are what carry the success of your game. So don't get too caught up in the technicalities of choosing the "perfect" language or engine. Instead, focus on honing your skills, experimenting with different approaches, and most importantly, having fun. With dedication, determination, and a love for game development, you'll be well on your way to creating AAA titles.


Choosing the Right Programming Language or Game Engine for Your Game


# The Best Commit Messages

The best commit messages are like retrospective task list items. When we return to these commit messages, we should be able to recreate the project just by following them like steps on a roadmap. We can also use them as material for something else such as a tutorial, a project timeline, or a project review.

Here's a list of examples

```properties
Add socials to page-footer.
Add payment system to merch-page.
[Bug] header text dissappears on hover.
Fix disappearing text bug.
Move player code from maint.ts to player.ts.
Edit about-page copy to explain our mission.
```


Some people describe them as instructions for a computer; instead, they are more akin to a guide for a human.

The best commit messages are also concise but clear and easy to understand.

A bad set of commits would then be:

```properties
# What? Why? How? Where?
- Add links. 

# This step is too big and vague.
- Add merch. 

# What part of it?
- Update the About page. 
```

> All the commits fit on the screen without having to scroll. On GitHub, it is recommend to use  75 characters for the title and 72 for the description.

![50chars.png: Github protip](https://www.willieliwa.com/assets/blog/commits/50chars.png)

## Planning Ahead

Ideally, all the commit messages are planned in advance with a solid list of project tasks, deadlines, milestones, etc.

## Resources 

- 1. [Writing imperative sentences](https://examples.yourdictionary.com/imperative-sentence-examples.html)
- 2. [Git Guides](https://github.com/git-guides/git-commit)
- 3. [GitHub Skills](https://skills.github.com/)


How to Write the Best Commit Messages


# Ideas Are Alive.

Ideas are everywhere and they shape our reality. They are real, living, breathing, things that are solid tangible; they have a whole life cycle just like us. Some of them are straightforward, ordinary, practical and a little boring, some are eureka moments, some are roller coaster rides. All of them follow the same process: conception, birth, life, and death. This is an exploration of each stage so that we can focus on what matters most.

## Design, Prototype, Launch

The design, prototype, launch process is a crucial step in bringing any new product or service to market. It involves creating a visual and functional representation of the idea, testing it to ensure it meets the desired specifications, and finally launching it for the public to use.

### Design

The design phase involves turning the initial idea into a detailed plan and creating visual mockups or prototypes to bring the concept to life. This is the time to consider factors such as the target audience, the product's features and functionality, and any potential challenges or limitations.

### Prototype 

Once the design is complete, it's time to create a prototype. This allows the team to test the product and make any necessary adjustments before it is finalized. Prototyping can be done through a variety of methods, such as 3D printing, computer-aided design, or even just creating a physical model by hand.

### Launch

Finally, it's time for the launch. This can involve anything from rolling out a new website or app to launching a physical product in a store. It's important to have a clear plan in place for how the product will be marketed and promoted to the public, as well as any support or customer service needs that may arise.

## High Quality Products 

Overall, the design, prototype, launch process is a vital step in bringing any new product or service to market and ensuring its success. By following this process, businesses can create high-quality products that meet the needs of their customers and stand the test of time.


Design Prototype Launch


# Hello World! 👋🏾

## hallo

## Përshëndetje

## ሀሎ


## مرحبا


## Բարեւ


## Salam


## kaixo


## добры дзень


## হ্যালো


## zdravo


## Здравейте


## Hola


## kumusta


## 你好


## 你好


## Bonghjornu


## zdravo


## Ahoj


## Hej


## Hallo


## saluton


## Tere


## Hei


## Bonjour


## Hoi


## ola


## გამარჯობა


## Hallo


## Χαίρετε


## નમસ્તે


## bonjou


## sannu


## aloha


## שלום


## नमस्ते


## nyob zoo


## Helló


## Halló


## Nnọọ


## Halo


## Dia dhuit


## Ciao


## こんにちは


## halo


## ಹಲೋ


## Сәлеметсіз бе


## សួស្តី


## 여보세요


## Slav


## салам


## ສະບາຍດີ


## Salve


## Sveiki


## Sveiki


## Hallo


## Здраво


## Salama


## hello


## ഹലോ


## Bongu


## tena koutou


## नमस्कार


## Сайн уу


## ဟယ်လို


## नमस्कार


## Hallo


## Moni


## سلام


## سلام


## dzień dobry


## Olá


## ਸਤ ਸ੍ਰੀ ਅਕਾਲ


## Salut


## Здравствуйте


## talofa


## Halò


## Здраво


## Lumela


## mhoro


## سلام


## හෙලෝ


## Ahoj


## zdravo


## hello


## Hola


## Halo


## hello


## Hallå


## Kamusta

## Салом

## வணக்கம்

## హలో

## สวัสดี

## Merhaba

## Здрастуйте

## ہیلو

## Salom

## xin chào

## Helo

## Mholweni

## העלא

## Pẹlẹ o

## Sawubona

## Hello


<~
\^/

Design Prototype Launch

Ideas Are Alive.

Design, Prototype, Launch

Design

Prototype

Launch

High Quality Products

V

More Posts

How to Create Games using TypeScript, Vite, and BabylonJS Part One: A Basic Scene with Objects, a Light, and a Camera

TypeScript, Vite, and BabylonJS

If You Had to Choose One Thing to Rely on When Things Get Tough, What Would it Be?

If You Had to Rely on One Thing

<~ \^/

Design Prototype Launch

Ideas Are Alive.

Design, Prototype, Launch

Design

Prototype

Launch

High Quality Products

V

More Posts

How to Create Games using TypeScript, Vite, and BabylonJS Part One: A Basic Scene with Objects, a Light, and a Camera

TypeScript, Vite, and BabylonJS

If You Had to Choose One Thing to Rely on When Things Get Tough, What Would it Be?

If You Had to Rely on One Thing

<~
\^/