From TDN

Contents 1 Introduction 2 Creating the Splash Screens 3 Coding the Splash Screens 4 Conclusion

Introduction

This tutorial will show you how to create a splash screen for TGB to display when it first launches. In fact we'll even be showing two splash screens, GG's logo (required as part of the distribution agreement) and your own company's logo. These won't be animated splash screens, nor will they have sounds. We're simply fading images in and out before loading our main menu. Perhaps someone will add on to this tutorial with animated splash screens.

---

Creating the Splash Screens

Luckily for us, TGB already has a GUI object we can use for our splash screens, the GuiFadeinBitmapCtrl. Launch the Level Builder and bring up the GUI editor by pressing F10 or with Project > GUI Editor.... Goto File->New GUI and select the fadein bitmap control from the dropdown list after naming the new GUI (I called mine ggSplash). Once the control loads click on it in the tree to the right to bring up its properties. Fill out the bitmap field under the Misc properties with the path to the GG logo image file you would like to display and then press the Apply button to bring the image up on the screen. If the image does not appear then you have probably mis-typed the path to the image. Also don't forget to exclude the image extension - it is not needed.

Next in the the General properties complete the values for the fields fadeinTime, waitTime and fadeoutTime. As you can guess, fadeinTime is the amount of time it will take for the image to fade completely in. waitTime is the amount of time the image will remain on the screen. fadeoutTime is the amount of time it will take for the image to fade completely out. All of these times are in milliseconds (1 second = 1000 milliseconds). Make sure you do not check the done box, otherwise the fade will not run.

Now repeat the above steps one more time for your own company's splash screen and we're ready to move on. Don't forget to save your work!

---

Coding the Splash Screens

Open your main.cs file in your project folder and in the function initializeProject() comment out startGame(); , the toggleLevelEditor(); stuff and place at the bottom the following:

loadGGSplash();

Also, add exec() statements for the new GUI files you created. The initializeProject function should now look like this:

function initializeProject()
{
   // Load up the in game gui.
   exec("~/gui/mainScreen.gui");
   exec("~/gui/ggSplash.gui");
   exec("~/gui/myCompanyLogo.gui");
   
   // Exec game scripts.
   exec("./gameScripts/game.cs");
   
   // Remove the following four lines if you would like to start the game without running the
   // level builder.
   //if ($runWithEditors)
   //{
      //toggleLevelEditor();
      //return;
   //}
   
   // This is where the game starts. Right now, we are just starting the first level. You will
   // want to expand this to load up a splash screen followed by a main menu depending on the
   // specific needs of your game. Most likely, a menu button will start the actual game, which
   // is where startGame should be called from.
   //startGame("ExampleMyFishGame/data/levels/myFishLevel.t2d");
   loadGGSplash();
}

Simple right? Well unfortunately that's not really going to do everything for us. Actually it'll do a whole lot of nothing right now. Let's remedy that. Open the ggSplash.gui file and insert the following code after the //--- OBJECT WRITE END ---

function loadGGSplash()
{
   canvas.setContent(ggSplash);
   schedule(100, 0, checkGGSplash);
}

function checkGGSplash()
{
   if (ggSplash.done)
      loadMyCompanyLogo();
    else
      schedule(100, 0, checkGGSplash);
}

The idea is fairly simple. We're displaying the splash screen by loading the GUI object onto the canvas, then scheduling a check-up on the status of the object 100ms in the future. Our check-up function looks to see if the GUI control has completed its fade (remember the done checkbox I told you to leave alone? That's the property we're checking), If it has, we move on to the next splash screen, otherwise we schedule another check-up and keep doing so until the fade is complete.

Now open the other GUI file containing your company logo, in this example it's myCompanyLogo.gui. Place the following similar code after the //--- OBJECT WRITE END ---

function loadMyCompanyLogo()
{
   canvas.setContent(myCompanyLogo);
   schedule(100, 0, checkMyCompanyLogo);
}

function checkMyCompanyLogo()
{
   if (myCompanyLogo.done)
      startGame("MyProjectFolder/data/levels/MyLevel.t2d");
   else
      schedule(100, 0, checkMyCompanyLogo);
}

The code is pretty much a direct copy/paste with a few minor changes. We're setting new content to the canvas and the function we're calling at the end of the fade leads us to the first level instead of another splash screen. This could also lead to a main menu instead of directly into your game, it's your choice.

---

Conclusion

Well that was pretty simple right? Run TGB and marvel at your wonderful creation. The GG logo should fade in and out first, followed by your company logo, and finally your level will appear (or wherever you want to go afterwards). Have fun!