Splash Screen

The TGE is split into two primary sections, the "server" and the "client." The client is basically what the user sees and interacts with, the server is the control of everything. An easy way to think of it is the client is the stearing wheel, pedals and windshield of a car, the server is the engine, tires, and everything else. Since the canvas, splash screen and menu are part of the client, we are going to put them in a function called initClient.

After creating our canvas, we want to use it to display graphical user interface (GUI) objects. First we must create these objects, then use them to display on our canvas. In TGE script, objects are created based on profiles, making our work much easier. A profile is a pre-defined collection of properties we can use or modify to meet our needs. For our splash screen we will use the guiDefaultProfile. They type of object we are creating is a guiChunkedBitmapCtrl, which is a bitmap image broken into 512 x 512 pixel chunks so there won't be a problem with older video cards.

We also need to set up a control to allow input so the user can hit a key or click the mouse to continue. That will be a guiInputCtrl object using the guiInputCtrlProfile. In order to use profiles, we must first set them up, so it's a good idea to create an initCanvas function where we open our canvas and set up the profiles.

You'll want the demoWindow.png file in your game root as well. It comes with the TGE demo, in the TGE/demo/client/ui directory, or you can download a custom one I made here: demoWindow.png.

// main.cs 11 APR 05
$pref::video::allowOpenGL = true;
$pref::video::displayDevice = "OpenGL";

function onExit() {
}

function resetCanvas() {
   if (isObject(canvas)) canvas.repaint();
}

function initCanvas(%windowTitle) {
   if (!createCanvas(%windowTitle)) quit();
	
   if(!isObject(guiDefaultProfile)) new guiControlProfile(guiDefaultProfile) {
      tab = false;
      canKeyFocus = false;
      hasBitmapArray = false;
      mouseOverSelected = false;
		
      // fill color
      opaque = false;
      fillColor = "192 192 192";
      fillColorHL = "220 220 220";
      fillColorNA = "220 220 220";
		
      // border color
      border = false;
      borderColor   = "0 0 0";
      borderColorHL = "128 128 128";
      borderColorNA = "64 64 64";
		
      // font
      fontType = "Arial";
      fontSize = 14;
      fontColor = "0 0 0";
      fontColorHL = "32 100 100";
      fontColorNA = "0 0 0";
      fontColorSEL= "200 200 200";

      // bitmap information
      bitmap = "./demoWindow";
      bitmapBase = "";
      textOffset = "0 0";

      // used by guiTextControl
      modal = true;
      justify = "left";
      autoSizeWidth = false;
      autoSizeHeight = false;
      returnTab = false;
      numbersOnly = false;
      cursorColor = "0 0 0 255";
   };

   if(!isObject(guiInputCtrlProfile)) new guiControlProfile(guiInputCtrlProfile) {
      tab = true;
      canKeyFocus = true;
   };
}

function initClient() {
   initCanvas("Tank Battle v0.1 pre-alpha");

   new guiChunkedBitmapCtrl(splashScreen) {
      profile = "guiDefaultProfile";
      horizSizing = "width";
      vertSizing = "height";
      position = "0 0";
      extent = "640 480";
      minExtent = "8 8";
      visible = true;
      bitmap = "./splash";
      tile = false;
      noCursor = true;
      new guiInputCtrl(splashScreenInputCtrl) {
         profile = "guiInputCtrlProfile";
         position = "0 0";
         extent = "10 10";
      };
   };

   canvas.setContent(splashScreen);
   canvas.cursorOff();
}

function splashScreenInputCtrl::onInputEvent(%this, %dev, %evt, %make) {
   if (%make) quit();
}

enableWinConsole(true);
setLogMode(2);
trace(true);

setModPaths(".");
initClient();

The initCanvas function initializes our canvas, setting up our display window, then defines how gui object profiles will be created. The initClient function calls initCanvas, then defines our splash screen and sets our canvas to display the splash screen object. The setModPaths function allows us to see files within the "." or game directory, so we can load in the image for our splash screen.

The properties of our objects define how and where they are displayed. Most of the propreties are self-explanatory, but specifics can be found withing the TGE documentation. I'll cover a few of them here. The horizSizing and vertSizing set how our object will be sized relative to it's container, which in this case is the canvas. The position property is used to set the positioning of the object, in pixels, relative to the sizing method. The extent property defines the size of the object, and minExtent defines the minimum possible size. The visible property means just what it says, whether or not the object is visible.

The bitmap property is the actual bitmap image file we are going to use for our splash screen. The path starts with "./" indicating to start from the current directory. The tile property sets whether or not to tile, or repeat, the bitmap to fill the container, and noCursor sets the mouse cursor visible or not.

Inside our object we create another object to read input from the user. The guiInputControl is used to accept keyboard and mouse input and allow your game to react to it. Again we define a profile to set default settings, then position and size it.

After creating our splashScreen object, we set use the setContent method of the canvas to display our splash screen, and the cursorOff method to hide the mouse cursor.

The splashScreenInputCtrl::onInputEvent function is an event handler. When the mouse button is clicked or a key is pressed, the splashScreenInputCtrl object inside our splash screen receives that input and raises the onInputEvent. Our function takes the input from that event and tells the game to quit.

Previous | Next