TGB 2-Player Split Screen

Ok, I've been thumbing around in the TorqueX Beta starter kits and saw one that really peaked my interests. It's called the "Split Screen Starter", and it basically just sets up a 2-player split-screen interface for you automatically so all you have to do is write your game code and add your art resources.

I thought this was an awesome idea, and I immediately said to myself, "Why doesnt TGB have a Split Screen Starter Kit?". After about 15-20 minutes of messing around, I created a very basic and simple Split-screen system that is comprised of 2 files.

I have a splitScreen.gui which contains my SceneWindows (LeftSceneWindow and RightSceneWindow) as well as a split.cs script which contains my level loading initialization.

Here, have a look at them;

~/gui/splitScreen.gui

//--- OBJECT WRITE BEGIN ---
new GuiChunkedBitmapCtrl(splitScreenGui) {
   canSaveDynamicFields = "0";
   Profile = "GuiDefaultProfile";
   HorizSizing = "relative";
   VertSizing = "relative";
   position = "0 0";
   Extent = "640 480";
   MinExtent = "8 2";
   canSave = "1";
   Visible = "1";
   hovertime = "1000";
   bitmap = "~/data/images/logoblack.png";
   useVariable = "0";
   tile = "0";

   new t2dSceneWindow(LeftSceneWindow) {
      canSaveDynamicFields = "0";
      Profile = "GuiDefaultProfile";
      HorizSizing = "relative";
      VertSizing = "relative";
      position = "0 0";
      Extent = "315 480";
      MinExtent = "8 2";
      canSave = "1";
      Visible = "1";
      hovertime = "1000";
      lockMouse = "0";
      useWindowMouseEvents = "1";
      useObjectMouseEvents = "0";
   };
   new t2dSceneWindow(RightSceneWindow) {
      canSaveDynamicFields = "0";
      Profile = "GuiDefaultProfile";
      HorizSizing = "relative";
      VertSizing = "relative";
      position = "325 0";
      Extent = "315 480";
      MinExtent = "8 2";
      canSave = "1";
      Visible = "1";
      hovertime = "1000";
      lockMouse = "0";
      useWindowMouseEvents = "1";
      useObjectMouseEvents = "0";
   };
};
//--- OBJECT WRITE END ---

~/gameScripts/split.cs

function initSplitScreen(%level)
{
   if(isObject(splitScreenGui) && splitScreenGui.isVisible())
   {
      LeftSceneWindow.loadLevel(%level);
      RightSceneWindow.setSceneGraph(LeftSceneWindow.getSceneGraph());
      LeftSceneWindow.setCurrentCameraZoom(1);
      RightSceneWindow.setCurrentCameraZoom(1);
      LeftSceneWindow.setCurrentCameraArea(-512, -384, 0, 384);
      RightSceneWindow.setCurrentCameraArea(0, -384, 512, 384);
      
      
      // DEBUG CODE
      LeftSceneWindow.mount(fish1, 0, 0, 0, true);
      RightSceneWindow.mount(fish2, 0, 0, 0, true);
   } else { return; }
}

Modifies to the game.cs were also made, as follows;

function startGame(%level)
{
   // Set The GUI.
   exec("~/gui/splitScreen.gui");
   Canvas.setContent(splitScreenGui);
   Canvas.setCursor(DefaultCursor);

   moveMap.push();
   
   %levelToCheck = %level @ ".dso";
   
   if( isFile( %level ) || isFile( %level @ ".dso"))
   {
      if(isObject(splitScreenGui) && splitScreenGui.isVisible())
      {
         exec("./split.cs");
         initSplitScreen(%level);
      } else { sceneWindow2D.loadLevel(%level); }
   }
}

For my test, I created a simple level using the Fish Art provided with TGB, I dropped the water background onto the level and then placed two different fish objects -- named them Fish1 and Fish2 respectively, and used the following code to demo out my split-screen nature.

moveMap.bindCmd(keyboard, "a", "fishLeft(fish1, true);", "fishLeft(fish1, false);");
moveMap.bindCmd(keyboard, "d", "fishRight(fish1, true);", "fishRight(fish1, false);");

moveMap.bindCmd(keyboard, "left", "fishLeft(fish2, true);", "fishLeft(fish2, false);");
moveMap.bindCmd(keyboard, "right", "fishRight(fish2, true);", "fishRight(fish2, false);");


function fishLeft(%fish, %move)
{
   if(%move)
   {
      %fish.setLinearVelocityX(-30);
   } else { %fish.setLinearVelocityX(0); }
}

function fishRight(%fish, %move)
{
   if(%move)
   {
      %fish.setLinearVelocityX(30);
   } else { %fish.setLinearVelocityX(0); }
}

That code was, in my demo, just tossed at the bottom of the split.cs

What occurs? Well, when you play the level, the splitScreen.gui is loaded and then set to be the active Content window, which replaces the standard mainScreen.gui. The startGame function tests to see if splitScreenGui is an object, and if so, it calls the initSplitScreen() function and passes the level to load into it.

The splitScreenGui then simply loads the level into the LeftSceneWindow object and then the RightSceneWindow object makes a reference to the LeftSceneWindow objects SceneGraph, so they both share the same SceneGraph, but are independant of each other as far as the camera and other scenewindow events are concerned.

Here is a screenshot of the split functionality, not really the greatest thing as it's best to see 'in action'.


And here is a link to a ZIP file that can be extracted into your TGB/games directory and used as a Startup Project type, TGB Split Screen Startup Kit.

In the kit, name your player objects "Player1" and "Player2" for the default ActionMap to notice them, you can fully edit the action.cs to however you like, but the splitScreen.cs should probably stay as is, unless you want to tweak the splitscreen action a bit more ...

The Startup Project has some tweaks to it, so the code and filenames do not match up identically.

UPDATE: Updated Template Project Download Link