Diorama: 一個會動的小世界

Diorama: 一個會動的小世界 是做什麼的？

對於需要詳細敘事微縮模型或像素級完美場景的情況，請使用另一個名為 diorama-worlds 的技能。此技能保留為無依賴的 SVG 插圖工作流程。

您只製作一個立體模型：一個由圓形底座上的方塊構成的場景，從等角相機視角觀看，其中有一些東西會自己移動並回應指標，並以某種主題繪製。預設主題 toy 是柔和色塊、一輪溫暖太陽、柔和陰影，每個物件都由少數盒子和圓柱體組成，沒有紋理，看起來歡樂且一目了然。同一個場景檔案可以繪製成 soft（奶油色調，更柔和）、mono（一種強調色，其餘為墨色調）、line（細線繪圖：白色填充，墨水邊緣，無陰影）、print（每個面平面色調加墨水線條，類似印刷插圖）和 night（黃昏，燈光亮起）。而且每個主題欄位都可以覆寫：wobble 會讓墨水看起來像手繪的，halo 是底座投射在頁面上的柔和陰影，accent 是所有主題中主體的顏色。examples/ 中的十八個範例是標竿，並且是您將要編寫的格式。

您只寫一個東西：figure，一個 .js 檔案。核心（kit/diorama.js）和頁面（bench.html）是固定的。絕對不要編輯它們，不要貼上修改過的副本，也不要重新撰寫核心已經提供給您的任何東西（相機、燈光、陰影、一個在螢幕外休眠的循環、指標、彈簧、路徑、道具）。

下列每個命名的檔案都在此技能的資料夾中。Figure 和頁面寫在使用者的工作目錄中；從那裡透過此資料夾中的路徑執行 scripts/build.mjs、scripts/validate.mjs 和 scripts/look.mjs。

1. 尺寸與概念

首先決定尺寸，因為它設定了預算：

尺寸	使用場合	畫布	元件數	行數	動畫
hero	登陸頁面頂部、README、產品導覽	3:2，全寬	150–400 個圖元	≤ 420	三個或四個獨立循環，總有東西在動
card	文件頁面、部落格文章、功能區塊	4:3，約 500px	60–150	≤ 240	一到兩個循環加上指標回應
mini	任何小空間：空白狀態、功能列表、404、設定區塊	1:1，160–240px	15–40	≤ 150	一個安靜的環境動作

然後閱讀 references/concepts.md 並用一行寫下概念，最後加上主題：

名稱。 地點和其中的東西。什麼東西會自己移動。指標做什麼。（對於 mini：缺少了什麼。）主題。

從產品本身的世界中選擇地點，而不是從範例中：港口、廚房、屋頂、書桌、溫室、火車月台、發射台、街角都是立體模型。然後根據 figure 將放置的位置來選擇主題，而不是根據個人喜好：toy 用於需要溫暖和色彩的產品頁面；soft 用於編輯或奶油色頁面；mono 用於有自己強調色的產品 UI（將其作為 accent 傳入）、文件或任何靠近密集文字的地方；line 用於簡約或技術頁面、深色文字配白色背景的品牌，或應該低調的空白狀態；night 用於深色頁面。當使用者有品牌色時，將其作為 accent 傳入，這會在每個主題中重新為主體著色；第二種顏色則透過 palette 傳入。references/craft.md 包含每個主題新增的規則。

然後在寫任何程式碼之前，先編寫零件清單：五行，每組一行，命名每個物件以及使其與眾不同的兩三個特徵。地面（底板、區域、道路、水體）、結構（豎立的東西：建築物、架子、樹木）、移動者（騎乘、行走、轉彎或升降的東西）、家具（填滿邊緣的東西：燈、圓錐體、板條箱、長凳、圍欄）、燈光（發光的東西：窗戶、燈、燈塔）。每個部件都放置在另一個部件之上；沒有任何東西是懸空的。Hero 清單大約有三十個物件，card 大約十個，mini 大約三個。清單就是場景：如果看起來很單薄，figure 也會如此。

當有人可以詢問時，提供兩到三個選項，然後等待。如果沒有人可以詢問，則選擇靜止畫面最強的一個，並說明您選擇了哪一個。一個立體模型，一個地點，一個故事。需要說明文字才能理解的場景還不是一個概念。

2. 建立

1. 閱讀 references/craft.md。這十條規則是讓立體模型看起來像一個地方而不是一堆方塊的關鍵；違反其中一條的 figure 都不算完成。
2. 閱讀 kit/diorama.js 頂部的索引（var Diorama 上方的註解）。它列出了您可以呼叫的所有內容。不要閱讀它下面的程式碼。
3. 閱讀最接近您的尺寸和主題的範例：examples/town.js（hero，toy：一個由小型輔助函數構建的完整城鎮，多個循環，循環變化的燈光）、examples/island.js（hero，toy：一個有水域的地方，有停止點的循環，海鷗和雲朵）、examples/farm.js（hero，toy：田野、動物、有停止點的循環）或 examples/warehouse.js（hero，toy：一個有穿梭車和碼頭的院子）或 examples/harbour.js（hero，toy：一個碼頭，起重機在 18 秒週期內吊起貨櫃，一個有停止點和會升起的護欄的牽引車循環，一艘拖船，一座燈塔，一個觸發升降機的點擊，一個讀數）；examples/cafe.js（card，soft：人和小東西）、examples/kitchen.js（card，toy：一個有後牆和一扇窗戶的房間，一個外殼結構的冰箱，其門在懸停時打開，一個在點擊時彈出烤麵包的烤麵包機，一個時鐘）、examples/launchpad.js（card，night：燈光，一個罕見事件，一個在指標下解體的火箭，一個觸發發射的點擊，一個倒數讀數）、examples/server.js（card，mono 帶強調色：有節奏的燈光，懸停時點亮整個群組）或 examples/rack.js（card，mono 帶一種強調色：一個有指標回應的空白狀態）或 examples/assembly.js（card，mono 帶一種強調色：一個透過閘門的工作傳送帶，點擊可暫停，一個衝壓臂，一個計數讀數）；examples/mailbox.js（mini，toy）、examples/seedling.js（mini，line：一個用墨水繪製的空白狀態）、examples/observatory.js（mini，line 帶 wobble：一個旋轉的圓頂和一個在觀察的望遠鏡）、examples/desk.js（mini，line 帶強調色）或 examples/vending.js（mini，print：一個由框架圍繞凹槽構成的機器，裸露的線圈，一個風扇）。它們並非故意都是工廠：立體模型可以是任何地方。
4. 在工作目錄中將 figure 寫為 <name>.js，格式如範例所示：一個 Diorama.figure({ … }) 呼叫，包含
   • name：小寫，一個單詞或連字符連接；size：hero | card | mini。
   • theme：一個名稱，或 { base: 'mono', accent: '#f2c230', shadows: false, … } 以覆寫任何欄位（palette, accent, lights, shadows, finish, tone, tint, edges, outline, stroke, strokeWidth, round, glow, halo, wobble）。只建立一次；主題會由核心應用於每個圖元，因此 figure 永遠不會根據主題進行分支。使用 pal.accent 繪製重要的東西：它在每個主題中都是主體的顏色，是 mono 和 line 保留的顏色，是品牌十六進位色碼替換的顏色，也是工作台上的色票即時重新著色的顏色。對於手繪的 line figure，加上 wobble: 1.4（顫抖的 CSS px：1.2 是筆，2.5 是氈頭筆）。
   • means：一句話，≤ 140 個字元，顯示在畫布下方。它說明場景顯示了什麼以及什麼在移動。
   • hint：一行，≤ 90 個字元，說明指標做什麼以及點擊做什麼（「懸停在火箭上查看其級別；點擊控制室立即發射」）。頁面會顯示它，以便訪客知道可以互動，並且 look.mjs 會按下它所命名的東西。
   • title：figure 的名稱，頁面會將其顯示在畫布上方。使用者自己的 UI 放在 figure 周圍的文字（標題、一行文字、按鈕）由他們自己撰寫；場景不攜帶任何文字。
   • camera：{ az, el, pad }，單位為度。az 45 是等角預設值；30–40 在 3:2 的 hero 中顯示寬闊的底座。除非場景很高，否則將 el 保持在 35.264。
   • still：減少動畫和縮圖要顯示的循環秒數。選擇一個所有東西都處於有意義位置的時刻（卡車在碼頭，叉車升起）。
   • build({ D, pal })：使用工具包建立場景一次，並返回 parts：tick 將要移動的每個群組和網格，加上 parts.hot，指標可能選擇的群組。為每個熱群組提供一個 .name（boat.name = 'boat'）：當指標在其上時，頁面會將其顯示為讀數。
   • tick(ctx)：每幀使用 D.phase、D.pulse、D.wave、D.inOut、D.path 和 D.spring，根據 ctx.t 來擺放零件的位置。使用 ctx.hover 回應指標，使用 ctx.pressed 或 ctx.active 回應按壓（點擊是手機回應的方式，因此 hero 或 card 應該有一個可以按壓的東西：開關、呼叫或懸停的雙胞胎）。D.apart 在指標下將東西拆解開來，然後再組合回去。將 ctx.read 設定為一個簡短的句子，說明場景目前在做什麼（'卡車 · 在碼頭'）：頁面會將其顯示為讀數，這也是訪客了解場景是一個運作中的模型而不是一個循環的方式。references/motion.md 有相關的模式。
5. 組裝：node <skill>/scripts/build.mjs <name>.js 會寫入 diorama-<name>.html：包含工作台、核心和 figure。核心以插畫家模擬深度（等角投影、每個面一個平面色調、從場景後方到前方繪製零件、將陰影以形狀投射在地面上）的方式繪製 SVG，因此頁面不需要渲染器，無需 WebGL，也不會發起任何網路請求；繪圖是向量，在任何尺寸下都清晰銳利，並且頁面可以對其進行樣式設定。

3. 檢查

1. node <skill>/scripts/look.mjs <name>.js。它會建立頁面、驗證它、在無頭 Chromium 中打開它，並寫入 diorama-<name>-look.png：靜止幀、循環的三個時刻、指標回應、相機傾斜、一次按壓、縮圖和整個頁面。它會列印控制台、填充、動畫、回應和按壓的數字。修正每個 FAIL，並將 SMALL、STILL、FAINT 和 MUTE 這幾行視為問題來閱讀，直到它以退出碼 0 結束。按壓會落在 hint 中