GTCS Game Engine:
Tutorial 0: Setting Up the Environment
Tutorial 0 --> Tutorial 1
Main tutorial guide page
Introduction
The GTCS Game Engine consists of numerous files in a very specific file hierarchy. The details of how the files work is beyond the scope of these tutorials. In this tutorial, you will learn how to setup an IDE for programming and understand the file structure for the engine and your game.
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 runtime web browser that is capable of hosting the running game engine. We have found that the most convenient combination is the NetBeans IDE with the Google Chrome web browser. The 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...
- Netbeans IDE: You can download and install the bundle for HTML5/JavaScript or PHP from https://netbeans.org/downloads.
- Google Chrome: You will execute your game projects in the Google Chrome web browser. You can download and install this browser from https://www.google.com/chrome/browser/.
- Connector plug-in for Google Chrome: When using NetBeans IDE for HTML5 development, we need a plug-in to allow NetBeans to connect and interact with the Google Chrome. You can download and install this extension from https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa. Using Chrome do download this will automatically install the plug-in to Google Chrome. You may have to restart your computer to complete the installation.
- glMatrix math library: This is a library that implements the foundational mathematics operations. The engine we supply includes this library but for more information about this component, you can visit http://glMatrix.net. To work with the GTCS Game Engine, the gl-matrix.js file needs to be stored within the src/lib/ path of the engine.
Once you have all of these tools installed, you can use NetBeans IDE to write your game. When you select to run your game from NetBeans, Google Chrome will launch showing you the results. The IDE will show any errors that it comes across during operation.
Entry Point
To run your game, you will need an HTML shell running on a web server. This file must reference all of the files that make up the engine and the fies that are specific to your game. 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 three sections...
- Body tag: This will have a JavaScript snippet executed
onloadthat will create a new instance of a Scene object subclass (which you create and maintain) that will be sent into the game engine for execution. - JavaScript include files: These will be all of the files that are part of the engine and any files you create. The order that these are listed in is important. Modifying this order could break things so make sure the game engine files are left in this pre-defined order and that your files are included last.
- Canvas DOM object: 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.
onload
The entry point for your code will be an object you design that is a subclass of the engine's "Scene" object. You will first allocate a new instance of your class and send it into the game engine as shown in the following code snippet.
<body onload="
var mainGame = new MyGameScene();
gEngine.Core.initializeEngineCore('GLCanvas', mainGame);
">
Note: The portions in bold are the sections that are specific to your game implementation.
JavaScript Includes
This code can be dropped into your HTML file as-is for all cases. The last line is an exception. This is where your custom code needs to be added. If you have multiple files, you need an include for each file. Again, the order is important so be sure you know what order things are being referenced.