From 0 to game loop

Creating a game from scratch can seem intimidating, but by breaking down the process into manageable steps, you can build a functional game loop with ease. Let's explore how to go from nothing to a basic game loop using TypeScript.

Setting Up Your Project

First, set up your development environment. Follow these steps:

1. Install Node.js and npm: Ensure you have Node.js and npm installed on your machine.

2. Set Up the Project: Create a new directory and initialize a Node.js project:

   mkdir my_game
   cd my_game
   npm init -y
   

3. Install TypeScript and Webpack: Add the necessary dependencies:

   npm install typescript ts-loader webpack webpack-cli webpack-dev-server --save-dev
   

4. Configure TypeScript and Webpack: Create tsconfig.json and webpack.config.js files:

   tsconfig.json:

   {
       "compilerOptions": {
           "target": "es5",
           "module": "commonjs",
           "strict": true,
           "esModuleInterop": true,
           "outDir": "./dist"
       },
       "include": ["src"]
   }
   

   webpack.config.js:

   const path = require('path');
   
   module.exports = {
       entry: './src/index.ts',
       module: {
           rules: [
               {
                   test: /\.ts$/,
                   use: 'ts-loader',
                   exclude: /node_modules/
               }
           ]
       },
       resolve: {
           extensions: ['.ts', '.js']
       },
       output: {
           filename: 'bundle.js',
           path: path.resolve(__dirname, 'dist')
       },
       devServer: {
           contentBase: './dist'
       }
   };
   

5. Create Project Structure: Organize your files:

   my_game/
   ├── src/
   │   └── index.ts
   ├── dist/
   ├── tsconfig.json
   └── webpack.config.js
   

Writing the Initial Code

Now, let's write the initial TypeScript code to create a simple game loop. Open src/index.ts and add the following code:

// Initialize canvas
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = 800;
canvas.height = 600;
const ctx = canvas.getContext('2d');

let x = 100;
let speed = 2;

// Game loop
function gameLoop() {
    // Update game state
    x += speed;
    if (x > canvas.width || x < 0) speed = -speed;

    // Render
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'red';
    ctx.fillRect(x, 100, 50, 50);

    requestAnimationFrame(gameLoop);
}

gameLoop();

Understanding the Game Loop

The game loop consists of three main parts:

1. Update: Modify the game state (e.g., position of objects).
2. Render: Draw the current state to the screen.
3. Loop: Continuously repeat the update and render steps.

Update

In this example, we update the position of a rectangle:

x += speed;
if (x > canvas.width || x < 0) speed = -speed;

Render

We clear the canvas and draw the rectangle at its new position:

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(x, 100, 50, 50);

Loop

The requestAnimationFrame function is used to create a loop that updates and renders the game:

requestAnimationFrame(gameLoop);

Running Your Game

To run your game, add the following scripts to your package.json:

"scripts": {
    "build": "webpack",
    "start": "webpack serve"
}

Then, build and start your game:

npm run build
npm start

Open your browser and navigate to http://localhost:8080 to see your game in action.

Conclusion

By following these steps, you've created a basic game loop using TypeScript. This foundation allows you to expand and add more features to your game, making development more manageable and structured.