<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="Terrain Engine 2D, a Unity3d block engine for making sandbox games">
    <meta name="author" content="Matthew Wilson">
    <meta name="keywords" content="Unity3d, Terrain, Engine, 2D, asset, sandbox, game, Terraria, Starbound">
    <title>Terrain Engine 2D</title>
    <link rel="shortcut icon" href="../../TemplateData/favicon.ico">
    <link rel="stylesheet" href="../../TemplateData/style.css">


    <!-- Bootstrap core CSS -->
    <link href="../../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="../../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <!-- Carter One font -->
    <link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../../css/clean-blog.css" rel="stylesheet">
    
  </head>

  <body style="background-color:#1C1C1C;">

        <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand" href="../index.html">Active Game Dev</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="../../index.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="../../about.html">About</a>
            </li>
                   <li class="nav-item">
              <div class="dropdown show">
                <a class="nav-link" id="dropdown-nav" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">My Projects</a>
                <div class="dropdown-menu" id="projects-dropdown-menu" aria-labelledby="dropdownMenuLink">
                  <a class="dropdown-item" id="projects-dropdown-item" href="../../bhopgo.html">Bhop Go</a>
                  <a class="dropdown-item" id="projects-dropdown-item" href="../../TerrainEngine2D.html">Terrain Engine 2D</a>
                </div>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="../../contact.html">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Page Header -->
      <header class="masthead" style="background-color:#222222;">
        <div class="container">
          <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
              <div class="page-heading">
                <h1>Terrain Engine 2D</h1>
                <h2>A 2D Block Engine for Unity</h2>
                <span class="subheading">Out now on the Unity Asset Store</span>
                <br>
                <a class="btn btn-buy" href="https://assetstore.unity.com/packages/tools/terrain/terrain-engine-2d-115381?aid=1011l3QhE" role="button">Buy Now!</a>
              </div>
            </div>
          </div>
        </div>
      </header>

              <section>
         <div class="container-fluid text-center" style="background-color:#FFFFFF;">
          <div class="row">
            <div class="mx-auto btn-group">
              <a class="btn btn-default" href="../../TerrainEngine2D.html">Features</a>
              <a class="btn btn-primary" href="../TerrainEngine2D/Documentation.html">Documentation</a>
              <a class="btn btn-default" href="../../API/html/annotated.html" target="_blank">API</a>
              <a class="btn btn-default" href="../FAQ.html">FAQ</a>
              <a class="btn btn-default" href="../Demo.html">Demo</a>
              <a class="btn btn-default" href="../Example.html">Example Project</a>
            </div>
          </div>
        </div>
      </section>

<section>
      <div class="container-fluid page-heading mx-auto" style="background-color:#FFFFFF; font-family: 'Lora', 'Times New Roman', serif; color: #000000;">
        <div class="row">
          <div class="col-lg-11 col-md-11 mx-auto">
            <div class="row">
              <div class="col-lg-3 col-md-3 mx-auto">
                <br>
                <h4 style="color: #1C1C1C">Terrain Engine 2D</h4> 
                <h6 style="color: #555555">User Manual - V1.20</h6>
                <div class="dropdown" id="Intro">
                  <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" style="color:#005b6e;">Intro<span class="caret"></span></button>
                  <ul class="dropdown-menu text-center">
                    <li><a href="../Documentation.html">Getting Started</a></li>
                    <li><a href="./Contents.html">Contents</a></li>
                    <li><a href="./Setup.html">Setup</a></li>
                  </ul>
                </div>
                <div class="dropdown" id="general">
                  <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" style="color:#005b6e;">General<span class="caret"></span></button>
                  <ul class="dropdown-menu text-center">
                    <li><a href="./Textures.html">Textures</a></li>
                    <li><a href="./BlockSetup.html">Block Setup</a></li>
                    <li><a href="./MainProperties.html">Main Properties</a></li>
                    <li><a href="./WorldCamera.html">World Camera</a></li>
                    <li><a href="./TerrainGeneration.html">Terrain Generation</a></li>
                    <li><a href="./Tools.html">Tools</a></li>
                    <li><a href="./Serialization.html">Serialization</a></li>
                  </ul>
                </div>
                <div class="dropdown" id="Main Properties">
                  <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" style="color:#005b6e;">Main Properties<span class="caret"></span></button>
                  <ul class="dropdown-menu text-center">
                    <li><a href="./Terrain.html">Terrain</a></li>
                    <li><a href="./Chunks.html">Chunks</a></li>
                    <li><a href="./Modification.html">Modification</a></li>
                    <li><a href="./Fluid.html">Fluid</a></li>
                    <li><a href="./Lighting.html">Lighting</a></li>
                    <li><a href="./FallingBlocks.html">Falling Blocks</a></li>
                    <li><a href="./Optimization.html">Optimization</a></li>
                  </ul>
                </div>
              </div>
              <div class="col-lg-8 col-md-8 mx-auto">
                <br>
                <h1>Tools</h1>
                <span class="doc-span">This page explains how to use the tools included with Terrain Engine 2D.</span>
                <div class="doc-table-contents">
                  <h5>Table of Contents</h5>
                  <ul>
                    <li><a href="#content1">General</a></li>
                    <li><a href="#content2">On Screen Display</a></li>
                    <li><a href="#content3">Grid Selector</a></li>
                  </ul>
                </div>
                <br>
                <h3 id="content1">General</h3>
                <hr>
                <p>In Terrain Engine 2D the two tools included with the engine are the On Screen Display (OSD) and Grid Selector. These tools are there to help manipulate the world during runtime. They also act as examples for those who wish to incorporate similar tools in their game. Both tools can be used independantly of the other, but some features will not work without the other present in the scene.</p>
                <br>
                <h3 id="content2">On Screen Display (OSD)</h3>
                <hr>
                <p>The On Screen Display is a graphical user interface (GUI) which provides the user with valuable information about the world, while providing the means for modifying the terrain; adding blocks, removing blocks, manipulating fluid...</p>
                <img class="doc-image img-responsive" src="../../img/terrainengine2d/Documentation/OSD.png" alt="On Screen Display">
                <span class="caption tex">Terrain Engine 2D On Screen Display</span>
                <h4>Basics</h4>
                <p>The OSD can be enabled and scaled through the World custom inspector. There is also a property called the OSD Update Rate which controls how often the Text objects are updated (such as the FPS). The OSD is connected to the layer and block lists of the World custom inspector, which means any blocks and layers added to those lists will become available for use in the OSD. The OSD is an optional tool, meaning terrain will still be generated and everything will still work without it.</p>
                <hr>
                <p><i>It should be noted that the OSD produces garbage and can slow down performance.</i></p>
                <hr>
                <br>
                <h4>World Info - <span class="text-muted span-font">Top Bar Overlay</span></h4>
                <img class="doc-image img-responsive" src="../../img/terrainengine2d/Documentation/OSDTopBar.png" alt="On Screen Display">
                <span class="caption tex">Terrain Engine 2D OSD Top</span>
                <br>
                <p>The Top Overlay contains dynamically updated information about the terrain and world.</p>
                <ul>
                  <li>Loaded Chunks <span class="text-muted span-font">The number of Chunks currently loaded in the scene</span></li>
                  <li>Total Blocks <span class="text-muted span-font">The total number of blocks in the World</span></li>
                  <li>Seed <span class="text-muted span-font">The seed used to generate the terrain</span></li>
                  <li>FPS <span class="text-muted span-font">The current FPS (Frames Per Second) of the game</span></li>
                </ul>
                <br>
                <h4>World Tools - <span class="text-muted span-font">Middle Right Overlay</span></h4>
                <img class="doc-image img-responsive" src="../../img/terrainengine2d/Documentation/OSDWorldTools.png" alt="On Screen Display">
                <span class="caption tex">Terrain Engine 2D OSD World Tools</span>
                <br>
                <p>The World Tools contains general settings for modifying the world.</p>
                <ul>
                  <li>Lighting Toggle <span class="text-muted span-font">Enables/Disables the lighting</span></li>
                  <li>Build/Remove Toggle <span class="text-muted span-font">Sets whether blocks are placed or removed on left click</span></li>
                </ul>
                <br>
                <h4>Block Tools - <span class="text-muted span-font">Bottom Right Overlay</span></h4>
                <img class="doc-image img-responsive" src="../../img/terrainengine2d/Documentation/OSDBlockTools.png" alt="On Screen Display">
                <span class="caption tex">Terrain Engine 2D OSD Block Tools</span>
                <br>
                <p>The Block Tools contains options for modifying the terrain blocks. This window will only appear if the Block Tool is selected in the bottom left. Here you can set the brush size, and select layers and block types to place or destroy. You can also set the visibility if you wish to hide certain layers.</p>
                <ul>
                  <li>Brush Size Slider <span class="text-muted span-font">Slider for setting the Brush size to control the radius of blocks modified while building or destroying <i>(Note: only Overlap Blocks can have a Brush Size greater than 1)</i></span></li>
                  <li>Layer Toggles <span class="text-muted span-font">Toggles for selecting layers for modification. If a layer is selected, blocks can be added or removed from that layer. <i>(Note: only one layer can be selected at a time if Build is toggled)</i></span></li>
                  <li>Layer Visibility Toggles <span class="text-muted span-font">Toggles for showing/hiding layers. This modifies the transparency of the layers Material</span></li>
                  <li>Block Dropdown <span class="text-muted span-font">Dropdown for selecting the Block Type for building <i>(Note: this is only enabled when Build is toggled)</i></span></li>
                </ul>
                <br>
                <h4>Fluid Tools - <span class="text-muted span-font">Bottom Right Overlay</span></h4>
                <img class="doc-image img-responsive" src="../../img/terrainengine2d/Documentation/OSDFluidTools.png" alt="On Screen Display">
                <span class="caption tex">Terrain Engine 2D OSD Fluid Tools</span>
                <br>
                <p>The Fluid Tools contains options for modifying the fluid simulation. This window will only appear if the Fluid Tool is selected in the bottom left. Fluid can be placed or removed. Whether adding or removing fluid you can set the brush size. If you are using the Advanced Fluid Simulation and have building toggled on, you can select a color, opacity, and control the density of the fluid. </p>
                <ul>
                  <li>Brush Size Slider <span class="text-muted span-font">Slider for setting the Brush size to control the radius of blocks modified while building or destroying <i>(Note: only Overlap Blocks can have a Brush Size greater than 1)</i></span></li>
                  <li>Color Wheel <span class="text-muted span-font">This color wheel can be used to select a color for the fluid to be placed</span></li>
                  <li>Opacity Slider <span class="text-muted span-font">This slider can be used to set an opacity for the fluid color. Values are from [0-255] inclusively, zero being fully transparent and 255 being opaque</span></li>
                  <li>Density Input <span class="text-muted span-font">The density input takes in a value inclusively between [0-255] to set the density of the fluid being placed</i></span></li>
                </ul>
                <br>
                <h4>Tool Select - <span class="text-muted span-font">Bottom Left Overlay</span></h4>
                <img class="doc-image img-responsive" src="../../img/terrainengine2d/Documentation/OSDBottomLeftBar.png" alt="On Screen Display">
                <span class="caption tex">Terrain Engine 2D OSD Tool Select</span>
                <br>
                <p>The Tool Select overlay allows you to choose between 3 different tools depending on whether you wish to modify the terrain, the fluid simulation, or the lighting. </p>
                <ul>
                  <li><img class="doc-image img-responsive" style="display: inline" src="../../img/terrainengine2d/Documentation/OSDBlockToolsIcon.png" alt="Tool Icon"> 
                    Block Tools Select <span class="text-muted span-font">Display the Block Tools overlay and be able to modify the terrain</span></li>
                  <li><img class="doc-image img-responsive" style="display: inline" src="../../img/terrainengine2d/Documentation/OSDFluidToolsIcon.png" alt="Tool Icon"> 
                    Fluid Tools Select <span class="text-muted span-font">Display the Fluid Tools overlay and be able to add/remove fluid from the world</span></li>
                  <li><img class="doc-image img-responsive" style="display: inline" src="../../img/terrainengine2d/Documentation/OSDLightToolsIcon.png" alt="Tool Icon"> 
                    Lighting Tools Select <span class="text-muted span-font"><i>This allows you to place/remove light sources from the scene (Note: this option is only available with the Advanced Lighting System)</i></span></li>
                </ul>
                <br>

                <h4>Selected Block - <span class="text-muted span-font">Top Left Overlay</span></h4>
                <img class="doc-image img-responsive" src="../../img/terrainengine2d/Documentation/OSDSelectedBlock.png" alt="On Screen Display">
                <span class="caption tex">Terrain Engine 2D OSD Selected Block</span>
                <br>
                <p>The Selected Block overlay contains dynamically updated information about the current selected block(s). This overlay shows the coordinate of the current selected block based on the closest grid position to the cursor. It also lists the Block Type of every selected layer at that position (if a block exists).</p>
                <p>There is also a 'Save World' button allowing you to save the current world to file so that it may be loaded again in the future.</p>
                <br>

                <h3 id="content3">Grid Selector</h3>
                <hr>
                <p>The Grid Selector is an image which follows the cursor and snaps to the closest grid coordinate. It allows the user to see the block(s) that are currently selected or shows an image of the current block to be placed.</p>
                <img class="doc-image img-responsive" src="../../img/terrainengine2d/Documentation/GridSelector.png" alt="Grid Selector Default Image" >
                <span class="caption tex">Terrain Engine 2D Grid Selector Default Image</span>
                <h4>Image</h4>
                <p>Depending on whether the OSD has either Build or Remove toggled-in the World Tools overlay window-the Grid Selector will show different images. If Build is toggled the Grid Selector will show the current block selected in the OSD for placement. If Remove is toggled the Grid Selector will show its default image. In either case the Grid Selector will resize to match the current Brush Size. <i>Note:  The Grid Selector will be stuck at the Default image and size if the OSD is not active in the hierarchy.</i></p>
                <p>The Default image can be modified by changing the Grid Selector Material. You can set the tint or completely change the texture and material for varying results.</p>
                <br>
              </div>
            </div>
          </div>
        </div>
      </div>
</section>
  

<!-- Footer -->
<footer class="footer" style="background-color:#1C1C1C;">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-3 col-md-3 mx-auto">
        <a href="https://assetstore.unity.com/packages/tools/terrain/terrain-engine-2d-115381?aid=1011l3QhE"><img src="https://api.assetstore.unity3d.com/affiliate/embed/package/115381/icon" alt="Terrain Engine 2D" width="128" height="128" /></a>
      </div>
      <div class="col-lg-6 col-md-6 mx-auto">
       <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <ul class="list-inline text-center">
            <li class="list-inline-item"> 
              <a href="https://twitter.com/mattwilson720" target="_blank">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
                  <i class="fa fa-twitter fa-stack-1x"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="https://www.youtube.com/channel/UCJo_9mKx6oMwdmkyB3IwOOg/" target="_blank">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
                  <i class="fa fa-youtube fa-stack-1x"></i>
                </span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="https://github.com/activegamedev" target="_blank">
                <span class="fa-stack fa-lg">
                  <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
                  <i class="fa fa-github fa-stack-1x"></i>
                </span>
              </a>
            </li>
          </ul>
          <p class="copyright text-muted">Copyright &copy; 2020 Matthew Wilson. All Rights Reserved.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <ul class="list-inline text-center">
            <li class="list-inline-item">
              <a class ="foot-link white" href="mailto:contact@activegamedev.com" target="_blank">Contact</a>
            </li>
            <li class="list-inline-item">
              <a class ="foot-link white" href="https://www.iubenda.com/privacy-policy/8148240" target="_blank">Privacy</a>
            </li>
            <li class="list-inline-item">
              <a class ="foot-link white" href="#">Top</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-3 mx-auto">
      <div class="row">
        <h4>Help support the developer</h4>
      </div>
      <br>  
      <div class="row">
        <div class="col-lg-8 cold-md-10 mx-auto">
          <a class="btn btn-buy " href="https://www.paypal.com/paypalme2/mattwilson720/5" role="button">Donate</a>
        </div>
      </div>
    </div>
  </div>
</div>
</footer>

    <!-- Bootstrap core JavaScript -->
    <!-- <script src="vendor/jquery/jquery.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="../../vendor/popper/popper.min.js"></script>
    <script src="../../vendor/bootstrap/js/bootstrap.min.js"></script>


    <script type="text/javascript">

      $(window).scroll(function() {
      if ($(this).scrollTop())
       {
          var visible = $("#projects-dropdown-menu").is( ":visible" );
          if(visible)
          {
            $('#dropdown-nav').dropdown("toggle");
          }
       }
        
      });


      
    </script>

    <!-- Custom scripts for this template -->
    <script src="../../js/clean-blog.min.js"></script>

          <!-- Google Analytics -->
    <script src="../../js/google-analytics.js"></script>

          <!-- Cookie Policy -->
    <script src="../../js/cookie-policy.js"></script>

  </body>
</html>