跳至主要內容

Sand:瀏覽器就能玩的超寫實沙子模擬器,玩法與原理一次看懂

abe ·

Sand 是一款免費的瀏覽器小玩具,能把手機螢幕變成一盤手感逼真的沙子。本文介紹怎麼玩、它為什麼看起來這麼真實,以及它在落沙遊戲悠久歷史中的定位。

VENO 封面:瀏覽器沙子模擬器 Sand 的兩張傾斜截圖,一張是倒出的沙子螺旋,一張是在深色沙子中劃出的之字形溝槽,配上「傾斜搖一搖」字樣

Sand 是一款在網頁瀏覽器中執行的免費沙子模擬器。 它會用數十萬顆細小沙粒鋪滿整個螢幕,你可以用手指推動沙子、傾斜手機讓它滑動,或搖一搖把沙粒撒開。它以 WebGL2 和 JavaScript 開發,手機、平板和桌上型電腦都能玩,不必下載。

它不是有關卡或分數的遊戲,而是一個讓人放鬆的數位玩具,有點像禪意沙盤,玩起來卻意外地停不下來。以下會介紹玩法、各個選項的作用、幾個畫出更漂亮圖案的訣竅,並簡單聊聊它為什麼感覺這麼真實。

Sand 一覽

是什麼 超寫實沙子模擬器(療癒玩具,沒有關卡)
在哪裡玩 任何現代瀏覽器開啟 av.github.io/safe-sand
價格 網頁版免費
裝置 手機、平板和桌上型電腦
手機操作 拖曳畫線,傾斜讓沙滑動,搖晃把沙撒開
電腦操作 滑鼠拖曳推沙,方向鍵或 WASD 傾斜,按住空白鍵(Space)搖晃
開發技術 WebGL2 和 JavaScript,在顯示晶片上進行模擬
原始碼 GitHub

Sand 怎麼玩

開啟頁面後,你會看到一張小小的開始卡片。選好沙子,再選沙子「底下」鋪的是什麼,然後按 Pour(倒沙)。

Sand 開始卡片:River、Beach、Desert、Volcanic、Coral 五種沙子、三種底面選項和 Pour 按鈕

  1. 選擇沙子類型: River、Beach、Desert、Volcanic 或 Coral。每種都有自己的配色,從灰色河沙礫到深色火山沙,再到淺色珊瑚沙。
  2. 選擇沙子底下的底面: Light、Lock screen 或 Screen off。這會改變沙粒所在的表面。
  3. 點 Pour。 在 iPhone 上,系統詢問時請允許存取動作資料,否則傾斜功能無法使用。
  4. 開始玩。 用手指在沙裡劃出溝槽,傾斜手機讓沙子滑動,搖一搖把沙粒甩開,或把手機翻面朝下,看沙子掉落。

剛倒出的河沙在淺色底面上形成柔和的螺旋圖案

在電腦上,你用滑鼠代替手指,用方向鍵或 WASD 傾斜虛擬沙盤,按住空白鍵搖晃。沙子的反應完全一樣,不過作者是為手機版設計的,因為動作感測器能讓沙子回應你真實的手部動作。

在手機上達到真正的全螢幕

瀏覽器工具列會佔空間。想要完整體驗,可以把頁面加入主畫面:iOS 上點 Share → Add to Home Screen(分享 → 加入主畫面),Android 上點 Install app(安裝應用程式)。之後它就會像 App 一樣滿版開啟。

這款沙子模擬器為什麼感覺這麼真實

你可能玩過的大多數瀏覽器沙子遊戲都使用網格:每個像素是一個「格子」,可以是沙、水或空白,簡單的規則讓它一步一步往下移動。這種方式很適合建造和混合,但沙子看起來就像像素。Sand 走了另一條路,它試著重現真實的沙子。

手指在一層灰色河沙中劃出的之字形溝槽,沙粒堆積在兩側邊緣

根據專案在 GitHub 上的說明:

  • 每一顆沙粒都被模擬。 大約 100,000 到 460,000 顆獨立沙粒同時在顯示晶片(GPU)上移動。
  • 真實單位。 模擬以公釐為單位,採用真實重力(9.81 m/s²),所以沙子的速度與輕微的延遲感都符合你對真沙的預期。
  • 每顆沙粒都不一樣。 沙粒有各自的大小、礦物顏色和摩擦力。鬆散的沙粒會滾動、彈跳,而一大堆沙會保持不動,直到你傾斜超過它的休止角(angle of repose),也就是沙堆在滑落前能維持的最陡坡度。
  • 光影效果。 應用程式每一格畫面都會產生沙堆的高度圖,帶來坡面、自陰影與皺褶處柔和的明暗。光線方向跟著手機傾斜,所以你移動時陰影會拉長,石英顆粒會閃閃發光。
  • 聲音來自沙子本身。 沙沙聲由每秒數千個細小的喀嗒聲組成,取決於實際在動的沙子有多少。小石子發出的喀嗒聲比較低沉。沒有東西在動時,就完全安靜。

深色火山沙上一道銳利的之字形溝槽,切口邊緣的沙粒顏色更深

還有一個細節能看出它對真實感的講究:旋轉手機時畫面不會跟著轉。沙子固定在玻璃上,就像真實沙盤裡的沙一樣。

沙子類型與底面比較

沙子類型 外觀 適合
River 灰褐色沙礫,夾雜小石子 深而清楚的溝槽
Beach 明亮溫暖的淺褐色 柔和、平靜的圖案
Desert 橘紅色沙粒 在淺色底面上形成強烈色彩對比
Volcanic 深灰到黑色 銳利線條與濃重陰影
Coral 非常淺,幾乎是白色 細緻、低調的漩渦

「沙子底下」選項會改變沙粒所在的表面:Light、Lock screen 或 Screen off。用同一種沙子分別試試看,找出你最喜歡的效果。

淺色珊瑚沙在淺色背景上倒成鬆散的螺旋

畫出更漂亮沙畫的 7 個訣竅

  1. 倒沙後等一秒。 先讓沙粒落定再畫,否則線條會被重新填平。
  2. 慢慢畫,邊緣更乾淨。 手指慢慢劃會留下清楚的溝槽和整齊的沙壁;快速一揮則會把沙子甩到兩旁。
  3. 小幅度傾斜。 傾斜到沙子剛開始移動的位置,再把手機放平。用這個方法可以引導整片沙丘。
  4. 搖一搖重來。 用力一搖,沙子就會重新鋪成均勻的一層,方便下一次作畫。
  5. 畫畫選火山沙。 淺色底面上的深色沙最能顯出線條和陰影。
  6. 戴上耳機打開聲音。 聲音來自正在移動的沙粒,你能聽出緩慢滑動和突然崩落的差別。
  7. 覺得卡頓就檢查低耗電模式。 在 iPhone 上,低耗電模式(Low Power Mode)會把瀏覽器限制在每秒 30 格畫面。應用程式能偵測到這一點,不會因此減少沙子,但關閉低耗電模式可以恢復完整影格率。

傾斜手機後河沙被推到螢幕一側,另一側露出一條空白

如果執行很慢

應用程式會自動調整畫質。如果連續兩秒畫面變慢,它會先逐級降低螢幕清晰度,之後才減少沙粒數量,並會記住這個等級供下次使用。所以在舊手機或沒有強力顯示晶片的筆電上,沙子看起來可能稍微柔一點,但依然能流暢移動。本文截圖是在使用軟體繪圖的電腦瀏覽器中擷取的,所以有些區域看起來略有方塊感。

落沙遊戲簡史

沙子玩具在瀏覽器上已經流行了大約二十年:

  • 2005 年: 日本一個部落格上的 Java 小程式讓這個類型流行起來。之後的擴充版本「Falling Sand Game」為整個類型命名。
  • 2007 年: Powder Game 在玩法中加入了液體模擬。
  • 2010 年: The Powder Toy 為電腦玩家帶來液體和牛頓重力。
  • 2019 年: Sandspiel 證明了沙子玩具可以藉由編譯成 WebAssembly 的 Rust 和 WebGL,在瀏覽器中快速執行。作者在他的文章中解釋,每種元素都在網格上遵循非常簡單的規則,樂趣來自相鄰元素之間的互動。
  • 2020 年: Nolla Games 的 Noita 於 10 月 15 日結束搶先體驗。這是一款動作 Roguelite 遊戲,用工作室的話來說,「每一個像素都經過物理模擬」。

Sand 是這個大家族的另一個分支。它不在像素網格上放許多種元素,而是專注於一種材質:以公釐計量的真實沙粒,以及雙手捧著沙盤的感覺。

網頁遊戲開發者能從中學到什麼

  • WebGL2 足以負擔重度模擬。 數十萬個粒子在一般瀏覽器分頁中執行,不需要原生 App。
  • 善用感測器。 透過裝置動作資料實現傾斜和搖晃,能讓玩具更有實體感。記得 iOS 會要求權限,所以要在按下按鈕時才啟動感測器。
  • 自動調整畫質,別用猜的。 測量每格畫面時間,檢查瀏覽器是不是只是限制了影格率,再小幅逐步降低畫質並記住結果。
  • 聲音應該跟著模擬走。 根據實際移動產生的音訊,比循環播放的音效樣本聽起來更自然。
  • 部署保持簡單。 這個專案沒有建置步驟:任何靜態檔案伺服器都能架設。

常見問題

Sand 沙子模擬器免費嗎?

免費。av.github.io/safe-sand 上的網頁版可以直接在瀏覽器裡玩,不必下載或註冊帳號。

Sand 可以在電腦上玩嗎?

可以。用滑鼠拖曳推沙,用方向鍵或 WASD 傾斜,按住空白鍵搖晃。手機版因為使用動作感測器,手感更自然。

為什麼我的 iPhone 傾斜沒有反應?

iOS 需要你授權才能把動作資料分享給網頁。點 Pour,在跳出提示時允許存取動作資料即可。

Sand 是有關卡的遊戲嗎?

不是。它是一個療癒的沙盒玩具,沒有分數、計時或目標,你只要畫、傾斜和搖晃就好。

什麼是落沙遊戲?

這是一類模擬遊戲,大量細小粒子(例如沙、水或火)遵循簡單的物理規則並彼此互動。Powder Game、The Powder Toy 和 Noita 都是知名的例子。

Sand 模擬了多少顆沙粒?

根據作者的說法,大約 100,000 到 460,000 顆,視你的裝置而定。

相關文章

遊戲載入中…

VENOGAME / PLAYBOOK

我的競技場

儲存在此裝置,無需帳號。

點擊愛心,建立自己的遊戲收藏。