The elemental switch charging process

The PowerSource component already has the required code to switch from one element to another. Let's link UI elements to it in order to give feedback to the player. We'll first add a progress slider to indicate how long the elemental switch process takes.

The progress prefab

Let's create the Progress prefab, which will be a slider to indicate any kind of progress in the game—in this case, the elemental switch's duration, which will look like this:

The progress prefab

Follow these steps to create our Progress prefab:

  1. In the Project view, enter progress in the search field.
  2. Drag Control - Simple Progress Bar into our InGame2DUI.
  3. Rename this new instance to Progress.
  4. For its attached UISprite component:
    • Change Size to 400 x 35
    • Set its Color Tint to {R:180, G: 180, B: 180, A: 220}
  5. For its attached UISlider component:
    • Set Value to 0
  6. Select its Foreground child GameObject, and for its UISprite:
    • Set Color Tint to {R: 255, G: 230, B: 200, A: 255}
  7. Select its Thumb child GameObject and delete it.
  8. Drag it into our Assets/Resources/Prefabs folder to make it a prefab.
  9. The prefab is ready; delete our InGame2DUI | Progress from the scene.

OK, now that we have our Progress prefab ready, let's implement it through code.

Progress slider implementation

We will use the PowerSource component to make sure the progress slider is updated with the current energy value of the power source. The energy is a float between 0 and 1, which will be perfect for our slider:

  1. Select the PowerSources | Source1 GameObject.
  2. Right-click and select Edit Script on its attached PowerSource component's name.

Within our PowerSource.cs script, we already have a SwitchElement() method that starts the SwitchElementRoutine() coroutine. This coroutine currently has only the yield return null instruction, doing nothing.

Let's replace this coroutine's single line with the following code to make sure the energy increases at each frame, updating the slider at the same time:

//Hide elemental switch menu
GameManager.Instance.ShowElementalSwitch(null);
// Set the energy to zero
energy = 0;
// Make it unavailable while it's charging
available = false;
// Make it non-draggable while charging
dragObject.enabled = false;
// Disable associated light
light.enabled = false;
// Create the new slider
CreateProgressSlider();
// At each frame, while energy is not full
while (energy < 1)
{
  // Add a little energy
  energy += (Time.deltaTime / switchDuration);
  // Update associated progress slider
  progressSlider.value = energy;
  // Wait until next frame
  yield return null;
}
// When finished charging, make sure it's set to 1
energy = 1;
// Set the power source type to the new one
SetNewElement(newElement);
// Make it available again
available = true;
// Make it draggable again
dragObject.enabled = true;
// Re-enable the light
light.enabled = true;
// Destroy the slider
Destroy (progressSlider.gameObject);

OK. You can see that we call the method CreateProgressSlider(). Let's add it to the same file to add the progress bar instantiation:

// Method to create the progress slider
private void CreateProgressSlider()
{
  // Instantiate the new progress slider
  GameObject progressObject;
  progressObject =  NGUITools.AddChild(uiRoot2D, 
       Resources.Load("Prefabs/Progress") as GameObject);
  // Retrieve its attached UISlider component
  progressSlider = progressObject.GetComponent<UISlider>();
  // Add a FollowObject to the slider
  progressSlider.gameObject.AddComponent(typeof(FollowObject));
  // Retrieve and store it                        
  FollowObject sliderFollowObject =
    progressSlider.GetComponent<FollowObject>();
  // Configure it to follow this power source
  sliderFollowObject.target = transform;
  sliderFollowObject.mainCamera = 
      GameObject.Find("GameCamera").camera;
  sliderFollowObject.uiCamera = 
    NGUITools.FindCameraForLayer(9);
  sliderFollowObject.offset = new Vector3(0,0.25f,0);
}

OK, great. Everything is ready. Now, we need to link our elemental switch buttons to our power sources so that they request the element changes.

Linking elemental buttons

When an elemental switch button is clicked in our UI, we would like the current power source—the one with the elemental switch menu displayed above it—to start changing its current element. We can use our GameManager component for this.

Open our GameManger.cs script, and add this variable declaration:

// Current power source with elemental switch UI
public PowerSource currentPowerSource;

OK, now, let's add the four simple methods that will be called upon clicking on their respective elemental switch buttons:

// Execute when Fire button is pressed
public void FirePressed()
{
  // Request the power source to switch element;
  currentPowerSource.SwitchElement(Elements.Type.Fire);
}

// Execute when Ice button is pressed
public void IcePressed()
{
  // Request the power source to switch element;
  currentPowerSource.SwitchElement(Elements.Type.Ice);
}

// Execute when Lightning button is pressed
public void LightningPressed()
{
  // Request the power source to switch element;
  currentPowerSource.SwitchElement(Elements.Type.Lightning);
}

// Execute when Water button is pressed
public void WaterPressed()
{
  // Request the power source to switch element;
  currentPowerSource.SwitchElement(Elements.Type.Water);
}

Good. Let's just add the final line of code that will set the currentPowerSource variable to the power source on which the elemental switch UI is displayed.

Add this instruction as the first line in the if(targetObject != null) condition of the ShowElementalSwitch() method:

// Set the elements switch's current power source
currentPowerSource = targetObject.GetComponent<PowerSource>();

Great. Save all code files, and return to Unity. Now, we simply have to assign our four buttons to their respective methods:

  1. Select our InGame2DUI | ElementSwitch | Fire GameObject.
  2. For its attached UIButton component:
    • Drag GameManager into the Notify field of On Click.
    • Set Method to GameManager | FirePressed.

Repeat the preceding steps for each of the other three elemental buttons. And that's it! By clicking on elemental buttons, our power sources change themselves after the charging duration, indicated by the progress bar.

During the charging process, the power source is no longer draggable, and the elemental switch UI won't appear. The existing code handles the light's color and mesh material to correspond to the new element.

Now, let's see how we can make a button unavailable through code to correct an issue.

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

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