圖片

打造銀河

我的計畫是循序漸進地產生一個星系模型,可將星星資料放入各種情境中,並希望針對銀河外觀提供絕佳的視角。

銀河系的初期原型。
銀河粒子系統的早期原型。

為產生銀河,我產生了 100,000 顆粒並模擬銀臂的形成方式,將這些粒子放在螺旋中。我沒有太擔心螺旋形形成的細節,因為這是一個代表模型,而非數學模型。不過,我試著調整螺旋臂的數量,並朝「正確方向」轉動。

在後期的銀河模型中,我特別強調使用粒子的方式,改為搭配粒子圖像,在粒子伴隨粒子上呈現粒子時,讓圖片更具視覺效果。實際的圖像是距離我們約 7, 000 萬光年的螺旋星系圖像,圖像經過操弄,看起來像是銀河。

測量銀河系的比例。
每 GL 單位皆為光年。在這個例子中,球體的寬度是 110,000 光年,涵蓋粒子系統。
切換鏡頭
這是網頁切換或拖曳時的外觀。

正在尋找影格

在遊戲追蹤工具中找到正確的資料列後,下一步就是找出主要迴圈。主要迴圈看起來像是追蹤資料中的重複模式。您可使用 W、A、S、D 鍵來瀏覽追蹤資料:A 和 D 分別左右移動 (依前後順序),以及 W 和 S 放大及縮小資料。如果您的遊戲是以 60Hz 的頻率執行,您的主要迴圈就會是每 16 毫秒重複一次的模式。

看起來有三個執行影格
似乎有三個執行框架

找出遊戲的心跳動作後,即可針對程式碼在每個影格中執行的動作。使用 W、A、S、D 放大功能,直到閱讀函式方塊中的文字為止。

深入查看執行影格
深入瞭解執行影格

使用翻譯切換檢視模式

在兩種檢視模式之間進行翻譯。

為了讓使用者更方便,我們假設有兩種檢視畫面:清單檢視和詳細資料檢視畫面。當使用者輕觸清單檢視中的清單項目時,詳細資料檢視畫面會滑入,清單檢視畫面也會滑出。

檢視區塊階層。

如要達到這種效果,您需要兩個檢視畫面都設有 overflow: hidden 的容器。如此一來,兩種檢視畫面都可在容器中並排顯示,但不顯示任何水平捲軸,而每個檢視畫面都可以視需要在容器中左右滑動。