打造銀河
我的計畫是循序漸進地產生一個星系模型,可將星星資料放入各種情境中,並希望針對銀河外觀提供絕佳的視角。
![銀河系的初期原型。](https://web.developers.google.cn/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/S5ZbLFPB3RnfRTOT35mW.png?hl=zh-tw)
為產生銀河,我產生了 100,000 顆粒並模擬銀臂的形成方式,將這些粒子放在螺旋中。我沒有太擔心螺旋形形成的細節,因為這是一個代表模型,而非數學模型。不過,我試著調整螺旋臂的數量,並朝「正確方向」轉動。
在後期的銀河模型中,我特別強調使用粒子的方式,改為搭配粒子圖像,在粒子伴隨粒子上呈現粒子時,讓圖片更具視覺效果。實際的圖像是距離我們約 7, 000 萬光年的螺旋星系圖像,圖像經過操弄,看起來像是銀河。
![測量銀河系的比例。](https://web.developers.google.cn/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/dQZVXko0eZdufru9zpqr.png?hl=zh-tw)
![切換鏡頭](https://web.developers.google.cn/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/73JKSfkcxMnLw661RnKA.png?hl=zh-tw)
正在尋找影格
在遊戲追蹤工具中找到正確的資料列後,下一步就是找出主要迴圈。主要迴圈看起來像是追蹤資料中的重複模式。您可使用 W、A、S、D 鍵來瀏覽追蹤資料:A 和 D 分別左右移動 (依前後順序),以及 W 和 S 放大及縮小資料。如果您的遊戲是以 60Hz 的頻率執行,您的主要迴圈就會是每 16 毫秒重複一次的模式。
![看起來有三個執行影格](https://web.developers.google.cn/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/OaqgG1IveqQcmrvLbeHs.png?hl=zh-tw)
找出遊戲的心跳動作後,即可針對程式碼在每個影格中執行的動作。使用 W、A、S、D 放大功能,直到閱讀函式方塊中的文字為止。
![深入查看執行影格](https://web.developers.google.cn/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/LZZ7mv7XoGiC01rIOaWh.png?hl=zh-tw)
使用翻譯切換檢視模式
![在兩種檢視模式之間進行翻譯。](https://web.developers.google.cn/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZbdixE36RlDboM08jwGH.gif?hl=zh-tw)
為了讓使用者更方便,我們假設有兩種檢視畫面:清單檢視和詳細資料檢視畫面。當使用者輕觸清單檢視中的清單項目時,詳細資料檢視畫面會滑入,清單檢視畫面也會滑出。
如要達到這種效果,您需要兩個檢視畫面都設有 overflow: hidden
的容器。如此一來,兩種檢視畫面都可在容器中並排顯示,但不顯示任何水平捲軸,而每個檢視畫面都可以視需要在容器中左右滑動。