Unity中多張圖片形成百葉窗效果(親測有效)

首先在Unity中準備好8張圖片,也可以其他數量的圖片,最好的是這幾張圖片都是從一張圖片分割下來的,能確保這幾張圖片重新拼回原來的圖片。首先在場景中新建一個名WindowShades的C#腳本,並把該腳本隨便掛載場景中一個激活的遊戲物體上,然後打開腳本,並複製以下的代碼!!!

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


public class WindowShades : MonoBehaviour {
    public bool isAmount;   //用來觸發是否開始運動
    public float fillAmount_01 = 0;  //四張圖片的初始值爲0
    public float fillAmount_02 = 0.45f;   //四張圖片的初始值爲0.45
    public GameObject Text_UI; //圖片顯示完畢後顯示文字
    public Image[] image_Go_01; //間隔的四張圖片
    public Image[] image_Go_02; //間隔的四張圖片
    public GameObject Button_UI; //圖片顯示完畢後顯示按鈕

	void Start () {
        InIt_WHT();
        isAmount = true;
	}
    void Update()
    {
        Image_WHT();
    }

    private void Image_WHT()
    {
        if (isAmount) {
            fillAmount_01 += Time.deltaTime / 10;
            fillAmount_02 += Time.deltaTime / 10;
            for (int i = 0; i < image_Go_01.Length; i++) {
                image_Go_01[i].fillAmount = this.fillAmount_01;
                if (i > image_Go_01.Length) {
                    i = 0;
                }
            }
            for (int i = 0; i < image_Go_02.Length; i++) {
                image_Go_02[i].fillAmount = this.fillAmount_02;
                if (i > image_Go_02.Length) {
                    i = 0;
                }
            }
            if (fillAmount_01 >= 0.55f)
            {
                Text_UI.SetActive(true);
                Button_UI.SetActive(true);
                this.isAmount = false;
            }
        }
    }

    private void InIt_WHT()
    {
        for (int i = 0; i < image_Go_01.Length; i++) {
            image_Go_01[i].fillAmount = fillAmount_01;
        }
        for (int i = 0; i < image_Go_02.Length; i++) {
            image_Go_02[i].fillAmount = fillAmount_02;
        }
    }   
}

然後保存該腳本,並把需要賦值的遊戲物體在Inspector屬性面板中進行賦值(數組中圖片的數量可以隨意),然後運行遊戲,在這裏要注意的是要把形成百葉窗效果的圖片設置成如下的參數!

Inspector屬性面板中進行賦值的遊戲物體:
在這裏插入圖片描述

形成百葉窗效果的圖片要設置的參數(注意Fill Origin的方向):
在這裏插入圖片描述

最後你就會看到圖片就像是幾張圖片共同孔雀開屏一樣的而效果從而形成一張大圖片,感覺非常的好看!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章