The blood (Health Bar) preform design

The blood (Health Bar) preform design

Foreword

This is the Zhongshan University School of Science and Computer Data 2019 Ninth 3D game programming and design work of
all projects and the code which has been uploaded to github, welcome to visit.
github profile: https://starashzero.github.io
3D game programming and design of the home page: https://starashzero.github.io/3DGameDesign
this assignment Project Address: https://github.com/StarashZero/3DGameDesign/tree / master / hw9

Project requirements

Reference Pan teacher blog
blood of the (Health Bar) prefabricated design. Specific requirements are as follows

• IMGUI were used to achieve and UGUI
• Use UGUI, the blood of a child element is the object of the game, any time you need to face the main camera
• Advantages and disadvantages of two implementations
• Given use prefabricated

IMGUI achieve

IMGUI relatively simple to use GUI.HorizontalScrollbar to achieve, other have to do is calculate the position and size of HorizontalScrollbar

    //初步计算血条位置
    Vector3 worldPos = new Vector3(transform.position.x, transform.position.y -0.2f, transform.position.z);
    Vector3 screenPos = Camera.main.WorldToScreenPoint(worldPos);

Because IMGUI not as an object moves, HorizontalScrollbar size naturally, will not change with distance, I simply calculate the distance of the characters and the camera, as the distance increases to reduce
Here are just a simple simulation, so the formula is designed $\frac{1}{1+distance}$

    //计算血条大小比例
    float distance = (transform.position.z - Camera.main.transform.position.z - 10);
    float newScale = (distance < 0 ? 1 : 1 / (1 + distance)) * 0.5f;

Finally, the calculated position and size ratio to generate HorizontalScrollbar

    GUI.HorizontalScrollbar(new Rect(new Rect(screenPos.x - 100*newScale, screenPos.y, 200*newScale, 20*newScale)), 0.0f, health, 0.0f, 1.0f);

Complete code:

public class HealthBar : MonoBehaviour
{
    public float health = 0.5f;

    void OnGUI()
    {
        //初步计算血条位置
        Vector3 worldPos = new Vector3(transform.position.x, transform.position.y -0.2f, transform.position.z);
        Vector3 screenPos = Camera.main.WorldToScreenPoint(worldPos);
        //计算血条大小比例
        float distance = (transform.position.z - Camera.main.transform.position.z - 10);
        float newScale = (distance < 0 ? 1 : 1 / (1 + distance)) * 0.5f;
        //生产HorizontalScrollbar
        GUI.HorizontalScrollbar(new Rect(new Rect(screenPos.x - 100*newScale, screenPos.y, 200*newScale, 20*newScale)), 0.0f, health, 0.0f, 1.0f);
    }
}

UGUI World Place realized

Consistent use of UGUI World Place realize the blood of the process and provide the curriculum blog

• Menu Assets -> Import Package -> Characters Import Resources
• Plane Plane Add Object> - in a hierarchical view, Context Menu -> 3D Object
• Expand the Resource View Standard Assets :: Charactors :: ThirdPersonCharater :: Prefab
• The ThirdPersonController prefabricated drag and drop into the scene, changed its name to Ethan
• Check the following attributes
  • Transform of a Plane Position = (0,0,0)
  • Transform of Ethan's Position = (0,0,0)
  • Transform the Main Camera of Position = (0,1, -10)
• Run Check results
• Ethan context menu by selecting -> UI -> Canvas, Canvas child objects added
• Ethan selection of Canvas, a context menu -> UI -> Slider slider added as target blood slivers
• Run Check results
• Ethan selection of Canvas, the Inspector view
  • Canvas component Render Mode is set to World Space
  • Provided Rect Transform component (PosX, PosY, Width, Height) of (0,2,160,20)
  • Rect Transform assembly disposed Scale (x, y) of (0.01, 0.01)
• Run check the effect should be the head of the Slider Ethan, Ethan keyboard movement, observed
• Expand Slider
  • Select Handle Slider Area, ash ban (disable) the element
  • Select Background, forbidden gray (disable) the element
  • Select the Fill Area Fill, Image modification components Color red
• Select Slider Slider component
  • Set 100 MaxValue
  • Set Value of 75

Add the following script to Canvas LookAtCamera.cs

using UnityEngine;

public class LookAtCamera : MonoBehaviour {

	void Update () {
		this.transform.LookAt (Camera.main.transform.position);
	}
}

UGUI Srceen Space - Overlay 实现

If implemented only UGUI World Place I feel like I do not like this job, but directly to do what I do, so I try to do a UGUI Srceen Space - Overlay version, in fact, this version and IMGUI like, will be considered it as IMGUI to do, but now the blood is an object
preform production consistent with UGUI World Place
first calculates the position of the blood

    //计算healthBar位置
    Vector3 worldPos = new Vector3(transform.position.x, transform.position.y + 1.8f, transform.position.z);
    Vector3 screenPos = Camera.main.WorldToScreenPoint(worldPos);
    healthBar.transform.position = new Vector3(screenPos.x, screenPos.y, screenPos.z);

Then calculates the ratio of the blood, and then using any $\frac{1}{1+distance}$

    //计算scale比例  
    float distance = (transform.position.z - Camera.main.transform.position.z - 10);
    float newScale = (distance<0?1: 1/(1+distance)) *0.5f;
    healthBar.transform.localScale = new Vector3(newScale, newScale, 1);

Complete code:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class OverlayHealthBar : MonoBehaviour
{
    private Slider healthBar;
    void Start()
    {
        healthBar = GetComponentInChildren<Slider>();
    }

    void Update()
    {
        //计算healthBar位置
        Vector3 worldPos = new Vector3(transform.position.x, transform.position.y + 1.8f, transform.position.z);
        Vector3 screenPos = Camera.main.WorldToScreenPoint(worldPos);
        healthBar.transform.position = new Vector3(screenPos.x, screenPos.y, screenPos.z);
        //计算scale比例  
        float distance = (transform.position.z - Camera.main.transform.position.z - 10);
        float newScale = (distance<0?1: 1/(1+distance)) *0.5f;
        healthBar.transform.localScale = new Vector3(newScale, newScale, 1);
    }
}

effect

• IMGUI
  
• UGUI World Place
  
• UGUI Srceen Space - Overlay
  

Advantages and disadvantages

• IMGUI
  advantages:

  • Easy to use, easy to get started
  • No state, easy to maintain

  Disadvantages:

  • Inefficient and need to be regenerated every time all the components
  • No state, not flexible enough to configure, implement motion, animation is too much trouble

• UGUI
  advantages:

  • UI status has to be more convenient to modify its properties or other actions (exercise)
  • The anchor position can be achieved presence adaptive
  • Every life cycle need not be repeated once traversed UI components, higher efficiency
    Disadvantages:
  • Comparative complicated, different functions need to provide different Canvas, and individually configure

Prefabricated use

Using relatively simple, straightforward script can be dragged in Ethan (except lookAtCamera)