Creating our weapon

Now, with a traditional first-person shooter, we shoot a bullet from a gun to damage enemies. However, we will create a camera that will take pictures to damage enemies.

Creating our camera

Now before we can shoot anything, we need to make our camera, and to do this, we are going to create another camera object that is zoomed in and then give it a border to look more realistic. To show how easy it is to do, let's get started! Perform the following steps:

  1. The first thing we need to do is go to the flashlight Spotlight object we created earlier. So, with it selected, double-click on it to center the camera on it.
  2. Our camera weapon is going to be another object, which will be a child of the FirstPersonCharacter object. To do this, first select the FirstPersonCharacter object that is located on our FPSController object and then right-click on it from the Hierarchy and then select Create Empty. Also, in the Inspector section for this newly created object, confirm whether the object's position is 0, 0, 0. If it isn't, set it at that position. Finally, name the object Photo Camera. Take a look at the following screenshot:
    Creating our camera
  3. Next, add a camera component by clicking on the Add Component button at the bottom of the Inspector tab and then putting in the text Camera in the search bar before selecting it.

    Note

    Alternatively, you can just navigate to Component | Add… from the top bar to bring up the menu.

  4. This camera will be zoomed in from the normal camera, so I'm going to change the Field of View value to 30. Now, switch the Scene tab over the Game tab so you can see what we will be doing. This will aid in understanding what each of these properties do.
  5. We also want this camera to be on top of the previously created one, so we are going to change the Depth value to 1 (higher numbers put things in front of the other cameras).
  6. This being said, we still want to see our previous camera as well in the background, so we're going to set the Viewport Rect values to put our new camera in the center of the screen at 75% of the size of the previous one. To do this, set the X and Y properties in the Viewport Rect option to .125 and the W and H properties to .75.
    Creating our camera
  7. Now, in our game, this camera isn't just going to be a camera; it's also going to have a border around it. In this case, it'll be a cell phone. From the Chapter 9/Art Assets folder included in the example code, grab the phone.png file and move it into the Materials folder inside your project browser.
  8. Once it's imported, select it to bring up the properties in the Inspector tab. By default, in a 3D project, .png files will be imported with a Texture Type value of Texture. We want to change it to Sprite (2D and UI), so click on Apply.
  9. Next, we need to add this texture to our inner camera. To do this, let's create a Panel object by going to GameObject | UI | Panel. As you recall, panels resize themselves to fit their canvas.
  10. Next go to the Panel object and then drag and drop our phone image into the Source Image slot. The image shows up, but it's semi-transparent. To fix this, go to the Color property and change the color to be fully white.
  11. The phone is not sized really well and doesn't match a phone's normal size, so let's check Preserve Aspect and you'll see the image now looks correct, but is also somewhat zoomed in. Let's click on Set Native Size next and you'll see the image resize it once more. Then, go to the Anchors Preset menu, hold down Shift + Alt and then click on the middle-middle option to center the camera to the world.
  12. One of the things you may note now is that the camera stays the same size, no matter where the screen is. To fix this, select the Canvas object and then under the Canvas Scaler component, change the UI Scale Mode to Scale with Screen Size.
    Creating our camera
  13. Right now, I have the aspect ratio set to 4:3, which we can see in the Game tab in the top-left corner just below the tab. This ratio is of the same size as old television sets and monitors, but the code we just created also works with widescreen monitors and makes the camera look much better. So, let's make the game use an aspect ratio of 16:9. We can do this by clicking on the drop-down list beside 4:3 and then selecting 16:9.

    If you play the game at this point, the game should look something like the following screenshot:

    Creating our camera

    Looks pretty good! But right now, the camera is always up there, and I only want to see it if the player right-clicks to zoom in.

  14. So, with this in mind, let's create another C# script named PhoneBehaviour and open it inside of your IDE.
  15. Place the following code into the PhoneBehaviour class as follows:
    using UnityEngine;
using System.Collections.Generic; // List

public class PhoneBehaviour : MonoBehaviour
{

    public List<GameObject> phoneObjects;

    private bool cameraActive = false;

    void Start()
    {
        SetCameraActive(false);
    }

    // Update is called once per frame
    void Update () {
        // Are we holding down the right mouse button
        if (Input.GetMouseButton(1) && !cameraActive)
        {
            SetCameraActive(true);
        }
        else if(cameraActive && !Input.GetMouseButton(1))
        {
            SetCameraActive(false);
        }

    }

    void SetCameraActive(bool active)
    {
        cameraActive = active;

        foreach (var obj in phoneObjects)
        {
            obj.SetActive(active);
        }
    }
}

This script basically makes it so when the player holds down the right mouse button, we will turn on all of the objects that we placed in phoneObjects and then when we release, we turn them off. We only want to do this on frames when it changes from one state to another (turning it on every frame would be inefficient), so we added in a Boolean to keep track where we were in the last frame.

Go in and add the PhoneBehaviour component to the FirstPersonCharacter object. From there change the Size of Phone Objects to 2 and assign Photo Camera and our Canvas' Panel to the property.

Creating our camera

Save our project, level, and play the game!

Creating our camera

Now, the camera will only come up whenever we hold down the right mouse button! Awesome! It's just like a sniper rifle in most FPS games.

Shooting our camera

Next, we want to add the ability to shoot our weapon and flash it on the screen whenever the camera is shot. To simulate this behavior, we will first create an image to be placed over our entire screen. We perform the following steps:

  1. Just to make it easier to see things, let's first go to the Photo Camera object and disable it by unchecking the checkbox by the object's name from the Inspector menu. Afterwards, do the same thing for the Panel object, and while we are here, let's rename it to Phone Border.
    Shooting our camera
  2. Now that we are back to a normal screen, let's add in a panel to act as our flash. To do this, go to the Hierarchy tab and right-click on our Canvas object. From there, select UI | Panel. Rename our panel's name to Camera Flash and change the color to be fully transparent because we will be changing its color via code.
    Shooting our camera
  3. Next, go back to the PhoneBehaviour file, and add in the following using statement:
    using UnityEngine.UI; // Image
  4. Then, add the following variable:
    public Image cameraFlash;
  5. Now, a flash contains two parts: fading to white and then fading to a transparent color. The pieces of code doing both of these things are very similar, so we will create a helper function to do this for us, named Fade.
  6. To do this, first, we will need to add in the following using statement:
    using System.Collections; // IEnumerator
  7. Take a look at the following code:
        IEnumerator Fade(float start, float end, float length,
                  Image currentObject)
    {
        if (currentObject.color.a == start)
        {
            Color curColor;
            for (float i = 0.0f; i < 1.0f; 
                 i += Time.deltaTime * (1 / length))
            {
/* 
Cannot modify the color property
directly, so we need to create a copy 
*/
                curColor = currentObject.color;

/*
Do a linear interpolation of the value
of the transparency from the start value to the end value in equal
increments
*/
                curColor.a = Mathf.Lerp(start, end, i);

                // Then we assign the copy to the original 
                // object
                currentObject.color = curColor;

                yield return null;
            }
            curColor = currentObject.color;

/*
ensure the fade is completely finished
(because lerp doesn't always end on the exact value due to rounding errors)
*/
            curColor.a = end;
            currentObject.color = curColor;
        }
    }

    As you may recall from Chapter 1, 2D Twin-stick Shooter, we can use coroutines to pause functionality, yielding for a time and then resuming functionality. The IEnumerator class holds the current state of the program and tells us where to continue. The yield return here is asking us to stop the function now and resume after a period.

    Because coroutines are just functions, we can also have parameters in them, just as in the preceding function. With this in mind, we can also nest them together in order to have complex interactions and use our abstracted functions in multiple ways to create interesting behaviors.

  8. Then, we will call this function twice with our main function, CameraFlash, as follows:
    IEnumerator CameraFlash()
{
    yield return StartCoroutine(Fade(0.0f, 0.8f, 0.2f, cameraFlash));
    yield return StartCoroutine(Fade(0.8f, 0.0f, 0.2f, cameraFlash));
    StopCoroutine ("CameraFlash");
}

    Note

    For more examples on how coroutines can be used, check out http://unitypatterns.com/introduction-to-coroutines/ and http://unitypatterns.com/scripting-with-coroutines/.

  9. Finally, this function will never be called if we don't call it, so add the following code to the end of the PhoneBehaviour scripts' Update function:
            if (cameraActive && Input.GetMouseButton(0))
        {
            StartCoroutine(CameraFlash());
        
  }
  10. Save the file and go back to the Unity Editor. Finally, back at the Photo Camera object, assign the Camera Flash object to the Camera Flash variable.
  11. Save the scene (Ctrl + S), click on the Play button, and try out your new camera. Take a look at the following screenshot:
    Shooting our camera

Looks like everything is in working order! We can look around with our camera, zoom in and out, and shoot pictures.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset