GTCS Game Engine
Tutorial 0: Setting Up the Environment

Tutorial 0 --> Tutorial 1
Tutorial Homepage

Introduction

The GTCS Game Engine consists of 73 files in a very specific file hierarchy. The details of how each of those files works is beyond the scope of these tutorials. In this tutorial, you will learn how to setup an IDE for programming and setup the link between your the browser and your game. Before continuing make sure you have the game engine downloaded.

Source code for tutorials can be downloaded from here.

Development Environment • Entry Point

Development Environment

To develop your game, you will want to use an integrated development environment (IDE) and a web browser that is capable of hosting the running game engine. We have found that the most convenient combination is Visual Studio Code (VSC) with the Google Chrome web browser. These products are free, work across a number of OS platforms and integrate well for web development. Here is a rundown of this combination of tools...

• Visual Studio Code: A powerful and elegant IDE that can be used for development related to the engine and your game. You can download and install this IDE from https://code.visualstudio.com
• Google Chrome: You will launch your game projects to the Google Chrome web browser which serves as the runtime environment. You can download and install this browser from https://www.google.com/chrome/browser
• VSC Extentions: VSC has robust support for adding free extensions to its own functionality, to facilate development using the engine. Extensions can be installed from an online marketplace or directly within VSC. Here are the extensions you should add to VSC:
  • ESLint: detects potential JavaScriptsource code errors. Found here
  • LiveServer: Supports launching HMTL files from VSC directly to Crome runtime. Found here

Once you have all of these tools installed, you can use Visual Studio Code to write your game. When you select to run your game from VSC, Google Chrome will launch showing you the results. Error information will be accessible from the Google Crome console.

Entry Point

To run your game, you will need an HTML shell running on a web server. This HTML file must reference the javaScript file that your game will run from as well as the external matrix library. By convention, this file is named index.html and is stored at the same level as the assets folder and src folder of the engine.

The format of your HTML file can be broken down into two sections...

• Head tag: This will contain the references to your game file and the external gl-matrix library. This section can also include the webpage title and icon for your game.
• Body tag: This is the section of the web page where all WebGL activity will be encapsulated. It identifies the canvas' pixel width and height where the game will be rendered.

Head tag

The entry point for your code will be an object you design that is a subclass of the engine's "Scene" object. For now, we include what will be the path to that Scene object in this HTML file.

            <!-- external library --> 
            <script type="text/javascript" src="./src/lib/gl-matrix.js"></script>
    
            <!-- our game -->
            <script type="module" src="./src/your_game_folder/your_game_scene.js"></script>
        

Note: The highlighted portions are specific to your game implementation.

Body tag

Within the body tag we create a canvas. The canvas is where the rendering of your game will occur. You need to define the pixel width and height. The engine will look for the DOM object called "GLCanvas" and handle the rest.

        
        <canvas id="GLCanvas" width="600" height="600">
            
            Your browser does not support the HTML5 canvas.
        </canvas>
          

Conclusion

Now that we have setup our files and created our web page, we can go on to implementing code for the game. In Tutorial 1, we will look at the components that make up our scene and draw a simple object to our canvas.

Tutorial 0 --> Tutorial 1

Tutorial Homepage