路邊撿來的偏方

在小哈剛開始接觸遊戲程式設計的時候，偶然看到了這一小段程式碼，在感佩之餘，小哈也在往後的日子將這個方法應用於各式遊戲的開發之中。

hpbar.width = (hpbar.width + targetWidth) * 0.5;

上面這行程式碼出現在一個每一幀都被呼叫的更新函式裏，targetWidth是被計算出來血條應有的寬度，而hpbar.width是實際顯示在畫面上的血條寬。

這行程式碼的目的是在每次血量產生變化的時候，讓畫面上的血條以50%的速率持續靠近它應該有的寬度，如此一來，角色的血量只要有了增減，她的血條都會以一個平順的動畫去展示血量的變化。

靠近演算法的特色

這個偏方的好處就是快！加上程式碼又簡潔，所以在那個Flash遊戲滿天飛的年代，類似這一段程式碼的痕跡隨處可見。

除了上面角色血條的例子之外，能應用這個小小的計算式，將原本冷硬的遊戲畫面轉變為活潑動感的例子比比皆是，比如攝影機跟隨舞台焦點、角色面向滑鼠位置、甚至各種特效的位置動畫等，都能得利於這個小偏方。

這個偏方演算法使用0.5作為靠近速率，是因為這樣的算式只需要一個加法和一個乘法，效能好的無話可說。如果想要進一步調整靠近的速率，那麼就需要改成稍微複雜一點點的算式。

/** 進階的靠近演算法 */
function numberFollowTarget(
    current: number, // 目前的數值
    target: number, // 想要靠近的目標值
    rate: number // 靠近的速率
): number {
    // 回傳更新後的數值
    return current * (1 - rate) + target * rate;
}

這個靠近演算法的算式雖然簡單好用，但是想要用同樣的式子讓旋轉角度或顏色去靠近目標，可能就會碰壁了。明天我們會繼續這個話題，更深入地探討靠近演算法的可能性。

CG示範專案
這期的示範專案是把Playground專案複製(fork)出來寫的，Playground是專門讓人拿來快速開發需要圖表、繪圖等功能的模板專案。
Playground提供的工具都非常易懂好上手，大部分的函式功用看名字就能一目瞭然，同學們也可以自行Fork專案，調換程式碼的順序、改改函式參數、沒有顧慮地玩，這樣很快就能熟悉TypeScript的語法特性了。