Rotating map example

[irei1as]

To use this you need this c++ code addition (it's already merged with the current development branch):

https://github.com/GarageGames/Torque3D/pull/1608/files

I'm using the "Full Template" with this example.

This example is for directX as I don't know much glsl, sorry.

Create the file "mapFunctions.cs" with this content:

//Post effect functionality

singleton ShaderData( mapshader )
{   
  DXVertexShaderFile   = "./mapV.hlsl";
  DXPixelShaderFile    = "./mapP.hlsl";

  //if you have the glsl code
  //OGLVertexShaderFile = "./mapV.glsl";
  // OGLPixelShaderFile = "./mapP.glsl";

  samplerNames[0] = "$map";
  samplerNames[1] = "$mask";

  pixVersion = 2.0;
};

singleton GFXStateBlockData( mapstateblock )
{
  samplersDefined = true;
  samplerStates[0] = SamplerClampLinear;
  samplerStates[1] = SamplerClampLinear;
};

singleton PostEffect( MapTest )
{
  isEnabled = false;
  shader = mapshader;
  stateBlock = mapstateblock;
  texture[0] = "./map";
  texture[1] = "./mask";
  target = "#maptexture";
};

function MapTest::preProcess(%this)
{
  //here we can change the textures if needed of the map and the mask

  //switch($differentmaps)
  //{
  //   case 0:
  //      %this.setTexture(0, "./map");
  //   case 1:
  //      %this.setTexture(0, "./map1");
  //   case 2:
  //      %this.setTexture(0, "./map2");
  //}

  //switch($differentmasks) {...}
  //use %this.setTexture(1, "./mask#") instead
}

function getRotationAngleForMap()
{
  //returns point2f the cosine and sine of the angle of rotation, 0º is up=north, 90º means up=east
  %eyevector=LocalClientConnection.player.getEyeVector();
  %angle=mAtan(%eyevector.x,%eyevector.y);
  return mCos(%angle) SPC mSin(%angle);
}

function getMapCenter()
{
  %pos=LocalClientConnection.player.getPosition();
  return %pos.x SPC %pos.y;
}

function getMapCorners()
{
  //returns point4f the position of the top-left and bottom-right in torque units of the map
  //(x,y) is the x and y position of the top left and (z,w) are the x and y position of the bottom right

  //switch($differentmaps)
  //{
  //   case 0:
  //      return "0 20 20 0";
  //   case 1:
  //      return "40 620 220 500";
  //   case 2:
  //      return "33.12 68.2 87.15 17.9";
  //   //etc
  //}

  //example
  return "-6 15 71 -52";
}

function getMapSizes()
{
  //returns point2f the range in torque units (x,y) that is showed in the gui

  //switch($differentmaps)
  //{
  //   case 0:
  //      return "10 10";
  //   case 1:
  //      return "30 45";
  //   case 2:
  //      return "8 18";
  //   //etc
  //}

  //example
  return "20 10";
}

function MapTest::setShaderConsts(%this)
{
  %this.setShaderConst( "$cossin", getRotationAngleForMap() );
  %this.setShaderConst( "$centerpos", getMapCenter() );
  %this.setShaderConst( "$mapcorners", getMapCorners() );
  %this.setShaderConst( "$guisizes", getMapSizes() );
}

//Functions to display the map
function enableMapDisplay()
{
  if(!isObject(MissionCleanup))
  {
     echo("No MissionCleanup detected. You need to start a level.");
     return;
  }
  if(isObject(MapDisplayCleaner))
     return; //already enabled

  MapTest.enable();
  %scriptObject = new ScriptObject(MapDisplayCleaner){
  };
  MissionCleanup.add(%scriptObject);
  %guidisplay = new GuiBitmapCtrl(MapDisplayBitmap) {
     wrap = "0";
     position = "490 22";
     extent = "130 130";
     horizSizing = "right";
     vertSizing = "bottom";
     visible = "1";
  };
  %playguiProbably = Canvas.getContent();
  %playguiProbably.add(%guidisplay);
  %scriptticker = new ScriptTickObject(MapDisplayUpdater){
     callOnAdvanceTime=1;
  };
  MissionCleanup.add(%scriptticker);
}

function disableMapDisplay()
{
  MapTest.disable();
  MapDisplayCleaner.delete();
  mapDisplayUpdater.delete();
}

function MapDisplayUpdater::onAdvanceTime(%this,%delta)
{
  MapDisplayBitmap.setNamedTexture("maptexture");
}

function MapDisplayCleaner::onRemove(%this)
{
  MapDisplayBitmap.delete();
  MapTest.disable();
}

 

Remember you need to "exec" that file somewhere.

Now to the same folder add these files:

-First make "mapV.hlsl" (note: ANSI file)

struct VertToPix
{
  float4 hpos       : POSITION;
  float2 uv        : TEXCOORD0;
};

VertToPix main( VertToPix In )
{
  VertToPix Out = In;
  return Out;
}

 

-Second create "mapP.hlsl" (note: ANSI file)

uniform sampler2D map : register(S0);
uniform sampler2D mask : register(S1);

uniform float2 cossin;
uniform float2 centerpos;
uniform float4 mapcorners;
uniform float2 guisizes;

float4 main( float2 texcoord : TEXCOORD0 ) :COLOR
{
  float2x2 baserot = float2x2(cossin.x,-cossin.y,cossin.y,cossin.x);

  float2 rotmap;
  float2 delta = float2((mapcorners.z-mapcorners.x),(mapcorners.w-mapcorners.y));
  rotmap = (centerpos-mapcorners.xy)/delta + mul(baserot,(texcoord-0.5)*guisizes/float2(delta.x,-delta.y));

  float4 color1 = tex2D(map, rotmap);
  color1.a=(tex2D(mask, texcoord)).a;
  return color1;
} 

 

-Then download this image and rename it "map.png"

http://i.imgur.com/R1LCLG8.png

-Also rename to "mask.png" this one:

http://i.imgur.com/TCUL2vU.png

(So, in the same folder you have mapFunctions.cs, mapV.hlsl, mapP.hlsl, map.png and mask.png.)

Now run the game, start a level and use in the console:

enableMapDisplay();
LocalClientConnection.player.setPosition("13 -5 250");

Now walk around to see the map move with you.

http://i.imgur.com/SxnZpDY.png

The comments in the script should give you hints on how to change the values for your needs.

Some notes:

The images should be png format.

The map will display better if all the outer ring of pixels is a constant colour (transparent works, too).

For the mask, opaque pixels display image.

Here you have the five files of the example in a zip: http://www.mediafire.com/download/mzu23u3323q3821/map.zip