Torque 2D/GenreTutorials/StrategyCameraSystem

From TDN

This page is a Work In Progress.

1 Setting up the Camera System to Scroll with The Mouse

Setting up the Camera System to Scroll with The Mouse

Introduction

Due to a lack of time I will be simply posting code insertions and code changes to get the camera system in... If anyone is up for it feel free to tutoralize this step.

[edit]

Change in your client.cs

[edit]

change out your setupT2DScene() to this

note the only change is adding the $cameraPos variable to store the camera position.

// --------------------------------------------------------------------
// Setup T2D Scene.
// --------------------------------------------------------------------
function setupT2DScene()
{
	// Create t2dSceneGraph.
	new t2dSceneGraph(t2dScene);
	
	// Associate Scenegraph with Window.
	sceneWindow2D.setSceneGraph( t2dScene );
	
	// Set Camera Position to be centered on (0,0) with
	// view width/height of (100/65).
      $cameraPos = "0 0 100 65";
	sceneWindow2D.setCurrentCameraPosition( "0 0 100 65" );

	
	// ************************************************************************
	//
	// Add your custom code here...
	//
	// ************************************************************************
	
	onStartUp();
}

[edit]

onStartUp.cs onStartUp() function

[edit]

Replace your onStartUp() function with this

function onStartUp()
{
   // store our scenegraph
   $strategyScene = t2dScene;

   // in our needed values
   initMouse();
   initData();
   initObjectTypes();
   
   // load our world map
   loadWorldMap();

   // lets load our bases
   loadBases();

   // init same game specific values
   initGame();
   
   // now we init our camera values
   initCamera();
}

[edit]

mouse.cs functions...

[edit]

Changes to existing functions

Change your onMouseDragged() function with this.

// --------------------------------------------------------------------
// SceneWindow2D::onMouseDragged()
//
// This function is triggered from the engine when the mouse is dragged
// --------------------------------------------------------------------
function SceneWindow2D::onMouseDragged(%this, %modifier, %worldPos, %mouseClicks)
{  
   // lets do our camera check
   checkIfMouseIsOnBorder();
   
   // update the seletion box as we drag as well as check if the mouse
   // is on the border for camera panning and easing
   updateSelectionBox(%worldPos);
}

[edit]

Adding new functions

Add these functions to your mouse.cs.

// --------------------------------------------------------------------
// SceneWindow2D::onMouseMove()
//
// This function is triggered from the engine when the mouse is "moving"
// --------------------------------------------------------------------
function SceneWindow2D::onMouseMove(%this, %modifier, %worldPos, %mouseClicks)
{
   // lets do our camera check
   checkIfMouseIsOnBorder();
}

and add this function

// --------------------------------------------------------------------
// checkIfMouseIsOnBorder()
//
// This function checks if the mouse is near the edge... it has three levels
// of sensitivty   fast - medium - slow
// the distances are defined in globals in the init() function to easily
// configure it... the speeds are configured in the initCamera() function
// --------------------------------------------------------------------
function checkIfMouseIsOnBorder()
{
   // we have three sets of speed for the mouse on the border
   %fastBuffer = $fastBuffer;
   %mediumBuffer = $mediumBuffer;
   %slowBuffer = $slowBuffer;
   
   // init the directions to nothing to start
   %up = "";
   %down = "";
   %right = "";
   %left = "";
   
   // get the mouse position and convert it to the point inside the local
   // GUI game window size, this makes it easier to test if the mouse is 
   // near the border
   %mousePos = SceneWindow2D.getMousePosition();
   %windowPos = SceneWindow2D.getWindowPoint(%mousePos);
   
   // get the extent of the scene window gui control
   // divide it into width and height
   %extent = SceneWindow2D.getExtent();
   %width = getWord(%extent, 0);
   %height = getWord(%extent, 1);
   
   // divide the mouse position with in the window into x and y
   %x = getWord(%windowPos, 0);
   %y = getWord(%windowPos, 1);  
   
   // compare the directions to the proper buffers, doing it in this order
   // we can ensure that the slow is checked first, then the medium, and finally
   // the fast, which should be the closest to the edge of the window and
   // shoudl move the fastest
   if(%x < %slowBuffer)
   {
      if(%x < %mediumBuffer)
      {
         if(%x < %fastBuffer)
         {
            %left = "fast";            
         } else
         {
            %left = "medium";            
         }
      } else
      {
         %left = "slow";
      }
   } 
   
   if(%x > (%width - %slowBuffer))
   {
      if(%x > (%width - %mediumBuffer))
      {
         if(%x > (%width - %fastBuffer))
         {
            %right = "fast";            
         } else
         {
            %right = "medium";            
         }
      } else
      {
         %right = "slow";
      }
   } 
      
   if(%y < %slowBuffer)
   {
      if(%y < %mediumBuffer)
      {
         if(%y < %fastBuffer)
         {
            %up = "fast";            
         } else
         {
            %up = "medium";            
         }
      } else
      {
         %up = "slow";
      }
   } 
         
   if(%y > (%height - %slowBuffer))
   {
      if(%y > (%height - %mediumBuffer))
      {
         if(%y > (%height - %fastBuffer))
         {
            %down = "fast";            
         } else
         {
            %down = "medium";            
         }
      } else
      {
         %down = "slow";
      }
   }
      
   // now we evaluate what we've set when comparing the mouse's position to 
   // buffers that represent the edge of the window
   // we basically just set the proper panning speeds and directions
   if(%left $= "slow")
   {
      $panValLeft = $panSlowSpeed;
      if(!$panningLeft)
      {
         startPanning(Left);
      }
   } else if(%left $= "medium")
   {
      $panValLeft = $panMediumSpeed;
      if(!$panningLeft)
      {
         startPanning(Left);
      }
   } else if(%left $= "fast")
   {
      $panValLeft = $panFastSpeed;
      if(!$panningLeft)
      {
         startPanning(Left);
      }      
   } else
   {
      if($panningLeft)
      {
         stopPanning(Left);
      }
   }
   
   if(%right $= "slow")
   {
      $panValRight = $panSlowSpeed;
      if(!$panningRight)
      {
         startPanning(Right);
      }
   } else if(%right $= "medium")
   {
      $panValRight = $panMediumSpeed;
      if(!$panningRight)
      {
         startPanning(Right);
      }
   } else if(%right $= "fast")
   {
      $panValRight = $panFastSpeed;
      if(!$panningRight)
      {
         startPanning(Right);
      }      
   } else
   {
      if($panningRight)
         stopPanning(Right);
   }
   
   if(%up $= "slow")
   {
      $panValUp = $panSlowSpeed;
      if(!$panningUp)
      {
         startPanning(Up);
      }
   } else if(%up $= "medium")
   {
      $panValUp = $panMediumSpeed;
      if(!$panningUp)
      {
         startPanning(Up);
      }
   } else if(%up $= "fast")
   {
      $panValUp = $panFastSpeed;
      if(!$panningUp)
      {
         startPanning(Up);
      }      
   } else
   {
      if($panningUp)
         stopPanning(Up);
   }
      
   if(%down $= "slow")
   {
      $panValDown = $panSlowSpeed;
      if(!$panningDown)
      {
         startPanning(Down);
      }
   } else if(%down $= "medium")
   {
      $panValDown = $panMediumSpeed;
      if(!$panningDown)
      {
         startPanning(Down);
      }
   } else if(%down $= "fast")
   {
      $panValDown = $panFastSpeed;
      if(!$panningDown)
      {
         startPanning(Down);
      }      
   } else
   {
      if($panningDown)
         stopPanning(Down);
   }

[edit]

New script file

[edit]

Create a camera.cs

Create a new script folder called "camera" and add a new script file to it called "camera.cs."...

be sure to add this line to your exec.cs.

exec("./scripts/camera/camera.cs");

Now add this script to your camera.cs.

// --------------------------------------------------------------------
// initCamera()
//
// This is the camera initalize function that will init the data we need
// for our camera system
// --------------------------------------------------------------------
function initCamera()
{
   // this is the limit the camera should be able to view, this is heavily used
   // by the panning and easing code
   $cameraViewLimit = "-100 -100 100 100";
   // setting a view limit on will literally prevent the camera from moving
   // beyond the specified space, though the camera code works corectly without
   // it on
   //SceneWindow2D.setViewLimitOn($cameraViewLimit);
   // we set the camera interpolation mode to LINEAR so we get equivilant camera
   // movement instead of spurts
   SceneWindow2D.setCameraInterpolationMode(LINEAR);
   
   //
   //$cameraPos = getCameraPos();
   $panValLeft = 1;
   $panValRight = 1;
   $panValUp = 1;
   $panValDown = 1;
   
   $panSlowSpeed = 0.25;
   $panMediumSpeed = 0.5;
   $panFastSpeed = 1;
   
   $fastBuffer = "5";
   $mediumBuffer = "15";
   $slowBuffer = "30";
   
   $defaultDec = 0.01;
   $easeDecVal = $defaultDec/50;  
   
   $canPan = true;
}

// --------------------------------------------------------------------
// getCameraPos()
//
// This function will get the basic camera information
// --------------------------------------------------------------------
function getCameraPos()
{
   // we grab the area and position of our camera
   %area = SceneWindow2D.getCurrentCameraArea();
   %pos = SceneWindow2D.getCurrentCameraPosition();

   // divide the X and Y position out of the area
   %areaX = getWord(%area,2);
   %areaY = getWord(%area,3);

   // peice together the camera position
   %cameraPos = %pos SPC %areaX SPC %areaY;

   return %cameraPos;
}

function startPanning(%direc)
{ 
   // check if panning is enabled,
   // if not then return out
   if(!$canPan)
      return;
 
   // toggle panning to true
   $panning = true;

   // toggle panning in the correct direction to true
   eval("$panning" @ %direc @ " = true;");

   // call the correct panIt + direc function
   %pan = "panIt" @ %direc @ "();";
   eval(%pan);
}

// --------------------------------------------------------------------
// panItLeft()
//
// This function will trigger the camera movement left
// --------------------------------------------------------------------
function panItLeft()
{
   if($panningLeft)
   {
      panLeft();
      schedule(20, 0, "panItLeft");
      panAction();
   }
} 

// --------------------------------------------------------------------
// panItRight()
//
// This function will trigger the camera movement right
// --------------------------------------------------------------------
function panItRight()
{
   if($panningRight)
   {
      panRight();
      schedule(20, 0, "panItRight");
      panAction();
   }
} 

// --------------------------------------------------------------------
// panItUp()
//
// This function will trigger the camera movement up
// --------------------------------------------------------------------
function panItUp()
{
   if($panningUp)
   {
      panUp();
      schedule(20, 0, "panItUp");
      panAction();
   }
}

// --------------------------------------------------------------------
// panItDown()
//
// This function will trigger the camera movement down
// --------------------------------------------------------------------
function panItDown()
{
   if($panningDown)
   {
      panDown();
      schedule(20, 0, "panItDown");
      panAction();
   }
}

// --------------------------------------------------------------------
// panItDown()
//
// This function will trigger the camera movement down
// --------------------------------------------------------------------
function stopPanning(%direc)
{
   // here we basically peice together the panning global variable
   // in whatever direction we're passing in
   %pan = "$panning" @ %direc @ " = false;";
   eval(%pan);
}

// --------------------------------------------------------------------
// stopAllPanning()
//
// This function will stop all the panning
// --------------------------------------------------------------------
function stopAllPanning()
{
   // toggle all the panning variables to false
   $panningLeft = false;
   $panningRight = false;
   $panningUp = false;
   $panningDown = false;
}

// --------------------------------------------------------------------
// checkAllPan()
//
// This function will check if any direction is panning, if so it will
// return true, if not it will return false
// --------------------------------------------------------------------
function checkAllPan()
{   
   if($panningLeft)
      return true;
      
   if($panningRight)
      return true;

   if($panningUp)
      return true;
      
   if($panningDown)
      return true;

   return false;   
}

// --------------------------------------------------------------------
// panAction()
//
// This function will check if any direction is panning, if so it will
// return true, if not it will return false
// --------------------------------------------------------------------
function panAction()
{
   // lets grab the camera position   
   %xMod = getWord($cameraPos, 2);
   %yMod = getWord($cameraPos, 3);
   
   // lets check to make sure we don't try to move the camera beyond the world
   %xLimitMin = getWord($cameraViewLimit, 0) + (%xMod/2);
   %xLimitMax = getWord($cameraViewLimit, 2) - (%xMod/2);
   %yLimitMin = getWord($cameraViewLimit, 1) + (%yMod/2);
   %yLimitMax = getWord($cameraViewLimit, 3) - (%yMod/2); 
   
   // lets grab the other two camera positions
   %x = getWord($cameraPos, 0);
   %y = getWord($cameraPos, 1);
   
   // we make sure we don't move the camera outside of the world
   // basically we just check both the x and y direction for
   // the world's min and max
   if(%x < %xLimitMin)
   {
      %x = %xLimitMin;      
   }
   
   if(%x > %xLimitMax)
   {
      %x = %xLimitMax;      
   } 
   
   if(%y < %yLimitMin)
   {
      %y = %yLimitMin;      
   } 
   
   if(%y > %yLimitMax)
   {
      %y = %yLimitMax;      
   } 
   
   // lets peice our camera position together again
   $cameraPos = %x SPC %y SPC getWord($cameraPos, 2) SPC getWord($cameraPos, 3);

   // time to set and move our camera
   sceneWindow2D.setTargetCameraPosition( $cameraPos );
   sceneWindow2D.startCameraMove(0.25); 
}

// --------------------------------------------------------------------
// panLeft()
//
// This function will modify the camera position to be panned left
// --------------------------------------------------------------------
function panLeft()
{
   // first we grab the x position
   %x = getWord($cameraPos, 0);

   // then we subtract our panning value
   %x -= $panValLeft;

   // now we set the camera position to our new position
   $cameraPos = setWord($cameraPos, 0, %x);
}

// --------------------------------------------------------------------
// panRight()
//
// This function will modify the camera position to be panned right
// --------------------------------------------------------------------
function panRight()
{
   // first we grab the x position
   %x = getWord($cameraPos, 0);
 
   // then we add our panning value
   %x += $panValRight;
 
   // now we set the camera position to our new position
   $cameraPos = setWord($cameraPos, 0, %x);
}

// --------------------------------------------------------------------
// panUp()
//
// This function will modify the camera position to be panned up
// --------------------------------------------------------------------
function panUp()
{
   // first we grab the y position
   %y = getWord($cameraPos, 1);

   // then we subtract our panning value
   %y -= $panValUp;

   // now we set the camera position to our new position
   $cameraPos = setWord($cameraPos, 1, %y);
}

// --------------------------------------------------------------------
// panDown()
//
// This function will modify the camera position to be panned down
// --------------------------------------------------------------------
function panDown()
{
   // first we grab the y position
   %y = getWord($cameraPos, 1);
 
   // then we add our panning value
   %y += $panValDown;
 
   // now we et the camera postion to our new position
   $cameraPos = setWord($cameraPos, 1, %y);
}

// --------------------------------------------------------------------
// disablePan()
//
// This function will disable all panning
// --------------------------------------------------------------------
function disablePan()
{
   // set $canPan to false
   $canPan = false;   
}

// --------------------------------------------------------------------
// enablePan()
//
// This function will enable all panning
// --------------------------------------------------------------------
function enablePan()
{
   // set $canPan to true
   $canPan = true;   
}

Now you should be able to fire up T2D, when you move your mouse to the border of your SceneWindow2D it will move in three different speeds.

Retrieved from "http://tdn.garagegames.com/wiki/Torque_2D/GenreTutorials/StrategyCameraSystem"

TDN Core

Navigation

Search

Toolbox

Torque 2D/GenreTutorials/StrategyCameraSystem

From TDN

Contents

Setting up the Camera System to Scroll with The Mouse

Introduction

Change in your client.cs

change out your setupT2DScene() to this

onStartUp.cs onStartUp() function

Replace your onStartUp() function with this

mouse.cs functions...

Changes to existing functions

Adding new functions

New script file

Create a camera.cs