SPARKFUL
閲覧しようとしているページの翻訳が完了していません。現在対応中のため、もうしばらくお待ちください!

Blog

Insights from the SPARKFUL teams

用 Particle System 實作模糊效果的圓形進度條

Chelsea Huangdev-notes
name

實現圓形進度條的方式有很多種,最簡易的方式就是調整 Image 的參數: Image Type - Filled 、Fill Method - Radial 360、Fill Origin - Top,這篇文章 裡有更詳細的介紹。但這個方式無法符合所有設計稿的需求,例如模糊效果、圓角、流動效果等等,本篇使用 Particle System 來實現圓形進度條,完成後的成品會類似這樣:

Particle System 有非常多參數,可以做到各種強大的效果,本篇使用 Unity 2017.4.4f1 作為開發工具,每個 Unity 版本的 Particle System 會有些許不同,而這裡只會針對有調整到的參數來說明,更詳細的可以參考官方文件

本篇會分成以下幾個部分來分享:

  1. 用 Particle System 製作一個環形
  2. 用 Script 實現進度條
  3. 調整參數達成各種效果

用 Particle System 製作一個環形

首先建立一個 GameObject 並加上 Particle System,首先要加入適合的 Renderer - Material ,這裡使用漸層的圓形,也可以依照設計需求來做調整,但還是建議要淡入淡出才會讓環形比較滑順:

然後調整這些參數(參數名 | 建議數值 | 說明):

General

Start Lifetime | 1 | 一個粒子可以存活幾秒 Start Speed | 0 | 粒子發射時的初始速度

Emission

Rate over Time | 視需求調整 | 控制環內的粒子個數,越多越滑順,但太多會造成效能浪費,也會造成溢出現象,看起來像相片過曝的感覺。

( 圖片:過少/適中/過多 )

Shape

Shape | Circle | 調整粒子發散的形狀 Radius | 視需求調整 | 控制環型的大小 Radius Thickness | 0 ( 2017 前的版本為 Option emit from edge - false ) | 控制環的粗細 Mode | Loop | 控制粒子發散的路徑

(圖片:Mode - Random / Loop / ping pong / burst spread)

Color over Lifetime

Color | 視需求調整 | 調整環形顏色,可加入漸層效果

Renderer

Material | 視需求調整 | 加入自己需要的粒子材質,Shader 最基本可選用 Particle/Alpha Blended,或視需求調整

(圖片:Shader - Alpha Blended / Additive / Multiply)

用 Script 實現進度條

由於大部分進度條是從 頂端、順時針 增加的,所以要先改變環形的方向:

Shape

Rotation (x:180, y:0, z:-90)

再來我們要新增一個 Script 用來控制進度條,調整 shape.arc 這個參數,可以使圓環由 0% ~ 100% 顯示為 0 度 ~ 360 度,但是這樣會遇到幾個問題:

  1. 當速度不變,而角度越小的時候,花費的時間會越少。這其實不算大問題,要看當時的設計稿是如何要求的,而這裡希望是所有百分比,都能維持相同的時間,所以 shape.arcSpeed 需要調整
  2. 當粒子數量不變,而角度越小的時候,會造成爆棚的現象,所以這裡要將百分比乘上 emission.rateOverTime
using UnityEngine;

public class ParticleRing : MonoBehaviour {

    public ParticleSystem Ring;

    const float MAX_EMISSION_RATE = 60f;

    private void Update () {

        /*
        if (Ring.time >= 1f) {

            Ring.Pause ();
        }
        */
    }

    void StartRing (float progress) {

        progress = Mathf.Max (Mathf.Min (progress, 1f), 0f);

        var shape = Ring.shape;
        shape.arc = 360f * progress;
        shape.arcSpeed = progress;

        var emission = Ring.emission;
        emission.rateOverTime = MAX_EMISSION_RATE * progress;

        Ring.Play ();
    }

    void Dismiss () {

        Ring.Clear ();
        Ring.Stop ();
    }
}

完成後我們試試看現在的效果如何:

大致上已經完成了進度條的功能,如果不想讓 Particle 一直更新的話,可以用 Ring.Pause () 來達成,然後當頁面 Dismiss 的時候記得 Ring.Clear ()。

調整參數達成各種效果

完成了最基本的環狀進度條,之後可以玩玩看 Particle System 的各種參數,看看會造成什麼效果,這裡舉例幾種效果:

Noise

調整 Noise 參數可以增加雜訊,改變粒子的位置,達到以下效果:

Size Over Lifetime

調整粒子在整個生命週期的大小,可以達到以下效果:

還有很多參數都可以嘗試調整看看,會有很多不錯的效果!如果有任何建議歡迎留言。


參考資料

  1. https://www.youtube.com/watch?v=CVsZ98TSEwI
  2. Image via Stuart Rankin, CC Licensed.
Chelsea Huang
Chelsea Huang
Junior Developer @ Fourdesire. 50% curiosity and 50% insanity.
divider
関連記事
name

在 Unity 打造簡易的動作系統

在產品的介面中,適當的提供有意義並精細的動畫,實用性上能直覺的讓使用者理解目前系統的狀態、取得回饋、幫助探索產品,更能在情感上提供愉悅的體驗。此篇將介紹如何在 Unity 環境中建構一個簡易的動作系統,來幫助快速開發介面的動態效果。動...もっと記事を読む
name

在 Unity 裡做 TDD -- FDMonoBehav Framework 的誕生

這篇文章主要是在說明我們如何在 Unity 專案中導入 TDD 開發方法。開發環境主要使用 C# 語言在 Unity 2017.4.4f1 + Visual Studio for Mac Community 7.5.1,並使用 NUnit 和 NSubstitute 來作為開發單元測試專案...もっと記事を読む
name

Unity - iOS TableView 完美移植

TableView 在 app 的開發中可以說是最常使用到的元件了,不論是純遊戲或是應用工具類型都缺少不了它,甚至不少 app 開發的第一課就是嘗試製作一個簡易的 TableView。在 Unity 中雖然有提供 UGUI,但使用起來總是覺得不順手,既然如...もっと記事を読む