Start off by copying your world texture into your project Assets folder in AssetsSpritesEnvironment, and use any image you wish to use or generate one from http://donjon.bin.sh/fantasy/world/ or http://donjon.bin.sh/world/ like I have done.

With that in place, create a new scene in AssetsScene and call it World (this has to be the same as the name used in your NavigationManager script). In your scene, drag your world texture to the hierarchy and update your MainCamera script to show the starting region for your world.

As the world texture I have used is rather large, I have set this to the top-left region of the map as shown in the following screenshot:

With the world that the player can travel to in place, we need to add the player to the map and some places of interest.

Adding the player is simple; just create a new empty game object and call it player, then add the Rigidbody2D and BoxCollider2D components to it so that it will be able to interact with other points on the map. (You could use location testing, but it's simpler to use the physics system and it's not much overhead.)

Finally, it's best for the player to have something to see moving when traveling, so add a Sprite Renderer to the player game object and use a sprite image that suits it. I used the running hero sprite for effect but you could use whatever you wish.

You should end up with something like the following:

Creating prefabs is very easy; just start creating a game object as you would do normally and once you are happy with the result, drag the whole object to the project view. The beauty is that just about anything can become a prefab for reuse in your game.

Note

When you create a prefab and use it in your scene, any changes to the prefab will be automatically updated on all the objects you created with that prefab. However, changes to those objects themselves do not update the prefab or any other copies. All changes are one way from the prefab itself.

If you want to update the prefab, select the Prefab option in the editor and change it. Alternatively, select an instance in the scene, change the required properties, and then click on Apply to save the changes back to the prefab, as shown in the following screenshot:

This will only affect existing components and properties that were already on the prefab. To add new components or scripts to the prefab, you must edit the prefab itself.

The following screenshot shows a game object setup for a place of interest on our map as an empty game object with a simple BoxCollider2D component (set as a trigger). We can also see the NavigationPrompt script we used in earlier chapters to bring up the traveling GUI.

Finally, rename the new prefab to MapPoint so that we know what the prefab is for in our folder structure.

With the prefab created, just drag it to the project's Assets window in AssetsPrefabsEnvironment. You will get a new Prefab asset for a map's place of interest, as shown in the following screenshot:

Once the prefab is created, we can start to use it since this game object has now become the first instance of our MapPoint prefab. So, rename it to Home and place it over the town where the player starts, and then create a new tag for Home so that we can add it to our NavigationManager script.

Next, create a new instance of our MapPoint prefab by dragging the prefab on to the scene and placing it over the town of Kirkidw. Rename it to Kirkidw and create/set a tag with the same name.

For the best results and to make the scene easy to read, add any new map points as children of the background texture (worldmap); this keeps the points of interest both anchored to the texture and neatly organized.

The map points we have defined are set as triggers. We use triggers when we do not want any physics interactions between the collider and other rigid bodies; all we want is to be notified that one collider has moved over (in the case of 2D) or interacted with another collider.

As we are now using triggers, we need to swiftly update our NavigationPrompt script to work with triggers. So, open the NavigationPrompt script and add the following function in it:

void OnTriggerEnter2D(Collider2D col)
{
  //Only allow the player to travel if allowed
  if (NavigationManager.CanNavigate(this.tag))
  {
    showDialog = true;
  }
}

The function in the preceding code does exactly the same as the OnCollisionEnter2D function, which we already have, but this will now respond to the colliders that have been set as triggers using the is Trigger flag.

As the player can now venture out of town, we need to update our NavigationManager script with additional places to visit, including our home town. We can do this simply by adding additional routes to our NavigationManager script as follows:

public static Dictionary<string, Route> RouteInformation = new Dictionary<string, Route>() {
  { "World", new Route {
    RouteDescription = "The big bad world", CanTravel = true}},
  { "Cave", new Route {
    RouteDescription = "The deep dark cave", CanTravel = false}},
  { "Home", new Route {
    RouteDescription = "Home sweet home", CanTravel = true}},
  { "Kirkidw", new Route {
    RouteDescription = "The grand city of Kirkidw", CanTravel = true}},
};

Nice and easy; although you should note one small flaw. We use the scene name as a way to identify the area that we want to travel to and currently our home scene is called Main. So, rename the Main scene to Home, which should leave you with the following scenes in AssetsScenes:

With the map set up, we can head into the land of scripting to handle the players. Additionally (as highlighted earlier), we also need to ensure that the player doesn't move when the navigation GUI is displayed.

Before we begin, you should recall earlier that I mentioned about screen and world space conversion and the need to convert 3D (Vector3) coordinates to 2D (Vector2 or zero, I valued Vector3) else our calculations will be off. As our map will be controlled by click or touch (to spice things up a bit), we need to be able to access where the player has interacted on our map.

To this end, I added a set of extension methods to a new class called WorldExtensions in AssetsScriptsClasses, replacing its contents with the following:

using UnityEngine;
public static class WorldExtensions
{
  public static Vector3 ToVector3_2D(this Vector3 coordinate)
  {
    return new Vector3(coordinate.x, coordinate.y, 0);
  }

  public static Vector2 GetScreenPositionIn2D(this Vector3 screenCoordinate)
  {
    Vector3 wp = Camera.main.ScreenToWorldPoint(screenCoordinate);
    return new Vector2(wp.x, wp.y);
  }

  public static Vector3 GetScreenPositionFor2D(this Vector3 screenCoordinate)
  {
    Vector3 wp = Camera.main.ScreenToWorldPoint(screenCoordinate);
    return wp.ToVector3_2D();
  }
}

The following extensions at the end of the current script are just for simplicity, but you could define them anywhere:

var clickPoint = WorldExtensions.GetScreenPositionFor2D(Input.mousePosition);

var clickPoint = Input.mousePosition.GetScreenPositionFor2D();

using UnityEngine;

public class MapMovement : MonoBehaviour
{
  Vector3 StartLocation;
  Vector3 TargetLocation;
  float timer = 0;
  bool inputActive = true;
}

void Update () {

  if (inputActive && Input.GetMouseButtonUp(0))
  {
    StartLocation = transform.position.ToVector3_2D();
    timer = 0;
    TargetLocation = WorldExtensions.GetScreenPositionFor2D(Input.mousePosition);
  }
  else if (inputActive && Input.touchCount == 1)
  {
    StartLocation = transform.position.ToVector3_2D();
    timer = 0;
    TargetLocation = WorldExtensions.GetScreenPositionFor2D(Input.GetTouch(0).position);
  }
}

  if (TargetLocation != Vector3.zero && TargetLocation != transform.position && TargetLocation != StartLocation)
  {
    transform.position = Vector3.Lerp(StartLocation, TargetLocation, timer);
    timer += Time.deltaTime;
  }

private List<Action<bool>> uiEventSubscribers = new List<Action<bool>>();

// Subscribe method for UI manager
public void SubscribeUIEvent(Action<bool> subscriber)
{
  uiEventSubscribers.Add(subscriber);
}

// Broadcast method for UI manager
public void BroadcastUIEvent(bool uIVisible)
{
  foreach (var subscriber in uiEventSubscribers.ToArray())
  {
    subscriber(uIVisible);
  }
}

// Unsubscribe method for UI manager
public void UnSubscribeUIEvent(Action<bool> subscriber)
{
  uiEventSubscribers.Remove(subscriber);
}

// Clear subscribers method for manager
public void ClearAllUIEventSubscribers()
{
  uiEventSubscribers.Clear();
}

void DialogVisible(bool visibility)
{
  showDialog = visibility;
  MessagingManager.Instance.BroadcastUIEvent(visibility);
}

showDialog = false -> DialogVisible(false);

showDialog = true -> DialogVisible(true);

void Start()
{
  MessagingManager.Instance.SubscribeUIEvent(UpdateInputAction);
}

private void UpdateInputAction(bool uiVisible)
{
  inputActive = !uiVisible;
}

MessagingManager.Instance.SubscribeUIEvent(uiVisible => inputActive = !uiVisible);

bool inputReady = true;

private void UpdateInputAction(bool uiVisible)
{
  inputReady = !uiVisible;
}

inputActive = inputReady;

Getting curvy

If you recall, back in Chapter 3, Getting Animated, I showed you the animation curves that can alter how a sprite or inspector value can be changed over time. You can also use these just about anywhere in Unity. So, we'll apply this to our MapMovement script to control how the player transits from his start position to his destination. To do this, simply add a new public parameter to the top of the MapMovement script (this can work on any script implementing MonoBehaviour) as follows:

public AnimationCurve MovementCurve;

When viewed from the editor, this will give you the custom inspector for an animation curve as shown in the following screenshot:

Note

You have to configure the curve initially from the editor for it to do anything; the default is simply a flat line with no movement.

When you click on the curve, you will get the animation curve editor, as shown in the following screenshot:

By default, no curve is defined and you have to configure a new curve. In the preceding screenshot, you can see a basic linear curve that grows over time. But this being an editor, you can apply just whatever kind of curve you want—either start with one of the presets at the bottom of the editor or start altering the curve by adding new animation keys (by right clicking on the curve and selecting Add key) and changing the curve characteristics. You can even create something as wacky as the one shown in the following screenshot:

With your curve parameter available and configured, we can then alter our previous Lerp function in the MapMovement script to use the curve parameter as follows:

if (TargetLocation != Vector3.zero && TargetLocation != transform.position && TargetLocation != StartLocation)
{
  transform.position = Vector3.Lerp(StartLocation, TargetLocation, MovementCurve.Evaluate(timer));
  timer += Time.deltaTime;
}

This, now gives us the ability to control how the Lerp function behaves at a very fine level.

Tip

This curve could be updated procedurally to alter the curve if there are mountains or other difficult terrain to maneuver over, or you could switch from doing a fixed input (as shown in the following code) and use more physics/forces to alter the interaction between the player and the terrain.

  if (!inputReady && inputActive)
  {
    TargetLocation = this.transform.position;
    Debug.Log("Stopping Player");
  }
  inputActive = inputReady;
}

When you are transitioning between scenes/levels within Unity, it can appear a bit jarring to the player when a scene just freezes and then another one pops up. Even when you make the loading of the scene as fast as possible, there is still a flicker on the screen that is not smooth or fluid (as designers like to say).

Thankfully, we can easily fix this by adding some code to manage the transition between the towns and world in our game. We will do this by adding a Fading manager to our game.

To start off, in the same way as we did with the Conversation manager in the previous chapter, we will create a new class and apply our singleton framework to it. This is simply because there should only ever be one agent in our game managing the fading of a scene so it does not cause an issue if a player enters and then immediately exits a scene.

So, create a new FadeinOutManager C# script in the root of your project's Assets folder and replace its contents with the following code to create a singleton manager that can be used by any scene:

public class FadeInOutManager : Singleton<FadeInOutManager>{
// guarantee this will be always a singleton only – 
// can't use the constructor!
  protected FadeInOutManager() { } 
}

With this in place, we can start building the manager. First, start off with some properties as shown in the following code:

  // The texture to display when fading
  private Material fadeMaterial;
  // Fading parameters
  private float fadeOutTime, fadeInTime;
  private Color fadeColor;
 
  //Place holder for the level you will be navigating to 
//(by name or index)
  private string navigateToLevelName = "";
  private int navigateToLevelIndex = 0;
 
  //State to control if a level is fading or not, 
  //including public property if access through code
  private bool fading = false;
  public static bool Fading
  {
    get { return Instance.fading; }
  }

The properties are documented and used to control how long the fade should last when leaving the current scene into the next; there is an additional Material property so that you can use different textures to display on the screen when fading (maybe your game logo). Finally, there are some tracking properties if you are using the class to navigate scenes by index or scene name.

With the properties in place, we now need the following initialization code:

  void Awake () {
    //Setup a default blank texture for fading if none is supplied
    fadeMaterial = new Material("Shader "Plane/No zTest" {" +
      "SubShader { Pass { " +
      "    Blend SrcAlpha OneMinusSrcAlpha " +
      "    ZWrite Off Cull Off Fog { Mode Off } " +
      "    BindChannels {" +
      "      Bind "color", color }" +
      "} } }");
  }

In the previous code, we are simply setting up a default fading material in case you don't pass one as a parameter.

Next, as we need to draw our fading image (the image is a part of the material, even if it's only a black color) to the whole screen, we are going to need a little helper function to do that using some of Unity's primitive drawing functions.

Now, you can create a new C# class to hold the following drawing function if you wish, but I have simply appended it to the FadeInOutManager script. Use whichever method suits you; I kept it in FadeInOutManager because it's integral to the operation of that function. It's still static, so it is still reusable wherever I need it. The code of the required class is as follows:

public static class DrawingUtilities
{
  //Helper utility to draw a full screen texture
  public static void DrawQuad(
    Material aMaterial, 
    Color aColor, 
    float aAlpha)
  {
    aColor.a = aAlpha;
    aMaterial.SetPass(0);
    GL.PushMatrix();
    GL.LoadOrtho();
    GL.Begin(GL.QUADS);
    GL.Color(aColor);
    GL.Vertex3(0, 0, -1);
    GL.Vertex3(0, 1, -1);
    GL.Vertex3(1, 1, -1);
    GL.Vertex3(1, 0, -1);
    GL.End();
    GL.PopMatrix();
  }
}

This is just a very basic function using the low-level graphics library (the GL library, more information about this library can be found at http://docs.unity3d.com/ScriptReference/GL.html) to define a simple 2D plane that will be displayed in front of the camera. On that plane, I set the material/texture that will be drawn with it and then adjust the alpha (transparency) of the plane. To see how this is used, let's add the following core fading coroutine to the manager:

  private IEnumerator Fade()
  {
    float t = 0.0f;
    while (t < 1.0f)
    {
      yield return new WaitForEndOfFrame();
      t = Mathf.Clamp01(
        t + Time.deltaTime / fadeOutTime);
          DrawingUtilities.DrawQuad(
            fadeMaterial, 
            fadeColor, 
            t);
    }
    if (navigateToLevelName != "")
      Application.LoadLevel(navigateToLevelName);
    else
      Application.LoadLevel(navigateToLevelIndex);
    while (t > 0.0f)
    {
      yield return new WaitForEndOfFrame();
      t = Mathf.Clamp01(t -                   Time.deltaTime / fadeInTime);
      DrawingUtilities.DrawQuad(
        fadeMaterial,
        fadeColor,
        t);
    }
    Fading = false;
  }

This coroutine is very simple and yet so powerful; walking through it, what happens is as follows:

Now, it is very important how we launch this coroutine because it could be interrupted at any time, either by the existing game or by another fade being requested before the last fade finished. To be able to stop it from anywhere in the game, we need to ensure it is only launched using its string name. This allows us to use the StopAllCoroutines function to kill it.

To show coroutines, the following is the method used to start the fading process:

  private void StartFade(float aFadeOutTime, float aFadeInTime, Color aColor)
  {
    fading = true;
    Instance.fadeOutTime = aFadeOutTime;
    Instance.fadeInTime = aFadeInTime;
    Instance.fadeColor = aColor;
    StopAllCoroutines();
    StartCoroutine("Fade");
  }

As you can see, when fading starts, we set the flag to denote fading has started, capture the values for the manager used to control the fading motion, stop any existing coroutines from running that might be from the existing scene or a previous fading action, and kick off the Fade coroutine.

All that's left to complete our FadeInOutManager script is the public function that scenes will be able to use to kick off the process. The code for this script is as follows:

private void StartFade(
  float aFadeOutTime, 
  float aFadeInTime, 
  Color aColor)
{
  fading = true;
  Instance.fadeOutTime = aFadeOutTime;
  Instance.fadeInTime = aFadeInTime;
  Instance.fadeColor = aColor;
  StopAllCoroutines();
  StartCoroutine("Fade");
}

Then, we need the following public static (available anywhere) function that you can use to start the level fading process:

public static void FadeToLevel(
  string aLevelName, 
  float aFadeOutTime, 
  float aFadeInTime, 
  Color aColor)
{
  if (Fading) return;
  Instance.navigateToLevelName = aLevelName;
  Instance.StartFade(aFadeOutTime, aFadeInTime, aColor);
}

I've included many more overloads for the manager in the sample project. So, it is as flexible as it needs to be for the game, including the ability to pass a material to change the fading image, specify alternate fading values, or fade to another level by index instead of name.

    public static void NavigateTo(string destination)
    {
        //Application.LoadLevel(destination); <- commented out for now as we have nowhere to go :D
    }

    public static void NavigateTo(string destination)
    {
        FadeInOutManager.FadeToLevel(
          destination, 
          2f, 
          2f, 
          Color.black); 
    }

To add new scenes, we need to set up the Build Settings options for our project to tell it we have some additional scenes to choose from. Open Build Settings by navigating to File | Build Settings from the main menu or use Ctrl + Shift + B on the keyboard. The Build Settings window looks as shown in the following screenshot:

From here, you control how each platform will be built and what is contained within the build. It's also used to change the default editor settings and screen aspects (as described in Chapter 4, The Game World) that are available. We will cover more on this later in Chapter 12, Deployment and Beyond, when we start building for platforms such as Windows, Windows Phone, iOS, or Android.

As you can see in the following screenshot, the Scenes In Build list is currently empty. So when we run the game, it will just run the current scene in the editor. To update this list, either drag the scenes from the project hierarchy or use the Add Current button to add the scene you are currently viewing. So, add the two current scenes into the Scenes In Build list as shown here:

Now, one important thing to note is the order of the scenes. As you may expect, Unity will always start the project with scene 0, so be sure that the town is the first scene in the list. You can do this by simply dragging the scenes up or down.

Now, when you start the game from the town and run screaming from the town, you will nicely fade out from the town into the Big Bad world.